涨薪技术|0到1学会性能测试第79课-23大前端性能调优规则(七)

前端调优规则一共23条，前面的推文我们掌握了一部分前端调优的规则，今天给大家继续分享。后续文章都会系统分享干货，带大家从0到1学会性能测试，另外还有教程等同步资料，+ V(flyhappy111)领取即可。

16减少DOM数

HTML DOM(HTML Document Object Model)是专门适用于HTML/XHTML的文档对象模型，定义了访问和操作HTML文档的标准方法，通常我们也可以将HTML DOM理解为网页的API。HTML DOM将网页中的各个元素都看作为对象，这样可以让网页中的元素被计算机语言获取或者编辑。

DOM是一种与浏览器、平台、语言无关的接口，DOM是以层次结构组织或信息片断集合，HTML DOM把HTML文档呈现为带有元素、属性和文本的树结构(节点树)。HTML DOM树如图13-13所示

通过HTML DOM，树中的所有节点均可通过JavaScript进行访问。所有HTML元素(节点)均可被修改，也可以创建或删除节点。

节点分父节点(parent)、子节点(child)、同胞节点(sibling)，节点树中的节点彼此拥有有层级关系，父节点拥有子节点，同级的子节点被称为同胞(兄弟或姐妹)。

1)在节点树中，顶端节点被称为根(root)

2)每个节点都有父节点、除了根节点之外，根节点是没有父节点的

3)一个节点可拥有任意数量的子

4)同胞是指拥有相同父节点的节点

节点节点之间的关系如图13-14所示

JavaScript或其他语言会通过HTML DOM对HTML中的元素进行访问，包括修改节点的属性值、插入新的节点、删除节点等操作。那么为了提高性能，前端页面的HTML DOM则应该越小越好，如果HTML DOM过多，这些会导致以下几个方面的问题：

1) HTML DOM数越多，越复杂，意味着页面加载时下面的字节数就越多;

2) HTML DOM数年越多，那么遍历和查找元素的时间就会越长;

需要获取页面中的DOM数，可以在Firebug的控制台中，输入以下命令。

document.getElementsByTagName('*').length

雅虎团队建议DOM的数量不要超过700，但现在的页面越来越复杂，一般类似雅虎这类资讯类的网站都远超过700。下面是几个我们比较熟悉的网站的DOM数。

所以在前端开发时应该尽量降低DOM数，减少DOM数的方法通常有以下几种：

1. 避免不正确地使用服务器控件;

2.减少不必要的页面内容;

3.如果数据量大，可以考虑分页，或者按需加载;

4.最小化DOM深度;

17避免空链接

关于空链接的通常会有两种方式，第一种模式是直接的HTML的空链接。

<img src="" >

第二模式是使用JavaScript动态的设置src属性。

var img = new Image();
img.src = "";

这两种模型写出来的空链接的影响是一样的，但是对于不同的浏览器来说会有所不同。

1) Internet Explorer向页面所在的目录发出请求。例如，如果您运行的页面http://192.168.40.128:8091/ECShop_V2.7.3_UTF8_release0411/upload/test1.html

由于空链接找不到图片，所以会向

http://192.168.40.128:8091/ECShop_V2.7.3_UTF8_release0411/upload发送请求来查找图片。HTTP请求如图13-15所示

2)Firefox和Chrome会向实际页面提出请求。例如运行的页面http://192.168.40.128:8091/ECShop_V2.7.3_UTF8_release0411/upload/test1.html，如果使用Firefox或Chrome浏览器就只会向这个页面发送请求，请求的是test1.html文档，图片的请求会被忽略，如图13-16所示

所以当页面中存在图片空链接时，可能会导致以下两个问题：

第一：可能出现流量峰值。例如上面的例子，访问http://192.168.40.128:8091/ECShop_V2.7.3_UTF8_release0411/upload/test1.html页面，如果这个页面中包含空图片链接，那么就会对根目录进行再次发送请求，这样相当于访问服务的流量增加了一位。

如果是一个小型网站，访问量不是很多的话，请求从1000变成2000这样服务器也不会出现太大问题，但如果网站每天的流量很大时，上百万的流量时，那么由于图片空链接导制流量成倍增长时，那么对服务器的的性能就会产生很大的影响。

第二：用户状态可能受损。如果您通过cookie或其他方式跟踪请求中的状态，则可能会破坏数据。即使图像请求未返回图像，浏览器也会读取并接受所有标头，包括所有cookie。虽然其余的响应被丢弃，但可能已经造成了损害。

正常情况下不会写出图片空链接的情况，但是如果出现以下情况就可能出现图片空链接的情况，如以下代码：

<img src="$imageUrl" >

如果$imageUrl是由其它代码调用而已来，并且$imageUrl的代码存在问题，那么就会出现图片空链接的现象。

当然要解决图片空链接带的问题，那么最好的方法显然是完善代码，在代码中消除页面中的违规代码。如果我们不能保证代码中是否会出现图片空链接的情况，那么可以尝试在服务器上检测空链接并中止任何进一步的执行，下面是一个PHP的检测代码。

<?php
    $referrer = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : '';
    $url = "http://" . $_SERVER['HTTP_HOST']?  . $_SERVER['REQUEST_URI'];
    if ($referrer == $url){
        exit;
    }
?>

上面代码的目的是检测页面是否引用自身，如果有引用自身，那么就立即退出，并阻止服务器执行任何其他操作。另一种选择，就是记录已发生的情况，并进行分析。

尝试在服务器上检测此类请求的另一种方法是查看HTTP Accept标头。除IE之外的所有浏览器都会Accept为图像请求发送不同的HTTP 标头，而不是HTML请求。例如，Chrome会Accept为HTML请求发送以下标头，如以下Accept请求。

Accept: application/xml,application/xhtml+xml,text/html;q=0.7,text/plain;q=0.3,image/png,*/*;q=0.6

Firefox和Chrome浏览器都会使用Accept为HTML请求发送一些内容以上面大致相同的标头，这样可以去判断我们要的内容是否存在，例如判断“image/png”的内容，但是对于IE浏览器只会发送所有请求中最后一个请求的Accept头的内容，这样就无法在服务器上区分它。对于IE以外的浏览器，您可以使用以下内容：

<?php
    if (strpos($_SERVER['HTTP_ACCEPT'], 'text/html') === false){
        exit;
    }
?>

之所以会出现图片空链接的问题是由于浏览器中执行URI解析方式引起的，在RFC3986统一资源标识中定义，当遇到空字符串作为URI时，浏览器解析时会认为是相对URI。

这其实是浏览器的一个严重缺陷，当然浏览器都在尝试不断的解决这个问题。在HTML5中添加了标记src属性的描述，以指示不要再额外的增加其它的请求。