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生成,开始渲染。

  • 相关阅读:
    在现有项目中使用AspNet Identity 2.0 实战
    SQL 带自增长列的表的插入
    在C++中子类继承和调用父类的构造函数方法
    C++继承
    C++中重载、重写(覆盖)和隐藏的区别实例分析
    C++类
    C++中头文件(.h)和源文件(.cpp)都应该写些什么
    C++模板
    C语言字符串操作总结大全
    C++ 标准模板库(STL)
  • 原文地址:https://www.cnblogs.com/xuwupiaomiao/p/12917982.html
Copyright © 2011-2022 走看看