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,对自己写的网站进行具体地性能分析,生成性能优化报告。

  • 相关阅读:
    2019 SDN上机第5次作业
    hdu 2553 N皇后问题(递归)
    百练oj 2766 最大子矩阵和
    POJ 1664 放苹果
    POJ 3617 Best Cow Line(贪心)
    HDU 2013 ACM/ICPC Asia Regional Hangzhou Online ------ Zhuge Liang's Mines
    HDU 4712 Hamming Distance (随机算法)
    HDU 1171 Big Event in HDU
    HDU 1085 Holding Bin-Laden Captive!
    HDU 1028 母函数
  • 原文地址:https://www.cnblogs.com/luoyihao/p/12377219.html
Copyright © 2011-2022 走看看