前端性能优化小结
条评论从输入URL到页面加载完成,发生了什么,要进行肌肉记忆。
https://www.yuque.com/liugezhou/drrg7f/gav2aq
-
前端性能优化主要是从网络层面和渲染层面两个大的维度来分析
-
涉及到网络的:DNS解析、TCP链接、HTTP请求/响应其中DNS解析和TCP链接我们可以优化的地方很有限。
网络层面
1. HTTP请求/相应的链接
-
减少请求次数
-
减少单次请求所花费的时间
这两个请求的优化点我们从 资源的压缩和合并入手 以及打包构建工具的作用解决浏览器频发请求文件问题.
2. webpack的性能瓶颈
首先对webpack的基础有个了解:
https://blog.liugezhou.online/013-webpack/
-
webpack的构建过程太花时间
-
webpack打包的结果体积太大
构建过程提速:(主要是针对CI/CD流程吧,手动打包不太在意构建过程速度)
-
不要让loader做太多事情:- modules.rules中的exclude使用–排除更多无关代码
-
开启缓存转译:loader: ‘babel-loader?cacheDirectory=true’
-
第三方库- DIIPlugin:把第三方库单独打包到一个文件
-
将loader由单线程转为多线程- 使用happypack这个库,使得webpack单独处理任务改为把任务分解成多个子任务并发执行。
-
构建结果体积压缩- webpack-bundle-analyzer:通过这个库可以查看构建打包后的体积,有针对性优化。
-
按需加载。
-
删除冗余代码:Tree-shaking,webpack4自带了,包括UglifyJsPlugin中compress的设置去除日志打印、注释等等。
-
开启gzip- 需要开启gzip,在request-headers中设置accept-encoding:gzip,Deflate
babel优化
为了应对低版本的ES6转ES5的js语言特性,使用了babel-polyfill后,打包体积会很大,这个时候可以根据业务代码,在loader的的options配置中加入useBuiltIns为usage。
3 图片优化
-
应用广泛的Web图片格式有:JPEG/JPG、PNG、WebP、Base64、SVG- JPEG/JPG:有损压缩、体积小、加载快、不支持透明==》背景图、banner图适用
-
PNG:无损压缩、质量高、体积大、支持透明 ==》Logo等小图片
-
WebP:唯一的缺点是兼容性不太好,可以通过判断是否支持该格式,切换后缀。
-
SVG:体积更小、压缩性更强、图片放大不失真,但渲染成本较高。
-
Base64:小图标解决方案,Webpack的url-loader对此做了优化。
4. 缓存应用
缓存
本地存储
-
Local Storage :持久化存储永不过期。5-10M数据,可以对图片、不经常更新的css、js静态存储。
-
Session Storage:会话存储
-
IndexedDB:运行在浏览器上的非关系型数据库,>250M.
5. CDN缓存
-
CDN的核心点分为缓存和回源
-
CDN往往被用来存放静态资源
-
静态资源走CDN不应该是一个选择,而是一个规定
-
业务服务器与静态资源CDN服务器的区分,对性能提高帮助很大(不用携带无用信息)
6.使用HTTP2
- 多路复用、首部压缩
渲染层面
1. CSS样式表规则的优化
CSS选择符是从右到左进行匹配的。
-
避免使用通配符,只对需要用到的元素进行选择
-
少用标签选择器,多用类选择器。
-
CSS是阻塞渲染的资源,应尽快下载到客户端
-
尽早==》header
-
尽快==》CDN
2. JS的加载方式
-
正常模式: 阻塞浏览器
-
async模式: 不会阻塞,加载是异步的
-
defer模式: 加载异步,推迟执行,在文档解析完成、DOMContentLoaded事件被触发时才开始依次执行。
3. 避免或减少回流操作
4. 图片懒加载
-
关键一:当前可视区域的高度:
window.innerHeight|| document.documentElement.clientHeight -
关键二:元素距离可视区域顶部的高度:
getBoundingClientRect()
1 |
|
5.防抖和节流
以 4 中的监听scroll为例。
-
throttle(事件节流)和debounce(事件防抖)
-
这两个东西都以闭包的形式存在
事件节流-throttle、第一个说了算
在一段时间内无视后来产生的回调请求。
事件防抖-debounce、最后一个说了算
某段事件内,不管你触发了多少次回调,都只认最后一次。
6.性能检测
可视化工具Performance工具
-
使用Perfomance工具最好在无痕模式下打开
-
主要由概述面板、详情面板、Summary三部分构成
-
概述面板:FPS、CPU(与Summary结合来看)、NET
Lighthouse–页面性能报告
-
Performance
-
Accessibility
-
Best Practices
-
SEO
1 | npm i -g lighthouse |
我在使用此页面性能报告中,明显发现的性能指标有:图片推荐使用WebP、OSS资源推荐HTTP2、图片改为懒加载。
本文标题:前端性能优化小结
文章作者:六个周
发布时间:2022-07-11
最后更新:2024-01-29
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 CN 许可协议。转载请注明出处!