性能优化

一、性能指标

一般来说，前端性能指标包括DOM ready、First Contentful Paint、白屏、首屏、用户可操作时间、onload时间等，在实际中需要结合业务本身的特点进行定义。

常规的性能优化方式：打包拆包、缩减体积、减小HTTP请求数、CDN、按需加载(懒加载、预加载)。

二、HTTP请求过程

用户先在浏览器中输入一个url，浏览器内部中的核心代码会将这个输入的url拆分解析；然后将domain传给dns服务器，dns服务会根据domain找到ip地址，返回给浏览器；经过ARP解析，获取对应的物理地址；浏览器向对应的地址发送请求。

服务端是有一个MVC的架构的。请求首先会进入Controller中，在Controller中进行相关的逻辑处理，以及请求的分发。调用Model层，负责和数据进行交互，model层会读取Redis和db里面的数据。然后通过view层经由网络，返还给浏览器。

浏览器进行html,CSS, javascript解析、渲染。

client浏览器与server通过http协议通讯，http协议属于应用层协议，http下层基于tcp协议（属于传输层协议），所以client与server主要通过socket进行通讯。

如果使用的是https协议，需要会话层tls,ssl等协议。

（客户端 发送请求时，从上到下经过的： 应用层 -->传输层 --> 网络层--> 数据链路层）

上述过程用涉及了浏览器，DNS服务器，服务器等，可进行的优化有：

DNS上可以进行缓存（减少DNS查询时间），路由器层面、url层面也可以进行数据缓存。

网络请求的过程，带宽、网络的选择，涉及到缓存，可以使用CDN。CDN用于请求静态资源。请求静态资源，不需要携带cookie。这里注意，CDN的域名不要和主站的域名一致，防止携带cookie。

网络环境下，每一次请求都有网络环境的损耗。我们可以把多次HTTP请求合并成一次，从而减少相同的环境损耗。

可以选择在服务器端进行前端框架的渲染（不再是浏览器渲染），将HTML渲染后直出到浏览器页面，减少首屏时间。

三、资源的合并和压缩

减少HTTP请求的数量即为合并，减少HTTP请求的大小即为压缩。可以对HTML进行压缩（html-minifier工具），css进行压缩（css-clean），js进行压缩(uglifyjs)和混乱，文件合并，开启gzip等。

四、性能优化方法汇总

使用内容交付网络（CDN），添加过期或者是缓存控制头，配置etag，使用ajax缓存；DNS缓存，减少dns的查找，避免重定向；没有404，减少cookie的大小，避免使用过滤器，使用favicon.icon小型且可缓存。

加载优化，合并CSS、JavaScript（最小化HTTP的请求数量），合并小图片（小于200KB）；缓存一切可以缓存的资源，使用外联样式引用CSS和JavaScript；压缩HTML、css、JavaScript，启用Gzip压缩；使用首屏加载，按需加载，滚屏加载，增加加载进度条；减少cookie，避免重定向，异步加载第三方资源。

（懒加载原理：针对的是图片资源。适用于一些页面很长、图片资源很多的业务场景，如商城项目，减少无效资源的加载，避免并发加载的资源过多造成js的加载阻塞。

预加载原理：图片等静态资源在使用前提前请求，当使用资源时从缓存中加载，提高用户体验。）

css优化，css写在头部，JavaScript写在尾部；避免<image>和<iframe>中有空src或是href；尽量避免重设置图片大小，图片尽量避免使用DataURL；尽量避免写在HTML标签中写style属性；避免css的表达式，移除空的css规则，正确使用display的属性，不滥用float，不滥用web字体，不滥用过多的font-size；值为0时不需要任何单位，标准化各种浏览器前缀，避免让选择符看起来像正则表达式。

渲染优化，HTML使用viewport，减少dom节点，合理使用requestAnimationFrame动画代替setTimeout；Touchmove、Scroll事件会导致多次渲染，尽量使用css3动画，适当使用Canvas动画，使用CSS3 transitions，CSS3 3d，transforms，Opacity，Canvas等来触发GPU渲染。

脚本优化，减少重绘和回流，缓存dom选择与计算，缓存列表length，尽量使用事件代理，避免批量绑定事件，尽量使用id选择器，使用touchstart，touchend代替click。

图片优化，使用css3，svg，iconfont代替图片；使用base64表示简单的图片；图像格式webp优于jpg，png8优于gif；<img />使用srcset属性；首次加载不大于1014kb，图片不宽于640。

srcset属性格式：图片地址 （浏览器）宽度描述w （图片）像素密度描述x，多个资源之间用逗号分隔。

<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />

// 浏览器宽度达到 800px 则加载 middle.jpg ，达到 1400px 则加载 big.jpg。注意：像素密度描述只对固定宽度图片有效。

 ------------------------------------------------------------------------------------------------------------------------------------

HTML渲染过程：顺序执行（词法分析），并发加载，是否阻塞，依赖关系，引入方式。

css阻塞，css head中阻塞页面的渲染（render），css阻塞js的执行，css不阻塞外部脚本的加载。

js阻塞，引入js阻塞页面的渲染，js不阻塞资源的加载，js顺序执行，阻塞后续js逻辑的执行。