网站代码优化

Forest10 发布于2019-08-28 18:28 / 1517人阅读

摘要：将面试整理的网站优化资料记一记，针对移动端的代码说的。而第三种里面在移动端里使用号比数组快很多，在端得看浏览器，不同浏览器不同版本对这两种方式的优化不同。尽量减少对的操作这个例子需要动态添加，动态删除，每个标签有事件。

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

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 += "" + lis[i] + "";
    } else {
        html += "" + lis[i] + "";
    }
}
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

云服务器私有云优化网站代码网站优化代码网站代码优化怎么优化网站代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111250.html

【译】如何对网站进行优化提速？

摘要：对于网站，建议使用插件来自动优化网站的图片。避免重定向重定向是对网站访问者的一种极大的刺激。另一种选择是将这些代码内嵌到网站上，同时需要确保的优化。那么，又该如何减少请求请见以下步骤减少网站上的对象数量。快速的页面加载对提升搜索引擎排名、网站转化率和整体的用户体验是非常重要的。网站页面的加载速度也是衡量网站性能的一个重要因素。如果网站不是以最好的性能在运行，迟缓的加载会让你在...

JessYanCoding 2019-05-29 18:00 评论0 收藏0
浅聊SEO

摘要：白帽是搜索引擎提倡的，也是一种良性竞争。这当然不被搜索引擎提倡，甚至于说是头疼的，还需要想办法如何在搜索结果内剔除掉那些页面。影响搜索引擎对网站排名的合理和公正性。扁平化目录层次网站层次既然要清晰，目录最好不要超过三次分级。 SEO【search engine optimization】即搜索引擎优化。搜索引擎对用户来说，就是搜东西，那他是怎样展示关键词的相关东西呢？这就需要有人每天...

yedf 2019-08-02 16:14 评论0 收藏0
提高网站加载速度的一些小技巧

摘要：各种各样的编码错误可能会导致网站加载速度非常慢，从而用户离开的网站。同时提高网站加载速度也是提高网站排名的必要步骤之一。翻译：疯狂的技术宅原文：https://likegeeks.com/improve... 为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争，拥有一个吸引人的网站可以帮助你脱颖而出。研究表明，如果加载时间超过3秒，会有 40％的用户放弃访问你的网站...

baukh789 2019-08-23 16:12 评论0 收藏0
前端开发中的SEO

摘要：它能够让用户了解到当前的位置，了解网站内容的组织方式。标记应该放在文本中间，即使用替代突兀的标记。表格标题季度销售额强调网页中的重要内容应该使用标记，避免使用标记对搜索引擎不友好。什么是SEO SEO由英文Search Engine Optimization缩写而来，中文意译为搜索引擎优化。SEO是指从自然搜索结果获得网站流量的技术和过程，是在了解搜索引擎自然排名机制的...

LeexMuller 2019-08-01 14:48 评论0 收藏0
网站优化之301 转向， Apache应注意这几点

摘要：网站优化之转向中应该怎么设置转向呢今天冬镜就为大家一一讲解转向中会遇到的情况，并给予相对应的解决方案，主要以来演示。网站优化之转向，应注意这几点其中表示开始，或者说从根目录，也代表当前的域名的意思，反正你理解是那一回事就行。今天一位站长朋友咨询301问题，本来以为很简单的，没注意到其中的细节，从而导致冬镜花费了一点时间才解决了。现在给大家分享出来，希望以后的站长朋友再遇到此类问题，就可以避免...

Tecode 2022-06-28 19:00 评论0 收藏0
我是如何优化网站首页性能的

摘要：分位值解释分位值目前是我们看性能指标的一个重要参考点。为什么是，因为跟进高的优化经验，分位值的数据取点最能放大问题。分位值下，一个散文件可能就是的影响。最近接到一个任务，首页性能优化。目标：95分位值下看到页面框架主体内容6s（优化前10s左右），优化提升40% 看到操作详细内容9s（优化前12s左右），优化提升25%。侧面看出我们系统的庞大程度吧，这个不值得骄傲，项目...

kun_jian 2019-08-19 17:43 评论0 收藏0