zoukankan      html  css  js  c++  java
  • Yahoo军规的学习

    为了提高前端网页加载速度,我们对Yahoo军规进行学习。

    一、尽可能减少HTTP请求。

    上图中,左边一个css文件或js文件即是一次HTTP请求,但是通过图片合并、js合并、css合并,使得HTTP请求减少至4次。

    二、使用CDN。

    CDN即内容分发网络,即使用多个分布在各处的服务器备份资源。用户访问网站时,会自动导航到离用户最近的服务器节点。阿里云提供了CDN服务,需要花钱购买。

    三、添加Expire或cache-control头。

    这两个都是利用本地缓存。若是资源没有过期,则用户访问的仍然是本地缓存的资源。

    四、启用Gzip压缩。

    服务器需要对Gzip压缩进行配置,浏览器自动会对资源进行Gzip解压。若是先对js文件进行压缩,然后再使用Gzip压缩,则会大大减少js的大小。

    五、将css放在页面做上面,将js放在页面最下面。

    由于浏览器解析页面是从上至下解析的,若在后面加载css则会导致页面重画,出现页面闪烁。

    js如果放在页面最前面,则会导致js执行花费大量时间,影响页面加载速度。

    六、避免使用CSS表达式

    上图使用了CSS表达式,即expression()。CSS表达式在鼠标移动等操作时会多次计算,很浪费浏览器资源。

    七、将CSS和JS放在页面外部

    由上图可知,css和js放在页面外部的优点多于放在内部,因此大多数页面都应如此做。

    但是,若样式只应用于一个页面、脚本和样式特别少、页面很少被访问到的情况下,css和js写在页面内部更好。

    八、减少DNS查询次数

    在输入网址访问时,DNS会把域名转换为IP地址,大约需要20ms,然后再访问IP地址。对此,浏览器有各自的DNS缓存时间,IE是30分钟,FIrefox和Chrome是60s。

    缓存时间长,则减少DNS查询次数。缓存时间短,则能及时检测网页变化。我们把网站资源进行单域或多域选择时,需要考虑这一点。选择多域时,切记不可过多。

    九、压缩css和js

    压缩css和js后,下载速度变快。

    十、避免重定向

    重定向分为永久重定向(301)和临时重定向(302),这对浏览器来说差异不大,都需要再次请求新地址,从而降低网站加载速度。

    但是,搜索引擎会定时爬网络,遇到301会智能地只收录新地址,但是遇到302我们还是得从旧地址跳到新地址。

    十一、移除重复的脚本

    重复的脚本浏览器会执行多一遍,导致逻辑错误并延长页面加载时间。

    十二、配置实体标签

    实体标签ETag,即是Entity Tag,需要服务器端配置。若用户请求时,浏览器和服务器的ETag一致,则说明资源未修改(304),则可以直接使用本地缓存的资源,减少传输资源带来的网页加载延迟。

    不同服务器(IIS、Apache、Nginx)配置ETag的方式不一样。

    十三、使用Ajax缓存

    Ajax即Asynchronous js and xml,即是不重新刷新页面便能与后台交换数据,实现局部更新的技术。

    POST请求不可缓存,每次都执行。POST请求的参数也可以放在url上,实际传输时是自动放在请求header中。

    GET请求则会自动缓存,从而加快资源的访问速度。

    另外,网站性能优化工具Yslow插件,可配合Firefox、Firebug,对自己写的网站进行具体地性能分析,生成性能优化报告。

  • 相关阅读:
    codevs 2632 非常好友
    codevs 1213 解的个数
    codevs 2751 军训分批
    codevs 1519 过路费
    codevs 1503 愚蠢的宠物
    codevs 2639 约会计划
    codevs 3369 膜拜
    codevs 3135 River Hopscotch
    数论模板
    JXOJ 9.7 NOIP 放松模拟赛 总结
  • 原文地址:https://www.cnblogs.com/luoyihao/p/12377219.html
Copyright © 2011-2022 走看看