• 【优化】前端优化的几种常用方法(持续更新)


    雅虎军规

    雅虎35条军规

    一、有关服务器端

    1.使用CDN

      CDN工作流程如下:

    1.浏览器获得需要访问的资源的域名;

    2.通过域名解析得到该域名指向CDN的一个CNAME;

    3.为了获得IP地址,需要对CNAME进行域名解析,这时请求就会被发送到CDN的中心服务器,全局负载均衡通过预先设定的规则,同时根据用户访问的地理位置信息,把最合适的边缘服务器IP地址返回;

    4.浏览器获得IP地址后,就向边缘服务器发出请求;

    5.边缘服务器根据访问域名,首先搜索缓存,查看资源是否存在,存在则直接返回资源给浏览器,直接完成整个资源请求过程,否则就根据缓存内部的DNS解析得到资源实际IP地址(即客户的服务器IP地址),向该IP地址发起资源请求;

    6.边缘服务器向客户服务器请求资源成功后,就把该资源加入本身的高速缓存中,并把资源发送给用户。

    2.静态资源缓存

    • Cache-contral/Expires
    • 配置Etag(弱缓存)

        实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串,是web服务器用于确认缓存组件的有效性的一种机制,通常可以使用组件的某些属性来构造它。 

        ETag主要是为了解决Last-Modified无法解决的一些问题:

    1. 一些文件也许会周期性的更改,但是他的内容并不改变(仅仅改变的修改时间),这个时候我们并不希望客户端认为这个文件被修改了,而重新GET;

    2. 某些文件修改非常频繁,比如在秒以下的时间内进行修改,(比方说1s内修改了N次),If-Modified-Since能检查到的粒度是s级的,这种修改无法判断(或者说UNIX记录MTIME只能精确到秒);

    3. 某些服务器不能精确的得到文件的最后修改时间。

    • 移动端离线缓存

        manifest 文件可分为三个部分:
        (1) CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存,等价于CACHE
        (2) NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
        (3) FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面

    • LocalStorage

    二、有关网络

    1.减少http请求数量(在http2.0中没有效果)

    • 小图片css sprites
    • 组件合并

        注意合并顺序、依赖关系

    • 避免重复资源请求(上面说的静态资源缓存)

    2.减少请求带宽

    • 压缩JS、CSS

        尽可能控制DOM节点数;

        精简css、 JavaScript,移除注释、空格、重复css和脚本

    • 压缩图片
    • Gzip

        Gzip的思想就是把文件先在服务器端进行压缩,且压缩率达到85%,然后再传输,传输完毕后浏览器会 重新对压缩过的内容进行解压缩,并执行。。好处在于Gzip的支持已经很好,且爬虫可识别,压缩率达到66%-85%显著减少了文件传输的大小。另外,gzip对pdf文件的压缩效果不大,而且会浪费CPU。

    • 专门主机存静态资源(cookie优化)

      

    3.域名小且独立

      短小可以减少头部开销,因为域名越短请求头起始行的 URI 就越短。之所以要求独立,因为独立域名不会共享主域的 Cookie,可以有效减小请求头大小,这个策略一般称之为 Cookie-Free Domain;另外一个原因是浏览器对相同域名的并发连接数限制,一般允许同域名并发 6~8 个连接,域名不是越多越好,每个域名的第一个连接都要经历 DNS 查询(DNS Lookup),导致会耗费一定的时间,控制域名使用在2-4个之间。另外注意:同一静态资源在不同页面被散列到不同子域下,会导致无法利用 HTTP 缓存。

    4.使用http2.0

      所有的HTTP2.0的请求都在一个TCP链接上

      HTTP2.0所有通信都是在一个TCP连接上完成。HTTP 2.0 把 HTTP 协议通信的基本单位缩小为一个一个的帧,这些帧对应 着逻辑流中的消息。并行地在同一个 TCP 连接上双向交换消息。就好比,我请求一个页面http://www.qq.com。页面上所有的资源请求都是客户端与服务器上的一条TCP上请求和响应的!

      大多数HTTP 连接的时间都很短,而且是突发性的,但TCP 只在长时间连接传输大块数据时效率才最高。HTTP 2.0 通过让所有数据流共用同一个连接,可以更有效地使用TCP 连接,让高带宽也能真正的服务于HTTP的性能提升。

      同时,单链接多资源的方式,使到至上而下的层面都得到了好处:

        1.可以减少服务链接压力,内存占用少了,连接吞吐量大了

        2.由于 TCP 连接减少而使网络拥塞状况得以改观;

        3.慢启动时间减少,拥塞和丢包恢复速度更快。

    三、客户端优化

      JS方面的可以看我之前JS版面中的优化,下面主要介绍CSS优化及一些补充

    1.CSS方面

    • 建议使用类选择器,访问比较快;
    • 不建议使用很长的base64;
    • 避免CSS表达式;
    • 避免使用Filters。

    2.图片格式的选择

    • 颜色较为丰富的图片而且文件比较大的(40KB - 200KB)或者有内容的图片优先考虑 jpg;图标等颜色比较简单、文件体积不大、起修饰作用的图片,优先考虑使用 PNG8 格式;图像颜色丰富而且图片文件不太大的(40KB 以下)或有半透明效果的优先考虑 PNG24 格式。
    • 条件允许的,使用新格式WEBP和BPG。
    • 用SVG和ICONFONT代替简单的图标。

     

    3.合理分配资源加载时间,按需加载,包括CSS、JS文件以及图片、业务模块等。

      根据我们网页最初加载需要的最小内容集推断其他内容延迟加载;无条件提前加载公共内容或根据用户行为推断提前加载某些内容,如根据搜索框输入的文字来判断加载的内容。加载机制如下:

    •     预加载
    •     Dom Ready后加载
    •     onLoad后加载
    •     滚动加载

    4.减少DNS 查询

      DNS 查询一般需要几毫秒到几百毫秒,移动环境下会更慢。我们可以预先读取DNS,减少用户等待时间。

    dns_prefetch

  • 相关阅读:
    [hdu 2089] 不要62 数位dp|dfs 入门
    [poj 2456] Aggressive cows 二分
    NOIP 2016 DAY 1 爆炸记
    【模板】kmp
    【模板】LCA
    NOIP 之前的吐槽
    【模板】树状数组
    【模板】线段树
    【模板】高精度
    2016/11/15
  • 原文地址:https://www.cnblogs.com/shytong/p/5285091.html
Copyright © 2020-2023  润新知