认识达内从这里开始

通过进行代码的压缩能够大大提高web前端编程的性能优化效果，而本文我们就通过案例分析来简单了解一下，web前端代码压缩优化方法都有哪些类型。

1.html压缩

HTML代码压缩就是压缩一些在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩;

一个简单的计算：

google的流量，占到整个互联网的40%，预计2016年全球网络流量将达到1.3ZB(1ZB=10^9TB)，那么google在2016年的流量就是1.3ZB*40%，如果google每1MB请求减少一个字节，每年可以节省流量近500TB流量。

如何进行html压缩

使用在线网站进行压缩;

nodejs提供的html-minifier工具;

后端模板引擎渲染压缩;

2.css代码压缩

分为两部分：

无效代码的压缩;

css语义合并;

如何进行css压缩

使用在线网站进行压缩;

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

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

3.js压缩与混乱(丑化)

包括：

无效字符的删除(空格，回车等);

剔除注释;

代码语义的缩减和优化;

代码保护(如果代码不经处理，客户端可直接窥探代码漏洞);

JS压缩与混乱(丑化)

使用在线网站进行压缩

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

使用uglify.js2对js进行压缩;

4.文件合并

文件合并的好处：

4.png左边的表示使用http长链接keep-alive但不合并请求的情况，需要分三次去获取a.js、b.js、c.js;右边是使用长链接并且合并请求的情况，只需要发送一次获取合并文件a-b-c.js的请求，就能将三个文件都请求回来。

参考前端进阶面试题详细解答

不合并请求有下列缺点：

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

受丢包问题的影响更严重：因为每次请求都可能出现丢包的情况，减少请求能有效减少丢包情况;

keep-alive本身也存在问题：经过代理服务器时可能会被断开;

文件合并存在的问题

屏渲染问题：当请求js文件的时候，如果页面渲染只依赖a.js文件，由于文件合并，需要等待合并后的a-b-c.js文件请求回来才能继续渲染，这样就会导致页面渲染速度变慢。这种情况大多出现在现代化的前端框架，如Vue等的使用过程中;

缓存失效问题：合并后的文件a-b-c.js中只要其中一个文件(比如a.js)发生变化，那么整个合并文件都将失效，而不采用文件合并就不会出现这种情况;

使用建议

公共库合并：将不经常发生变化的公共组件库文件进行合并;

将不同页面的js文件单独合并：比如在单页面应用SPA中，当路由跳转到具体的页面时才请求该页面需要的js文件;

如何进行文件合并

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

使用nodejs实现文件合并;

使用webpack等前端构件化工具也可以很好地实现;

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请加danei456学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。