三.[前端总结]之浏览器篇

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.内存泄露

意外的全局变量: ?法被回收

定时器: 未被正确关闭，导致所引?的外部变量?法被释放事件

监听: 没有正确销毁 (低版本浏览器可能出现)

闭包: 会导致?级中的变量?法被释放