浏览器原理 渲染过程 js引擎 函数作用域

注：AO、GO、VO是ES5之前的概念。

• 我们在输入域名，通过dns找到ip，
• 然后从服务器上下载静态资源，一般返回的文件首先是index.html
• 然后开始解析html中的内容，遇到css，它会去下载css，遇到js，它会下载进行解析。

注意： 现在的浏览器内核主要是 Blink, 我们说的浏览器内核说的是浏览器的排版引擎，也叫浏览器引擎、页面渲染引擎、样板引擎。

• 首先对HTML、CSS进行解析（分别是HTML Parser、CSS parser)，如果遇到DOM操作，是由js引擎进行执行的。
• 将他们转成DOM树,就是将DOM 跟 Style Rules(css 规则)结合在一起形成渲染树（Render Tree）。
• 渲染树之后，通过布局引擎进行布局。

• 浏览器内核 和 js引擎的关系
  2. V8引擎原理：
  • 首先JavaScript 源代码进行 parse
  • 词法、语法分析 -> AST抽象语法树, 可以访问 https://astexplorer.net
  • 然后通过ignition转成字节码（跨平台机器指令）
  • 最后运行结果
    
    
    

4.1、全局代码执行和作用域提升

var name = 'chen'

console.log(num2)	//undefined, 这个就叫作用域提升。
var num1 = 10
var num2 = 23
var result = num1 + num2

//下面是伪代码
var globalObject = {
	String: '类',
	Date: '类',
	setTimeout: '类',
	window: globalObject,
	name: undefined,	//这些都是undefined，因为代码没有执行，只有执行的时候，才会将值复制给name,num1,num2。只是在解析的时候，知道有这个变量。
	num1: undefined,
	num2: undefined,
	//如果这里有函数，保存的是内存地址
	foo: 0xa100, 
}
//是执行过程图

4.2、全局函数的执行过程

var name = 'chen'

foo(123)
function foo(num){
	console.log(m)
	var m = 12
	var n = 23
	console.log('foo')
}

//下面是伪代码
var globalObject = {
	String: '类',
	...
	name: undefined,
	//因为是一个函数，js引擎会开辟一块空间存储函数，编译期间包括两个东西：
	//父级作用域scope(函数的上一层作用域) 和 函数的执行体（函数执行的代码块）
	foo: 0xa100, 
}
//是执行过程图

如果是这段代码，第10行打印的是foo

如果是这段代码，打印处理的是why

函数的嵌套： 作用域的查找规则

4.3、函数调用函数执行过程
打印出来是Hello Global
4.4、作用域替身面试题

例子1: 结果是： 200

例子2:

例子3：

例子4：
function foo(){
var a = b = 10
//其实上面的代码转为两行代码
// var a = 10; b = 10
foo()
console.log(a) //报错 undefinend
console.log(b) // 10
}