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

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

1、浏览器的工作原理

1、输入url，回车：检查url，添加协议（举例：http1.1）
2、网络进程：检查当前资源是否已经请求过，如果是，则使用本地缓存, 拦截请求
3、如果没有本地缓存的资源，则通过dns解析出ip地址和端口。这里也会看本地dns缓存有没有解析过当前url。如果有则不用请求dns系统查找域名和ip地址的映射关系。http的默认端口是80.。
4、建立tcp连接，浏览器对同一个域名维持6个tcp连接，超过需要等待。服务端返回响应头可以设置长连接：connection：keep-live告诉浏览器保持同一个连接发起请求。如果需要重定向，服务端响应头设置location字段，写出重定向的地址。如果要缓存数据：响应头设置cache-control字段
5、数据传输完成断开连接或者保持连接
6、渲染进程资源解析：
7、绘制

• 从服务器上下载静态资源，一般返回的文件首先是index.html
• 开始解析html中的内容，遇到css，它会去下载css，遇到js，它会下载进行解析。

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

2、浏览器渲染过程

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

3、js引擎

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

4、JavaScript执行过程

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

var name = 'chen'

console.log(num2)	//undefined, 这个就叫作用域提升。
var num1 = 10
var num2 = 23
var result = num1 + num2
/**
*	1.代码被解析，v8引擎内部会帮助我们创建一个对象globalObject(简称go)
*	2.运行代码
*		2.1. v8为了执行代码，v8引擎内部会有一个执行上下文ECS（函数调用栈）
*		2.2. 因为我们执行的是全局代码，为了全局代码能够正常的执行，需要创建 全局执行上下文GEC（全局代码需要被执行时才会创建）
*	
*/
//下面是伪代码
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
}