中高级前端面试宝典之浏览器篇

本文详细探讨了浏览器渲染进程,包括GUI渲染线程、JS引擎线程等,解析浏览器渲染机制,分析阻塞渲染的情况,并提出了优化策略。此外,还介绍了浏览器缓存机制,如Service Worker、Memory Cache、Disk Cache等,讨论了强缓存与协商缓存的原理。同时,文章涵盖了浏览器乱码原因、同源策略、跨域CORS的实现,以及浏览器事件流向和常见内核的概述。
摘要由CSDN通过智能技术生成

中高级前端面试宝典

作为一名前端开发工程师,要掌握的知识点是多而杂的,在面试刷题阶段,经常没头没脑的,我将面试题系统化,分了好几个系列,祝愿大家(包括我)在这个疫情刚过去的互联网寒冬找到事儿少钱多🤪的工作。

第一章 前端面试宝典之浏览器篇



前言

没有前言,废话不说,马上进入正题!


一、浏览器渲染

浏览器渲染进程

进程和线程

我们先了解一下进程和线程:
进程是 CPU 资源分配的最小单位,线程是 CPU 调度的最小单位。
知乎上有位大佬的比喻我觉得十分的形象有助于理解。
在这里插入图片描述

渲染进程

浏览器是多进程的,浏览器的进程有:

  • 浏览器主进程
  • 第三方插件进程
  • GPU进程
  • 浏览器渲染进程

浏览器渲染进程内部又是多线程的:

  1. GUI渲染线程:负责渲染浏览器页面,解析和构建DOM、CSSOM和渲染树,绘制页面。重绘和回流也会执行。
  2. JS引擎线程:JS内核,解析和运行javascrpit脚本,一个标签页只有一个JS线程。JS线程跟GUI线程是互斥的
  3. 事件触发线程:监听和触发事件,处理事件循环(event loop)。比如我们的click事件,JS引擎解析完click事件中的代码,会将该任务放入事件触发线程,等到事件被触发时,事件触发线程会将对应的任务放入待处理队列的队尾,等待JS引擎空闲时处理。
  4. 定时器触发线程:setTimeOut和setTimeInterval所在的线程。用来计时并触发事件,时间到了以后将事件放入待处理队列的队尾等待执行。所以定时器中的代码并不是准时准点执行的。
  5. 异步http请求线程:XMLHttpRequest链接后,浏览器新开一个线程来处理。如果状态变更,将回调函数放入待处理队列

运行机制是:宏任务 -> 微任务 -> 调度 GUI 渲染线程 -> 宏任务……

浏览器渲染机制

  • 解析html,构建DOM树
  • 解析CSS,生成CSSOM树
  • 合并dom树和css规则树,生成render渲染树
  • 根据render渲染树进行布局
  • 为渲染树分层,生成分层树
  • 为每个分层树生成绘制列表,并提交到合成线程
  • 合成线程将图层分成不同的图块,并通过栅格化将图块转化为位图
  • 合成线程给浏览器进程发指令
  • 最后:浏览器生成页面并显示

对于浏览器渲染机制,我找到一篇【图解浏览器渲染原理及流程】,想要详细了解和深入理解的大家应该看完就可以了


说完渲染流程不可避免会提到重绘和回流

  • 重绘和回流都是以图层为单位
  • 分图层的条件:有3D的CSS属性、video标签、canvas标签、css3动画
  • 回流(重排)一定会触发重绘,布
  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值