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

Posted qianduanwriter

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浏览器的渲染机制— (js基础复习第3期)相关的知识,希望对你有一定的参考价值。

一:几个问题

  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过程

。。。(待整理)

以上是关于浏览器的渲染机制— (js基础复习第3期)的主要内容,如果未能解决你的问题,请参考以下文章

js大致复习第一遍

js运行机制

使用带有渲染功能的 Vue.js 3 片段

JavaScript基础复习01-JavaScript,变量,数据类型,类型转换

js基础复习---字符串操作

前端技能树,面试复习第 40 天—— 浏览器原理:浏览器渲染原理,如何优化渲染过程