web前端性能优化是需要程序员长期 1.html压缩
HTML代码压缩就是压缩一些在文本文件中有意义,但是在HTML中不显示的字符,包括空格,制表符,换行符等,还有一些其他意义的字符,如HTML注释也可以被压缩;
如何进行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.文件合并
文件与文件之间有插入的上行请求,会增加N-1个网络延迟;
受丢包问题的影响更严重:因为每次请求都可能出现丢包的情况,减少请求能有效减少丢包情况;
keep-alive本身也存在问题:经过代理服务器时可能会被断开;
使用建议
公共库合并:将不经常发生变化的公共组件库文件进行合并;
将不同页面的js文件单独合并:比如在单页面应用SPA中,当路由跳转到具体的页面时才请求该页面需要的js文件;
如何进行文件合并
使用在线网站进行文件合并;
使用nodejs实现文件合并;
使用webpack等前端构件化工具也可以很好地实现;