前端性能——资源合并与压缩

一、在http请求的过程中如何提高性能

---

①DNS是否可以通过缓存减少DNS的查询时间

②网络请求的过程走最近的网络环境

③相同的静态资源是否可以缓存

④能否减少http请求的大小

⑤能否减少http请求的个数

⑥进行服务端渲染而非浏览器渲染

深入理解http请求的过程是前端性能优化的核心

 

二、资源的合并与压缩

---

①减少http请求的数量

②减少请求资源的大小

 

三、压缩与合并操作

---

【1】html压缩：空格 制表符 换行符 HTML注释（在文本文件中有意义，但是在HTML中不显示或者没有意义）

如何进行HTML压缩：

①使用在线网站进行压缩

②node.js提供了html-minifier工具（可配置性、可扩展性较强）

③后端模板引擎渲染压缩

 

【2】CSS压缩 ①无效代码删除  ②CSS语义合并

如何进行CSS压缩：

①使用在线网站进行压缩

②使用html-minifier对html中的css进行压缩

③使用clean-css对css进行压缩

 

【3】JS的压缩与混乱 ①无效字符的删除 ②剔除注释 ③代码语义的缩减和优化 ④代码保护

如何进行js压缩混乱

①使用在线网站进行压缩

②使用html-minifier对html中的js进行压缩

③使用uglifyjs2对js进行压缩

 

【4】文件合并

keep-alive

①文件与文件之间有插入的上行请求，增加了N-1个网络延迟

②受丢包问题影响更严重

③经过代理服务器时可能会被断开

 

合并文件的问题：

①首屏渲染问题（Vue、React的首次渲染过度依赖于个别大的js，必须等全部加载完成，才能渲染）

②缓存失效问题（由于文件的合并，在Vue、React等项目中，文件名会加md5戳，因此，一个小小的改动，就会导致md5完全变

化，导致缓存大面积失效）

 

处理方法：

①对于公共库合并

②不同页面的合并（对于单页应用，不同路由下的界面分别打包）

③见机行事，随机应变

 

如何进行文件合并：

①使用在线网站进行文件合并

②使用node.js实现文件合并