前端性能

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

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

  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 进行压缩
文章作者: wenmu
文章链接: http://blog.wangpengpeng.site/2020/01/08/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 温木的博客
微信打赏