zoukankan      html  css  js  c++  java
  • Yahoo14条军规-前端性能优化

    1、尽可能减少HTTP请求数

    什么是http请求?
    enter description here

    2、使用CDN(内容分发网络)

    什么是CDN?
    enter description here
    enter description here

    3、添加Expire/Cache-Control头

    Expire
    enter description here
    Cache-Control
    enter description here

    4、启用GZip压缩

    把文件先放在服务器上压缩一下,然后再传输,这样可以显著减少文件传输的大小。传输完毕后,浏览器会进行解压。

    5、将CSS放在页面最上面

    在IE下把CSS放到页面底部后,会禁止网页内容的顺序显示 ,在低网速情况下,用户打开网页,只能看到空白页。
    而Firefox下 ,当CSS下载后,页面部分元素可能需要重绘,这就导致闪烁的问题。效果如下图:
    enter description here

    6、将Scripts放在页面最下面

    7、避免在CSS中使用Expressions

    什么是CSS Expressions?
    CSS Expressions俗称CSS表达式,是用来把CSS属性和JavaScript表达式关联起来,就是说CSS属性后面可以是一段JavaScript代码(表达式),CSS属性的值等于JavaScript表达式计算的结果。
    因为CSS Expressions计算频率太高,不仅仅是在页面显示和缩放的时候,乃至于页面滚动和移动鼠标的时候,都会重新计算一次。例子如下:
    enter description here

    8、把JS和CSS都放到外部文件中

    比较提取出来和放在页面内的两种方式:
    enter description here
    enter description here

    9、减少DNS查询

    比如当我们要访问“www.a.com” 时候,计算机是不知道这个网址是什么,在哪里,它必须通过一种转换机制,才能到达这个页面。这个机制能把“www.a.com” 对应到一个IP地址,一个计算机理解的地址。(计算机只认IP地址,它不懂域名是什么。),然后通过该IP地址对应到“www.a.com” 这个网站。
    enter description here
    如果有很多的查找过程,对我们打开网站的性能肯定有影响,所以我们要对这个过程进行缓存,缓存之后,可减少查找过程。

    10、压缩JS和CSS

    • 去除不必要的空白符、格式符、注释符

    • 简写方法名、参数名压缩JS脚本

    11、避免重定向

    重定向:用户的原始请求被重新转向到了其他请求。

    12、移除重复引用脚本

    13、配置实体标签ETag

    ETag使用特殊的字符串来标识某个请求资源版本。
    enter description here
    当浏览器向服务器请求资源时,服务器会进行比较,如果两边的ETag一致,这就意味着该资源没有被修改过,和以前是一模一样的,这时服务器会返回304码告诉浏览器,对比一致,可以使用本地缓存的版本。

    14、使用Ajax缓存

    GET和POST比较
    enter description here
    POST请求每次都发送给服务器执行,不被缓存。GET请求除非你给它指定了一个不同的地址,否则同一地址不重复执行,可以被缓存。
    最后推荐网站性能分析工具YSlow。


    参考资料:慕课网-Yahoo军规

  • 相关阅读:
    计算机网络——TCP如何做到可靠数据传输
    计算机网络——TCP的流水线传输(超详细)
    计算机网络——TCP的拥塞控制(超详细)
    计算机网络——TCP的三次握手与四次挥手(超详细)
    计算机网络——多路复用与多路分解
    转:资源 | 我爱自然语言处理
    bootsect及setup
    python默认编码设置
    实例分析C程序运行时的内存结构
    matlab常用目录操作
  • 原文地址:https://www.cnblogs.com/xiayi/p/5960842.html
Copyright © 2011-2022 走看看