Web前端性能优化的几种方法，值得你看看

减少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，快速升职加薪，走上人生巅峰。