共计 4592 个字符，预计需要花费 12 分钟才能阅读完成。
# 性能优化动作
一、思路
- 依据浏览器申请、渲染资源的逻辑来论述。
- 依据用户的感知角度来论述
- 依据咱们目前最常见的开发 部署的模式来论述
- 业界的性能优化规定：
ps : 浏览器加载页面的流程，请见：
二、网络层面
是否须要 间隔 速度 总量 工具
实际上也有：TCP 握手连贯、HTTP 申请报文、HTTP 回复报文（了解资源加载的性能束缚，包含：TCP 连贯限度、TCP 慢启动）
后续再开展介绍。
2.1 不必传输
2.1.1 缓存
dns 缓存
cdn 缓存
服务器缓存
nginx 缓存
客户端缓存
<font color=”#d35400″>CDN 缓存 why: </font>
CDN(Content Distribute Network, 内存散发网络)的实质上依然是一个缓存，而且将数据缓存在离用户最近的中央，是用户以最快速度获取数据，即所谓网络拜访第一跳。CDN 个别缓存的是动态资源，如图片，文件，CSS，Script 脚本，动态网页等，然而这些文件拜访频率很高，将其缓存在 CDN 可极大改善网页的关上速度
<font color=”#d35400″>nginx 缓存 why: </font>
代理服务器也能够通过配置缓存性能减速 Web 申请，当用户第一次拜访动态内容的时候，动态内容就被缓存在反向代理服务器上，这样当其余用户拜访该动态内容的时候，就能够间接从反向代理服务器返回，减速 Web 申请响应速度，加重服务器负载
<font color=”#d35400″> 客户端缓存:why: </font>
CSS,JavaScript,Logo, 图标等这些动态资源文件更新的频率都比拟低，而这些文件又简直是每次 HTTP 申请都须要的，如果将这些文件缓存在浏览器中，能够极好地改善性能。
<font color=”#27ae60″> 客户端缓存:how to do</font>
设置 HTTP 头中 Cache-Control 和 Expires 属性，可设定浏览器缓存，缓存工夫能够是数天甚至是几个月。有时候，动态资源文件变动须要及时利用到客户端浏览器，这种状况能够通过扭转文件名实现，比方个别会在 JavaScript 前面加上一个版本号，使浏览器刷新批改的文件。
2.1.2 缩小传输次数（有点偏内容层面了）1. 合并传输
api 合并传输?？怎么合并没懂
css 合并；js 合并，图片合并 css sprite 等等。iconfont
2. 按需加载(即暂且不必传输的先不传送)
单页利用下的依照路由的须要加载
不再当前页的 不传送
3. 应用 http2.0 3.0 -- 可一个 tcp, 多个 http 传输
<font color=”#d35400″>why: </font>
HTTP 协定是无状态的应用层协定，意味着每次 HTTP 申请都须要建设通信链路，进行数据传输，而在服务器端，每个 HTTP 都须要启动独立的线程去解决，这些通信和服务的开销都很低廉，缩小 HTTP 申请的数目可无效进步拜访性能。
2.2 传输内容少
见下方内容的局部2.3 传输速度快
1. 带宽大
2. 服务器相干的性能好，相干反应速度也就快了。3. ★★★prefetch（利用闲暇工夫）, 可用 webpack 的 PreLoadWebpackPlugin 插件2.4 缩小传输间隔
应用 cdn 能帮你抉择最优的服务器下载响应你的资源2.5 工具能不能优化
http 传输协定应用 3.0 2.0 更高的版本
总结如下：
1. 应用 cdn
2. 开启相干缓存
3. 减少带宽
4. http 版本升级
5. refetch（利用闲暇工夫）三、资源（内容）层面
3.1 有内容，不出错
即防止 202
防止重定向
3.2 内容少
3.2.1 分批传输
1. 大的内容，分拆一下。2 应用流，边看便下载
3.2.2 去除多余的大小
1. 设计师设计的时候就不大面积应用背景图，2. api 申请的时候，去除多余的大小，不必要的返回
3. 去除多余的依赖：控件中的依赖 干掉；webpack 中的 sourcemap
2. 去除多余的代码和正文 分号 空格等等
5. 技术选型失当
6. 首页，从单页面 改用多页。7. 资源按需加载。如 hui 控件的按需应用
8. 其余：代码压缩、9. 缩小 cookie 大小:
10. 标准代码：无用的货色，不须要的货色（css js 图片等）删除掉。3.2.3 自身内容再少
3.2.3.1 压缩一下
1. 首页 gzip
2. 设计师本人压缩图片 视频资源
3. 代码压缩：webpack 工具曾经帮咱们做好了
3.2.3.2 内容再缩小
1. 模块化，组件化，2. 按需加载：第三方库和工具的 按需加载
可用代码拆分（Code-splitting）只传送用户须要的代码。滚动加载，局部加载 懒加载
3. 业务梳理的时候，首屏设计好。防止大面积图片
4. 应用更小的第三方库
5. 应用新一代图片格式，清晰且体积小
6. 首次应用含糊的 小图，后续再用高清
<font color=”#27ae60″> 缩小 cookie 大小:how to do</font>
能够思考动态资源应用独立域名拜访，防止申请动态资源时发送 Cookie，缩小 Cookie 传输的次数。
3.3 内容的执行过程（页面得渲染过程）
防止重排，少重绘
缩小 dom 操作 --- 缓存 dom, 虚构 dom
js css 执行不阻塞
文件的地位的重要性。代码编写的逻辑性3.4 缩小 IO 操作
1. 缩小全局变量；2. 缩小全局组件；3. 缩小 dom 操作 --- 缓存 dom, 虚构 dom
3.5 代码上的优化
css
防止在 HTML 中书写 style
防止 CSS 表达式：CSS 表达式的执行需跳出 CSS 树的渲染
移除 CSS 空规定：CSS 空规定减少了 css 文件的大小，影响 CSS 树的执行
正确应用 display：display 会影响页面的渲染
不滥用 float：float 在渲染时计算量比拟大，尽量减少应用
不滥用 Web 字体：Web 字体须要下载、解析、重绘以后页面，尽量减少应用
不申明过多的 font-size：过多的 font-size 影响 CSS 树的效率
值为 0 时不须要任何单位：为了浏览器的兼容性和性能，值为 0 时不要带单位
标准化各种浏览器前缀
防止让选择符看起来像正则表达式：高级选择符执行耗时长且不易读懂，防止应用
js
缩小重绘和回流
变量的缓存
缓存 DOM 抉择与计算：每次 DOM 抉择都要计算和缓存
缓存.length 的值：每次.length 计算用一个变量保留值
尽量应用事件代理：防止批量绑定事件
尽量应用 id 选择器：id 选择器抉择元素是最快的
touch 事件优化：应用 tap(touchstart 和 touchend)代替 click(留神 touch 响应过快，易引发误操作)
四、渲染层面
深刻了解浏览器的 render 过程，详情请见（）
4.1 渲染工具的优化
举荐用户应用 chrome 浏览器
GPU 减速
用某些 HTML5 标签和 CSS3 属性会触发 GPU 渲染：HTML 标签：video、canvas、webgl
CSS 属性：opacity、transform、transition
缩小 DOM 节点：DOM 节点太多影响页面的渲染，尽量减少 DOM 节点
设置 viewport：HTML 的 viewport 可减速页面的渲染
4.2 不阻塞
页面渲染 不频繁切换渲染引擎和 js 引擎。css 头，js 尾
css 种少正则 少表达式；能 css 解决的不 js
4.3 优化高频事件：scroll、touchmove 等事件可导致屡次渲染
函数节流
函数防抖
应用 requestAnimationFrame 监听帧变动：使得在正确的工夫进行渲染
减少响应变动的工夫距离：缩小重绘次数
4.4 优化动画
尽量应用 CSS3 动画
正当应用 requestAnimationFrame 动画代替 setTimeout
适当应用 Canvas 动画：5 个元素以内应用 CSS 动画，5 个元素以上应用 Canvas 动画，iOS8+ 可应用 WebGL 动画
防止滥用框架、库4.5 防止重排，少重绘
防止不必要的 DOM 操作
防止应用 document.write
缩小 drawImage
缓存 dom, 虚构 dom
五、用户层面：
- 预加载：preload（在主渲染前进行预加载）和，可
首屏的渲染工夫
依据 2 -5 – 8 准则，最好能让用户在 2 秒内看到整个页面，可操作页面。
动作：
首屏加载同时申请不操作 4 个
按需加载
懒加载
滚动加载
不应用 spa 模式 -- 或者把首页独自拿进去
提早加载
比拟大的资源如 图片 提早加载
减少 loading 或者工夫提醒 或者难看的动画
其余性能优化的点 均应用
<font color=”#2980d9″>ps: 2-5- 8 准则 </font>
用户在 2 秒内失去响应，会感觉页面的响应速度很快 Fast
用户在 2~5 秒间失去响应，会感觉页面的响应速度还行 Medium
用户在 5~8 秒间失去响应，会感觉页面的响应速度很慢，但还能够承受 Slow
用户在 8 秒后依然无奈失去响应，会感觉页面的响应速度垃圾死了(此时会有以下四种可能)
难道是网速不好，发动第二次申请 => 刷新页面
什么垃圾页面呀，怎么还不关上 => 来到页面，有可能转投竞争对手的网站
垃圾程序猿，做的是什么页面啊 => 谩骂开发此页面的程序猿
断网了 => 网线断了？Wi-Fi 断了？信号不好？话费用完了？六、基于 webpack 的性能优化：
- 遇到 webpack 打包性能问题，先去 npm run build –report，而后依据剖析后果来做相应的优化，谁占体积大就干谁 <br/>
- webpack 提供的 externals 能够配合内部资源 CDN 轻松大幅度缩小打包体积，尤其对于 echarts、jQuery、lodash 这种库来说 <br/>
- 代码拆分
JS 层面细细开展 <br/>
只传送用户须要的代码 。可用代码拆分（Code-splitting）。<br/>
优化压缩代码 （ES5 的 Uglify，ES2015 的 babel-minify 或者 uglify-es）<br/>
高度压缩 （用 Brotli~q11，Zopfli 或 gzip）。Brotli 的压缩比优于 gzip。它能够帮 CertSimple 节俭 17% 的压缩 JS 的字节大小，以及帮 LinkedIn 缩小 2% 的加载工夫。<br/>
移除无用的代码 。用 Chrome DevTools 代码覆盖率性能来查找未应用的 JS 代码。对于精简代码，可参阅 tree-shaking，Closure Compiler 的高端模式（advanced optimizations）和相似于 lodash-babel-plugin 的微调库插件，或者像 Moment.js 这类库的 Webpack 的 <br/>ContextReplacementPlugin。用 babel-preset-env & browserlist 来防止古代浏览器中已有的转译（transpiling）性能。高级开发人员可能会发现仔细分析 Webpack 打包（bundle）有助于他们辨认和调整不必要的依赖关系。<br/>
缓存 HTTP 代码 来缩小网络传输量。确定脚本最佳的缓存工夫（例如：max-age）和提供验证令牌（Etag）来防止传送无变动的字节。用 Service Worker 缓存一方面能够让应用程序网络更加灵便，另一方面也能够让你可能快速访问像 V8 代码缓存这样的性能。长期缓存能够去理解下 Webpack 带哈希值文件名（filename hashing）。<br/>
## 七 比拟影响性能的点
图片的性能优化
cssspite
不在 HTML 中缩放图片
应用小体积可缓存的 favicon
优化图片
应用最新的图片格式，或者较好的图片格式 png 等
图片压缩一下
base64 的应用。预加载
懒加载
防止图片空连贯 或者谬误的链接
缓存的应用
更新工夫 2021.03.05
JavaScript 的老本
