知识总结：WEB前端的优化方案

一般根据雅虎的黄金35定律对Web前端进行优化

从网页内容、CSS、JavaScript、图片、服务器端、cookie、移动客户端等方面进行优化。

 1、网页内容方面：尽量减少 HTTP 请求次数

• 合并文件：合并(js)脚本跟(css) 样式文件，如可以把多个 CSS 文件合成一个，把多个 JS 文件合成一个。
• 合并图片：CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位,把多个图片合成一个图片。
• 减少DNS查询的次数：DNS查询也会消耗响应时间，对首次访问响应速度有所影响
• 使用浏览器缓存

 2、CSS方面

• 将样式表置顶：将样式表放在网页的head标签中会让网页显得加载速度更快，因为这样做可以试浏览器逐步加载已经下载的网页内容，用户可以先看到已经下载好的内容，而不是一直等待在一个白屏上。如果样式文件放在页面底部可能会出现两种情况：白屏 和 无样式内容的闪烁
• 尽量避免 CSS 表达式：尽量避免使用它来防止使用不当而造成的性能损耗
• 引入外部样式表时，用 link 标签代替 @import ：因为 @import 相当于将css放在网页内容底部，影响页面响应效果

 3、JavaScript方面

• 将脚本置底：可以让网页渲染所需要的内容尽快加载显示给用户。

脚本放在顶部带来的问题：

1. 使用脚本时，对于位于脚本以下的内容，逐步呈现将被阻塞
2. 在下载脚本时会阻塞并行下载
3. 放在底部可能会出现JS错误问题，当脚本没加载进来，用户就触发脚本事件。

• 精简JS：可以做到两个级别

1. 精简：从代码中移除不必要的字符和去除重复脚本以减少其大小
2. 混淆：在精简的同时，还会改写代码，函数、变量名被转换成短的字符串

 

 

 4、图片方面

• 避免空的图片src：因为空的图片src仍然会使浏览器发送请求到服务器，这样完全是浪费时间
• 压缩图标
• 使用css雪碧图
• 不要在HTML上缩放图片

 5、服务器端方面

• 使用CDN：CDN是内容分发网络，通过部署在不同地区的服务器来提高用户的下载速度，可以减少网页内容的下载时间
• 做服务器缓存

 6、cookie 方面

• 减少cookie的大小：提高请求的响应速度

 7、移动客户端方面

• 保持单个内容小于25KB
• 打包组件成符合文档

 

图片优化加载处理的方法：

 

• 减少文件体积大小
  1. 压缩优化图片大小
  2. 采用合适的图片格式
• 减少图片资源请求数(合并HTTP请求)
  1. 合成雪碧图
  2. 使用DataURL
  3. 高级方法
     • 预加载
       1. 显性预加载：处于预加载过程时页面有明确的加载提示，比如进度条或者是Loading图标。
       2. 隐性预加载：先是显性预加载(钱币小图标Loding)快速地呈现部分画面(截图右部分)给用户，再通过互动(向上滑动数钱)来继续分段加载资源
     • 懒加载：又称为延迟加载、按需加载。指的是图片在页面渲染的时候先不加载，页面渲染完成后在指定动作触发后再加载图片。
       1. 实现的原理是：
          1. 先将图片的实际src，记录在data-set属性中。
          2. 监听屏幕滚动，计算图片的Y坐标，并计算可视区域的高度height，当Y小于等于(height+scrollTop)时，图片的src的值用data-src的来替换，从而来实现图片的懒加载。