前端工程师日常推荐什么浏览器？通往中高端Web前端

小君 2023-02-06 14:17:31 534

前端工程师日常推荐什么浏览器？通往中高端Web前端1. 跨标签页通讯今天的内容，是浏览器篇，希望可以给大家带来帮助。“金三银四”，让我们愉快的开始准备Web面经吧：JavaScript-上中高端Web前端面试题，直击BAT：JavaScript篇元宵节，猿宵节，写代码之余面经走一波：JavaScript篇

前端工程师日常推荐什么浏览器？通往中高端Web前端(1)

前言

这里系列到此已经发布的四篇，分别是：

css篇：

“金三银四”，让我们愉快的开始准备Web面经吧：CSS篇

3篇JavaScript：

“金三银四”，让我们愉快的开始准备Web面经吧：JavaScript-上

中高端Web前端面试题，直击BAT：JavaScript篇

元宵节，猿宵节，写代码之余面经走一波：JavaScript篇

今天的内容，是浏览器篇，希望可以给大家带来帮助。

正文

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); } 复制代码

限制: