从网络请求到浏览器渲染优化

网络是如何连接的?

发送过程

这个看《http》书上有,先简单整理一下。

dns

发出请求之后,通过dns服务器查找对应的ip
有了dns,把域名转换成ip

浏览器渲染过程

DOM tree – Render Tree – Layout

收到html字符串转为 dom tree

很显然,有些计算机基础知识。收到的是01字节,从字节变成字符串,然后按照规则 token 词法分析变成node节点,然后变成 dom树。

加载的过程中会遇到 css和js

css文件变成 cssom tree

css查找消耗资源,而且 div > p >span 是倒着走的,不断递归,所以尽可能扁平化。

渲染

有了dom,但不一定展示出来,比如display 。 这就是布局部分了。

dom为什么慢

都说代价昂贵。啥意思?
通过js修改dom,js要改,渲染引擎要改,涉及到了两线程通信。
插入一万个列表,如何不卡顿?
分批次渲染,视野外的不显示。

阻塞渲染

js会停下来阻塞渲染,所以一般把js当道最后。也可以添加 async异步, defer并行下载

渲染优化

  • 重排 回流 reflow 减少
  • 重绘repaint 不可避免
  • 布局layout

重排 reflow

DOM中每个元素都有自己的盒子模型,需要浏览器根据样式来计算,放到该出现的位置,这个过程叫 reflow

触发 reflow:

  • 增加删除修改 DOM节点,会导致reflow repaint
  • 移动DOM的位置,或做动画
  • 修改css样式
  • resize窗口时候,或滚动时候
  • 修改默认字体时候

重绘 repaint

等到各种盒子位置等属性确定之后,浏览器把元素绘制页面

  • DOM 改动
  • CSS改动

降低重绘次数。创建节点少,一次完成。

运行机制

setTimeout 0 会放到任务队列。单线程。

当 while 和 setTimeout 在一起会怎样?while是同步。

请我喝杯咖啡吧~