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

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

08将JavaScript和CSS置于外部

所谓的将JavaScript和CSS置于外部，就是我们说的外置JavaScript和CSS。关于JavaScript和CSS在前端页面中的使用通常有两种方式：

一种是：内联方式；

一种是：外置方式；

内联方式是指将JavaScript和CSS直接嵌入到前端页面，如以下代码：

 [head]
    [script type="text/javascript"]
        function IsEven() 
        {
            var number = document.getElementById("TextBox1").value;
            if (number % 2 == 0) 
            {
                alert(number + " is even number");
            }
            else 
            {
                alert(number + " is odd number");
            }
        }
    [/script]
[/head]

外置方式是指将JavaScript或CSS写在一个单独的文件中，后缀名为“.js”或“.css”格式，然后在HTML页面中调用这个单独的文件，如以下代码：

[head]
    [script type="text/javascript" src="ExternalJavaScript.js"][/script]
[/head]

内联JavaScript和CSS的优点如下：

1) 有效减少 HTTP 请求次数，提升前端页面性能，缓解服务器压力。

2) 浏览器加载完CSS才能渲染页面，因此可以防止CSS文件无法读取而造成页面裸奔的现象。

内联JavaScript和CSS的缺点如下：

1) 可维护性差，每天如果有需要修改内容，必须对很多页面进行修改。

2) 内联JavaScript和CSS在每次页面加载的都必须重新加载。

3) 协同开发的能力差，不方便多名开者同步工作。

外联JavaScript和CSS的优点如下：

1) 如果JavaScript和CSS被多个页面调用时，这样修改更方便，只要修改一个文件就可以。

2) 分离HTML、CSS和Javascript可以更容易操纵它们，方便协同工作。

3) 外置Javascript文件可以被浏览器缓存。

外联JavaScript和CSS的缺点如下：

1) 外置的方式增加了HTTP的请求数。

2) 浏览器要加载完CSS才能渲染页面，因此影响页面的性能。

在现实世界中使用外部文件通常会产生更快的页面，因为浏览器会缓存JavaScript和CSS文件。每次请求HTML文档时，都会下载HTML文档中内联的JavaScript和CSS。这减少了所需的HTTP请求数量，但增加了HTML文档的大小。另一方面，如果JavaScript和CSS位于浏览器缓存的外部文件中，则HTML文档的大小会减少，而不会增加HTTP请求的数量。

关键因素是外部JavaScript和CSS组件相对于所请求的HTML文档数量的缓存频率。这个因素尽管难以量化，但可以使用各种指标进行衡量。如果您的网站上的用户每个会话有多个页面浏览量，并且许多网页重复使用相同的脚本和样式表，则缓存的外部文件可能带来更大的潜在收益。

在比较内联和外置文件时，知道用户缓存外部组件的可能性的可能性很重要，通常用户在第一次访问页面时是空缓存，之后的多次后续页面查看都是具有完整缓存的。如果在访问系统时，具有完整缓存的页面占所有查看数量的比例越多，那说明外置文件的收益越高也就越有利，当然如果具有完整缓存的页面占所有查看数量的比例很低，那么内联文件的方式更有利。

如果网站中有很多页面使用相同的JavaScript和CSS，那么使用外部文件可以更好的提高这些组件的重用率，在这种情况下使用外部文件更有优势，因为当用户在页面导航时JavaScript和CSS组件已经位于浏览器的缓存中。当然反过来也很容易理解了，如果没有任何两个页面共享相同的JavaScript和CSS，重用率就会很低，当然很少有网站会出现这两种极端的情况了。

如果主页服务器知道一个组件是否在浏览器的缓存中，那么就可以在内联或使用外部文件之间做出最佳选择，当然服务器不能查看浏览器缓存中有那些内容，但可以使用Cookies做指示器，如果Cookies不存在，就使用内联JavaScript和CSS，如果Cookies出现了，则可以使用外部组件位于浏览器的缓存中，这就是我们通常说的“动态内联”。

基于以上原因通常我们建议将JavaScript和CSS置于外部。

09减少DNS查找

DNS(Domain Name System，域名系统)，万维网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，不用记住能够被机器直接读取的IP数串。通过域名，得到该域名对应IP地址的过程叫做域名解析(或主机名解析)。DNS将主机名映射到IP地址上，就像电话本将人名映射到所对应的电话号码一样，当在浏览器中输入www.baidu.com时，连接到浏览器DNS解析器返回服务器的IP地址。像百度官网的IP地址为14.215.177.38。DNS协议运行在UDP协议之上，使用端口号53。在RFC文档中RFC 2181对DNS有规范说明，RFC 2136对DNS的动态更新进行说明，RFC 2308对DNS查询的反向缓存进行说明。

然而，DNS解析也是存在开销的，通常浏览器查找一个指定主机名的IP地址，需要花费20到120ms，在DNS解析完成之前，浏览器不能从主机名那里下载任何东西。DNS的查找有以下几个步骤：

1) 浏览器检查自身缓存中有没有被解析过的这个域名对应的IP地址，如果存在解析就结束了。

2) 如果浏览器缓存中命中，即没有找到，那么浏览器会检查操作系统缓存中有没有对应的已解析过的结果。在windows操作系统

C:\Windows\System32\Drivers\etc

路径下有一个hosts的文件，在这里如果指定了一个域名对应的IP地址，那么浏览器会首先使用这个IP地址进行访问。

3) 如果前面两步都没有命中域名，那么才会请求本地的域名服务器(LDNS)来解析这个域名，大约80%的域名解析会到这里完成。

4) 如果LDNS仍然没有命中，就会直接跳到Root Server域名服务器请求解析。

5) Root Server域名服务器会返回一个查询域的主域名服务器给LDNS。

6) 此时LDNS再发送一个请求给上一步返回的主域名服务器。

7) 接受请求的主域名服务器查找并返回这个域名对应的Name Server的地址，Name Server是网站注册的域名服务器。

8) Name Server根据映射关系表找一目标IP，返回给LDNS。LDNS缓存这个域名和对应的IP。

9) LDNS把解析的结果返回给用户，用户根据TTL值缓存到本地系统缓存中。

DNS解析的响应时间依赖于DNS解析器、它所承担的请求压力、客户端与服务器的距离和带宽速度。

TTL(Time To Live)表示查找返回的DNS记录包含的一个存活时间，表明记录可以被缓存多久，这个值告诉客户端可以对该记录缓存多久。过期则这个DNS记录将被抛弃。尽管操作系统缓存会考虑TTL值，但浏览器通常忽略该值，賆设置它自己的时间限制。并且浏览器对缓存DNS的记录数量也是有限制的，而不管缓存记录时间，如果用户在短时间访问了很多不同域名的网站，较早的DNS记录将被丢弃，必须重新查询该域名。

不同的浏览器对于DNS缓存有所不同，

Internet Explorer的DNS缓存在

[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings]键下由三个设置控制：

"DnsCacheTimeout"=30分钟

"KeepAliveTimeout"=1分钟

"ServerInfoTimeOut"=2分钟

这表示如果DNS服务器TTL值小于30分钟的话，对浏览器进行DNS查找的频率产生的影响很小。

对于FireFox浏览器在about:config中设置就可以：

network.dnsCacheEntries=400

network.dnsCacheExpiration=60

network.http.keep-alive.timeout=115

在DNS解析过程中，减少唯一主机名的数量也呆以缩短DNS解析时间，如果客户端的DNS缓存为空时，DNS查找的数量与Web页面中唯一主机名的数量相等。但是减少唯一主机名的数量有可能减少页面中发生的并行下载量。减少并行下载可能会增加响应时间。我的准则是将这些组件分成至少两个但不超过四个主机名。这在减少DNS查找和允许高度并行下载之间取得了很好的折衷。

综上所述减少DNS查找通常可以提高响应性能。

下期继续分享调优规则，敬请关注！