经典web性能优化最佳实践

减少DNS查询

    每一次域名解析都需要一次网络往返,从而增加延迟时间,同时还会阻塞后续请求。

    解决方案:

    限制不同域名的数量,虽然HTTP1.1中可利用浏览器多TCP连接并发的优势,但如果你想要升级到HTTP2,域名数量对性能的影响只会增加。

    保证最低的接下延迟,选好你本地的DNS。

    在主体页面HTML或响应中利用DNS预存指令。这样下载并处理主体页面HTML的同时,预存指令就能开始并解析页面上指定的域名,下面的代码会告诉浏览器预解析ajax.googleeapis.com:

    <link rel="dns-prefetch" href="//ajax.googleapis.com">

 附一次域名解析的过程:

1)检查浏览器自身的DNS缓存,是否解析完成判断条件:有缓存且没过期则解析结束;无缓存或缓存过期则走第二步。chrome浏览器缓存具体细节可查询chrome://net-internals/#dns;

2)检查操作系统缓存。Windows系统会缓存DNS解析记录(Linux不缓存),Win中可使用ipconfig /displaydns查看系统缓存的DNS记录。是否解析完成判断条件同上

3)检查/etc/hosts文件。是否解析完成判断条件:有则解析成功;无则进行下一步;该文件windows中的路径C:\Windows\system32\drivers\etc\hosts,Linux中/etc/hosts。

    4)向系统指定的本地DNS服务器发起解析请求,该请求为递归请求,如果该DNS服务器有缓存且未过期,则返回给客户端;如果没有或缓存过期则本地DNS服务器向根域DNS服务器发起迭代请求(这时间延迟就长了...)

优化TCP连接

    点这里优化TCP连接获取

减少/避免HTTP重定向

    HTTP重定向极费时间。尤其是不同域名之间的重定向,更加费时,这里既有额外的DNS查询、TCP握手,还有其他延迟。最佳的重定向次数为0。

使用CDN

    把数据放到离用户地理位置更近的地方,可以显著减少每次TCP连接、通信的网络延迟,增大网络吞吐量。

在客户端缓存资源

    没有什么比直接从本地缓存获取资源来的更快,因为它根本就不需要建立网络连接。俗话说,最快的请求时根本不发起请求。找到给定资源最佳的TTL值并没有完美的科学方法,不过,你可以从下面这些已经验证过的指导原则开始:

    1)静态内容,如图片或带版本的数据,可以再客户端永久缓存。但你要知道的是,几遍TTL被设置的很长,比如一个月,他还是会因为缓存提早回收或被清理而过期,这时客户端可能不得不从源头再次获取。因此真实的TTL最终取决于设备特性(磁盘缓存空间)和最终用户的浏览喜欢/历史记录。

    2)CSS/JS和个性化资源,缓存时间大约是会话平均时间的两倍。这段时间足够长保证大多数用户在浏览网站时能够从本地拉取资源;同时也足够短,几乎能保证下次会话时从网上拉取最新内容。

    3)其他类型的资源,理想的TTL值各有不同,这取决于你对特定资源能够容忍旧数据的极限,所以请结合自身需求来判断最佳值。

   设置客户端缓存TTL,可以通过HTTP首部指定Cache control以及键max-age,或者Expires首部

    另,可通过Last-Modified和Etag首部提供验证机制。

压缩和代码极简

    传输前压缩应用资源,把要传输的字节减到最少。所有文本内容(HTML、JS、CSS、SVG、XML、JSON、字体等)可以从压缩和代码极简化中受益。

    要确保对每种传输的资源采用最好的压缩手段。HTML、CSS、JS等文本资源的大小经过gzip压缩平均可以减少60%~80%,而图片则需要仔细考量:

        图片一般会占到一个网页需要传输的总字节数的一般

        去掉不必要的元数据可以把图片文件变小,例如题材地理位置、时间戳、尺寸和像素信息,通常包含在二进制数据里,应该在发送给客户端之前去掉(务必保留版权和色彩描述信息)。这种无损处理能够在图片生成时完成。对于PNG图片,一般会节省大概10%的空间。更好内容参考High Performance Image(O'Reilly出版社,2016)。

        要调整大小就在服务器上调整,避免传输不必要的字节

        应该根据图像选择最优的图片格式

        尽可能使用有损压缩

消除不必要的请求开销

    减少请求的HTTP首部数据(如HTTP cookie),这可能减少几次往返的延迟(TCP慢启动初始窗口较小的话-->内核升级到3.2+)。

    HTTP2支持压缩请求头和响应头。

并行处理请求和响应

    请求和响应排队都会导致延迟,无论是客户端还是服务器

    HTTP2采用流的方式可实现多路复用,从而避免了TCP带来的队首阻塞带来的延迟问题。

避免阻塞CSS/JS


针对协议版本采取优化措施

    HTTP/1.1 支持限制级的并行机制(pipeline),优化措施包括域名拆分、生成精灵图、禁用cookie等;HTTP2只要建立一个连接就能实现最优性能,同时无需针对HTTP1.x的哪些优化方法。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容