中高级前端面试宝典之浏览器篇
创始人
2024-05-28 11:35:37
0

中高级前端面试宝典

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

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


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

  • 中高级前端面试宝典
  • 前言
  • 一、浏览器渲染
    • 浏览器渲染进程
      • 进程和线程
      • 渲染进程
    • 浏览器渲染机制
    • 阻塞渲染的情况
    • 浏览器渲染优化
  • 二、浏览器缓存机制
    • 缓存位置
    • 强制缓存
    • 协商缓存
    • 总结
    • 强制刷新Ctrl + F5 发生什么
  • 浏览器产生乱码的原因
  • 浏览器同源策略、跨域
  • 浏览器事件流向
  • 常见浏览器所用内核
  • 浏览器本地存储方式及使用场景


前言

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


一、浏览器渲染

浏览器渲染进程

进程和线程

我们先了解一下进程和线程:
进程是 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动画
  • 回流(重排)一定会触发重绘,布局改变、节点增加减少、窗口变大变小等都会回流
  • 重绘,如果图层某个元素要重绘,则整个图层都要重绘

阻塞渲染的情况

阻塞解析:阻塞点后面的标签不会被解析,阻塞解析不一定会阻塞其他外部资源的加载
阻塞渲染:阻塞点后面的标签会继续被解析,img,link等会继续发送请求获取外部资源,但不会触发页面渲染(白屏 ),也不会执行 JavaScript 代码

阻塞渲染的情况:

  1. JS
    ① 阻塞DOM解析–因为JS有可能对DOM做操作
    ② 阻塞页面渲染–同上
    ③ 阻塞后续js的执行
    ④ js执行和CSS渲染是互斥的
  2. CSS
    ① style标签中:由html解析器进行解析,不阻塞浏览器渲染,不阻塞DOM解析
    ② link引入的,由CSS解析器进行解析,阻塞浏览器渲染,阻塞后面JS执行,不阻塞DOM解析
    以上阻塞都不会阻塞浏览器加载外部资源。

浏览器渲染优化

  1. JS
    a. 尽量放在body后面
    b. 使用defer和async

     defer 在下载完成以后立即异步加载,加载后等待DOM树构建好再执行async 在下载完成后立即异步加载,加载后立即执行JS代码。
    
  2. CSS
    a. style: GUI直接渲染。如果css少,尽量内嵌
    b. link 浏览器派发新的线程(HTTP线程)去加载资源文件,GUI渲染进程会继续向下渲染代码
    c. @import GUI渲染进程会暂时停止,去服务器加载文件,资源返回之前不会继续渲染

  3. DOM树和CSSOM树
    a. 减少HTML文件的代码层级
    b. 使用语义化标签
    c. 减少CSS代码的成绩

  4. 减少回流和重绘
    a. 尽量不要使用table布局
    b. 位置变换尽量使用transform
    c. 不频繁操作元素样式,可以修改类名
    d. 使用absolute和fixed,使元素脱离文档流,新建图层

  5. 浏览器自身的优化
    将所有的回流和重绘操作放在一个队列,固定间隔或者固定内存进行一次批处理。

二、浏览器缓存机制

浏览器缓存机制其实就是HTTP缓存,由HTTP报文的缓存标识决定

缓存位置

缓存位置有四种,优先级如下:

  1. Service Worker
    • 一个服务器与浏览器之间的中间人角色,如果网站注册了service worker,就可以拦截当前网站所有的请求,然后进行判断。
    • 需要使用HTTPS协议保障安全,且可以自由控制缓存文件、匹配方式以及如何读取,缓存是持续的
    • 是基于web worker的。
    • 可以访问cache和indexDB
  2. Memory Cache
    • 内存中的缓存,主要包含当前页面中的资源如:样式、脚本、图片
    • 缓存持续性很短,会随着进程的释放而是放
  3. Disk Cache
    存在硬盘中,读取速度较内存更慢,容量和时效更大
  4. Push Cache
    推送缓存,是HTTP2支持
    只存在于session,缓存时间很短,chrome中仅仅5分钟左右
    并非严格执行HTTP头中的缓存指令

以上四种缓存都没有命中的时候,才会向服务器发送请求。
服务器接收到请求以后,会根据响应报文中的HTTP请求头的缓存标识来决定是否缓存。

强制缓存

向浏览器缓存中查找请求结果,然后根据该结果的缓存规则来决定是否使用该缓存结果的过程。

强缓存的设置通过两种HTTP Header:Expires 和 Cache-Control, HTTP1.1以后不再使用Expires

强制缓存的情况主要由三种:

  1. 不存在缓存结果和缓存标识,强制缓存失效,就直接向服务器发送请求
  2. 存在缓存结果和缓存标识,但是结果失效,则协商缓存
  3. 存在缓存结果和缓存标识,且结果没有失效,强制缓存生效,从缓存中读取数据,http Code为200,size显示form disk cache或者form memory cache

Cache-Control
主要用于控制网页缓存,有很多值:

public 标识响应可以被客户端、代理服务器缓存
private 只有客户端缓存(默认取值)
max-age 缓存秒数
no-store 任何内容都不缓存
no-cache 被缓存但下次请求时,需要验证是否过期(协商缓存)

协商缓存

协商缓存生效时,服务器返回304和not Modified,意思是该资源无更新,直接从浏览器缓存中读取
协商缓存设置header头:Last-Modified 和 ETag

Last-Modified是服务器返回资源的同时,添加在response header中的,值是资源在服务器上最后的修改时间
If-Modified-Since 是浏览器第二次请求的时候加在header头中的,值是Last-Modified的值

ETag是服务器返回的当前资源的唯一标识,只要资源变化,就重新生成ETag
浏览器发送请求的时候就会将ETag的值放在If-None-Match中


总结

强缓存不会向服务器发送请求,而是直接在浏览器缓存中取值
强缓存不生效时才会使用协商缓存,就是向服务器发送请求来决定要不要使用浏览器中的缓存数据

强制刷新Ctrl + F5 发生什么

普通的F5刷新,页面只是普通的刷新一下,获取数据啥的,该强制缓存就强制缓存、该协商就协商
强制刷新Ctrl + F5,浏览器会清空缓存,重新下载资源,并且请求头中也不会有if-None-Macth和if-modified-Since,强迫服务器不准返回304,而是返回一份真正的数据。

浏览器产生乱码的原因

  • 网页源代码是gbk的编码,而内容中的中文字是utf-8编码的,这样浏览器打开即会出现html乱码,反之也会出现乱码;
  • html网页编码是gbk,而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码;
  • 浏览器不能自动检测网页编码,造成网页乱码。

解决办法:

  • 使用软件编辑HTML网页内容;
  • 如果网页设置编码是gbk,而数据库储存数据编码格式是UTF-8,此时需要程序查询数据库数据显示数据前进程序转码;
  • 如果浏览器浏览时候出现网页乱码,在浏览器中找到转换编码的菜单进行转换。

浏览器同源策略、跨域

浏览器事件流向

常见浏览器所用内核

浏览器本地存储方式及使用场景

Cookie、LocalStorage、SessionStorage区别
前端储存的方式有哪些

相关内容

热门资讯

东方航空×泡泡玛特:DIMOO... 文旅观察近日,中国东方航空与泡泡玛特携手推出的DIMOO中泰建交50周年限定主题彩绘专机正式首航,执...
多个“第一”!重大突破! 今天(7月9日)上午国新办举行首场“高质量完成‘十四五’规划”系列主题新闻发布会一起看 ↓国家发展改...
中广核新能源:6月发电量140... 格隆汇7月9日|中广核新能源(1811.HK)公告,6月本集团按合并报表口径完成发电量1,403.5...
1.52亿千瓦!江苏电网最高用... 转自:上观新闻7月7日,江苏电网最高用电负荷,年内第三次刷新历史新高,达1.52亿千瓦。截至目前,南...
ST华铭因信披违规被罚,收购聚... 近日,ST华铭(维权)(300462)发布公告,近日收到中国证券监督管理委员会上海监管局下发的《行政...
山西泽辰医药乌帕替尼缓释片启动... 药物临床试验登记与信息公示平台数据显示,山西泽辰医药科技有限公司的乌帕替尼缓释片在健康受试者中随机、...
西海都市报公布地址、订阅及零售... 本报地址:西宁市长江路5号 广告经营许可证: 广告部电话:6125601 排版:西海都市报社编辑部 ...
台风丹娜丝“绘就”陆家嘴诗意画... 转自:上观新闻连日来,受台风“丹娜丝”外围环流持续影响,上海晴雨相间,同时带来降温、大风,云雾光影间...
国家发改委:中国做的这件事,全... 转自:北京日报客户端在国新办今天(9日)举行的首场“高质量完成‘十四五’规划”系列主题新闻发布会上,...
或受欧盟法规影响,苹果将在欧盟...   炒股就看金麒麟分析师研报,权威,专业,及时,全面,助您挖掘潜力主题机会! IT之家 7 月 9...