减少DOM元素的数量
网页在渲染的过程中，会根据HTML元素去生成DOM树，然后绑定上特定的CSS样式，这就意味着页面上的DOM元素越多，就会消耗越多的渲染时间，因此应该尽可能的减少DOM元素的数量。
但是一个页面的DOM元素多少为多，还不好判定。通过以下代码可以查看一个页面中所有元素的数量
获取页面所有元素
查看了以下Google的主页面，页面看起来很简洁，不过里面也有300多个元素
Google主页面元素个数
根据域名划分内容
浏览器在加载内容时遵循这样一个原则：它会按照域名对下载内容进行划分，相同域名下的内容可以并行下载，但是对并行下载连接数会有所限制。
需要注意的是同一个网页下请求的不同域名不应该太多，因为这会造成DNS查询的问题。
一般网站的设计会选择将静态资源放在static.example.com域名下，动态内容放在www.example.com域名下。我们来看下Google主页面的设计
Google主页面资源划分
减少iframe的数量
使用iframe既有利也有弊
优势
1.最常见的就是页面加载广告，使用iframe可以和页面并行加载，不会阻塞主页面
2.浏览器会对iframe进行安全沙箱保护，保证内容安全性
弊端
1.iframe的加载会阻塞主页面的onload事件
可以通过以下的方法去解决阻塞主页面的onload事件的问题
解决阻塞主页面onload问题
2.iframe与主页面共享下载连接池
在上一点中有讲到，页面对同一域名下的资源连接数有限制，而iframe与主页面是共享同一个下载连接池的，这样iframe会对主页面的连接请求进行争夺，造成主页面加载速度变慢。
虽然使用iframe也有好处，但还是应该尽量减少iframe的使用，可以使用div代替
避免404页面
在网络上，每一个HTTP请求对于性能的消耗都是昂贵的，如果发送了一个HTTP请求返回的是404，对于资源来说是一个极大的浪费。
避免404主要是针对网站开发人员来说，网站开发人员应该在上线之前进行测试，避免所有可能出现404的情况。
404错误页面
总结
今天我们又总结出了几个Web性能优化的措施，你了解了吗？
最后：“相信有很多想学前端的小伙伴，今年年初我花了一个月整理了一份最适合2018年学习的web前端干货，从最基础的HTML+CSS+JS到移动端HTML5等都有整理，送给每一位前端小伙伴，53763，1707这里是小白聚集地，欢迎初学和进阶中的小伙伴。”
祝早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。
网友评论