文章目录

  • 一、浏览器组成 – 渲染引擎 / JavaScript 引擎
    • 1、浏览器组成
    • 2、渲染引擎
    • 3、JavaScript 引擎
  • 二、JavaScrip 示例
    • 1、代码示例
    • 2、JavaScrip 引擎工作过程分析

一、浏览器组成 – 渲染引擎 / JavaScript 引擎

1、浏览器组成

浏览器 由 渲染引擎 和 JavaScript 引擎 两部分组成 :

  • 渲染引擎 : 该引擎用来解析 HTML 标签 与 CSS 样式 , 又称为 ” 内核 ” , Google 的 Chrome 浏览器的 最新内核是 blink , 之前的内核是 webkit ;
  • JavaScript 引擎 : 又称为 ” JavaScript 解释器 ” , 该引擎 读取 网页中的 JavaScript 脚本代码 , 然后处理该脚本 , Chrome 浏览器 的 JavaScript 引擎是 V8 ;

常见的 浏览器 及其对应的 ” 渲染引擎 ” 和 ” JavaScript 引擎 ” :

  • IE 浏览器 : Trident 渲染引擎 , Chakra JavaScript 引擎 ;
  • Firefox 浏览器 : Gecko 渲染引擎 , TraceMonkey JavaScript 引擎 ;
  • Safari 浏览器 : Webkit 渲染引擎 , Nitro JavaScript 引擎；
  • Chrome 浏览器 : Blink 渲染引擎 , V8 JavaScript 引擎

2、渲染引擎

浏览器 的 ” 渲染引擎 ” , 又 称为 ” 布局引擎 ” 或 ” 展示引擎 ” , 主要功能是 解析 HTML 标签布局 和 CSS 样式 等网页内容 , 并将 这些内容显示在屏幕上 ;

” 渲染引擎 ” 工作过程 :

  • 首先 , 获取 网页 内容 , 包括 HTML 标签布局 , XML 资源 , 图像资源 等 ;
  • 然后 , 整理 网页 的 资源信息 , 加入 CSS 样式信息 , 计算出网页的显示方式 ;
  • 最后 , 将 最终的 显示内容 输出到 显示器 或 打印机 ;

不同的 浏览器 的 ” 渲染引擎 ” 对 网页的 HTML 和 CSS 语法解释 会有所不同 , 最终的渲染效果 也 有所差异 ;

3、JavaScript 引擎

” JavaScript 引擎 ” 主要功能是 解析 和 执行 JavaScript 脚本 , 以实现网页的动态效果 ; 该引擎 读取网页中的 JavaScript 代码 , 对其进行 解释处理 后运行 ;

浏览器 本身 不会执行 JavaScript 代码 , 而是通过 浏览器 的 JavaScript 引擎 执行 JavaScript 代码的 ;

JavaScript 引擎 执行代码过程 :

  • 首先 , JavaScript 引擎 逐行解释 每一行 JavaScript 代码 ;
  • 然后 , 引擎 将 JavaScript 代码 转为 机器语言 ;
  • 最后 , 由 浏览器 所在的 计算机 执行 机器语言 ;

浏览器 相当于 一台 虚拟机 , 类似于 Java 虚拟机 ;

二、JavaScrip 示例

1、代码示例

核心代码 :

alert("Hello World!");

完整代码 :

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript</title><style></style><script>alert("Hello World!");</script></head><body></body></html>

展示效果 :

2、JavaScrip 引擎工作过程分析

JavaScrip 引擎 会 逐行 解释执行 每一行 JavaScrip 代码 , 这是脚本语言 的特征 ;

JavaScrip 引擎 解析 alert("Hello World!"); 这一行代码 ,

将其转为 Windows 电脑可执行的 二进制机器码 ,

然后由 Windows 系统执行 转化后的 二进制机器码 ;

如果有多行 JavaScrip 代码 , 解析一行代码 , 将其转为 机器码 , 执行该机器码 ,

然后 再解析 并 执行 下一行 JavaScrip 代码 ,

这种特征的代码 , 就是 脚本代码 ;