zoukankan      html  css  js  c++  java
  • 在浏览器输入一个URL后主要流程是怎么样的?

    1. 浏览器辨别出是否是一个合理的URL,不是则用默认搜索引擎进行搜索。如果是合理的URL,则执行一次DNS的查询,DNS也可以从浏览器的缓存或者操作系统的hosts目录去查找,如果没有找到,则会往远程的DNS域名服务器上去查询,这个结果会被浏览器缓存下来,方便下次加速查询。

    2. 如果是合理的URL,第一步看缓存,http1.1的cach-control 或者http1.0的expires,如果没有过期,则直接使用,流程结束。

    3. TCP的三次握手,建立连接, 如果是Https协议,还会额外执行SSL/TLS的二次握手,通过非对称加密算法以及CA证书协商出对称加密密钥。

    4. 握手结束后,就会发起真正的http数据请求,服务器收到请求后,可能访问数据库,redis等,经过业务层逻辑处理,最后生成页面返回Browse,如果是短连接,就会有4次挥手关闭连接,http1.1默认保持连接,方便其他请求复用这条链路。

    5. 浏览器的网络进程收到响应html文件流后,JS主线程中的HtmlParse模块解析出Dom,CSSOM(内嵌,行内,link外置根据优先级合并,还有css尺寸单位标准化为px表示),最后把他们合并出布局树(Layout  Tree),它指出了DOM元素的几何位置信息。

    6. 分层,它会根据是否出现3D转换,Z-Index, Filger,Transform,Opacity,定位属性,是否出现裁剪,文字区域是否出现滚动条等进行分出多个图层,类似与PS制图软件的分层思路。

    7. 绘制, 实际这一步没有真正的绘制,只是把每一个图层的绘制拆分成很多小的绘制指令,再顺序组成一个绘制列表。

    8. 栅格化,先会分块成比较小的的块,如256 x 256,512 x 512,视口附件优先生成位图的原则,将图块转换为位图。栅格化这个过程会使用GPU来加速生成,这个过程叫做快速栅格化,生成的位图会放到GPU中。

    9 合成显示,栅格化完成后,浏览器进程会合并这些位图,最后显示到浏览器中。

    优化点

    如果JS中会操作的动画,可以事先用Will-Change再css中指定,比如will-change:transform/Opacity等。这样就可以单独给这个元素分一层,变化是只会操作这一层,效率就会好很多。

    一帧16ms(1s/60)内没有生成一张图片,就会出现卡顿。

    重排重绘是这主线程中完成的,会直接影响其他JS的执行,栅格化分块,合成操作时渲染流程后续的合成线程中完成的,不会占用js主线程的时间片。

  • 相关阅读:
    LeetCode偶尔一题 —— 617. 合并二叉树
    《剑指offer》 —— 链表中倒数第k个节点
    《剑指offer》 —— 青蛙跳台阶问题
    《剑指offer》—— 二维数组中的查找
    《剑指offer》—— 替换空格
    《剑指offer》—— 合并两个排序的链表
    《剑指offer》—— 礼物的最大价值
    生成Nuget 源代码包来重用你的Asp.net MVC代码
    Pro ASP.Net Core MVC 6th 第四章
    Pro ASP.NET Core MVC 6th 第三章
  • 原文地址:https://www.cnblogs.com/roy1/p/13709461.html
Copyright © 2011-2022 走看看