web性能优化二-文件压缩与混淆

html 压缩

html压缩

1. 使用在线网站进行压缩在线压缩工具
2. nodejs提供的html-minifier工具
3. 后端模板引擎渲染压缩（ejs /jade模板引擎）
4. gulp/webpack等构建工具提供的插件的压缩

css压缩

首先对无效代码的删除，减少文件的大小，提升css渲染速度;对css语义进行合并

1. 使用在线网站进行压缩在线压缩工具；
2. 使用html-minifier对html中 的css进行压缩；
3. 使用clean-css对css 进行压缩

js压缩与混淆

无效字符的删除;剔除注释;代码语义的缩减和优化;代码保护(在客户端容易被看到)

1. 使用在线网站进行压缩在线工具
2. 使用html-minifier对html中 的js进行压缩
3. 使用uglifyjs2 对js进行压缩
   以上三种方式对html,css,javascript等文件进行压缩，会节省这些文件在网络传输的时间；
   

以下是文件合并在网络传输的示意图

当然文件合并不一定都是优点，也会有一些问题
1. 首屏渲染问题，为什么这么说呢？因为如果首屏需要加载三个js文件，但是a.js是渲染页面的，如果合并后，文件变大会造成页面渲染时间变长了；
2. 缓存失效问题，如果每次变动一个js从而会导致整个合并后的文件的缓存失效（因为md5戳唯一表示文件是否被改变）
建议做法
1. 公共库合并，将公共库单独打包成一个文件，不会影响公共库的缓存；
2. 不同页面的合并， 针对现在的单页应用开发的，按需加载（webpack异步加载组件）；
3. 见机行事，随机应变，针对不同的业务场景，使用针对性的方式
4. 浏览器并发请求资源是有限制的，这个限制是不同的浏览器厂商是不一样的

各个浏览器并行处理请求的数量，仅供参考，因为会有一些因为版本的提升，会有变化

版本 HTTP1.0 HTTP1.1 IE 6\7 4 2 IE 8 6 6 IE 9 10 10 IE 10 6 6 IE 11 6 6 chrome 6 6 firefox 6 6

方案：

1. 对比文件压缩前后的加载速度和浏览器渲染速度，考虑什么文件进行合并和压缩；
2. 可以推荐大家使用百度的前端构建工具fis3