一般根据雅虎的黄金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方面
将脚本置底:可以让网页渲染所需要的内容尽快加载显示给用户。
脚本放在顶部带来的问题:
- 使用脚本时,对于位于脚本以下的内容,逐步呈现将被阻塞
- 在下载脚本时会阻塞并行下载
- 放在底部可能会出现JS错误问题,当脚本没加载进来,用户就触发脚本事件。
精简JS:可以做到两个级别
- 精简:从代码中移除不必要的字符和去除重复脚本以减少其大小
- 混淆:在精简的同时,还会改写代码,函数、变量名被转换成短的字符串
4、图片方面
- 避免空的图片src:因为空的图片src仍然会使浏览器发送请求到服务器,这样完全是浪费时间
- 压缩图标
- 使用css雪碧图
- 不要在HTML上缩放图片
5、服务器端方面
- 使用CDN:CDN是内容分发网络,通过部署在不同地区的服务器来提高用户的下载速度,可以减少网页内容的下载时间
- 做服务器缓存
6、cookie 方面
- 减少cookie的大小:提高请求的响应速度
7、移动客户端方面
- 保持单个内容小于25KB
- 打包组件成符合文档
图片优化加载处理的方法:
- 减少文件体积大小
- 压缩优化图片大小
- 采用合适的图片格式
- 减少图片资源请求数(合并HTTP请求)
- 合成雪碧图
- 使用DataURL
- 高级方法
- 预加载
- 显性预加载:处于预加载过程时页面有明确的加载提示,比如进度条或者是Loading图标。
- 隐性预加载:先是显性预加载(钱币小图标Loding)快速地呈现部分画面(截图右部分)给用户,再通过互动(向上滑动数钱)来继续分段加载资源
- 懒加载:又称为延迟加载、按需加载。指的是图片在页面渲染的时候先不加载,页面渲染完成后在指定动作触发后再加载图片。
- 实现的原理是:
- 先将图片的实际src,记录在data-set属性中。
- 监听屏幕滚动,计算图片的Y坐标,并计算可视区域的高度height,当Y小于等于(height+scrollTop)时,图片的src的值用data-src的来替换,从而来实现图片的懒加载。
- 实现的原理是:
- 预加载