zoukankan      html  css  js  c++  java
  • 浏览器的渲染过程/或者从URL到页面渲染的过程

    从URL到页面渲染的过程

    1、当用户输入URL提交到DNS域名解析 找到真正的IP 向服务器发起请求

    2、服务器进过解析交给后台处理完成返回数据,浏览器接受数据文件(html、js、css、图片 等资源)

    3、浏览器加载到资源(html、css、js、等)后进行语法解析建立相应的内部数据结构(DOM)

    4、最后载入解析资源的文件 渲染页面

    渲染页面的过程:

    1、解析html得到一个DOM树

    2、解析css形成CSSOM树

    3、然后CSSOM树和DOM树整合成render树

    4、根据render树的计算出每个元素的大小颜色等信息形成布局render树(layout)

    5、绘制 根据计算好的信息绘制整个页面

    回流reflow   :  回流也叫重排 就是等浏览器发现某个部分发生了变化影响了布局后,需要倒回来重新计算渲染,这过程就叫回流。

    重绘repaint:  就是一个元素的外观(颜色、背景等)发生了改变但是 没有改变布局的情况下,只会引起浏览器屏幕的部分重画。

    解析HTML过程中的问题

    自上而下解析HTML,逐渐构建起DOM tree,遇到style、link标签,会下载解析样式表,同时构建CSSOM tree,不会阻塞html的解析。但是遇到script标签,它会立即下载并执行得到的脚本,会阻塞HTML的解析。直到脚本里的同步代码部分(settimeout等异步操作之外的代码)执行完之后,再接着解析接下来的HTML。
    直到将整个HTML文档的最后一个标签解析完毕,DOM tree生成完毕。然后CSSOM tree 、render tree生成,开始渲染。

  • 相关阅读:
    HTTP的连接过程
    查看mysql数据库及表编码格式
    spring quartz 的定时器cronExpression表达式写法(转载)
    两种 js下载文件的步骤
    进制转换三(二进制、八进制、十进制、十六进制之间的转换)
    进制的转换二
    Tls版本
    读李笑来《把时间当做朋友》笔记
    postman批量编辑参数
    uml类关系常见图标的含义
  • 原文地址:https://www.cnblogs.com/xuwupiaomiao/p/12917982.html
Copyright © 2011-2022 走看看