重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

浏览器的面试题有哪些

本文小编为大家详细介绍“浏览器的面试题有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“浏览器的面试题有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

创新互联建站-专业网站定制、快速模板网站建设、高性价比梁平网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式梁平网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖梁平地区。费用合理售后完善,10余年实体公司更值得信赖。

浏览器的面试题有哪些

1.常见的浏览器内核有哪些?

浏览器的内核可以分成两部分:

渲染引擎JS引擎注意:我们常说的浏览器内核就是指渲染引擎

由于JS引擎越来越独立,内核就指的只是渲染引擎了,渲染引擎主要用来请求网络页面资源解析排版后呈现给用户

浏览器/RunTime内核(渲染引擎)JavaScript 引擎
ChromeBlink(28~) Webkit(Chrome 27)V8
FireFoxGeckoSpiderMonkey
SafariWebkitJavaScriptCore
EdgeEdgeHTMLChakra(For JavaScript)
IETridentChakra(For JScript)
OperaPresto->blinkLinear A(4.0-6.1)/ Linear B(7.0-9.2)/ Futhark(9.5-10.2)/ Carakan(10.5-)
Node.js-V8

2.浏览器的主要组成部分有哪些?

  • 用户界面:包括地址栏,前进/后退/刷新/书签等按钮

  • 浏览器引擎:在用户界面和呈现引擎之间传送指令

  • 渲染引擎:用来绘制请求的内容

  • 网络:用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作

  • JavaScript解释器:用来解析执行JavaScript代码

  • 用户界面后端:用于绘制基本的窗口小部件,比如组合框和窗口,底层使用操作系统的用户接口

  • 数据存储:属于持久层,浏览器在硬盘中保存类似cookie的各种数据,HTML5定义了web database技术,这是一种轻量级完整的客户端存储技术

注意:与大多数浏览器不同的是,谷歌(Chrome)浏览器的每个标签页都分别对应一个呈现引擎实例。每个标签页都是一个独立的进程

浏览器的面试题有哪些

3.说一说从输入URL到页面呈现发生了什么?

这个题可以说是面试最常见也是一道可以无限难的题了,一般面试官出这道题就是为了考察你的前端知识深度。

1、浏览器接受URL开启网络请求线程(涉及到:浏览器机制,线程与进程等)

2、开启网络线程到发出一个完整的http请求(涉及到:DNS查询,TCP/IP请求,5层网络协议等)

3、从服务器接收到请求到对应后台接受到请求(涉及到:负载均衡,安全拦截,后台内部处理等)

4、后台与前台的http交互(涉及到:http头,响应码,报文结构,cookie等)

5、缓存问题(涉及到:http强缓存与协商缓存,缓存头,etag,expired,cache-control等)

6、浏览器接受到http数据包后的解析流程(涉及到html词法分析,解析成DOM树,解析CSS生成CSSOM树,合并生成render渲染树。然后layout布局,painting渲染,复合图层合成,GPU绘制,外链处理等)

7、css可视化模型(涉及到:元素渲染规则,如:包含块,控制框,BFC,IFC等)

8、JS引擎解析过程(涉及到:JS解析阶段,预处理阶段,执行阶段生成执行上下文,VO(全局对象),作用域链,回收机制等)

你会发现一个简单的输入URL到页面呈现,之间会发生这么多过程,是不是瞬间觉得崩溃了?(别急,这一章我们不讲这么深,先教你如何回答这个问题,后面这一节单独出文章讲)

  • 浏览器通过DNS服务器得到域名的IP地址,向这个IP地址请求得到HTML文本

  • 浏览器渲染进程解析HTML文本,构建DOM树

  • 解析HTML的同时,如果遇到内联样式或者样式文件,则下载并构建样式规则,如果遇到JavaScript脚本,则会下载执行脚本

  • DOM树和CSSOM构建完成之后,渲染进程将两者合并成渲染树(render tree)

  • 渲染进程开始对渲染树进行布局,生成布局树(layout tree)

  • 渲染树对布局树进行绘制,生成绘制记录

浏览器的面试题有哪些

4.浏览器是如何解析代码的?

解析HTML

HTML是逐行解析的,浏览器的渲染引擎会将HTML文档解析并转换成DOM节点。

  • 将HTML解析成许多Tokens

  • 将Tokens解析成object

  • 将object组合成一个DOM树

解析CSS

浏览器会从右往左解析CSS选择器

我们知道DOM树与CSSOM树合并成render树,实际上是将CSSOM附着到DOM树上,因此需要根据选择器提供的信息对DOM树进行遍历。

我们看一个例子:




  
    南玖
  
  前端

从右至左的匹配:

解析JS

在浏览器中有一个js解析器的工具,专门用来解析我们的js代码。

当浏览器遇到js代码时,立马召唤“js解析器”出来工作。

解析器会找到js当中的所有变量、函数、参数等等,并且把变量赋值为未定义(undefined)。

把函数取出来成为一个函数块,然后存放到仓库当中。这件事情做完了之后才开始逐行解析代码(由上向下,由左向右),然后再去和仓库进行匹配。

5.DOMContentLoaded与load的区别?

6.浏览器重绘域重排的区别?

重绘不一定导致重排,但重排一定绘导致重绘

如何触发重绘和重排?

任何改变用来构建渲染树的信息都会导致一次重排或重绘:

如何避免重绘或重排?

7.为什么JS是单线程的?

这主要与JS的用途有关,JS作为浏览器的脚本语言,最初主要是实现用户与浏览器的交互,以及操作DOM。这就决定了它只能是单线程,否则会带来许多复杂的同步问题。

举个例子:如果JS是多线程的,其中一个线程要修改一个DOM元素,另外一个线程想要删除这个DOM元素,这时候浏览器就不知道该听谁的。所以为了避免复杂性,从一诞生,JavaScript就被设计成单线程。

为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质

8.CSS加载会阻塞DOM吗?

先上结论

CSSOM的作用

由之前讲到的浏览器渲染流程我们可以看出:

JS需要等待CSS的下载,这是为什么呢?(CSS阻塞DOM执行)

如果JS脚本的内容是获取元素的样式,那它就必然依赖CSS。因为浏览器无法感知JS内部到底想干什么,为避免样式获取,就只好等前面所有的样式下载完毕再执行JS。但JS文件与CSS文件下载是并行的,CSS文件会在后面的JS文件执行前先加载执行完毕,所以CSS会阻塞后面JS的执行

避免白屏,提高CSS的加载速度

9.JS会阻塞页面吗?

先上结论

JS会阻塞DOM的解析,因此也就会阻塞页面的加载

这也是为什么我们常说要把JS文件放在最下面的原因

由于 JavaScript 是可操纵 DOM 的,如果在修改这些元素属性同时渲染界面(即 JavaScript 线程和 UI 线程同时运行),那么渲染线程前后获得的元素数据就可能不一致了。

因此为了防止渲染出现不可预期的结果,浏览器设置 **「GUI 渲染线程与 JavaScript 引擎为互斥」**的关系。

当 JavaScript 引擎执行时 GUI 线程会被挂起,GUI 更新会被保存在一个队列中等到引擎线程空闲时立即被执行。

当浏览器在执行 JavaScript 程序的时候,GUI 渲染线程会被保存在一个队列中,直到 JS 程序执行完成,才会接着执行。

因此如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。

10.defer和async的区别?

11.浏览器的垃圾回收机制

垃圾回收是一种自动的内存管理机制。当计算机上的动态内存不再需要时,就应该予以释放。

需要注意的是,自动的意思是浏览器可以自动帮助我们回收内存垃圾,但并不代表我们不用关心内存管理,如果操作不当,JavaScript中仍然会出现内存溢出的情况,造成系统崩溃。

由于字符串,数组,对象等都没有固定大小,因此需要当它们大小已知时,才能对他们进行动态的存储分配。JavaScript程序每次创建字符串,数组或对象时,解释器都必须分配内存来存储那个实体。

JavaScript解释器可以检测到何时程序不在使用一个对象了,当它确定这个对象是无用的时候,他就知道不再需要这个对象了,就可以把它占用的内存释放掉了。

浏览器通常采用的垃圾回收有两种方法:标记清除引用计数

标记清除

这是JavaScript中最常用的垃圾回收方式

从2012年起,所有现代浏览器都使用了标记清除的垃圾回收方法,除了低版本IE还是采用的引用计数法。

那么什么叫标记清除呢?

JavaScript中有一个全局对象,定期的,垃圾回收器将从这个全局对象开始,找出所有从这个全局对象开始引用的对象,再找这些对象引用的对象...对这些活跃的对象标记,这是标记阶段。清楚阶段就是清楚那些没有被标记的对象。

标记清除有一个问题,就是在清除之后,内存空间是不连续的,即出现了内存碎片。如果后面需要一个比较大的连续的内存空间,那将不能满足要求。而标记整理方法可以有效德地解决这个问题。

在标记的过程中,引入了概念:三色标记法,三色为:

标记整理:

标记阶段与标记清除法没什么区别,只是标记结束后,标记整理法会将存活的对象向内存的一边移动,最后清理掉边界内存。

引用计数

引用计数的含义是跟踪记录每个值被引用的次数。当一个变量A被赋值时,这个值的引用次数就是1,当变量A重新赋值后,则之前那个值的引用次数就减1。当引用次数变成0时,则说明没有办法再访问这个值了,所以就可以清除这个值占用的内存了。

大多数浏览器已经放弃了这种回收方式

内存泄漏

为避免内存泄漏,一旦数据不再使用,最好通过将其值设为null来释放其引用,这个方法叫做接触引用

哪些情况会造成内存泄漏?如何避免?

以 Vue 为例,通常有这些情况:

解决办法:beforeDestroy 中及时销毁

浏览器中不同类型变量的内存都是何时释放的?

12.说一说浏览器的缓存机制?

认识浏览器缓存

当浏览器请求一个网站时,会加载各种资源,对于一些不经常变动的资源,浏览器会将他们保存在本地内存中,下次访问时直接加载这些资源,提高访问速度。

如何知道资源是请求的服务器还是读取的缓存呢?

浏览器的面试题有哪些

看上面这张图,有些资源的size值是大小,有些是from disk cache,有些是from memory cache,显示大小的是请求的服务器资源,而显示后面两种的则是读取的缓存。

-memory cachedisk cache
相同点只能存储一些派生类资源文件只能存储一些派生类资源文件
不同点退出进程时数据会被清除退出进程时数据不会被清除
存储资源一般脚本、字体、图片会存在内存当中一般非脚本会存在内存当中,如css等

浏览器缓存分类

浏览器在向服务器请求资源时,首先判断是否命中强缓存,没命中再判断是否命中协商缓存

强缓存

浏览器在加载资源时,会先根据本地缓存资源的header中判断是否命中强缓存,如果命中则直接使用缓存中的资源,不会再向服务器发送请求。 (这里的header中的信息指的是 expirescache-control

该字段是 http1.0时的规范,它的值为一个绝对时间的 GMT 格式的时间字符串,比如 Expires:Mon,18 Oct 2066 23:59:59 GMT。这个时间代表着这个资源的失效时间,在此时间之前,即命中缓存。这种方式有一个明显的缺点,由于失效时间是一个绝对时间,所以当服务器与客户端时间偏差较大时,就会导致缓存混乱。所以这种方式很快在后来的HTTP1.1版本中被抛弃了。

Cache-Control 是 http1.1时出现的 header 信息,主要是利用该字段的 max-age值来进行判断,它是一个相对时间,例如 Cache-Control:max-age=3600,代表着资源的有效期是 3600 秒。cache-control 除了该字段外,还有下面几个比较常用的设置值:

no-cache:需要进行协商缓存,发送请求到服务器确认是否使用缓存。

no-store:禁止使用缓存,每一次都要重新请求数据。

public:可以被所有的用户缓存,包括终端用户和 CDN 等中间代理服务器。

private:只能被终端用户的浏览器缓存,不允许 CDN 等中继缓存服务器对其缓存。

Cache-Control 与 Expires 可以在服务端配置同时启用,同时启用的时候 Cache-Control 优先级高。

协商缓存

当强缓存没命中时,浏览器会发送一个请求到服务器,服务器根据 header 中的信息来判断是否命中协商缓存。如果命中,则返回304,告诉浏览器资源未更新,可以使用本地缓存。 (这里的header信息指的是Last-Modify/If-Modify-SinceETag/If-None-Match

浏览器第一次请求一个资源的时候,服务器返回的 header 中会加上 Last-Modify,Last-modify 是一个时间标识该资源的最后修改时间。

当浏览器再次请求该资源时,request 的请求头中会包含 If-Modify-Since,该值为缓存之前返回的 Last-Modify。服务器收到 If-Modify-Since 后,根据资源的最后修改时间判断是否命中缓存。

如果命中缓存,则返回 304,并且不会返回资源内容,并且不会返回 Last-Modify。

缺点:

短时间内资源发生了改变,Last-Modified 并不会发生变化。

周期性变化。如果这个资源在一个周期内修改回原来的样子了,我们认为是可以使用缓存的,但是 Last-Modified 可不这样认为,因此便有了 ETag。

与 Last-Modify/If-Modify-Since 不同的是,Etag/If-None-Match 返回的是一个校验码。ETag 可以保证每一个资源是唯一的,资源变化都会导致 ETag 变化。服务器根据浏览器上送的 If-None-Match 值来判断是否命中缓存。

与 Last-Modified 不一样的是,当服务器返回 304 Not Modified 的响应时,由于 ETag 重新生成过,response header 中还会把这个 ETag 返回,即使这个 ETag 跟之前的没有变化。

Last-Modified 与 ETag 是可以一起使用的,服务器会优先验证 ETag,一致的情况下,才会继续比对 Last-Modified,最后才决定是否返回 304。

总结

当浏览器访问一个已经访问过的资源是,它的步骤是:

1.先看是否命中强缓存,命中?的话直接使用缓存

2.没命中强缓存,则会发送请求到服务器看是否命中?协商缓存

3.如果命中了协商缓存,服务器会返回304告诉浏览器可以使用本地缓存

4.没命中协商缓存,则服务器会返回新的资源给浏览器

13.什么是浏览器的同源策略,以及跨域?

同源策略

同源策略是浏览器的一种自我保护行为。所谓的同源指的是:协议,域名,端口均要相同

浏览器中大部分内容都是受同源策略限制的,但是以下三个标签不受限制:



跨域

跨域指的是浏览器不能执行其它域名下的脚本。它是由浏览器的同源策略限制的。

你可能会想跨域请求到底有没有发送到服务器?

事实上,跨域请求时能够发送到服务器的,并且服务器也能过接受的请求并正常返回结果,只是结果被浏览器拦截了。

跨域解决方案(列出几个常用的)

它主要是利用script标签不受浏览器同源策略的限制,可以拿到从其他源传输过来的数据,需要服务端支持。

优缺点:

兼容性比较好,可用于解决主流浏览器的跨域数据访问的问题。缺点就是仅支持get请求,具有局限性,不安全,可能会受到XSS攻击。

思路:

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP