web前端优化都有哪些压缩方法

  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等前端构件化工具也可以很好地实现;




转载请注明:http://www.aierlanlan.com/rzgz/7775.html