浏览器原理----前端面试必备---复习专用

浏览器原理----前端面试必备---复习专用,第1张

目录 1. 常见http status2. 浏览器跨域问题2.1 同源策略2.2 跨域 3. 浏览器渲染机制3.1 页面加载过程3.2 页面渲染过程3.3 浏览器渲染过程(解析html)遇到JS文件3.4 什么情况阻塞渲染3.5 浏览器渲染优化3.5 正确性能优化思路 4. 浏览器重排重绘4.3 重绘(repaint)4.2 重排(回流)4.3 减少重绘重排 5. 浏览器本地存储5.1 浏览器本地存储方式及使用场景5.2 Cookie、LocalStorage、SessionStorage区别5.3 前端储存的⽅式 6. 浏览器事件机制6.1. 事件 + 事件模型6.2 事件委托6.3 同步和异步6.4 事件循环6.4 宏任务和微任务 7. 浏览器垃圾回收机制7.1 哪些 *** 作会造成内存泄漏
本系列持续更新…

1. 常见http status

1XX系列:指定客户端应相应的某些动作,代表请求已被接受,需要继续处理。由于 HTTP/1.0 协议中没有定义任何 1xx 状态码,所以除非在某些试验条件下,服务器禁止向此类客户端发送 1xx 响应。

2XX系列:代表请求已成功被服务器接收、理解、并接受。这系列中最常见的有200、201状态码。

3XX系列:代表需要客户端采取进一步的 *** 作才能完成请求,这些状态码用来重定向,后续的请求地址(重定向目标)在本次响应的 Location 域中指明。这系列中最常见的有301、302状态码。

4XX系列:表示请求错误。代表了客户端看起来可能发生了错误,妨碍了服务器的处理。常见有:401、404状态码。

5xx系列:代表了服务器在处理请求的过程中有错误或者异常状态发生,也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。常见有500、503状态码。

2开头 (请求成功)表示成功处理了请求的状态代码
200 (成功ok) 服务器已成功处理了请求
201 (已创建) 请求成功并且服务器创建了新的资源
202 (已接受) 服务器已接受请求,但尚未处理
203 (非授权信息) 服务器已成功处理了请求,但返回的信息可能来自另一来源
204 (无内容) 服务器成功处理了请求,但没有返回任何内容
205 (重置内容) 服务器成功处理了请求,但没有返回任何内容
206 (部分内容) 服务器成功处理了部分 GET 请求

3开头 (请求被重定向)表示要完成请求,需要进一步 *** 作。 通常,这些状态代码用来重定向
300 (多种选择) 针对请求,服务器可执行多种 *** 作。 服务器可根据请求者 (user agent) 选择一项 *** 作,或提供 *** 作列表供请求者选择。
301 (永久移动) 请求的网页已永久移动到其他URL。 服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置。
302 (临时移动) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。
303 (查看其他位置) 请求者应当对不同的位置使用单独的 GET 请求来检索响应时,服务器返回此代码。
304 (未修改) 表示客户端缓存的版本是最近的 。自从上次请求后,请求的网页未修改过。 服务器返回此响应时,不会返回网页内容。
305 (使用代理) 请求者只能使用代理访问请求的网页。 如果服务器返回此响应,还表示请求者应使用代理。
307 (临时重定向)请求的文档被临时移动到别处。 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。

4开头 (请求错误)这些状态代码表示请求可能出错,妨碍了服务器的处理
400 (错误请求) 服务器不理解请求的语法。
401 (未授权) 请求要求用户身份验证。 对于需要登录的网页,服务器可能返回此响应。
403 (禁止) 服务器拒绝请求。通常是权限设置所致
404 (未找到) 服务器找不到请求的网页。
405 (方法禁用) 禁用请求中指定的方法。
406 (不接受) 无法使用请求的内容特性响应请求的网页。
407 (需要代理授权) 此状态代码与 401(未授权)类似,但指定请求者应当授权使用代理。
408 (请求超时) 服务器等候请求时发生超时。
409 (冲突) 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
410 (已删除) 如果请求的资源已永久删除,服务器就会返回此响应。

5开头(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误,而不是请求出错
500 (服务器内部错误) 服务器遇到错误,无法完成请求。
501 (尚未实施) 服务器不具备完成请求的功能。 例如,服务器无法识别请求方法时可能会返回此代码。
502 (错误网关) 服务器作为网关或代理,从上游服务器收到无效响应。
503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常,这只是暂时状态。
504 (网关超时) 服务器作为网关或代理,未及时从上游服务器获取请求。
505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。

2. 浏览器跨域问题

跨域问题其实就是浏览器的同源策略造成的。

为什么浏览器禁止跨域

为了防止网站被恶意攻击(XSS、CSRF攻击),导致用户信息被泄露,所以浏览器使用了同源策略。

2.1 同源策略

同源策略是一种约定,同源是指 “协议 + 端口 + 域名” 三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

同源策略的限制
Cookie、LocalStorage、IndexedDB 等存储性内容
DOM 节点
当前域下 ajax 无法发送跨域请求

2.2 跨域

跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制。
跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。

跨域解决方案

JSONP跨域Node中间件代理nginx反向代理WebSocketpostMessagelocation.hash + iframewindow.name + iframedocument.domain + iframeCORS跨域资源共享

CORS支持所有类型的HTTP请求,是跨域HTTP请求的根本解决方案
CORS 需要浏览器和后端同时支持,浏览器会自动进行 CORS 通信,实现 CORS 通信的关键是后端。只要服务器实现了 CORS,就实现了跨域。

3. 浏览器渲染机制

浏览器内核(支持浏览器运行的最核心的程序):包括JS引擎+渲染引擎

3.1 页面加载过程

浏览器 = 客户端

浏览器根据 DNS 服务器得到域名对应的 IP 地址向该 IP 地址发送 HTTP 请求服务器收到、处理并返回 HTTP 请求浏览器得到返回内容
返回的内容其实就是一堆 HMTL 格式的字符串,因为只有 HTML 格式浏览器才能正确解析 3.2 页面渲染过程

DOM --> CSSOM --> RenderTree --> Layout --> Paint

解析HTML,生成DOM树
字节数据 => 字符串 => Token => Node => DOM解析CSS,生成CSS规则树
字节数据 => 字符串 => Token => Node => CSSOM解析完成后,通过 DOM 树和 CSS 规则树 构建 Rendering Tree布局Render树(layout 重排/ reflow回流)绘制Render树 (paint)浏览器将各层信息发送给GUI,GUI将各层合成,显示在屏幕上 3.3 浏览器渲染过程(解析html)遇到JS文件

JS 的执行是在生成渲染树之前的。这也是为什么 JavaScript 的加载、解析与执行会阻塞 DOM 的构建,阻塞页面的渲染。

渲染过程中,如果遇到