性能优化-资源的压缩与合并

前端的性能优化

资源的压缩与合并

• 优化要点：减少http数量请求和资源大小请求
• 运用压缩与合并
• 实现方式有在线网站和压缩工具（需要node）

web前端本质上是一种GUI软件，本可以直接借鉴其他GUI系统架构设计方法，但web前端有点特别

浏览器的一个请求从发送到返回都经历了什么？

在这些请求过程中有一些潜在的性能优化点

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

其中，资源合并与压缩（html压缩，css压缩，js的压缩与混乱，文件合并，开启gzip）就可以减少http请求，可以减少请求资源的大小

html压缩

HTML的全称是超文本标记语言，HTML网页本身是一种文本文件，通过在文件中添加标记符，可以告诉浏览器如何显示其中的内容，包括文字大小，颜色，图片显示等等。这就意味着在文本文件中的一些特定意义的字符可以在浏览器显示的时候就不一样了，HTML代码压缩就是压缩这些在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩。

这有一个计算
google的流量，占到整个互联网的40%

预计2016年全球网络流量将会达到1.3ZB(1ZB = 10^9TB)

那么google在2016年的流量就是1.3ZB * 40%

如果google每1MB请求减少一个字节

每年可以节省流量近500TB

css压缩

• 无效代码删除
• css语义合并

js压缩与混乱

• 无效字符的删除
• 剔除注释
• 代码语义的缩减和优化
• 代码保护

文件合并

• 文件与文件之间有插入的上行请求，增加了N-1个网络延迟受
• 丢包问题影响更严重
• 经过代理服务器时可能会被断开

文件合并存在的问题

• 首屏渲染问题---公共库
• 缓存失效问题---不同页面的合并