关于面试:浏览器之基础缓存渲染问答

1次阅读

共计 3017 个字符，预计需要花费 8 分钟才能阅读完成。

目前筹备到了浏览器这部分，加上之前面试过程中，对于这部分的问题都答的很差，所以把一些自认为有价值的知识点整顿了进去。

什么是跨域？为什么浏览器要应用同源策略？你有几种形式能够解决跨域问题？理解预检申请嘛？

浏览器的同源策略导致了跨域，同源策略属于浏览器的平安机制，如果 协定、域名、端口 有一个不同就是跨域，申请会失败。
同源策略次要是用于防备 CSRF 攻打的。简略点说，CSRF 攻打是利用用户的登录态发动歹意申请。

解决跨域的办法：JSONP/CORS/ 代理服务

1.JSONP

JSONP 的原理很简略，就是利用 <script> 标签没有跨域限度的破绽。通过 <script> 标签指向一个须要拜访的地址并提供一个回调函数来接收数据当须要通信时。JSONP 应用简略且兼容性不错，然而只限于 get 申请。

<script src="http://domain/api?param1=a&param2=b&callback=jsonp"></script>
<script>
    function jsonp(data) {console.log(data)
    }
</script>

2.CORS

CORS 须要浏览器和后端同时反对。浏览器会主动进行 CORS 通信，实现 CORS 通信的要害是后端。只有后端实现了 CORS，就实现了跨域。
服务端设置 Access-Control-Allow-Origin 就能够开启 CORS。该属性示意哪些域名能够拜访资源，如果设置通配符则示意所有网站都能够拜访资源。
尽管 CORS 和前端没什么关系，然而须要晓得通过这种形式解决跨域问题的话，发送的申请会别离为简略申请和简单申请。
对于简单申请来说，首先会发动一个预检申请，该申请是 option 办法的，通过该申请来晓得服务端是否容许跨域申请。

3. 代理
通过代理把前端申请的域名转发到后端域名上，暗藏实在的服务端。可通过 webpack 或nigix实现。

有几种形式能够实现存储性能，别离有什么优缺点？什么是 Service Worker？

cookie，localStorage，sessionStorage，indexDB皆可实现存储

个性	cookie	localStorage	sessionStorage	indexDB
数据生命周期	个别由服务器生成，能够设置过期工夫	除非被清理，否则始终存在	页面敞开	除非被清理，否则始终存在
数据存储大小	4K	5M	5M	有限

对 cookie 应用时须要留神 安全性

属性	作用
value	如果用于保留用户登录态，应该将该值加密，不能应用明文的用户标识
http-only	不能通过 JS 拜访 Cookie，缩小 XSS 攻打
secure	只能在协定为 HTTPS 的申请中携带
same-site	规定浏览器不能在跨域申请中携带 Cookie，缩小 CSRF 攻打

Service Worker 是运行在浏览器背地的独立线程，个别能够用来实现 缓存性能 。应用 Service Worker 的话，传输协定必须为 HTTPS。因为 Service Worker 中波及到 申请拦挡，所以必须应用 HTTPS 协定来保障平安。实现缓存性能个别分为三个步骤：

首先须要先注册 Service Worker，
而后监听到 install 事件当前就能够缓存须要的文件，
在下次用户拜访的时候就能够通过拦挡申请的形式查问是否存在缓存，存在缓存的话就能够间接读取缓存文件，否则就去申请数据。

事件的触发过程是怎么样的？晓得什么是事件代理嘛？

事件触发有三个阶段：

window 往事件触发处流传，遇到注册的捕捉事件会触发
流传到事件触发处时触发注册的事件
从事件触发处往 window 流传，遇到注册的冒泡事件会触发

一般来说，如果咱们只心愿事件只触发在指标上，这时候能够应用 stopPropagation 来阻止事件的进一步流传。

事件代理
如果一个节点中的子节点是动静生成的，那么子节点须要注册事件的话应该注册在父节点上
事件代理的形式相较于间接给指标注册事件来说，因为不须要给子节点登记事件，所以节俭了内存。

浏览器缓存机制

对于一个数据申请来说，能够分为 发动网络申请、后端解决、浏览器响应 三个步骤。浏览器缓存能够帮忙咱们在第一和第三步骤中优化性能。比如说间接应用缓存而不发动申请，或者发动了申请但后端存储的数据和前端统一，那么就没有必要再将数据回传回来，这样就缩小了响应数据。

接下来的内容中咱们将通过以下几个局部来探讨浏览器缓存机制：

缓存地位：Service Worker > Memory Cache > Disk Cache > Push Cache > 网络申请，以上示意优先级从大到小排序。

缓存策略: 强缓存和协商缓存，并且缓存策略都是通过设置 HTTP Header 来实现的。不细说了，至今还没人问过。

理论场景利用缓存策略 :
对于频繁变动的资源：首先须要应用 Cache-Control: no-cache 使浏览器每次都申请服务器，而后配合 ETag 或者 Last-Modified 来验证资源是否无效。这样的做法尽管不能节俭申请数量，然而能显著缩小响应数据大小。

对于代码文件：当初都会应用工具来打包代码，那么咱们就能够对文件名进行哈希解决，只有当代码批改后才会生成新的文件名。基于此，咱们就能够给代码文件设置缓存有效期一年 Cache-Control: max-age=31536000，这样只有当 HTML 文件中引入的文件名产生了扭转才会去下载最新的代码文件，否则就始终应用缓存。

目前还没遇到面试官问这块的知识点，性能优化方面还是围绕 webpack 聊的比拟多。

浏览器渲染原理

不同的浏览器有不同的渲染引擎，这里次要说的是 Webkit 渲染引擎。

当咱们关上一个网页时，浏览器都会去申请对应的 HTML 文件。尽管平时咱们写代码时都会分为 JS、CSS、HTML 文件，也就是字符串，然而计算机硬件是不了解这些字符串的，所以在网络中传输的内容其实都是 0 和 1 这些 字节数据 。当浏览器接管到这些字节数据当前，它会将这些 字节数据转换为字符串，也就是咱们写的代码。

当数据转换为字符串当前，浏览器会先将这些字符串通过词法剖析转换为标记（token），这一过程在词法剖析中叫做 标记化（tokenization）。

那么什么是标记呢？简略来说，标记还是字符串，是形成代码的 最小单位。这一过程会将代码分拆成一块块，并给这些内容打上标记，便于了解这些最小单位的代码是什么意思。

当完结标记化后，这些标记会紧接着转换为 Node，最初这些 Node 会依据不同 Node 之前的分割构建为一颗 DOM 树。

以上就是浏览器从网络中接管到 HTML 文件而后一系列的转换过程，过程大抵如下：
字节数据 => 字符串 => 标记（Token）=> Node => DOM

在解析 HTML 文件的时候，浏览器还会遇到 CSS 和 JS 文件，这时候浏览器也会去下载并解析这些文件，解析 CSS 文件的过程与 HTML 文件极为相似，最初会生成一颗 CSSOM树。

当咱们生成 DOM 树和 CSSOM 树当前，浏览器会将这两棵树组合为渲染树，而后依据渲染树来进行布局（也能够叫做回流），而后调用 GPU 绘制，合成图层，显示在屏幕上。

除此之外，还有些系统的知识点，因为曾经熟记于心就不做开展了，包含：
1. 重绘（Repaint）和回流（Reflow）
2.requestAnimationFrame API 绘制动画
3. 操作 DOM 性能很差的起因

前天拿到了一个 offer，然而这次面试的体验很差，岗位待遇也没达到预期，三月持续加油吧，祝我好运????

正文完