10月9日性能优化总结

2020-10-08 本文已影响0人 Lee弟弟

前提：

从输入URL到页面加载完成，发生了什么？

输入url
浏览器通过DNS，把 url解析为IP
和ip地址建立TCP链接发送HTTP请求
服务器接收请求、查库、读文件等，拼接好返回HTTP响应
浏览器收到html，开始渲染
解析html为dom
解析css为css-tree
dom + css 生成render-tree绘图
加载script的js文件
执行js

性能优化基本分两大方向：

少加载文件
1. 文件打包压缩
2. 图片格式和压缩
3. 缓存
4. cdn (缩减距离，提高加载速度和效率）
5. ssr（提升首屏加载速度）
6. lazy-load
少执行代码
1. 框架内部
2. 长列表（内存优化）

按步骤分析优化策略

浏览器通过DNS，把 url解析为IP

DNS 预解析
点击轮播图跳转到 https://aimedia.shuwen.com/ ，可加上以下代码进行预解析，可以将用户点击频率较高的链接做预解析处理。

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://aimedia.shuwen.com">

和ip地址建立TCP链接发送HTTP请求

tcp：负责数据完整性和有序型
优化策略:

⻓连接
减少文件体积
1. js打包压缩
2. 图片压缩
3. gzip
减少文件请求次数
1. 雪碧图
2. js，css打包
3. 缓存控制
4. 懒加载
减少⽤用户和服务器的距离
1. cdn
本地存储

http：负责应用层数据
优化策略：

尽量减少 http 请求
尽量减少 js 资源的请求，根据需要控制在 3～5 个，还可以在服务端进行 gzip 压缩传输

<body>
  
  <script type="text/javascript" src="xxx.js"></script>
  <script type="text/javascript" src="xxx.js"></script>
  <script type="text/javascript" src="xxx.js"></script>
  <script type="text/javascript" src="xxx.js"></script>
  <script type="text/javascript" src="xxx.js"></script>
  <script type="text/javascript" src="xxx.js"></script>
  <script type="text/javascript" src="xxx.js"></script>
  <script type="text/javascript" src="xxx.js"></script>
  <script type="text/javascript" src="xxx.js"></script>
</body>

像这种类似图标的图片，如果每个图标以一张图片的形式加载，将会带来很多次请求，可以做成雪碧图。

减少 dns 解析，如下图请求的 js 资源跟网页不在同一个域，会进行多次 dns 解析，解析起来耗时间

image.png
合理利用缓存
为变动很少的文件配置Expires 或 Cache-Control 或 ETag
1. 强缓存：缓存生效的情况下，不需要和服务器交互，直接使用
2. 弱缓存：缓存数据失效，访问服务器看还能不能用缓存
请求图片、页面等资源（可以设置缓存策略，cache-control）
- no-cache（官网选用），走协商缓存
- no-store
- max-age
优化策略：
1. html 使用 nocache（官网选用）
2. 文件加指纹并且每次修改文件都修改文件名，使用缓存
3. 静态资源都在cdn（官网选用）
  - 缩减用户和服务器的距离，提升加载效率
  - 浏览器对一个域名的并发数有限制，用cdn域名专门加载静
    态资源。
4. html 和静态资源分开上线（官网选用）
  官网静态资源存储在 s.newscdn.cn 下
图片和页面等资源预加载

<!-- 可以使用绝对或相对路径 -->
<link rel="prefetch" href="xxx.html">
<link rel="prefetch " href="xxx.png">

图片优化
①分场景使用不同类型的图片格式
1. jpg
  有损压缩
  体积小，不支持透明
  用于背景图，轮播图
2. png
  无损压缩，质量高，支持透明
  色彩线条更丰富，小图（logo、icon）
3. svg
  文本、体积小，矢量图
  代码画出来的图，渲染成本高
4. base64
  图片一般不会用 base64这种形式，虽然减少了http请求但会增加文件体积而且因为用base64会在图片大小的基础上编码，体积会比原来大 1/3 左右，而且不会用到缓存，解码也需要耗费相应时间。
  base64一般用于数据的传输。
②图片打包雪碧图，减少http请求次数
③图片延缓加载: 可以先把页面重要的内容用模版吐出来，再异步加载图片
gzip （官网选用）
压缩文件：文件里相同的内容将会被替换成（两者之间的距离，相同内容的长度）格式信息
本地存储
cookie、localstorage、sessionStorage、indexDB
1. cookie ：体积固定、性能浪费、所有请求都带上当前域名的cookie
2. Web Storage：存储量大、不自动发送给服务器，js控制
3. indexdb：浏览器上的数据库
4. pwa：基于缓存技术的应用模型

解析html、css，渲染页面

减少 DOM 元素数量
越复杂的页面意味着 javasrcipt 遍历 DOM 的效率或 diff 算法比较节点变化效率越慢
尽量不使用 iframe
iframe 元素在父文档中插入一个新的 HTML 文档
把样式表置于顶部，脚本置于body标签底部，对没必要同步获取的数据才用异步的形式获取。
使网页样式尽早显现，提升用户体验

React

只传递需要的props：<Component {...props} />
key
对于同一层级的一组节点，可以通过key值唯一标识它们，提高dom更新效率（<ul> <li key='xx'></li>...<li key='xx'></li></ul>）
pureComponent、shouldComponentUpdate
1. pureComponent：pureComponent表示一个纯组件，进行的是浅比较可以用来优化react程序，减少render函数渲染的次数，提高性能。
  一般使用在纯展示的组件上。

shouldComponentUpdate：当只有少量状态值能影响组件输出的使用：
shouldComponentUpdate(nextProps, nextState) {
return nextState.someData !== this.state.someData
}

redux + reselect

长列表（react-virtualized）：只为护上下三层的dom，模拟滚动

ssr

可以先把页面重要的内容（一般是首页）用模版吐出来(可以配合骨架屏)，再异步加载其他静态内容和其他模块的内容。

10月9日性能优化总结

前提：

按步骤分析优化策略

浏览器通过DNS，把 url解析为IP

和ip地址建立TCP链接发送HTTP请求

解析html、css，渲染页面

React

ssr

猜你喜欢

热点阅读