前提：
从输入URL到页面加载完成，发生了什么？
- 输入url
- 浏览器通过DNS，把 url解析为IP
- 和ip地址建立TCP链接发送HTTP请求
- 服务器接收请求、查库、读文件等，拼接好返回HTTP响应
- 浏览器收到html，开始渲染
- 解析html为dom
- 解析css为css-tree
- dom + css 生成render-tree绘图
- 加载script的js文件
- 执行js
性能优化基本分两大方向：
- 少加载文件
- 文件打包压缩
- 图片格式和压缩
- 缓存
- cdn (缩减距离，提高加载速度和效率）
- ssr（提升首屏加载速度）
- lazy-load
- 少执行代码
- 框架内部
- 长列表（内存优化）
按步骤分析优化策略
浏览器通过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：负责数据完整性和有序型
优化策略:
- ⻓连接
- 减少文件体积
- js打包压缩
- 图片压缩
- gzip
- 减少文件请求次数
- 雪碧图
- js，css打包
- 缓存控制
- 懒加载
- 减少⽤用户和服务器的距离
- 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-
强缓存：缓存生效的情况下，不需要和服务器交互，直接使用
-
弱缓存：缓存数据失效，访问服务器看还能不能用缓存
请求图片、页面等资源（可以设置缓存策略，cache-control）
- no-cache（官网选用），走协商缓存
- no-store
- max-age
优化策略：
- html 使用 nocache（官网选用）
- 文件加指纹并且每次修改文件都修改文件名，使用缓存
- 静态资源都在cdn（官网选用）
- 缩减用户和服务器的距离，提升加载效率
- 浏览器对一个域名的并发数有限制，用cdn域名专门加载静
态资源。
-
html 和 静态资源分开上线 （官网选用）
官网静态资源存储在 s.newscdn.cn 下
-
-
图片 和 页面等资源预加载
<!-- 可以使用绝对或相对路径 -->
<link rel="prefetch" href="xxx.html">
<link rel="prefetch " href="xxx.png">
-
图片优化
①分场景使用不同类型的图片格式- jpg
有损压缩
体积小，不支持透明
用于背景图，轮播图 - png
无损压缩，质量高，支持透明
色彩线条更丰富，小图（logo、icon） - svg
文本、体积小，矢量图
代码画出来的图，渲染成本高 - base64
图片一般不会用 base64这种形式，虽然减少了http请求但会增加文件体积而且因为用base64会在图片大小的基础上编码，体积会比原来大 1/3 左右，而且不会用到缓存，解码也需要耗费相应时间。
base64一般用于数据的传输。
②图片打包雪碧图，减少http请求次数
③图片延缓加载: 可以先把页面重要的内容用模版吐出来，再异步加载图片 - jpg
-
gzip （官网选用）
压缩文件：文件里相同的内容将会被替换成（两者之间的距离，相同内容的长度）格式信息 -
本地存储
cookie、localstorage、sessionStorage、indexDB- cookie ：体积固定、性能浪费、所有请求都带上当前域名的cookie
- Web Storage：存储量大、不自动发送给服务器，js控制
- indexdb：浏览器上的数据库
- 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
- pureComponent：pureComponent表示一个纯组件，进行的是浅比较可以用来优化react程序，减少render函数渲染的次数，提高性能。
一般使用在纯展示的组件上。
- pureComponent：pureComponent表示一个纯组件，进行的是浅比较可以用来优化react程序，减少render函数渲染的次数，提高性能。
- shouldComponentUpdate：当只有少量状态值能影响组件输出的使用：
shouldComponentUpdate(nextProps, nextState) {
return nextState.someData !== this.state.someData
}
-
redux + reselect
长列表（react-virtualized）：只为护上下三层的dom，模拟滚动
ssr
可以先把页面重要的内容（一般是首页）用模版吐出来(可以配合骨架屏)，再异步加载其他静态内容和其他模块的内容。
网友评论