前端调优23大规则(Part 3)

　　一天一个关于测试知识点，5分钟内讲解你最关心的软件测试问题，今天就接着来谈谈关于软件测试中的“前端调优23大规则(Part 3)”。

　　十二、Remove duplicate JavaScript and CSS移除重复的JS和CSS

　　一般情况下很少会出现重复的JS和CSS，但在不断开发过程中也可能出现，所以如果出现重复的JS和CSS就必须删除，因为这样会添加不必要的HTTP请求数。

　　十三、Confifigure entity tags (ETags)配置ETags

　　ETag(Entity Tag 的缩写)意思是是实体标签。是HTTP1.1规范中新增的一个HTTP头信息，也即是请求HEAD中的一个属性。ETagHTTP响应头是资源的特定版本的标识符。这可以让缓存更高效，并节省带宽，因为如果内容没有改变，Web服务器不需要发送完整的响应。而如果内容发生了变化，使用ETag有助于防止资源的同时更新相互覆盖(“空中碰撞”)。

　　ETag语法：

ETag: W/"<etag_value>" 

ETag: "<etag_value>"

　　Last-Modifified与Etag类似。不过Last-Modifified表示响应资源在服务器最后修改时间而已。与Etag相比，不足为：Last-Modifified与Etag类似，之所以还要使用ETag是因为Last-Modifified存在一些缺点：

　　1) Last-Modifified用于标注的最后修改的时间，但其只能精确到秒，如果某个文件在1秒钟以内，被修改多次的话，Last-Modifified将不能准确标注出文件的修改时间;

　　2) 如果一些文件只是被定期的将时间修改了，而文件内容并没有任何变化时，Last-Modifified还是会认为这个文件更新了，这样这个文件就必须从服务器端重新获取，而不无法使用缓存。

　　3)如果服务器没有准确获取文件修改时间，或者与代理服务器时间不一致时，这样Last-Modifified就无法精确的判断了，但使用ETag可以准确的判断。

　　十四、Make AJAX cacheable使用AJAX可缓存

　　AJAX全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。将A JAX中处理的一些异步信息或叫“即时”信息，保存在缓存中，不要每次去异步处理时，都去调用DHMTL的元素信息。

• 　　1)Expires

　　Expires是通过判断内容是否被修改来确定是否使用浏览器缓存中的内容，如果我们知道内容何时修改，那么可以使用Expires响应头来处理。

• 　　2)Last-Modifified

　　设置这个标记会通知浏览器使用if modifified-since头，通过GET请求来检查其本地缓存相关信息，如果 数据不需要更新，服务器将使用HTTP304状态码来响应此请求，如果需要更新则服务器返回200的状态码。

• 　　3)Cache-Control Cache

　　Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、 max、stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、nostore 、no-transform、must-revalidate、proxy-revalidate、max-age。如果允许应该被设置 为“public”，使其它用户可以在中间代理和缓存服务器上存储和共享数据。Public指示响应可被任何缓存区缓存。

　　十五、Use GET for AJAX requests对AJAX使用GET请求方式

　　当AJAX将客户端请求发送到服务器时，我们会使用XMLHttpRequest对象的open()和send()方法。

open(method,url,async)

例：xmlhttp.open("GET","chuansinfo.txt",true)

send(string);

例：xmlhttp.send();

　　GET与POST请求的区别

　　GET与POST请求工作的原理有所不同，GET是创建好TCP连接后，直接将数据一次性发给到服务器;POST是创建连接后先发送头文件的内容，再发送数据内容，分为两个步骤，所以理论上来GET会比POST的响应会更短。

　　为了让AJAX更好的缓存，我们一般建议对于AJAX的内容使用GET请求方式来发送。

　　十六、Reduce the number of DOM elements减少DOM节点数

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

　　HTML DOM树

　　如果需要对元素的属性进行修改，那么javascript就必须对这个结构树进行遍历，如果这个结构的节点越多，那么遍历的时间就会越长。所以正常情况下我们希望这个DOM节点尽量少，这样可以节约遍历的时间。

　　使用以下命令可以获取到DOM节点数。　　

document.getElementsByTagName('*').length

　　减少DOM数的方法通常有以下几种：

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

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

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

　　4. 最小化DOM深度。

　　十七、Avoid HTTP 404 error避免404错误

　　当您单击链接，但浏览器并不能向服务器获取所需要的站点信息时，而是弹出一个错误，指示所请求的页面不可用。那么服务器将返回类似于404的错误码。

　　404表示我们需要访问的资源在服务器端无法找到，当资源在服务端无法找到时，一般会返回以下提示信息：

• 　　? 404 Error

• 　　? 404 Not Found

• 　　? Error 404

• 　　? The requested URL [URL] was not found on this server

• 　　? HTTP 404

• 　　? Error 404 Not Found

• 　　? 404 File or Directory Not Found

• 　　? HTTP 404 Not Found

• 　　? 404 Page Not Found

　　之所以不希望出现404的错误，是因为404错误其实不会有任何响应信息返回，但会浪费建立TCP连接和发送请求数据的时间。

　　一般来通常以下情况会导致404错误出现：

　　1. 删除或移动 URL或其内容(如文件或图像)。

　　2. URL被写入错误(在创建过程中或重新设计)，连接不正确，或输入到浏览器中不正确。

　　3. 网站的服务器未运行或连接已中断。

　　4. DNS服务器转换为IP。

　　5. 输入的域名不存在。

　　十八、Avoid empty src or href避免空链接

　　一般描述链接的属性是使用src或href来实现，所谓的空链接就是链接后面的属性为空，没有具体的值。

　　通常出现空链接的写法有两种情况：

一是src后面没有填值 

<img src="" > 

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

var img = new Image(); 

img.src = "";

　　空链接对性能产生的影响主要包括：

　　1.浪费发空链接请求的时间

　　2.浪费流量，流量会增加

　　3.损失cookie