前端性能优化
性能优化的原则是什么?
一是多使用内存和缓存,
二是减少CPU计算,减少网络,减少I/O.
那身为前端人员,我们应该从哪入手呢?
一是在加载页面和静态资源的时候,
二是页面渲染时
具体方案如下
一 资源压缩合并,尽量减少 HTTP 请求
1.合并脚本跟样式文件,可以把多个 CSS 文件合成一个,把多个 JS 文件合成一个。
2.CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位,把多个图片合成一个图片。
二 使用浏览器缓存,缓存的分类,缓存的原理
在用户浏览网站的不同页面时,很多内容是重复的,比如相同的JS、CSS、图片等。如果我们能够建议甚至强制浏览器在本地缓存这些文件,将大大降低页面产生的流量,从而降低页面载入时间。
根据服务器端的响应header,一个文件对浏览器而言,有几级不同的缓存状态。
1、服务器端告诉浏览器不要缓存此文件,每次都到服务器上更新文件。
2、服务器端没有给浏览器任何指示。
3、在上次传输中,服务器给浏览器发送了Last-Modified或Etag数据,再次浏览时浏览器将提交这些数据到服务器,验证本地版本是否最新的,如果为最新的则服务器返回304代码,告诉浏览器直接使用本地版本,否则下载新版本。一般来说,有且只有静态文件,服务 器端才会给出这些数据。
4、服务器强制要求浏览器缓存文件,并设置了过期时间。在缓存未到期之前,浏览器将直接使用本地缓存文件,不会与服务器端产生任何通信。
我们要做的是尽量强制浏览器到第四种状态,特别是对于JS、CSS、图片等变动较少的文件。
三 非核心代码异步加载
四 使用CDN 让资源加载更快
五 预解析DNS
六 将样式文件放在页面顶部,将脚本放在底部
七 图片的懒加载
八 减少DOM查询,对DOM 查询做缓存
九 减少DOM操作,多个操作尽量合并在一起执行
var oFragmeng = document.createDocumentFragment();
for(var i=0;i<10000;i++) {
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
//先附加在文档碎片中
oFragmeng.appendChild(op);
}
//最后一次性添加到document中
document.body.appendChild(oFragmeng);
十 事件节流
$(document).ready(function() {
var timer = 0;
$(window).scroll(function() {
if (!timer) {
timer = setTimeout(function() {
checkScrollPosition(); timer = 0;
}, 250);
}
}).trigger('scroll');
});
十一 尽早执行操作(如DOMContentLoaded)
-
解析HTML结构。
-
加载外部脚本和样式表文件。
-
解析并执行脚本代码。
-
DOM树构建完成。//DOMContentLoaded
-
加载图片等外部文件。
-
页面加载完毕。//load