服务器时间怎么没有了？我来告诉你答案前端调优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语法：

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()方法。

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节点数。

减少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来实现，所谓的空链接就是链接后面的属性为空，没有具体的值。

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

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

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

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

3.损失cookie