杂志社网站建设意义,设计师销售管理软件,建个网站花钱做百度推广,顺企网属于什么网站一、JavaScript 的历史
JavaScript#xff08;简称JS#xff09;Web前端开发的脚本语言。
它诞生1995年#xff0c;由网景公司的 Brendan Eich 开发。最初#xff0c;JavaScript 被设计用于在网页上嵌入动态内容和交互式功能。
1996年#xff0c;JavaScript 1.1 成为国…一、JavaScript 的历史
JavaScript简称JSWeb前端开发的脚本语言。
它诞生1995年由网景公司的 Brendan Eich 开发。最初JavaScript 被设计用于在网页上嵌入动态内容和交互式功能。
1996年JavaScript 1.1 成为国际标准化组织ISO的标准后更名为ECMAScript。ECMAScript的第一版发布于1997年从此开始了JS的标准化之路。
2009年Node.js诞生它可以让开发者使用 JavaScript 编写服务器端代码这进一步推动了JavaScript的发展。
JavaScript也在不断的更新和改进新版本的ECMAScript发布周期也越来越短。 二、程序、进程、线程
在计算机中程序、进程和线程是不同的概念。
程序计算机执行的一组指令通常存储在磁盘或其他存储设备中。进程正在运行的程序的实例它包括在内存中执行的代码、数据和堆栈等。每个进程都有自己的内存空间和系统资源并与其他进程隔离。线程在进程中执行的独立单元。线程共享进程的资源和内存空间但每个线程都有自己的堆栈和局部变量。多线程可以提高程序的效率和并发性。
简单来说程序是指一组指令进程是程序的实例线程是进程内部的独立执行单元。
一个程序可以创建多个进程而每个进程又可以包含多个线程。多线程可以提高程序的并发性和效率但也会增加代码的复杂度和调试难度。 三、浏览器架构 和 事件循环
1.浏览器架构
浏览器又以下几个进程组成。
浏览器主进程、渲染进程、GPU进程、网络进程、插件进程。 渲染引擎 和 JavaScript 引擎。 渲染引擎渲染引擎负责取得 HTML、CSS然后将代码转换为用户界面。渲染引擎的主要功能是将 HTML、CSS 和 JavaScript 转换为用户可以理解的网页。 JavaScript 引擎JavaScript 引擎负责解释和执行 JavaScript 代码。
2.事件循环
事件循环是浏览器处理 JavaScript 代码的机制。JavaScript 是单线程执行的也就是说在同一时刻只能执行一个任务。当 JavaScript 执行代码时有些任务会立即执行有些任务则会在后台执行。当 JavaScript 执行完一个任务后会检查是否有任务在等待执行如果有则将其添加到任务队列中。当任务队列中的任务等待执行时浏览器会从队列中取出任务并执行这个过程就叫做事件循环。
JavaScript 代码可以分为两类同步代码 和 异步代码。同步代码是指代码会立即执行并阻塞后续代码的执行而异步代码则是指代码不会立即执行而是会在后台执行。在事件循环中JavaScript 引擎会优先处理同步代码当同步代码执行完毕后会将异步代码添加到任务队列中并在适当的时候执行。
事件循环的过程可以简单概括为
从任务队列中取出一个任务。执行该任务如果任务是同步任务则阻塞后续代码的执行如果任务是异步任务则立即返回并将任务添加到任务队列中。执行任务队列中的下一个任务如果任务队列为空则阻塞后续代码的执行直到有新的任务加入队列。
在事件循环中浏览器会将不同类型的任务分为不同的队列如下
宏任务队列包括整体代码、setTimeout、setInterval 等异步任务。微任务队列包括 Promise、process.nextTick 等异步任务。
JavaScript 引擎在执行完当前宏任务后会立即执行当前微任务队列中的所有任务。在执行完微任务队列中的所有任务后才会继续执行下一个宏任务。这就是事件循环的基本原理。
一张图来展示 JavaScript 中 Event Loop事件循环这个机制 四、渲染引擎执行原理
渲染引擎的执行原理主要分为以下几个步骤 HTML 解析渲染引擎将 HTML 文件解析成 DOM 树构建出整个页面的结构。 CSS 解析渲染引擎将 CSS 样式表解析成样式规则并将其应用到 DOM 树上的元素中。 布局计算渲染引擎通过遍历 DOM 树和样式规则来计算每个元素的大小、位置等属性并确定它们在页面中的位置。 绘制页面渲染引擎将布局计算出来的元素以及它们的样式属性绘制到页面上形成最终的页面展示效果。
在执行上述步骤的过程中渲染引擎还需要考虑如下因素 异步加载资源当遇到需要异步加载的资源例如图片、音频、视频等时渲染引擎会发出异步请求继续解析和渲染其他部分。 JavaScript 执行当遇到 JavaScript 代码时渲染引擎会将其交给 JavaScript 引擎执行并在执行完毕后继续渲染页面。 事件处理当用户与页面进行交互时渲染引擎需要处理用户的输入事件例如点击、滚动、拖拽等。 页面重绘和重排当某个元素的属性发生变化时渲染引擎需要进行页面重绘和重排操作以保证最终的页面效果正确。
总之渲染引擎的执行原理涉及到 HTML 解析、CSS 解析、布局计算、绘制页面以及异步加载资源、JavaScript 执行、事件处理和页面重绘等方面。掌握这些基本原理可以帮助我们更好地理解浏览器的工作原理从而更好地进行网页开发。
渲染引擎工作流程中各个步骤所对应的模块图 1.主要步骤
HTML 解析
渲染引擎将 HTML 文件解析成 DOM 树构建出整个页面的结构。
...
CSS 解析
渲染引擎将 CSS 样式表解析成样式规则并将其应用到 DOM 树上的元素中。
...
布局计算
渲染引擎通过遍历 DOM 树和样式规则来计算每个元素的大小、位置等属性并确定它们在页面中的位置。
...
绘制页面
渲染引擎将布局计算出来的元素以及它们的样式属性绘制到页面上形成最终的页面展示效果。
... 2.在执行上述步骤的过程中渲染引擎还需要考虑如下因素
异步加载资源
当遇到需要异步加载的资源例如图片、音频、视频等时渲染引擎会发出异步请求继续解析和渲染其他部分。
...
JavaScript 执行
当遇到 JavaScript 代码时渲染引擎会将其交给 JavaScript 引擎执行并在执行完毕后继续渲染页面。
...
事件处理
当用户与页面进行交互时渲染引擎需要处理用户的输入事件例如点击、滚动、拖拽等。
...
页面重绘和重排
当某个元素的属性发生变化时渲染引擎需要进行页面重绘和重排操作以保证最终的页面效果正确。
...
