共计 2449 个字符，预计需要花费 7 分钟才能阅读完成。
前言
对于浏览器常识，在现在的前端中也显的尤为重要了，面试中频繁被问及到，在这个上边小编也是吃过亏了的，明天就来分享一波儿一个前端攻城狮浏览器中须要晓得哪些知识点 ?
浏览器内核和渲染引擎
常见的浏览器内核有哪些
- Trident 内核：IE,360, 搜狗浏览器等。[又称 MSHTML]
- Presto 内核：Opera7 及以上。[Opera 内核原为：Presto，现为：Blink;]
- Webkit 内核：Safari,Chrome 等。[Chrome 的 Blink（WebKit 的分支）]
为什么咱们须要晓得一些根本的浏览器内核 ? 因为所有网页浏览器、电子邮件客户端以及其它须要显示网络内容的应用程序都须要内核
浏览器渲染引擎有人说是 Css 引擎和 Js 引擎，其实具体点应该是渲染引擎和 Js 引擎，为什么这么说，因为浏览器在渲染一个网页时，个别有三步
1、浏览器通过 HTMLParser 把 HTML 解析成 DOM Tree（俗称 DOM 树）。
2、浏览器通过 CSSParser 把 CSS 解析成 CSS Rule Tree（俗称 CSSOM 树）。
3、浏览器将 JavaScript 通过 DOM API 或者 CSSOM API 将 JS 代码解析并利用到布局中，依据 DOM 树和 CSSOM 树来结构 Render Tree（Rander 树）
最终的 Rander 树就是整个页面的文档构造形象示意，而后按要求出现响应的后果，所以联合这三步来剖析，单纯的 Css 渲染引擎从字面的意思上来讲，并不能齐全表白前两步
- 渲染引擎
- Js 引擎
渲染引擎：次要负责获得网页的内容（HTML、XML、图像等等）、以及计算网页的显示方式，而后会输入至浏览器，浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的成果也不雷同
JS 引擎： 次要负责解析和执行 javascript 代码来实现网页的动态效果
本地贮存
- cookie
- sessionStorage
- localStorage
通过一个表格来比照一下
对于 cookie 局部属性还须要留神一下安全性
- value 如果用于保留用户登录态，应该将该值加密
- http-only 不能通过 Js 拜访 Cookie，缩小 XSS 攻打
- secure 只能在协定为 HTTPS 的申请中携带
- same-site 规定浏览器不能在跨域申请中携带 Cookie，缩小 CSRF 攻打
浏览器缓存
简略来说, 浏览器缓存其实就是浏览器把 HTTP 获取的资源存储在本地的一种行为
缓存的优先级
1、先在内存中查找
2、如果内存中不存在, 则在硬盘中查找
3、如果硬盘中也没有, 那么就进行网络申请
4、申请获取的资源缓存到硬盘和内存
缓存分类
- 强缓存
- 协商缓存
先来捋一捋逻辑
1、当客户端申请某个资源时，会先依据这个资源的 http header 判断它是否命中强缓存，如果命中，则间接从本地获取缓存资源，不会发申请到服务器
2、当没有命中强缓存时，客户端会发送申请到服务器，服务器通过 request header 验证这个资源是否命中协商缓存，如果命中，服务器将返回 304，通知客户端从缓存中获取
3、当协商缓存也没命中时，服务器就会将资源返回客户端
- 当 ctrl+f5 强制刷新网页时，间接从服务器加载，跳过强缓存和协商缓存
- 当 f5 刷新网页时，跳过强缓存，然而会查看协商缓存
强缓存
- Expires（是 http1.0 时的标准，值为一个相对工夫的 GMT 格局的工夫字符串，代表缓存资源的过期工夫）
- Cache-Control:max-age（是 http1.1 的标准，强缓存利用其 max-age 值来判断缓存资源的最大生命周期，它的值单位为秒）
Cache-Control 还有一些罕用其它属性：
1、no-cache：须要进行协商缓存，发送申请到服务器确认是否应用缓存。
2、no-store：禁止应用缓存，每一次都要从新申请数据。
3、public：能够被所有的用户缓存，包含终端用户和 CDN 等两头代理服务器。
4、private：只能被终端用户的浏览器缓存，不容许 CDN 等两头代理服务器对其缓存。
Cache-Control 与 Expires 能够在服务端配置同时启用，同时启用的时候 Cache-Control 优先级高
协商缓存
- Last-Modified / If-Modified-Since
Last-Modified 值为资源最初更新工夫，随服务端 response 返回，当浏览器再次申请该资源时，request 申请头中会蕴含 If-Modified-Since，该值为缓存之前返回的 Last-Modified，服务器收到 If-Modified-Since 后，依据资源的最初批改工夫判断是否命中协商缓存
- ETag / If-None-Match
ETag 示意资源内容的惟一标识，随服务器端 response 返回，服务器通过比拟申请头部的 If-None-Match 与以后资源的 ETag 是否统一来判断资源是否在两次申请之间有过批改，如果没有批改，则命中协商缓存
论断
- 强缓存优先级高与协商缓存
- 只有应用缓存，服务器均不会返回资源
- 强缓存不会发送申请到服务器
协商缓存会发送申请到服务起
结束语
小编在早之前整顿了一套对于浏览器的面试题，列举一部分题目：
- 跨标签页通信
- 浏览器架构
- 从输出 url 到展现的过程
- 重绘与回流
- 存储
- Web Worker
- V8 垃圾回收机制
- 内存泄露
- reflow(回流)和 repaint(重绘)优化
- 如何缩小重绘和回流?
- 一个页面从输出 URL 到页面加载显示实现，这个过程中都产生了什么？
- .localStorage 与 sessionStorage 与 cookie 的区别总结
- 浏览器如何阻止事件流传，阻止默认行为
- 虚构 DOM 计划绝对原生 DOM 操作有什么长处，实现上是什么原理？
- 浏览器事件机制中事件触发三个阶段
- 什么是跨域？为什么浏览器要应用同源策略？你有几种形式能够解决跨域问题？理解预检申请嘛？
- 理解浏览器缓存机制吗？
- 为什么操作 DOM 慢?
- 什么状况会阻塞渲染？
- 如何判断 js 运行在浏览器中还是 node 中？
- 对于 web 以及浏览器解决预加载有哪些思考？
- http 多路复用
须要完整版浏览器面试题材料的小伙伴们请间接点击这支付哦 ，也别忘啦 点赞 + 评论，你们的反对是我最大能源！
