网站代码优化

将面试整理的网站优化资料记一记，针对移动端的代码说的。

html

1: 标签嵌套层级不要太深，标签尽可能简洁化.如懒加载后将data属性去除

2: DNS预先处理 dns-prefetch，若是一个页面有多个不一样地址的引用，则DNS预解析颇有用。页面预先处理link标签的prefetch

3: 大量图片的懒加载策略，以及一些元素利用ajax在onload后实行延迟加载

4: 对一些js的异步加载

css

1: 嵌套层级不要太深，通常三层最多了。这个主要仍是看团队项目结构，命名规范对这个有很大影响，互有取舍，是命名长一点不会有重复仍是命名方便一点嵌套深一点

2: css解析从右向左，因此最右边的应该是相对少一点的，好比.on.li_lick 就比.li_click.on要好（若是.on不少的话）

3: html用了base64的img的话，并不会缓存起来，能够将这个base64的图片放在css文件里，css会缓存，图片就缓存起来了

4: 尽可能不用后代元素选择器，最右边的一层不要是标签，尤为是像div这种很是经常使用的标签

5: 多使用css的继承，而不是每一次都书写时都所有重写一遍。写多个css属性时，能连在一块儿写的就连在一块儿写。如:background: #fff url() center center no-repeat

javascript

以一个for循环来构建DOM文档举例（使用jquery）

// var lis = document.getElementsByTagName("li")
var lis = [1, "2", "3", "4"];
var ulObj = $("ul");
var lisLength = lis.length;
var html = "";
for (var i = 0; i < lisLength; i++) {
    if (lis[i] === 1) {
        html += '<li class="number">' + lis[i] + '</li>';
    } else {
        html += '<li>' + lis[i] + '</li>';
    }
}
ulObj.html(html);

01. 缓存变量。$("ul") 使用jquery这种语句记得将其存在变量里，每一句$()都是很是重的函数，能尽可能少用就少用。

02. 使用诸如getElementsByTagName这类LIVE类型的collections时，更要注意对其length的缓存

03. var html = ""。 赋值时，用字面量的方式

04. for 循环。实践证实，递减循环比递增循环要快那么一点点。

05. 对于大型的for循环，可能致使执行时页面卡住，能够考虑使用数组分块技术将循环分割成多个循环一部分一部分的执行

06. for循环里的条件判断lis.length必定要缓存在变量里，否则每一次都要去查询一次长度。

07. 构建DOM结构。通常有三种方式：
①： 使用节点关系createElement，appendChild这些去构建生成节点关系。
②：使用文档片断documentFragment的方式。
③：直接用字符串拼接：这个又分为两种，直接+号拼接和数组join拼接。第三种速度效率最高。而第三种里面在移动端里使用+号比数组快不少，在PC端得看浏览器，不一样浏览器不一样版本对这两种方式的优化不一样。

08. 插入到DOM文档：使用innerHTML的方式比appendChild要效率高。综上,移动端仍是使用+号拼接字符串最后使用innerHTML的方式

09. 插入到DOM中时，必定要将插入结果放在变量里，在for循环结束后插入，千万不能在for循环中执行插入操做，会形成大量的重绘重排。尽可能减小对DOM的操做

10. 这个例子须要动态添加，动态删除，每一个li标签有click事件。若是每次插入到DOM后给li添加click事件，那么删除时就要清除注册在li上的click事件。很是麻烦。因此采用事件委托的机制，将事件绑定在ul上，经过target属来判断

11. 条件判断： == 与 ===，==要进行类型转换比较，多了一个步骤，效率低

---

12. 使用直接函数，而不是与之等同的函数，好比$.ajax(),其余$.get()等最终都是调用$.ajax()，多余的步骤多余的调用必然致使效率相对低

13. 选择器： 使用原生的选择器必定是最快的getElementById(),getElementsByTagName()这些，由于是用编译语言写好的方法。因此jquery里$("li")标签选取器的效率是很高的，因此$("li .my_li")这样写比$(".my_li")效率要高

14. 善用事件委托：若是有许多相似的结构要绑定事件，都利用事件冒泡的机制，在上层元素上绑定事件

15. 将一些多条件判断赋值语句用数组来作，好比：

switch(a) {
    case 0:
        result = "一";
        break;
    case 1:
        result = "二";
        break;
    }

改为：

var arr = ["零", "一"];
result = arr[a]

16. 对于有复杂动画的模块，尽可能用定位使其脱离文档流。利用css3实现的动画，调用一下translate3d(0， 0， 0)或其余的的3d变换，就会调起硬件加速，这个页面其余动画就都会有硬件加速的效果了。要考虑低端机型的话慎用

17. 函数尽可能简单，少用闭包，嵌套的对象成员也会影响性能，总之结构尽可能简单，能少一层就少一层

18. 对于很是频繁调用的函数，如scroll触发的函数，能够考虑使用函数节流，debounce，throttle