专栏首页前端黑板报HTTP2基础教程-读书笔记(二)

HTTP2基础教程-读书笔记(二)

由于HTTP/1已经疲于应对现在Web的发展,所以发展出了一整套优化Web性能的技巧,但是它们没有依据的规范,混乱不堪。所以为了走的更远、更对(朝着HTTP/2),搞清楚现实遇到的问题以及当下解决方法是很有必要的。

关键路径

为了使页面如丝滑般流畅,就得重视获取资源和页面渲染的各个流程,以及各个关键节点面临的问题。

有个很经典的面试问题:当在浏览器输入URL,并按下回车键到页面展示经历哪些步骤?回答这个问题就需要知道:资源获取页面渲染 各流程的细节。

先从下图开始了解资源获取:

如上图可看出:域名解析、建立TCP连接、TLS握手是获取资源时的关键节点。

下面则是页面渲染的过程:

关键步骤:解析/渲染html、关键资源等待

页面上每次的点击超链接,都会重复以上流程,Web优化的核心就是加快、复用甚至去掉其中的某些步骤。

关键性能指标

了解流程后,然后再梳理一下更具体的性能指标点:

  • 延迟:制约Web性能的主要瓶颈,与之相关的是往返时延(RTT)
  • 带宽:只要带宽没有饱和,两个网络端点之间的连接就会一次处理尽可能多的数据量。
  • DNS查询:域名和IP的映射,类似于电话本(人名和手机号)
  • 建立连接时间:著名的“三次握手”
  • TLS协商时间:若是HTTPS,则需要TLS的协商。

上面的指标都是和网络有关,下面的指标就严重依赖于服务器和客户端(浏览器)的性能:

  • 首字节时间(TTFB):客户端接收到主体页面响应的第一个字节所耗费的时间
  • 内容下载时间:等同于最后字节时间(TTLB)
  • 开始渲染时间:就是看到空白页面的时长
  • 文档加载完成时间(页面加载时间):客户端浏览器认为页面加载完毕的时间

性能优化技术

结合HTTP/1的一些缺点和性能指标,业界总结了一些优化技术:

DNS查询优化:

  • 限制不同域名数量
  • 保证低限度解析延迟
  • 利用DNS预取指令:<link rel="dns-prefetch" href="//baidu.com">

优化TCP连接:

  • 利用preconnect指令,加快建立连接:<link ref="preconnect" href="//baidu.com" >
  • 尽早终止并响应:利用CDN快速给予响应
  • 实施最新的TLS最佳实践(https://istlsfastyet.com/)

避免重定向:

重定向通常会触发额外域名建立连接(TCP、TLS握手)。若必须使用重定向,则需要:

  • 利用CDN代替客户端在云端实现重定向
  • 如果是同一域名的重定向,使用Web服务器上的rewrite规则,避免重定向

客户端缓存:

最快的请求就是不发请求,从本地获取资源。好处:1.速度快,2.ISP或CDN服务商不收取流量费。设置客户端缓存TTL(生存时间),由cache-control 以及 max-age,或 expires首部指定。

网络边缘的缓存:

若一份资源需要缓存,必须满足:

  • 在多用户间可共享
  • 能够接受一定程度的旧数据

条件缓存:

也叫协商缓存,当资源不经常变化时,条件缓存可显著节省带宽和性能,通过以下方法设置:

  • HTTP首部 Last-Modified-Since:在指定的日期之后更新过,才返回内容,否则返回304响应码
  • 实体校验码(ETag):是资源的唯一标识,若校验码一致则返回304,否则返回新内容

压缩和代码极简化:

比如压缩HTML代码或服务器开启GZIP、deflate压缩,效果更好。

避免阻塞CSS/JS:

  • CSS资源放在head标签,JS资源尽量放后面
  • 定期检查页面引用的资源是否还在用,定期清理
  • 若JS执行顺序不重要,添加 async
  • 若顺序重要,则用defer

图片优化:

基本原则是在不影响视觉质量的前提下进一步减少图片字节数。

  • 去除图片中的元信息:地理位置信息、时间戳、尺寸和像素信息。(http://tinypng.com)
  • 图片过载:图片被浏览器自动缩小或超过设备显示能力。解决方法:针对设备、网络状况和预期的视觉质量,提供合适的图片(尺寸和质量)

个人总结:

一个不完善的标准,需要大家想方设法的去补救。

本文分享自微信公众号 - 前端黑板报(FeHeiBanBao)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-02-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 你真的了解 Web 缓存体系吗?

    很高兴认识大家,之前做过很多分享,今天这次终于讲到正题了。因为之前一直讲自动化运维,其实做这么多年运维,自动化运维没干多少年。这几年很多公司各方面机器数量多了,...

    前端黑板报
  • 浏览器缓存机制小结

    浏览器缓存是前端开发中不可避免的问题,对于web应用来说,它是提升页面性能同时减少服务器压力的利器。本文将简单地描述总结下浏览器缓存的知识和应用,希望对自己和大...

    前端黑板报
  • 缓存从入门到放弃

    缓存就是数据交换的缓冲区(称作Cache),这个概念最初是来自于内存和CPU。当某一硬件要读取数据时,会首先从缓存中查找需要的数据,如果找到了则直接执行,找不到...

    前端黑板报
  • 讨论一下秒杀系统的技术难点与解决方案

    通过之前的文章我们了解到,引入MQ后主要可以解决三个问题:异步、解耦、削峰,小伙伴们可以回顾一下这篇文章什么是消息中间件?主要作用是什么?

    HUC思梦
  • 360 数科实践:JanusGraph 到 NebulaGraph 迁移

    摘要:在本文中 360 数科的周鹏详细讲解了业务从 JanusGraph 迁移到 Nebula Graph 带来的性能提升,在机器资源不到之前 JanusGra...

    NebulaGraph
  • java.lang.reflect.InaccessibleObjectException: Unable to make

    java.lang.reflect.InaccessibleObjectException: Unable to make ...

    一个会写诗的程序员
  • 使用@ConditionalOnProperty注解

    Spring boot中的注解@ConditionalOnProperty,可以通过配置文件中的属性值来判定configuration是否被注入,

    yaphetsfang
  • java.lang.IllegalStateException: getOutputStream() has already been called for this response

    https://stackoverflow.com/questions/33982515/handlerinterceptor-getoutputstream-...

    一个会写诗的程序员
  • Magicodes.IE已支持通过模板导出票据

    导入导出通用库,通过导入导出DTO模型来控制导入和导出,支持Excel、Word、Pdf和Html。

    心莱科技雪雁
  • Mysql连接数据库异常汇总【必收藏】

    在Centos上部署项目发现一个奇怪的问题,数据库连接一直抛异常。于是花了两个小时搜了各种数据库连接异常导致的原因,最终问题得以解决。同时,把解决过程中搜集到的...

    用户1161110

扫码关注云+社区

领取腾讯云代金券