前端面试题：首屏加载速度慢怎么优化？

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

1： 在回答这个问题之前 首屏 -- > 当进入该网页并且发送网络请求获取到资源以后 网页从没有内容到内容第一次渲染的时间 （当然是可以没有内容的）称为 首屏文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51555.html

答：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51555.html

我认为 优化首屏 速度 可以从 两个方面去 优化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51555.html

1：网络

当我们网络请求较多时 ， 浏览器会增加首屏渲染速度 ，如果 大量的数据请求慢 这样会导致 页面 渲染也随之较慢，减少网络请求文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51555.html

减少网络请求

例如 ： 使用图片懒加载形式 ， 只发送用户视口可见的数据请求 这样可以大大增加 请求速度 从而进一步提高渲染速度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51555.html

使用缓存

与后端配合 进行 资源缓存 ，如长期不变的 logo 或者 定量更新的资源可以采用缓存的形式 来处理，也可以优化首屏渲染时间文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51555.html

使用 CND 进行 加速

对资源进行托管，保证服务器的响应速度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51555.html

2：加载资源方面

路由懒加载

使用 路由懒加载的形式，进行资源处理，当我们需要用到该资源时再进行资源加载，可以将大量的加载时间空出来留给首屏渲染。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51555.html

script 标签资源异步加载

当一些 不影响系统环境资源的加载时 我们可以考虑使用 async 和 defer 加载文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51555.html

<script defer async ><script>

webpack splitChunks 代码分割

利用webpack 代码分割 进行优化，可以将 js进行分片 ，首次加载文件体积大量减少，以及资源异步加载文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51555.html

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

css 可以通过 minicssExtracPlugin 进行 css压缩文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51555.html

js 可以通过 TerserWebpackPlugin | uglifyJsPlugin 进行资源压缩文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51555.html

html 可以通过 HtmlMinimizerWebpackPlugin 进行压缩文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51555.html

图片可以通过 ImageMinimizerWebpackPlugin 进行压缩文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51555.html

css 样式书写规范

css 代码 写得好更有利于 浏览器的解析，还有说什么transform3d 能够硬件加速，我不这么认为，当你开启了一个文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51555.html

transform3d 相当于是在网页上多开了一个图层 ， 当你的图层达到一定数量的时候，未免性能能好过普通的 transform translate文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51555.html

服务端渲染提高首屏

服务端渲染 ，后台将你需要绘制的页面结构以及数据全局准备好了，然后直接将 资源文件返回给前端，前端只需要渲染即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51555.html

体验方面

1：增加骨架屏

2： 增加loading动画效果