网站代码优化

2024年1月3日 140次阅读 来源: zzzddd

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

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

    原文作者：zzzddd
    原文地址: https://segmentfault.com/a/1190000004223993
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞