浏览器工作原理
工作过程
1、用户输入网址
2、浏览器访问DNS服务器,获取网址对应的ip地址
3、浏览器访问ip地址及对应端口(默认http是80,https是443),获取资源
4、服务器返回资源(html、css、js、图片文件等)
5、浏览器内核,解析获取的资源,然后渲染到页面上
浏览器内核(排版引擎、页面渲染引擎)
浏览器渲染过程
渲染过程中,如果遇到js代码,会暂停执行html,先执行js代码。
js代码,由js引擎执行。
JS引擎
浏览器引擎 and JS引擎
小程序渲染层
=========================
V8引擎
定义
AST抽象语法树参考网址:https://astexplorer.net/
V8引擎源码:https://github.com/v8/v8
模块介绍
执行过程
解析 Parser(早期)
(1)初始化全局对象 GO
(2)执行上下文栈(调用栈 ECS)
(3)执行函数
函数调用函数
return
解析 Parser(后期)
早期的ECMA版本,执行上下文栈会关联一个变量对象(VO),也就是GO,也就是window
而后期ECMA版本,执行上下文栈会关联一个变量环境(VE)
V8引擎实现,就是把所有的变量,放在一个叫Variable_ 的对象里面,类型是VariableMap,实际上在C++是哈希表HashTable。
而window是由浏览器实现的,和变量环境VE是2个不同的变量。只有在声明var变量的时候,才会加到window,这个只是兼容,理论上不应该加到这里。
(源码)
========================
内存管理
介绍
JS的内存管理
比如对象、数组都是复杂数据类型
JS垃圾回收
1、引用计数
2、标记清除
========================
闭包与内存管理
高阶函数
高阶函数: 一个函数(如下calc、foo、makeAdder)如果接受另外一个函数作为参数(如下形参calcFn),或者该函数会返回另外一个函数(如下bar、add)作为返回值的函数
函数作为参数
函数内定义函数,返回函数
常见的高阶函数
var nums = [10, 5, 11, 100, 55]
// ================== 1.filter: 过滤 ==================
var newNums = nums.filter(function(item) {
return item % 2 === 0 // 偶数
})
console.log(newNums) // [10,100]
// ================== 2.map: 映射 ==================
var newNums2 = nums.map(function(item) {
return item * 10
})
console.log(newNums2) // [100, 50, 110, 1000, 550]
// ================== 3.forEach: 迭代 ==================
nums.forEach(function(item) {
console.log(item)
// 10
// 5
// 11
// 100
// 55
})
// ================== 4.find/findIndex 查找 ==================
// es6~12
var friends = [
{name: "why", age: 18},
{name: "kobe", age: 40},
{name: "james", age: 35},
{name: "curry", age: 30},
]
var findFriend = friends.find(function(item) {
return item.name === 'james'
})
console.log(findFriend) // {name: "james", age: 35}
var friendIndex = friends.findIndex(function(item) {
return item.name === 'james'
})
console.log(friendIndex) // 2
// ================== 5.reduce: 累加 ==================
var total = nums.reduce(function(prevValue, item) {
return prevValue + item
}, 0)
console.log(total) // 181
闭包定义
闭包的执行过程
闭包的内存泄露
解决内存泄露
设置为null后, 下次内存回收,就会回收,并不是立刻回收
属性的垃圾回收
闭包没有用到的属性,也会回收
========================
ES12 监听垃圾回收
这样过了一段时间垃圾回收系统回收时(不定时),就会调用函数
注册时还可以绑定一个参数,哪个对象回收时就会用这个参数