网站代码优化

2024年3月18日 142次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞