web性能优化

几乎所有的开发者都会面临着开发的网站存在加载问题，想要加快网页的加载速度。前端的页面更需要在性能优化上下功夫，只有这样才能实现更好的用户体验。本文从构建、浏览器渲染、缓存、PWA、服务端优化等多方面，梳理前端性能优化的技术点、综合分析技术的原理，根据不同的业务场景选择合适的性能优化点进行应用，最终为你的网站带来显著的速度提升和整体性能提升。

先看一下早期CS架构的开发与部署过程

图片描述

再看一下现在BS架构的开发与部署过程

图片描述

从地址栏输入url到页面渲染出来，整个过程经历了什么（一道经典的面试题。。）让我们用一张图来了解整个过程：

图片描述

从上图这个请求过程，我们可以思考一下其中一些潜在的性能优化点：

dns是否可以通过缓存减少dns查询时间？
网络请求的过程走最近的网络环境？
相同的静态资源是否可以缓存？
能否减少请求http的请求大小？
减少http请求数量？
服务端渲染？

综上，我们得出深入理解http请求过程是前端性能优化的核心

资源合并与压缩

html压缩

图片描述

HTML代码压缩就是压缩这些在文本文件中有意义，但是在HTML中不显示的字符，包括空格、制表符、换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩。

HTML代码压缩的意义：
以google为例，google的流量，占到整个互联网的40%，2016年全球网络流量达到1.3ZB（1ZB=10^9TB），那么google在2016年的流量就是1.3ZB*40%，如果google每1MB请求减少一个字节，每年可以节省流量近500TB。

那么如何进行HTML的压缩呢？

使用在线网站进行压缩
nodejs提供了html-minifier工具
后端模版引擎渲染压缩

css及js压缩

图片描述

如何进行css压缩：

使用在线网站进行压缩
使用html-minifier对html中的css进行压缩
使用clean-css对css进行压缩

图片描述

如何进行js压缩和混乱：

使用在线网站进行压缩
使用html-minifier对html中对js进行压缩
使用uglify2对js进行压缩

文件合并

图片描述

但是文件合并也存在它自己的问题：

首屏渲染问题
缓存失效问题

解决方案：

公共库合并
不同页面的合并
随机应变，根据业务场景作出抉择，选出最优方案

如何进行文件合并：

使用在线网站进行文件合并
使用nodejs实现文件合并

图片相关的优化

一张JPG图片的解析过程

图片描述

png8、png24、png32之间的区别

区别主要还是文件大小和色彩的丰富程度

png8:256色 + 支持透明
png24:2^24色 + 不支持透明
png32:2^24色 + 支持透明

每种图片格式都有自己的特点，针对不同的业务场景选择不同的图片格式很重要。

不同格式图片常用的业务场景

先看一下四种常用图片格式的各自特点吧：

jpg有损压缩，压缩率高，不支持透明
png支持透明，浏览器兼容好
webp压缩程度更好，在ios webview有兼容性问题
svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景

根据各自不同的特点得到适用的业务场景分别为：

jpg:大部分不需要透明图片的业务场景
png:大部分需要透明图片的业务场景
webp:安卓全部
svg:图片样式相对简单的业务场景，如icon

图片压缩几种方法-雪碧图、Image inline

css雪碧图

图片描述

image inline

图片描述

矢量图

使用svg进行矢量图的绘制
使用iconfont解决icon问题

在安卓下使用webp

webp的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha透明以及动画的特性，在JPEG和PNG上的转化效果都非常优秀、稳定和统一。

css 和 js 的装载与执行

先用一张图来理解html页面加载渲染的过程：

图片描述

html渲染过程中有以下特点：

顺序执行、并发加载

（1）词法分析 （2）并发加载 （3）并发上限

是否阻塞

css阻塞：（1）css head中阻塞页面的渲染（2）css阻塞js的执行（3）css不阻塞外部脚本的加载
js阻塞：（1）直接引入的js阻塞页面的渲染（2）js不阻塞资源的加载（3）js顺序执行，阻塞后续js逻辑的执行

web性能优化