前端性能优化小结
从输入URL到页面加载完成，发生了什么，要进行肌肉记忆。
https://www.yuque.com/liugezhou/drrg7f/gav2aq
- 前端性能优化主要是从网络层面和渲染层面两个大的维度来分析
- 涉及到网络的：DNS解析、TCP链接、HTTP请求/响应其中DNS解析和TCP链接我们可以优化的地方很有限。
网络层面
1. HTTP请求/相应的链接
- 减少请求次数
- 减少单次请求所花费的时间
这两个请求的优化点我们从 资源的压缩和合并入手 以及打包构建工具的作用解决浏览器频发请求文件问题.
2. webpack的性能瓶颈
首先对webpack的基础有个了解：
https://cloud.tencent.com/developer/article/2143280
- 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()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lazy-load</title>
<style>
.img {
width: 200px;
height: 200px;
background-color: gray;
}
.pic {
border: 1px solid red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<!-- 10个div -->
<div class="img">
<img class="pic" alt="加载中" data-src="./images/9.png" />
</div>
</div>
</body>
<script>
const imgs = document.getElementsByTagName('img')
const viewHeight =
window.innerHeight || document.documentElement.clientHeight
console.log(viewHeight)
let num = 0
function lazyLoad() {
for (let i = 0; i < imgs.length; i++) {
let distance = viewHeight - imgs[i].getBoundingClientRect().top
if (distance >= 0) {
imgs[i].src = imgs[i].getAttribute('data-src')
num = i + 1
}
}
}
window.addEventListener('scroll', lazyLoad, true)
</script>
</html>5.防抖和节流
以 4 中的监听scroll为例。
- throttle(事件节流)和debounce(事件防抖)
- 这两个东西都以闭包的形式存在
事件节流-throttle、第一个说了算
在一段时间内无视后来产生的回调请求。
事件防抖-debounce、最后一个说了算
某段事件内，不管你触发了多少次回调，都只认最后一次。
6.性能检测
可视化工具Performance工具
- 使用Perfomance工具最好在无痕模式下打开
- 主要由概述面板、详情面板、Summary三部分构成
- 概述面板：FPS、CPU(与Summary结合来看)、NET
Lighthouse–页面性能报告
- Performance
- Accessibility
- Best Practices
- SEO
npm i -g lighthouse
lighthouse https://blog.liugezhou.online我在使用此页面性能报告中，明显发现的性能指标有：图片推荐使用WebP、OSS资源推荐HTTP2、图片改为懒加载。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-07-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
内容分发网络 CDN
内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。