中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(7)

通过父页面window.open()和子页面postMessage

• 异步下，通过 window.open('about: blank') 和 tab.location.href = '*'

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() 

回流必定触发重绘，重绘不一定触发回流。重绘的开销较小，回流的代价较高。

最佳实践:

• （编辑：ASP站长网）