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

前端的性能优化

资源的压缩与合并

• 优化要点：减小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个网络延迟受
• 丢包问题影响更严重
• 通过代理服务器时可能会被断开

文件合并存在的问题

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