一、基础知识
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对资源进行压缩。