# 性能优化动作

一、思路

  1. 依据浏览器申请、渲染资源的逻辑来论述。
  2. 依据用户的感知角度来论述
  3. 依据咱们目前最常见的开发 部署的模式来论述
  4. 业界的性能优化规定：

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,虚构domjs 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

五、用户层面：

  1. 预加载：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的性能优化：

  1. 遇到webpack打包性能问题，先去npm run build --report，而后依据剖析后果来做相应的优化，谁占体积大就干谁<br/>
  2. webpack提供的externals能够配合内部资源CDN轻松大幅度缩小打包体积，尤其对于echarts、jQuery、lodash这种库来说<br/>
  3. 代码拆分

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的老本