总结一些前端性能的笔记。

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

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

资源压合并与压缩

这涉及到两方面的内容

1. 减少 http 请求数量
2. 减小请求资源的大小

具体需要处理的方面

• html 压缩
• css 压缩
• js 的压缩和混乱
• 文件合并
• 开启 gzip

html 压缩

HTML 代码压缩就是压缩这些在文本文件中有意义，但是在 HTML 中不显示的字符，包括空格、制表符、换行符等，还有一些其他意义的字符，比如 HTML 注释也可以被压缩。
这些在我们写代码时有帮助，但对浏览器的解析没有意义，因此都可以被省略掉。

• 蓝色是没压缩的 HTML
• 红色是进行了 HTML 压缩
• 绿色是进行了 gzip 压缩
  仅仅进行 HTML 压缩，貌似压缩效果不是太明显，其实不然，比如谷歌这样的公司，他的流量站整个互联网的 40%，如果 1M 减少一个字节，每年就可以节省流量近 500TB，相当于上亿元的支出，当然如果网站的流量很小，那就不再讨论范围内了。

如何进行 html 压缩

1. 在线的网站进行压缩
   但是现在前端开发都会使用构建工具，所以这个一般用不上。
2. nodejs提供的 html-minifier 工具
3. 后端模板引擎渲染压缩

css 压缩

• 无效代码删除
• css 语义合并
  一些语义重复的代码进行合并
  如何进行 css 压缩

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

js 压缩与混乱

1. 无效的字符删除
2. 剔除注释
3. 代码语义的缩进和优化
   比如变量、方法名替换成单字符等等
4. 代码保护

如何进行 js 压缩

1. 使用在线网站进行压缩
2. 使用 html-minifier 对 html 中的 css 进行压缩
3. 使用 unlifyjs2 对 js 进行压缩