输入url到整个页面显示经历与优化

2333

从url到页面页面显示过程与相关优化点

概览

加载阶段:
  • 检测资源是否命中强缓存,如果未命中进行以下步骤
  • DNS服务器将域名解析成ip地址
  • 建立TCP连接
  • 向这个ip地址发送http请求
  • 服务器根据请求响应HTTP报文
  • 浏览器得到返回的内容,解析渲染页面
  • 连接结束
渲染阶段:
  • 将 HTML 标记成 DOM树
  • CSS 标记并构建 CSSOM 树
  • 将 DOM 和 CSSOM 合并成 RenderTree
  • 根据 RenderTree 开始渲染和展示
  • 遇到 script、link 会阻塞

具体过程与优化

1)、DNS

DNS解析是一个递归查询规则,比如在浏览器输入www.isyxf.com,首先在本地域名服务器中查询IP地址,如果没有找到的情况下,本地域名服务器会向跟域名服务器发送一个请求,如果跟域名服务器也不存在该域名时,本地域名会向com顶级域名服务器发送一个请求,依次类推下去。直到最后本地域名服务器得到www.isyxf.com的IP地址并把它缓存到本地。从上面可以看出网址的解析是一个从右向左的过程:com->isyxf.com->www.isyxf.com,但是你是否发现少了点什么,根域名服务器的解析过程呢?事实上,真正的网址是www.isyxf.com., 这个.对应的就是根域名服务器,为了方便用户,通常都会省略,浏览器在请求DNS的时候会自动加上。

缓存规则

DNS存在着多级缓存,从离浏览器的距离排序的话,有以下几种: 浏览器缓存,系统缓存,路由器缓存,IPS服务器缓存,根域名服务器缓存,顶级域名服务器缓存,主域名服务器缓存。

优化
  • 通过给link标签添加ref属性进行dns预解析。如:< link ref="dns-prefetch" href="//xxx.xxxxx.com" / >
  • 强制打开a标签DNS预解析,因为https协议的页面标签默认是关闭的。如:< meta http-equiv="x-dns-prefetch-control" content="on" />
  • 域名适当收敛(有时为了提升浏览器的并发量,我们又需要给静态资源开启单独域名,尽量保持在1~3个,相对于http2增加并发量反而会提升成本)
  • DNS负载均衡:比如根据每台机器的负载量,该机器离用户地理位置的距离等等,返回一个合适的机器的IP给用户。
2)、TCP链接

HTTP协议是使用TCP作为其传输层协议的,当TCP出现瓶颈时,HTTP也会受到影响。

优化
  • 持久化连接(Keep-Alive)
  • 管道化连接
  • http协议升级到2版本(多路复用)
3)、服务器相关
优化
  • 静态资源和后端程序分开存放,后端程序需要高效的 cpu,静态资源只要带宽大 IO 吞吐量大即可,也方便做 CDN 缓存,节省服务器成本
4)、发送http请求

HTTP报文是包裹在TCP报文中发送的,服务器端收到TCP报文时会解包提取出HTTP报文。

优化
  • 资源压缩合并
  • 定时清理无用的cookie,减少HTTP请求大小
  • 启用gzip压缩
    • gzip(GNU zip):Content-Encoding:gzip
    • compress(UNIX 系统的标准压缩)
    • deflate(zlib)
    • identity(不进行编码
  • http协议升级2版本(头部压缩、二进制传输)
  • 共用http请求头(header)
  • 开启持久连接(Connection: keep-alive)
  • 开启流式传输(Transfer-Encoding)
  • 适当的域名扩散,增加浏览器并发。
  • 非核心代码异步加载
    • ① defer是在HTML解析完之后才会执行,如果是多个,按照加载的顺序依次执行。
    • ② async是在加载完成后立即执行,如果是多个,执行顺序和加载顺序无关。
  • 利用浏览器缓存
  • 使用CDN
5)、响应HTTP报文
  • 开启流式传输(服务器读取一点资源就立刻传输一点)
  • 去掉报文内容中的空格(有利于节省带宽,增加浏览器解析速度)
  • 开启gzip压缩
推荐文章(从输入 url 到页面展示)
推荐文章(性能优化)