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): 当元素的尺⼨ 、结构或触发某些属性时, 浏览器会重新渲染页
面,称为回流 。此时, 浏览器需要重新经过计算,计算后还需要重新页面布
局, 因此是较重的操作 。会触发回流的操作:
页面初次渲染
浏览器窗口大⼩改变19/29
2023/4
第⼋部分:复习篇上 | EncodeStudio
元素尺⼨ 、位置 、内容发生改变
元素字体大⼩变化
添加或者删除可见的 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 中自动携带, 体积上限为
localStorage / sessionStorage
indexDB
服务器:
分布式缓存 redis
数据库
4K , 可自行设置过期时间
: 长久储存/窗口关闭删除, 体积限制为 4~5M
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 进行内存标记, 可视化查看内存的变化情
况,找出异常点。