前端优化之资源压缩

一、基础知识

0x1 浏览器请求过程

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

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

0x2 资源的合并与压缩

• 减少http请求数量
• 减少请求资源的大小

二、资源压缩

0x1 HTML压缩

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

进行html压缩前后效果对比
压缩方式

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

0x2 CSS压缩

无效代码删除
css语义合并

压缩方式

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

0x3 Js压缩与混乱

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

压缩方式

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

三、资源合并

合并前的问题：

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

合并后带来的问题：

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

解决方案：

• 公共库合并
• 不同页面的合并
• 见机行事，随机应变

合并方式：

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

可以利用fis3对资源进行压缩。