• 读《高性能建站指南》(下)


    第七条规则:避免CSS表达式的应用。个人对CSS表达式缺少应用,所以没有直接体会,但是大概的意思就是使用CSS表达式进行页面样式进行修改时,可能会造成表达式的多次重复性运行,导致执行效率的降低。例如,使用CSS表达式调用javascript函数对DOM进行动态操作。

    第八条规则:使用外部Javascript和CSS。使用内联的Javascript和CSS文件确实可以提高文件的加载速度,应用减少了HTTP请求,不需求并行加载。但是,使用外部Javascript和CSS文件可以利用缓存,较少网络传输。目前使用大量JS进行逻辑处理的项目很多,外部的js和CSS文件也提高了代码的复用率。当然,书中还是给出了同时使用内联和外部两种文件同时加载的方式,就是使用DOM操作动态重接link和scrip节点,并下载CSS文件和js文件,书中帮这种方式称为加载后下载(Post-Onload Download),我个人也曾用这种方式实现过对js文件的动态模块化加载。

    第九条规则:减少DNS查找。有网址转换为确定的IP会经过浏览器和操作系统中对DNS的缓存,通过设置DNS缓存的存活时间(Time-To-Live,TTL)、http的keep-alIve,可以减少DNS的查找,提高请求响应效率。同时,使用keep-alive会计算content-length,对于不便于计算content-length的场景,keep-alive可能需要关闭。

    第十条规则:精简JS文件。这点区别于压缩组件(规则四)的地方就是删除文件中的无用代码(注释、空白),书中提交了JSmin的使用。与精简对应的是混淆(书中提到DOJO Compressor),混淆会对代码的变量等进行替换,也可以起到精简的效果,但效果并不明显。混淆还会加大工作量(部署、调试),所以书中建议只精简不混淆。上一篇文件中提到了YUI Compressor,更确切一下应该是一个对js和css进行精简和混淆的工具。

    第十一条规则:避免重定向。书中给出了重定向对性能损害的介绍,并给出了部分重定向使用场景的替代方案,影响比较深刻的是使用referer跟踪出站的信息。

    第十二条规则:移除重复脚本。重复脚本会增加http请求。

    第十三条规则:配置ETag。ETag是If-Modified-Since的增强(If-Modified-Since只能精确到秒),会在http头中增加If-None-Match信息。但是,当在集群环境下ETag会导致缓存失效,因此需要根据实际情况开始或关闭ETag。

    第十四条规则:使Ajax可缓存。GET方式的Ajax请求是可以缓存的,所以是适当的开启Ajax请求缓存,以减少http请求。如Extjs中在reque方式中配置disableCaching : false,就可以缓存get方式的ajax请求。

    第十五章中对多个网站的前端性能进行评测,介绍了YSlow工具,可以集成到firebug中,当然你也可以选择谷歌的PageSpeed。

    除了以上四条规则,雅虎还有更丰富的前端优化规则。(这本书的作者也是雅虎的工程师。)

    总结:个人觉得,压缩、精简、缓存这三个方面的应用对于自己中非专业的前端非常重要,也更便于实施,其中缓存尤其重要。使用缓存,需要理解http中相关的header、相应指令的含义、缓存过程中的逻辑处理过程、浏览器对缓存影响(如F5、CRTL+F5、地址栏回车、后退等)。

  • 相关阅读:
    bootstrap:按钮,下拉菜单
    js:indexOf()方法
    js:object.offsetHeight属性
    css y轴溢出滚动条,x轴溢出显示
    datatables使用方式
    ajax同步与异步的坑
    IntelliJ IDEA 快捷键说明大全(中英对照、带图示详解) (转载)
    无法解析此远程名称: 'www.***.com' 解决办法 请求因 HTTP 状态 417 失败 (转载)
    Windows下安装MongoDB3.6.5 (转载)
    解决内部存储空间紧张,不加载桌面壁纸,桌面壁纸显示
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/2998477.html
Copyright © 2020-2023  润新知