浏览器的渲染机制— (js基础复习第3期)

最新推荐文章于 2022-04-13 10:09:09 发布
最新推荐文章于 2022-04-13 10:09:09 发布
阅读量125 收藏
点赞数
原文链接：https://segmentfault.com/a/1190000017030930
版权

一：几个问题

  1. 什么是DOCTYPE 及作用
  2. 浏览器渲染过程
  3. 重排refolw、重绘repaint、布局Layout
  4. 输入url经历了什么？

二：整理

1. 什么是DOCTYPE 及作用
浏览器使用DTD(文档类型定义)来判断文档类型，决定使用何种协议来解析，
以及切换浏览器模式

DOCTYPE是用来声明文档类型和DTD规范的，一个主要用途是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。

html5 
<!DOCTYPE html>
2.浏览器渲染过程
html-> DOM tree  
css -> CSSOM 
render tree
Layout 
painting
display
3. 重排reflow,repainting?
reflow:
浏览器根据各种样式来计算，并根据计算结果，将元素放到它应该出现的的位置，这个过程为

哪些操作引起reflow:
    1. 增加、删除、修改DOM 结点时候
    2. 移动DOM的位置（可能会修改其他DOM位置）
    3. 修改网页的默认字体时 （重新排）
    4. 修改CSS样式的时候
    5. resize 窗口的时候，或者滚动的时候

repaint:
    当盒子的位置、大小、以及其他属性，例如颜色、字体大小都确定下来后，浏览器于是便吧这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint
哪些操作引起repaint?
    1.DOM 改动
    2.css改动
4. url过程

。。。（待整理）

JhonXie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
页面渲染机制（重排Reflow和重绘Repaint）
阿虾搞搞的博客
02-23 319
什么是DOCTYPE及作用？ DTD（Document Type Definition）：文档类型定义。 是一系列的语法规则，用来定义XML或者(X)HTML文件类型。浏览器会使用DTD来判断文本类型，决定使用何种协议来解析，以及切换浏览器模式。 DOCTYPE：用来声明DTD规范。 一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出现一些差错。 常见的DOCTYPE声...
渲染篇 2：知己知彼——解锁浏览器背后的运行机制(2).md
最新发布
04-01
我们现在站在性能优化的角度，一起简单地复习一遍这个经典的过程：首先我们需要通过 DNS（域名解析系统）将 URL 解析为对应的 IP 地址，然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接，随后我们向服务端抛...
layout布局经验总结
12-09
布局前的准备: 1 查看捕捉点设置是否正确.08工艺为0.1,06工艺为0.05,05工艺为0.025. 2 Cell名称不能以数字开头.否则无法做DRACULA检查. 3 布局前考虑好出PIN的方向和位置 4 布局前分析电路，完成同一功能的MOS管画在一起 5 对两层金属走向预先订好。一个图中栅的走向尽量一致，不要有横有竖。 布局时注意: 6 更改原理图后一定记得check and save 7 完成每个cell后要归原点 8 DEVICE的个数是否和原理图一至；各DEVICE的尺寸是否和原理图一至。一般在拿
渲染机制
weixin_30856965的博客
01-03 51
1、什么是DOCTYPE及作用 2、浏览器渲染过程 3、重排Reflow 4、重绘Repaint 5、布局Layout 1、什么是DOCTYPE及作用 DTD：告诉浏览器我是什么文档类型，浏览器根据这个来判断用什么引擎来解析和渲染 DOCTYPE：直接告诉浏览器当前是哪个文档类型 html5 <!DOCTYPE html> h...
浏览器内核及渲染机制的过程及页面的重绘重排
DOM曼珠沙华的博客
06-03 872
浏览器内核 1、IE浏览器内核：Trident内核，也被称为IE内核； 2、Chrome浏览器内核：Chromium内核 → Webkit内核 → Blink内核； 3、Firefox浏览器内核：Gecko内核，也被称Firefox内核； 4、Safari浏览器内核：Webkit内核； 5、Opera浏览器内核：最初是自主研发的Presto内核，后跟随谷歌，从Webkit到Blink内核； 6、360浏览器、猎豹浏览器内核：IE+Chrome双内核； 7、搜狗、遨游、QQ浏览器内核：Trid.
【知识梳理】4.1渲染机制
weixin_34344403的博客
03-30 70
1.DOCTYPE DTD（document type definition，文档类型定义）是一系列的语法规则，用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。 解读：DTD就是告诉浏览器我是什么文档类型，那么浏览器根据这个来判断用什么引擎来解析渲染他。 DOCTYPE是...
学习前端的第三天复习.rar
10-13
在学习前端开发的过程中，第三天的复习至关重要，因为这标志着你已经初步接触并理解了一些基础概念。前端开发是构建互联网应用程序的重要部分，它涉及到用户在浏览器中直接可见和交互的所有内容。下面，我们将深入...
存储篇 1：浏览器缓存机制介绍与缓存策略剖析(1).md
04-01
我们现在站在性能优化的角度，一起简单地复习一遍这个经典的过程：首先我们需要通过 DNS（域名解析系统）将 URL 解析为对应的 IP 地址，然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接，随后我们向服务端抛...
渲染篇 3：对症下药——DOM 优化原理与基本实践(1).md
04-01
我们现在站在性能优化的角度，一起简单地复习一遍这个经典的过程：首先我们需要通过 DNS（域名解析系统）将 URL 解析为对应的 IP 地址，然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接，随后我们向服务端抛...
Python网络爬虫复习资料.zip
02-22
第三个文件"ddw.py"同样是Python代码，可能涉及到更高级的爬虫技术，比如多线程或多进程爬虫，或者使用Scrapy框架来构建大型爬虫项目。多线程或多进程可以提高爬虫的效率，而Scrapy则提供了一整套爬虫开发的解决方案...
浏览器渲染机制及重排(reflow)和重绘详解(repaint)
KanaseKanon的博客
03-25 295
一、浏览器的线程与进程 浏览器的每一个网页都是一个单独的进程，使用进程来隔离不同的网页 一个浏览器通常由以下几个常驻线程组成： 1、GUI渲染线程（GUI渲染线程和JavaScript引擎线程是互斥的 2、JavaScript引擎线程 3、定时触发器线程 4、事件触发线程 5、异步http请求线程 二、浏览器渲染流程 1、构建DOM树 2、构建构建CSSOM树 3、根据DOM树和CSSOM树构建Render树 4、Render树布局，生成各个计算好大小的盒模型，从左到右，从上到下 5、Render树绘制 三
布局渲染流程和原理 学习笔记
谢伟光的博客
03-24 400
手机CPU 处理的任务繁多，出了逻辑计算以外还要做内存管理，显示操作，因此 在实际运算的时候性能会大打折扣，在没有GPU的时代，运算速度根本上今天负责三维游戏要求，即使CPU工作频率超过2GHZ,对他绘制的图形提高也不大，这是GPU设计出来了。 黄色的 Control 为控制器，用于协调控制整个 CPU 的运行，包括取出指令、控制其他模块的运行等； 绿色的 ALU （ Arithmetic...
浏览器渲染机制
qq_26702033的博客
04-09 211
浏览器的渲染机制 1.什么是DOCTYPE及作用？ 2.浏览器渲染过程？ 3.重排？reflow 4.重绘？repaint 5.布局layout？ 什么是DOCTYPE及作用？ 用于声明文档类型和DTD类型，用于验证文件的合法性。浏览器根据DTD来判断文档类型，并决定用何种协议来解析。 常见的DOCTYPE？ HTML5的DOCTYPE? &lt;!DOCTYPE html&g...
前端阶段性总结（二）：页面渲染机制与性能优化
weixin_34129696的博客
09-19 812
引言： 转前端一年了，期间工作较忙，也没时间整理一些知识体系，此系列文章是对前端基础的一些回顾与总结。本文主要介绍浏览器工作的原理以及一些优化手段。 一、浏览器渲染过程 1. 浏览器的主要结构： 2. 浏览器的多进程模型： 以chorme为例： Browser进程：浏览器的主进程，负责浏览器界面的显示，各个页面的管理，其他各种进程的...
浏览器的渲染机制
celi_echo的博客
08-16 178
了解浏览器如何进行加载，我们可以在引用外部样式文件，外部JS时，将它们放到合适的位置，是浏览器以最快的速度，将文件加载完毕。 了解浏览器如何进行解析，我们可以在构建DOM结构，组织CSS选择器的时候，选择最优的写法，提高浏览器的解析速率。 了解浏览器如何进行渲染，明白渲染的过程，我们在设置元素属性，编写JS文件时，可以减少“重绘”，“重新布局”的消耗。 二 ： 要了解清楚渲染机制，要先弄明白...
提升页面性能之重排(reflow)和重绘(repaint)
songmumu博客
07-16 541
提出问题： JavaSctipt 操作改变元素样式的四种方法之一,element.style.cssText=”width:20px;height:20px;border:solid 1px red;”这样简写比一次次地element.style.width = 20 + 'px'...添加，会**避免页面的重构（refolw)，提升页面行性能**。首先我们要了解浏览器的渲染机制（也就是我们写的H...
简述浏览器的渲染过程，重绘和重排在渲染过程中的哪一部分（页面优化）？
zhangwenok的博客
04-13 1158
基本流程包括：解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树 1.代码解析：浏览器向服务器请求到了 HTML 文档后便开始解析，产物是 DOM ，根据 CSS 生成 CSSOM（CSS对象模型） 2.对象合成：将 DOM 和 CSSOM 合并产生渲染树（render tree） 3.布局（layout）：有了渲染树，知道了所有节点的样式，便根据这些节点以及样式计算它们在浏览器中确切的大小和位置
前端面试——渲染机制
路明凡的博客
08-13 294
什么是DOCTYPE及其作用 什么是DOCTYPE及作用 DTD(document type definition，文档类型定义）是一系列的语法规则，用来定义XML 或（X）HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式 DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。 如果文件代码不合法，那么浏览器解析时便...
浏览器渲染机制详解过程是什么，layout
06-02
浏览器的渲染机制可以分为以下几个步骤： 1. 构建 DOM 树：根据 HTML 文本构建 DOM 树，即将 HTML 文本解析成一个个的节点，然后将这些节点按照其在文档中的层级关系组成一棵树。 2. 构建 CSSOM 树：根据 CSS 文本构建 CSSOM 树，即将 CSS 文本解析成一个个的样式规则，然后将这些样式规则按照其在文档中的层级关系组成一棵树。 3. 合并生成渲染树：将 DOM 树和 CSSOM 树组合成渲染树（也称为呈现树或布局树）。渲染树只包含需要显示的节点和这些节点的样式信息。渲染树的构建过程中，浏览器会忽略掉那些不需要显示的节点，例如 head 标签、display:none 的节点等。 4. 计算布局信息：根据渲染树计算每个节点在屏幕上的位置和大小，这个过程被称为布局或排版（layout 或 reflow）。布局是一个相当昂贵的操作，因为浏览器需要遍历渲染树的每个节点，并根据节点的样式、大小、位置等信息计算其在屏幕上的位置和大小。 5. 绘制页面：根据渲染树和布局信息，将页面绘制到屏幕上，这个过程被称为绘制（painting 或 rasterization）。绘制的过程中，浏览器会将渲染树中每个节点的内容转换成位图，然后将这些位图组合成一张完整的页面。 6. 提交更新：将绘制好的页面提交到 GPU，由 GPU 将其显示到屏幕上。 以上是浏览器渲染机制的主要流程，其中布局（layout 或 reflow）是整个渲染过程中最耗时的步骤，因此在开发中需要尽可能减少布局的次数，以提高页面的性能表现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值