三.[前端总结]之浏览器篇
1. 跨标签⻚通讯
不同标签⻚间的通讯，本质原理就是去运⽤⼀些可以共享的中间介质，因此⽐较常⽤的有以下⽅法:
通过⽗⻚⾯ window.open() 和⼦⻚⾯ postMessage
异步下，通过 window.open('about: blank') 和 tab.location.href = '*'
设置同域下共享的 localStorage 与监听 window.onstorage
重复写⼊相同的值⽆法触发
会受到浏览器隐身模式等的限制
设置共享 cookie 与不断轮询脏检查( setInterval )
借助服务端或者中间层实现
2. 浏览器架构
⽤户界⾯
主进程内核
渲染引擎
JS 引 擎
执⾏栈
事件触发线程
消息队列
微任务
宏任务
⽹络异步线程
定时器线程
3.浏览器下事件循环(Event Loop)
事件循环是指: 执⾏⼀个宏任务，然后执⾏清空微任务列表，循环再执⾏宏任务，再清微任务列表
微任务 microtask(jobs): promise / ajax / Object.observe (该⽅法已废弃)
宏 任 务 macrotask(task): setTimout / script / IO / UI Rendering
4.从输⼊ url 到展示的过程
DNS 解 析
TCP 三次握⼿
发送请求，分析 url ，设置请求报⽂(头，主体)
服务器返回请求的⽂件 ( html )
浏览器渲染
HTML parser --> DOM Tree
标记化算法，进⾏元素状态的标记
dom 树构建
CSS parser --> Style Tree
解析 css 代码，⽣成样式树
attachment --> Render Tree
结合 dom树 与 style树，⽣成渲染树
layout : 布 局
GPU painting : 像素绘制⻚⾯
5. 重绘与回流
当元素的样式发⽣变化时，浏览器需要触发更新，重新绘制元素。这个过程中，有两种类型的操作，即重绘与回流
重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使⽤重绘对元素进⾏更新，此时由于只需要UI层⾯的重新像素绘制，因此 损耗较少
回流(reflow): 当元素的尺⼨、结构或触发某些属性时，浏览器会重新渲染⻚⾯，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新⻚⾯布 局，因此是较重的操作。会触发回流的操作:
⻚⾯初次渲染
浏览器窗⼝⼤⼩改变
元素尺⼨、位置、内容发⽣改变元素字体⼤⼩变化
添加或者删除可⻅的 dom 元素
激活 CSS 伪类（例如： :hover ）
查询某些属性或调⽤某些⽅法
clientWidth、clientHeight、clientTop、clientLeft offsetWidth、
offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
getComputedStyle()
getBoundingClientRect()
scrollTo()
回流必定触发重绘，重绘不⼀定触发回流。重绘的开销较⼩，回流的代价较高
最佳实践:
css
避免使⽤ table 布局
将动画效果应⽤到 position 属性为 absolute 或 fixed 的元素上
javascript
避免频繁操作样式，可汇总后统⼀ ⼀次修改
尽量使⽤ class 进⾏样式修改
减少 dom 的增删次数，可使⽤ 字符串 或者 documentFragment ⼀次性插⼊
极限优化时，修改样式可将其 display: none 后修改
避免多次触发上⾯提到的那些会触发回流的⽅法，可以的话尽量⽤ 变量存住
6.存储
我们经常需要对业务中的⼀些数据进⾏存储，通常可以分为 短暂性存储 和 持久性储存。
短暂性的时候，我们只需要将数据存在内存中，只在运⾏时可⽤ 持久性存储，可以分为 浏览器端 与 服务器端
浏览器:
cookie : 通常⽤于存储⽤户身份，登录状态等
http 中⾃动携带， 体积上限为 4K ， 可⾃⾏设置过期时间
localStorage / sessionStorage : ⻓久储存/窗⼝关闭删除， 体积限制为 4~5M
indexDB
服务器:
分布式缓存 redis
数据库
7.Web Worker
现代浏览器为 JavaScript 创造的 多线程环境。可以新建并将部分任务分配到 worker 线程并⾏运⾏，两个线程可 独⽴运⾏，互不⼲扰，可通过⾃带的消息机制 相互通信。
基本⽤法:
// 创 建 worker const worker = new Worker('work.js'); // 向主进程推送消息 worker.postMessage('Hello World'); // 监听主进程来的消息 worker.onmessage = function (event) { console.log('Received message ' + event.data); }
限制:
同源限制
⽆法使⽤ document / window / alert / confirm
⽆法加载本地资源
8.内存泄露
意外的全局变量: ⽆法被回收
定时器: 未被正确关闭，导致所引⽤的外部变量⽆法被释放事件
监听: 没有正确销毁 (低版本浏览器可能出现)
闭包: 会导致⽗级中的变量⽆法被释放
dom 引⽤: dom 元素被删除时，内存中的引⽤未被正确清空
可⽤ chrome 中的 timeline 进⾏内存标记，可视化查看内存的变化情况，找出异常点。
