地址中输入URL回车后发生了什么

本文最后更新于：2022年3月9日 上午

步骤

【DNS解析】

  1. 查找浏览器DNS缓存
  2. 查找系统HOST文件
  3. DNS查询

    主机和本地域名服务器之间使用递归查询，本地域名服务器要负责一直到查询得出结果

    本地域名服务器和其他服务器之间的使用迭代查询，域名服务器会告诉本地服务器下一次去询问谁，防止单台域名服务器压力过大

DNS请求使用UDP协议，如果请求失败则使用TCP重试

1. 本地DNS服务器查找自己缓存
2. 本地DNS服务器向【根域名服务器】发送请求，根域名服务器返回顶级域名服务器的地址`com`
3. 本地DNS服务器向顶级域名服务器发送请求，顶级域名返回二级域名的服务器地址`baidu.com`
4. 本地DNS服务器向二级域名服务器发送请求，得到目标主机IP地址，存入本地DNS服务器缓存并返回给用户主机
5. 用户主机和浏览器都将缓存这个IP地址的映射

【TCP握手】

对应IP地址，端口建立TCP连接，构造HTTP请求并与服务器握手后发送tcp数据包

TCP三次握手

客户端与服务端互相确认收发能力

  1. 【CLIENT】 发送SYN报文，指明自己的初始化序列号ISN(c)
  2. 【SERVER】 收到后，将client发送的ISN(c)+1作为ACK字符，并且也生成自己的ISN(s)发送给【CLIENT】
  3. 【CLIENT】 收到后，同样将ISN(s)+1作为ACK字符发送给【SERVER】

【分析请求资源】

  • 不同浏览器对资源优先级分类

  • 安全策略检查

    内容安全策略(Content Security Policy，缩写 CSP)是由浏览器提供的一种白名单制度。发者通过配置，来告诉浏览器各类外部资源的加载和执行限制，来提高网页的安全性。一种最常用应用就是通过限制非信任域名脚本的加载来预防XSS攻击。

    可以通过两种方式来配置CSP：

    1. HTTP请求头的Content-Security-Policy
    2. meta标签 
      <meta http-equiv="Content-Security-Policy" content="script-src 'self';style-src nos.netease.com kaola.com;">

  • 资源优先级计算

    1. html,font,css
    2. preload,script,xhr
    3. img,audio,video
    4. prefetch

  • 顺序调整

    1. 同步XHR请求优先级调整到最高
    2. 图片根据是否出现在可视区域
    3. async/defer的script标签请求优先级降低

【应用缓存策略】

  • 强缓存
  • 协商缓存

【渲染页面】

DOM Tree

  • 处理html标记，生成DOM树，所有标签都会包含在内
  • DOM的构建是增量的
  • 解析完一个节点的所有子元素才会解析他的兄弟元素

CSSOM Tree

  • 加载所有样式，生成CSSOM树
  • CSSOM的构建会阻塞渲染

    不同来源的样式（内联、内部style标签和外部引用）可能会发生覆盖，所以要等他们全加载完才能继续渲染

Render Tree

  • 对DOM节点找到与其匹配的CSSOM规则并应用
  • 只包含DOM树中的可见元素(忽略像display：none/<head>标签)

Layout

浏览器依据Render树和设备屏幕信息重排一次，从 <html>标签 开始往下依次计算所有的节点几何尺寸和位置

Paint

根据上一步得到的像素信息重绘页面

Display

GPU合成各图层，显示在屏幕上

关键点

重排reflow

  • 有些情况下，比如修改了元素的样式，浏览器并不会立刻reflow，而是会把这样的操作积攒一批，然后做一次处理，这又叫异步 reflow 或增量异步 reflow。
  • 在有些情况下，比如窗口resize，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。
  • 除了渲染树的直接变化，当获取一些需要计算的属性时，浏览器为取得正确的值也会触发重排,这些属性包括：offsetXXX、scrollXXX、clientXXX、getComputedStyle()
  • 重排必定触发重绘

重绘

改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重绘，但是元素的几何尺寸没有变。

合成层

区别于一般的图层，合成层【composite】使用GPU线程进行计算

提升到合成层的条件

  • 3Dtransform
  • opacity
  • filter
  • will-change
  • <video>,<audio>,<canvas>
  • position:fixed

解析URL参数

  1. 正则解析

    function parseQueryString(url){
  const rule = /([^?=&]+)=([^&#]*)/g  
  return url.match(rule).reduce((a,b)=>{
    let [k,v] = b.split('=')
    k = decodeURIComponent(k)
    v = decodeIRIComponent(v)
    a[k] = a[k] ? [...a[k],v] : v
    return a
  },{})
  return res
}

  2. API解析

    URLSearchParams
    https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams

    function parseURL(url){
  const urlObj = new URLSearchParams(url.slice(url.indexOf('?')))
  const res = []
  for(let key of urlObj.keys()){
    res[key] = urlObj.getAll(key)
  }
  return res
}
#面试
地址中输入URL回车后发生了什么
http://yoursite.com/2022/02/24/页面渲染流程/
作者
tatekii
发布于
2022年2月24日
许可协议