美文网首页
前端调优23大规则(Part 3)

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

作者: 川石教育 | 来源:发表于2022-06-22 10:45 被阅读0次

    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

    相关文章

      网友评论

          本文标题:前端调优23大规则(Part 3)

          本文链接:https://www.haomeiwen.com/subject/ikjevrtx.html