js渲染和运行机制

野性酷女 2021-08-29 14:49 389阅读 0赞

1.  ### 什么是DOCTYPE及作用 ###
2.  ### 浏览器渲染过程 ###
3.  ### 重排Reflow ###
4.  ### 重绘Repaint ###
5.  ### 布局Layout ###

***什么是DOCTYPE及作用***

***   ***DTD(document type definition,文档类型定义)是一系列的语法规则，用来定义XML或(X)HTML的文档类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。

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

HTML5

<!DOCTYPE html>

HTML 4.01 Strict 该DTD包含所有HTML元素和属性，但不包含展示性和弃用的元素（比如font）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional 该DTD包含所有HTML元素和属性，包含展示性和弃用的元素（比如font）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

***浏览器渲染过程***

***     ***![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbnhpbl96aHU_size_16_color_FFFFFF_t_70][]

***重排 Reflow***

定义

DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow。

触发Reflow

当你增加、删除、修改DOM结点时，会导致Reflow或Repaint

当你移动DOM的位置，或是搞个动画的时候

当你修改css样式的时候

当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候

当你修改网页的默认字体时

***js运行机制***

***  ***js是单线程(同一时间只能做一件事情，**进程是资源分配的最小单位，线程是CPU调度的最小单位，**进程=火车，线程=车厢）

什么是任务队列

什么是EventLoop

js执行时碰到同步任务 就执行，碰到异步任务先放到事件队列，setTimeout 没到时间不会加到事件队列。

异步任务：

setTimeout和setInterval

Dom事件

Es6中Promise

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbnhpbl96aHU_size_16_color_FFFFFF_t_70]: /images/20210730/76933597e4a94a1bab398b0eddeb7280.png

发表评论取消回复

表情：

评论列表（有 0 条评论，389人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS运行机制

1. 单线程 `JavaScript`在同一时间内只能做一件事，即JS单线程。也常被称为“阻塞式执行”。 2. 任务队列 ‘任务队列’指一个先进先出的队列，它里面

女爷i/ 2023年06月09日 12:30/ 0 赞/ 18 阅读

相关 Vue.js 运行机制全局概览

Vue.js 运行机制全局概览全局概览 Vue.js 运行机制全局概览这一节笔者将为大家介绍一下 Vue.js 内部的整个流程，希望能让大家

拼搏现实的明天。/ 2023年03月01日 10:46/ 0 赞/ 6 阅读

相关前端跳槽面试总结之渲染机制、运行机制、页面性能和错误监控

一、渲染机制 1. 对于渲染机制，会从 `DOCTYPE` 及作用、浏览器渲染过程、重排 `Reflow`、重绘 `Repaint`和布局 `Layout` 这几个方

谁践踏了优雅/ 2023年02月17日 15:53/ 0 赞/ 95 阅读

相关浏览器与JS运行机制

一、JavaScript预解析 JavaScript代码运行分为两个阶段： (1) 预解析所有函数定义提前，函数体提升(当然不包括如var box = fun

刺骨的言语ヽ痛彻心扉/ 2022年12月25日 15:55/ 0 赞/ 167 阅读

相关 JavaScript原理剖析（js运行机制）

javaScript为什么是单线程 JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了

曾经终败给现在/ 2022年11月03日 15:23/ 0 赞/ 229 阅读

相关 JS底层运行机制说明

代码例子： var x = 1; //定义一个全局变量 x function A(y) { var x = 2; //定义一个全局变量 x

叁歲伎倆/ 2022年07月12日 01:21/ 0 赞/ 205 阅读

相关页面渲染机制

简单渲染过程 url解析： 1. 用户输入URL地址 2. 浏览器解析URL解析出主机名 3. 浏览器将主机名转换成服务器ip地址（浏览器先查找本地DNS缓存列表

Bertha 。/ 2022年05月22日 12:50/ 0 赞/ 350 阅读

相关 vue.js的运行机制

引入vue.js，new Vue()干了什么呢？ 1. 初始化调用Vue原型上的\_init()进行初始化，会初始化vue的生命周期，props，data，metho

谁践踏了优雅/ 2022年05月13日 10:42/ 0 赞/ 193 阅读

相关对于Js的运行机制理解

一、js的运行机制 1. JavaScript是单线程，意味着任务要一个接着一个完成，但是，如果前一个任务执行时间很长，那么后面的任务就得一直阻塞着，这样用户体验十分差。

- 日理万妓/ 2021年11月04日 12:12/ 0 赞/ 363 阅读

相关 js渲染和运行机制

1. 什么是DOCTYPE及作用 2. 浏览器渲染过程 3. 重排Reflow 4. 重绘Repaint 5. 布局Layout 什

野性酷女/ 2021年08月29日 14:49/ 0 赞/ 390 阅读