WEB前端性能优化

2019-03-22  第一部分 资源合并与压缩

1  Web前端本质是一种GUI软件，基于BS架构，软件开发代码发布到webServer或者CDN服务器，浏览器向服务器发出请求，经过动态的增量的加载资源。

2  浏览器发出http请求到返回经历了什么？

　　浏览器将URL拆分解析---->DNS 服务器---->根据domain域名服务器查询IP---->将IP和协议发送服务端：首先进入controller层进行逻辑分析和请求分发，model层进行数据交互调研redis和db数据库，查询的渲染页面返回给view层---->response返回给浏览器---->render操做将css和HTML树从上到下生产DOM节点到DOM树，进行样式渲染，而后执行动态的JS脚本，展现返回的能够交互的页面。

3  优化点 

　　DNS是否能够经过缓存减小DNS查询时间？

 　  网络请求是否能够走最近的网络环境？

　　相同的静态资源是否能够缓存？

　　是否能够减小http请求大小，是否能够减小http请求数量来减小网络损耗？

　　是否能够在服务端渲染？（解决首屏渲染问题）

4 CDN静态资源解决了路由选择和缓存问题。要求 CDN域名与主站域名不一样，不然携带无效cookie增长网络损耗。缺点：没法访问API。

5 为何要进行压缩与合并？    真实案例：谷歌网络流量占全球网络流量的40%，2016年全球网络流量1.3ZB，每1MB请求减小一个字节，谷歌将节省500TB流量，若是1GB流量1毛钱，谷歌每一年节省费用上亿元。

6 HTML压缩：

　　在线网站

　　nodejs提供的html-minifier工具，配置参数选择是否压缩。Nodejs做为构建工具在构建阶段能够进行自动化压缩。Nodejs做为服务端语言，也能够对HTML进行压缩，会增长计算量

　　后端模板引擎渲染

7 css 压缩: 在线、html-minifier、 clean-css

8 js代码压缩与混乱：不只是对无效代码剔除，对相同语义代码合并，经过混乱的方式防止别人轻易窥探到代码逻辑和核心部分，更是对代码的保护。Html-minifier和uglifyjs工具对代码进行压缩。

9 文件合并：http请求首先会创建链接，n各文件发送请求，会增长n-1个上行请求时间和延迟，以及丢包和服务中断问题严重。将文件合并后只须要请求一次，减小了网络损耗。

　　首屏渲染问题：首屏依赖其中某个文件，渲染将会延迟到整个文件所有请求返回，用户体验很差。

　　缓存失效问题：其中任意文件改变缓存将大面积失效。

10 文件合并优化点：

　　公共库文件合并为一个文件，静态资源不会常常改变。

　　不一样页面应用单独打包。当页面请求JS，当路由到时才会异步加载组件。

　　针对不一样的业务场景，见机行事。

11 文件合并实现： 在线网站、grunt，fis3，webpack配置entry和output自行分析文件依赖关系进行合并和压缩。

 

第二部分 图片有损压缩JPEG

1  JPG图片有损压缩。

　　原始图片数据——颜色空间转换——重采样——高频部分压缩——量化——编码——压缩图片——解码——去量化——反高频压缩——反重采样——逆颜色空间转换。图片的内容，即每一个像素的颜色是经过颜色索引表进行表示。如png8，每8bit表示一种颜色。Png24，每24bit表示一种颜色，图片的体积大小就会增长。

2不一样的图片类型

　　JPG ——相比png压缩率高，不支持透明。适用于大部分不须要透明的图片的业务场景

　　PNG ——png8 、png24 、png32，支持透明，图片也能够进行降阶。适用于大部分须要透明图片的业务场景。

　　SVG矢量图——图片不会失真，图片内容内嵌在HTML中，可使用SVG标签，不须要加载资源。可是绘制和表达能力有限，适合大部分简单的业务场景，如logo，现有的iconfont库，使用一些icon图标。

　　Webp ——新起的图片格式，更优的压缩算法，带来更小的图片体积，拥有肉眼识别无差别的图片质量、存在有损和无损压缩模式、支持Alpha透明度和动画特性，jpg和png转换性能稳定统一优秀。可是对于iOS和view不兼容，适用于安卓系统和应用。

3  图片优化点：

　　图片进行压缩，根据真实case的色彩丰富，舍弃掉可有可无的色彩信息。

　　CSS雪碧图，将单个图片整合到一个图片中，可是要大小合适，不能太多。

　　image inline，将图片内嵌到HTML中，使用base64来表示，文件大小约1KB。

　　使用SVG矢量图，iconfont解决icon问题。

　　安卓应用下推荐使用webp格式图片。

第三部分 CSS和JS如何加载与执行

1 URL解析——》IP请求——》到返回http请求文档，获得字节转换字符流文件——词法分析——》nexttoken根据header，body、footer标签解析成相应的token对象——》append到DOM节点中，从上至下生产DOM树，经过link和script标签引入其余资源，并发请求CDN静态资源，如CSS样式，CSS解析结合DOM树，生成Render Tree——》布局layout——》绘制paint渲染。

2 HTML渲染特色：

　　顺序执行：“”并发加载引入css和JS外部资源，并发数收域名限制，2-4个域名托管。

　　阻塞加载：css阻塞JS的加载。Css加载慢，放入header中引入。

　　依赖关系：存在必定遵循的依赖关系，JS执行依赖关系要理清楚。

　　引入方式：link和import，怎么更优引入。

3 CSS阻塞：

　　Link标签对应得CSS加载完才会进行样式渲染，阻塞JS的执行，可是不阻塞外部脚本如JS的加载，操做DOM可能涉及DOM树和CSS树样式修改。逻辑上正确。预加载资源，由于若是直接引入JS会阻塞页面渲染。JS不阻塞资源加载，顺序执行，会阻塞后续JS的执行。

4 优化点：

　　link代替import，或者在css中合并

　　JS脚本置底，防止相关资源阻塞并发执行。

　　合理的使用JS异步加载的能力，同一个域名最多同时加载6个资源。

 

第四部分 懒加载和预加载

1 本质是对浏览器加载性能的一个balance，当加载繁忙时将一些暂时无用的资源延迟加载，当浏览器空闲时，提早加载接下来要使用的资源。是浏览器的加载性能饱和起来，而且提高用户体验。

2 懒加载：当前没有使用的资源延迟加载。

　　图片进入可视区才进行加载请求图片资源，如电商等图片不少，页面很长的业务场景，同时加载不少图片，浏览器端的性能严重损害，域名加载也存在上限，减小无效资源加载。并发加载资源过多会阻塞JS的执行，影响整个网站的正常使用。

3 预加载：将接下来要使用的资源提早请求和加载。

　　如图片等静态资源，加载后放置缓存中使用时就能够直接从缓存中拿，速度快，提高用户体验。预加载能够瞬间得到样式展现，如九宫格抽奖，动图效果依赖于提早加载，音乐预加载等，以及游戏，存在依赖关系的必须加载完成才会进行真正的渲染。

4 懒加载实现：Zepto.lazyload.js现有的库，站位符，预加载必须预设图片的高度，由于页面会监听scroll事件，进入可视区进行加载。

5 预加载实现：

　　方法1：使用img标签设置display：none

　　方法2：new image对象，设置src  

       方法3：xmlrequest对象能够监听加载的过程，更好的进行控制，可是存在跨域问题。（使用preload.js库 HTML，XHR基于负载标签替换，解决跨域问题。） 

 

 第五部分 重绘和回流

1  为何会产生重绘与回流，如何减小？

2  回流：render tree的一部分由于元素的大小，布局隐藏等改变而须要冲构建，页面尺寸，布局，几何属性改变，回流从新布局和绘制，形成的代价很大。

3  重绘：元素的布局没有变化，只是颜色外观，风格，隐藏等发生改变，触发页面从新绘制。

4  尤为是移动端GPU的计算能力有限，发生回流是会出现卡顿，用户体验不好。

如何避免：

　　尽可能减小对盒子模型，浮动，定位，节点内部文字属性的修改，或者将修改集中在一块儿，统一一次处理。

　　使用图层，万一非要修改这些属性，将其抽出来放在单独的图层中作，减小影响。可是图层也不是越多越好，图层在重组生产页面时，会增长额外的大量的计算，须要时使用，尽可能少用。

 

第六部分 浏览器存储

Cookie

　　1. cookie 由于HTTP请求无状态，全部须要cookie去维护客户端状态

　　2. cookie的限制：做为浏览器存储，大小4KB左右；须要设置过时时间expire

　　3. cookie的使用：做为浏览器端和服务器端的交互（用户状态）；客户端自身数据的存储

　　4. cookie中在相关域名下面-cdn的流量损耗，如优酷

　　5. 重要属性：HTTPonly不支持JS读写（防止收到模拟请求攻击）

　　6. 优化点：cookie中在相关域名下的网络损耗。解决方案：CDN域名和主站域名要区分开。

LocalStorge

　　1. html5设计出来专门用于浏览器存储的

　　2. 大小5M左右

　　3. 仅在客户端使用，不和服务器端通讯

　　4. 接口封装较好

　　5. 属于浏览器本地缓存方案

SessionStorage

　　1.会话级别的浏览器存储

　　2.大小5M左右

　　3. 仅在客户端使用，不与服务端进行通讯

　　4. 封装接口较好

　　5. 对于表单数据维护或分布操做

　　注释：LocalStorge与SessionStorage区别：会话级别存储

IndexedDB

　　1 背景 ：随着浏览器的功能不断加强，愈来愈多的网赚开始考虑，将大量数据存储在客户端，这样能够减小从服务器端获取数据，直接从本地获取数据，现有的刘安琪数据春初方案，都不适合大量数据存储，并且不提供搜索功能，不能创建自定义的索引。因此，须要一种新的解决方案，indexedDB诞生了。

　　2 做用：为application建立离线版本

　　3 特色： 键值对存储、异步、支持事务、同源限制、存储空间大、支持二进制存储。

PWA

　　1 PWA（Progressive Web Apps）渐进式网络应用，是一种能够提供相似于原生应用程序（native app）体验的网络应用程序（web app）。PWA能够用来作不少事情，最重要的是，离线时（offline）应用程序可以继续运行功能。这是经过service workers的网络技术来实现的。

　　2 做为web开发者，这是咱们传统构建网站方式的一种转变。这意味着咱们能够开始构建应对不断变化的网络条件和无网络链接的网站。这还意味着能够创建更吸引人的网站来为咱们的用户提供一流的浏览体验。

　　3 特色：

　　　　可靠：没有网络环境也能提供基本的页面访问，不会出现“未链接到网络”的页面

 　　　　快速： 针对页面渲染和网络访问都有较好的优化

 　　　　融入：应该能够被增长到手机桌面，而且和普通的应用同样能够有全屏和推送等特性

Service Worker

　　1 概念：Service Worker是一个脚本，能够在浏览器后台挂起新线程，来缓解JavaScript的单线程问题，能够用Service Worker拦截网络请求进行本地缓存或请求转发，充当服务器端和浏览器端、浏览器端与web应用程序之间的代理服务器。

　　2 Service Worker特色：带来了速度，极大的提升；额用户体验，有效加快重复访问网络应用的速度。

　　3 做用： 网络代理、转发请求、伪造响应、离线缓存、消息推送、后台消息传递。

　　4 PWA与Service Worker：Service Worker能够看作是实现PWA模式的一项重要技术实现。

 

第七部分  缓存优化

1 大规模的系统和大规模的文件如何进行自动缓存？所以基于浏览器和服务器协商的缓存机制出现了，究竟是如何运做的，如何创建一个符合本身业务需求的缓存策略？

2  http请求经过http header传输配置本身的缓存策略，叫作cache control，拿到request和response各自的缓存状况。

3 优先级：Cache control 的控制字段s-mage > Max-age > Expires

　　s-mage：访问public公共资源，若是公共资源没有过时，返回304，若是超时，CDN会去相应服务器请求进行回原。

　　Max-age：当前请求开始到max-age这段时间内不会再发起请求，告诉浏览器，这段时间有效，不会过时，能够直接从浏览器缓存读取数据。

　　No-cache：搭配max-age=0使用，向浏览器发起请求，全部的请求都会到服务器。

　　No-store: 不使用任何缓存策略。

　　Expires: 设置缓存过时时间，服务器端具体的时间点，没有过时浏览器能够直接从缓存读数据。

　　last-modified：精确的时间。问题：很难拿到精确时间，时间变了内容没变，缓存失效。

　　E-tag：文件内容的MD5值是一个哈希值。

4 若是浏览器请求没有到达服务端，服务端发生变化就没法告知浏览器？此时出现了服务器和浏览器协商的机制，基于cache-control，使用last-modified和if-modified-since获取服务端数据是否修改。

5 分级缓存策略：Max-age和expires没有过时，返回200from cache。时间过时——》last modified和etag协商看服务器端数据是否修改，没有修改返回304——》不然从服务端下载文件。（或者历来没有请求过资源）返回200。

 

第八部分 服务器端渲染

1  将框架的加载或渲染在服务器端进行，将渲染结果返回到浏览器，解决首屏渲染问题。

2  使用fis3或者webpack构建工具。

 

总结

1. 文件压缩与合并：使用构建工具或者在线压缩工具进行压缩。公共库合并，单独页面打包异步请求。

2.  图片优化：图片类型选择，根据真实case颜色需求舍弃部分颜色，图片压缩、转换、降阶、内嵌、合并。

3.  CSS加载和执行：CSS文件置顶，使用link代替import，script标签，合理使用JS异步加载能力

4.  懒加载和预加载：经过对资源的延迟加载或提早加载，使得网页访问和显示更加流畅，提高用户体验。

5.  重绘和回流：减小使用或不使用触发图层回流的属性。创建图层，让回流在图层里单独进行，隔离开，减小回流和重绘的范围，减小浏览器的运算工做量。

6. 浏览器存储：使用不一样的浏览器春初方式提升客户端读取数据的速度。

7. 服务器渲染：将框架的加载和渲染在服务器端进行，将渲染结果返回浏览器。