面试官 : 首屏加载速度慢怎么优化?

简介: 面试官 : 首屏加载速度慢怎么优化?

首屏加载速度慢怎么优化?

1: 在回答这个问题之前 首屏 -- > 当进入该网页并且发送网络请求获取到资源以后 网页从没有内容到内容第一次渲染的时间 (当然是可以没有内容的)称为 首屏

答:

我认为 优化首屏 速度 可以从 两个方面去 优化

1:网络

当我们网络请求较多时 , 浏览器会增加首屏渲染速度 ,如果 大量的数据请求慢 这样会导致 页面 渲染也随之较慢,减少网络请求

减少网络请求

例如 : 使用图片懒加载形式 , 只发送用户视口可见的数据请求 这样可以大大增加 请求速度 从而进一步提高渲染速度。

使用缓存

与后端配合 进行 资源缓存 ,如长期不变的 logo 或者 定量更新的资源可以采用缓存的形式 来处理,也可以优化首屏渲染时间

使用 CDN 进行 加速

对资源进行托管,保证服务器的响应速度

2:加载资源方面

路由懒加载

使用 路由懒加载的形式,进行资源处理,当我们需要用到该资源时再进行资源加载,可以将大量的加载时间空出来留给首屏渲染。

script 标签资源异步加载

当一些 不影响系统环境资源的加载时 我们可以考虑使用 async 和 defer 加载

<script defer async ><script>

webpack splitChunks 代码分割

利用webpack 代码分割 进行优化,可以将 js进行分片 ,首次加载文件体积大量减少,以及资源异步加载

css 压缩 js压缩 html压缩 image压缩 gzip压缩

css 可以通过 minicssExtracPlugin 进行 css压缩

js 可以通过 TerserWebpackPlugin| uglifyJsPlugin 进行资源压缩

html 可以通过 HtmlMinimizerWebpackPlugin进行压缩

图片可以通过 ImageMinimizerWebpackPlugin进行压缩

css 样式书写规范

css 代码 写得好更有利于 浏览器的解析,还有说什么transform3d 能够硬件加速,我不这么认为,当你开启了一个

transform3d 相当于是在网页上多开了一个图层 , 当你的图层达到一定数量的时候,未免性能能好过普通的 transform translate

服务端渲染提高首屏

服务端渲染 ,后台将你需要绘制的页面结构以及数据全局准备好了,然后直接将 资源文件返回给前端,前端只需要渲染即可。

体验方面

1:增加骨架屏
2: 增加loading动画效果

总结

能回答到这些,想必面试应该已经够用了,主要还是大家要把每一点讲细,讲清楚,就能得到面试官的认可,一起加油吧

给大家推荐一个实用面试题库

前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

相关文章
|
4月前
|
Java Android开发
Android面试题经典之Glide取消加载以及线程池优化
Glide通过生命周期管理在`onStop`时暂停请求,`onDestroy`时取消请求,减少资源浪费。在`EngineJob`和`DecodeJob`中使用`cancel`方法标记任务并中断数据获取。当网络请求被取消时,`HttpUrlFetcher`的`cancel`方法设置标志,之后的数据获取会返回`null`,中断加载流程。Glide还使用定制的线程池,如AnimationExecutor、diskCacheExecutor、sourceExecutor和newUnlimitedSourceExecutor,其中某些禁止网络访问,并根据CPU核心数动态调整线程数。
133 2
|
3月前
|
缓存 JavaScript 前端开发
【Vue面试题七】、SPA (单页面) 首屏加载速度慢怎么解决?
这篇文章探讨了单页面应用(SPA)首屏加载速度慢的问题,并提供了多种解决方案,包括减小入口文件体积、静态资源本地缓存、UI框架按需加载、图片资源压缩、组件重复打包、开启GZip压缩和使用服务端渲染(SSR),以优化资源加载和页面渲染,改善用户体验。
【Vue面试题七】、SPA (单页面) 首屏加载速度慢怎么解决?
|
2月前
|
存储 缓存 编解码
Android经典面试题之图片Bitmap怎么做优化
本文介绍了图片相关的内存优化方法,包括分辨率适配、图片压缩与缓存。文中详细讲解了如何根据不同分辨率放置图片资源,避免图片拉伸变形;并通过示例代码展示了使用`BitmapFactory.Options`进行图片压缩的具体步骤。此外,还介绍了Glide等第三方库如何利用LRU算法实现高效图片缓存。
64 20
Android经典面试题之图片Bitmap怎么做优化
|
4月前
|
缓存 安全 算法
Java面试题:如何通过JVM参数调整GC行为以优化应用性能?如何使用synchronized和volatile关键字解决并发问题?如何使用ConcurrentHashMap实现线程安全的缓存?
Java面试题:如何通过JVM参数调整GC行为以优化应用性能?如何使用synchronized和volatile关键字解决并发问题?如何使用ConcurrentHashMap实现线程安全的缓存?
45 0
|
2月前
|
SQL 关系型数据库 MySQL
面试官:limit 100w,10为什么慢?如何优化?
面试官:limit 100w,10为什么慢?如何优化?
190 2
面试官:limit 100w,10为什么慢?如何优化?
|
3月前
|
存储 前端开发 JavaScript
面试时让你手写一个防抖和节流优化,你能写出来吗?(二)
面试时让你手写一个防抖和节流优化,你能写出来吗?(二)
|
3月前
|
运维 监控 算法
[go 面试] 优化线上故障排查与性能问题的方法
[go 面试] 优化线上故障排查与性能问题的方法
|
4月前
|
缓存 Prometheus 监控
Java面试题:如何监控和优化JVM的内存使用?详细讲解内存调优的几种方法
Java面试题:如何监控和优化JVM的内存使用?详细讲解内存调优的几种方法
93 3
|
4月前
|
算法 Java API
Android性能优化面试题经典之ANR的分析和优化
Android ANR发生于应用无法在限定时间内响应用户输入或完成操作。主要条件包括:输入超时(5秒)、广播超时(前台10秒/后台60秒)、服务超时及ContentProvider超时。常见原因有网络、数据库、文件操作、计算任务、UI渲染、锁等待、ContentProvider和BroadcastReceiver的不当使用。分析ANR可借助logcat和traces.txt。主线程执行生命周期回调、Service、BroadcastReceiver等,避免主线程耗时操作
65 3
|
5月前
|
缓存 JSON 网络协议
Android面试题:App性能优化之电量优化和网络优化
这篇文章讨论了Android应用的电量和网络优化。电量优化涉及Doze和Standby模式,其中应用可能需要通过用户白名单或电池广播来适应限制。Battery Historian和Android Studio的Energy Profile是电量分析工具。建议减少不必要的操作,延迟非关键任务,合并网络请求。网络优化包括HTTPDNS减少DNS解析延迟,Keep-Alive复用连接,HTTP/2实现多路复用,以及使用protobuf和gzip压缩数据。其他策略如使用WebP图像格式,按网络质量提供不同分辨率的图片,以及启用HTTP缓存也是有效手段。
90 9