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

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

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

答:

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

1:网络

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

减少网络请求

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

使用缓存

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

使用 CDN 进行 加速

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

2:加载资源方面

路由懒加载

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

script 标签资源异步加载

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

xml 复制代码
<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动画效果

总结

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

相关推荐
树上有只程序猿2 分钟前
后端思维之高并发处理方案
前端
uhakadotcom2 分钟前
Ruff:Python 代码分析工具的新选择
后端·面试·github
uhakadotcom6 分钟前
Mypy入门:Python静态类型检查工具
后端·面试·github
庸俗今天不摸鱼37 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX1873038 分钟前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下44 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox