zoukankan      html  css  js  c++  java
  • 前端页面渲染机制

    浏览器基础结构

      浏览器基础结构主要包括如下7部分:

    • 1.用户界面(User Interface):用户所看到及与之交互的功能组件,如地址栏,返回,前进按钮等;

    • 2.浏览器引擎(Browser engine):负责控制和管理下一级的渲染引擎;

    • 3.渲染引擎(Rendering engine):负责解析用户请求的内容(如HTML或XML,渲染引擎会解析HTML或XML,以及相关CSS,然后返回解析后的内容);

    • 4.网络(Networking):负责处理网络相关的事务,如HTTP请求等;

    • 5.UI后端(UI backend):负责绘制提示框等浏览器组件,其底层使用的是操作系统的用户接口;

    • 6.JavaScript解释器(JavaScript interpreter):负责解析和执行JavaScript代码;

    • 7.数据存储(Data storage):负责持久存储诸如cookie和缓存等应用数据

    浏览器内核

    • Trident内核: IE
    • Webkit内核:Chrome,Safari
    • Gecko内核:FireFox

    网络

      当用户访问页面时,浏览器需要获取用户请求内容,这个过程主要涉及浏览器网络模块:

      1.用户在地址栏输入域名,如baidu.com,DNS(Domain Name System,域名解析系统)服务器根据输入的域名查找对应IP,然后向该IP地址发起请求;

    DNS

    • 2.浏览器获得并解析服务器的返回内容(HTTP response);
    • 3.浏览器加载HTML文件及文件内包含的外部引用文件及图片,多媒体等资源。

    DNS预解析(DNS prefetch)

      浏览器DNS解析大多时候较快,且会缓存常用域名的解析值,但是如果网站涉及多域名,在对每一个域名访问时都需要先解析出IP地址,而我们希望在跳转或者请求其他域名资源时尽量快,则可以开启域名预解析,浏览器会在空闲时提前解析声明需要预解析的域名

    多进程

    我们通常说JavaScript执行是单进程的,但是浏览器网络部分通常是有几个平行进程同时开启,但是也会有
    限制,一般为2-6个。

    渲染引擎及关键渲染路径(Critical Rendering Path)

    • 1.构建DOM树(DOM tree):从上到下解析HTML文档生成DOM节点树(DOM tree),也叫内容树(content tree);
    • 2.构建CSSOM(CSS Object Model)树:加载解析样式生成CSSOM树;
    • 3.执行JavaScript:加载并执行JavaScript代码(包括内联代码或外联JavaScript文件);
    • 4.构建渲染树(render tree):根据DOM树和CSSOM树,生成渲染树(render tree);

      渲染树:按顺序展示在屏幕上的一系列矩形,这些矩形带有字体,颜色和尺寸等视觉属性。

    • 5.布局(layout):根据渲染树将节点树的每一个节点布局在屏幕上的正确位置;

    • 6.绘制(painting):遍历渲染树绘制所有节点,为每一个节点适用对应的样式,这一过程是通过UI后端模块完成;
  • 相关阅读:
    HTML连载10-details标签&summary标签&marquee标签
    [刷题] 7-14 然后是几点
    [刷题] 7-18 出租车计价 (15 分)
    [刷题] PTA 7-20 简单计算器
    [刷题] PTA 7-22 用天平找小球
    [刷题] PTA 7-24 猜数字游戏
    [刷题] PTA 7-28 求整数的位数及各位数字之和
    [刷题] PTA 7-30 念数字
    [刷题] PTA 7-37 输出整数各位数字
    [刷题] PTA 7-35 猴子吃桃问题
  • 原文地址:https://www.cnblogs.com/cmd61/p/11656656.html
Copyright © 2011-2022 走看看