Web前端性能优化

Web前端性能优化

资源的合并与压缩

• 理解减少http请求数量和减少请求资源大小两个优化要点
• 掌握压缩与合并的原理

• 掌握通过在线网站和fis3两种实现压缩与合并的方法

  web前端本质上是一种GUI软件
  本可以直接借鉴其他GUI系统架构设计方法
  但
  web前端有点特别

  浏览器的请求从发送到返回都经历了什么？

dns是否可以通过缓存减少dns查询时间
网络请求的过程走最近的网络环境
相同的静态资源是否可以缓存
能否减少请求http请求大小
减少http请求
服务端渲染

html压缩

HTML压缩就是压缩这些在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩。
如何进行HTML压缩
①.使用在线网站进行压缩
②.nodejs提供了html-minifier工具
③.后端模板引擎渲染压缩
CSS压缩
无效代码的删除
css语义合并
如何进行css压缩
①使用在线网站进行压缩
②使用html-minified对html中的css进行压缩
③使用clean-css对css进行压缩
JS压缩与混乱
无效字符删除
剔除注释
代码语义的缩减和优化
代码保护
如何进行js压缩与混乱
①使用在线网站压缩
②使用html-minifier中js进行压缩
③使用uglifyjs2对js进行压缩

文件合并

不合并的问题
文件与文件之间有插入的上行请求，增加了N-1个网络请求
受丢包问题影响更严重
经过代理服务器时可能会被断开

文件合并存在的问题
首屏渲染问题 //合并的文件比较大，请求速度慢
缓存失效问题 //几个合并的文件无论哪个改变，都会导致缓存失效

建议
（1）公共库合并
（2）不同页面的合并
（3）见机行事，随机应变

如何进行文件合并
1.使用在线网站进行合并
2.使用nodejs实现文件合并