关于前端:浏览器工作原理与实践一

37次阅读

共计 1590 个字符,预计需要花费 4 分钟才能阅读完成。

本文总结于极客工夫李兵老师的课程,有趣味的同学能够本人去学习下。

浏览器蕴含的过程

  • 浏览器过程:界面显示、用户交互、过程治理、存储等。
  • 渲染过程:render树、V8引擎、(每个 Tab 都是一个过程,沙箱中数据获取可能有问题)
  • GPU过程:3Dcss
  • 网络过程:网络资源加载
  • 插件过程:插件运行、解体不会对浏览器和页面产生影响

TCP/IP

TCP


IP是送到哪台主机——> 网络层
UDP 是送到哪台主机的哪个应用程序 (一台电脑能够启很多服务,IP 雷同,端口号不同),端口号——> 传输层

TCP连贯

HTTP请示流程

  1. 构建请示:形式,地址,http协定版本
  2. 查找缓存:如果有缓存,拿浏览器缓存文件
  3. 筹备 IP 地址和端口号:域名零碎 DNS 寻址 IP 号,http内容是通过 TCP 传输数据阶段实现的
  4. 期待 TCP 队列
  5. 3次握手建设 TCP 连贯:——> 服务器
  6. 发申请:(申请行,申请头)post申请体
  7. 服务器解决
  8. 服务器响应:(回复响应行,响应头,回复注释)协定版本状态码
  9. 4次挥手断开 TCP 申请

DNS缓存

浏览器本地缓存对应的 IP 和域名。
浏览器缓存都服务器设置 Cache-Control: Max-age = 200,缓存过期会在申请头加 If-None-Match: ...token。没过期304,过期从新给,刷新缓存新鲜度。
baidu.com——>https://baidu.com301 重定向,服务器解决跳转 location 地址。

从输出 url 到页面显示经验了什么

  1. 用户输出,判断输出的是 url,地址栏会加上协定,合成残缺的url,能够监听beforunload 确认提交表单
  2. url申请过程,浏览器过程通过过程间通信 IPCurl申请发到网络过程,网络过程会去查找是否有本地缓存。如有,间接返回资源。如没有就申请,第一步进行 DNS 解析,获取申请域名的服务器 IP 地址,如 https,还要建设TLS 连贯,而后利用 IP 和服务器建设 TCP 连贯,浏览器端会把申请行、申请头、cookie等向服务器发送构建的申请信息,服务器会生成响应数据发给网络过程,开始解析响应头内容。
    (1)响应头的状态码是 301302,从响应头的 location 读取浏览器重定向的地址,而后再发动 httphttps, 从头开始。
    (2)判断响应头 content-type, 如是application/octet-stream 会被提交下载管理器申请流程完结,如是 text/html 页面渲染是在渲染过程。
  3. 筹备渲染过程,每关上一个新页面就会有一个新的渲染过程,但依据域名、协定,同一站点会共用一个渲染过程。渲染过程筹备好之后,要提交文档给渲染过程 (html 数据),当确认提交后会更新:后退后退状态、loading状态、地址栏 urlweb 页面、平安状态,走完后就进入渲染阶段了。

渲染流程

浏览器无奈了解和应用 html,所以要将其解析转换成DOM 树,控制台输出 document 就能看到残缺的 DOM 树。会把 css 转换成 styleSheets, 控制台document.styleSheets 能够看到样式表,该构造具备查问和批改的性能,css属性值标准化为了取得 DOM 树的几何地位。还须要创立布局树:遍历所有可见节点加到布局树,不可见元素疏忽。
页面中有些复制成果如 3D 变换 z-indexz轴排序,渲染引擎还要为其生成图层树。
1. 有定位属性通明属性 css 滤镜等都有层叠上下文会被晋升独自一层。
2. 须要剪裁 (滚动) 也会创立图层,通过合成线程依照视口左近图块生成位图由栅格化操作,栅格化过程会用 GPU 减速,用到 GPU 线程。

重绘:js改背景色,没有几何地位变动,布局阶段不改,间接绘制执行,省去布局和分层,效率比重排高。
重排:改高度,触发从新布局,解析叫重排。须要更新残缺的渲染过程,开销最大。
合成:translate(), 跳过布局和绘制,避开重排重绘,间接非主线程合成动画,效率最高,css动画 > js动画。

正文完
 0