性能优化的原则是什么？
一是多使用内存和缓存，
二是减少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