一名【合格】前端工程师的自检清单（浏览器原理篇）

#浏览器原理

 

##1.各浏览器使用的JavaScript引擎以及它们的异同点、如何在代码中进行区分

 

各浏览器使用的JavaScript引擎：

https://www.cnblogs.com/gdutbean/archive/2012/02/21/2362003.html

 

##2.请求数据到请求结束与服务器进行了几次交互

参考资料：

https://blog.csdn.net/wangcheng2013/article/details/38944217

 

##3.可详细描述浏览器从输入URL到页面展现的详细过程

参考资料：

https://blog.csdn.net/zxcv19961204/article/details/88972553

 

##4.浏览器解析HTML代码的原理，以及构建DOM树的流程

 

浏览器解析HTML代码的原理：https://segmentfault.com/a/1190000016253407

 

构建DOM树的流程：

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model

https://kb.cnblogs.com/page/129756/#chapter3

 

##5.浏览器如何解析CSS规则，并将其应用到DOM树上

参考3，4

 

##6.浏览器如何将解析好的带有样式的DOM树进行绘制

参考3，4

 

##7.浏览器的运行机制，如何配置资源异步同步加载

参考资料：

https://www.cnblogs.com/caiyy/p/10406934.html

 

##8.浏览器回流与重绘的底层原理，引发原因，如何有效避免

参考：7

 

##9.浏览器的垃圾回收机制，如何避免内存泄漏

参考资料：https://www.cnblogs.com/yanglongbo/articles/9762359.html

 

##10.浏览器采用的缓存方案，如何选择和控制合适的缓存方案

缓存位置

从缓存位置上来说分为四种，并且各自有优先级，当依次查找缓存且都没有命中的时候，才会去请求网络。

 

Service Worker

Memory Cache

Disk Cache

Push Cache

 

根据是否需要向服务器重新发起HTTP请求将缓存过程分为两个部分，分别是强缓存和协商缓存。

 

强缓存：

不会向服务器发送请求，直接从缓存中读取资源，

在chrome控制台的Network选项中可以看到该请求返回200的状态码，

并且Size显示from disk cache或from memory cache。

强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control。

 

协商缓存

就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，

由服务器根据缓存标识决定是否使用缓存的过程，

主要有以下两种情况：

协商缓存生效，返回304和Not Modified

 

参考资料：https://www.jianshu.com/p/54cc04190252