前端攻城狮浏览器中须要知道哪些知识点 ?附赠浏览器面试题

前言

关于浏览器知识，在现在的前端中也显的尤其重要了，面试中频繁被问及到，在这个上边小编也是吃过亏了的，今天就来分享一波儿一个前端攻城狮浏览器中须要知道哪些知识点 ?

浏览器内核和渲染引擎

常见的浏览器内核有哪些

• Trident内核：IE,360,搜狗浏览器等。[又称MSHTML]
• Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink;]
• Webkit内核：Safari,Chrome等。[ Chrome的Blink（WebKit的分支）]

为何咱们须要知道一些基本的浏览器内核 ? 由于全部网页浏览器、电子邮件客户端以及其它须要显示网络内容的应用程序都须要内核

浏览器渲染引擎有人说是 Css 引擎和 Js 引擎，其实具体点应该是渲染引擎和Js引擎，为何这么说，由于浏览器在渲染一个网页时，通常有三步

一、浏览器经过 HTMLParser 把 HTML 解析成 DOM Tree （俗称DOM树）。
二、浏览器经过 CSSParser 把 CSS 解析成 CSS Rule Tree（俗称CSSOM树）。
三、浏览器将 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获取的资源存储在本地的一种行为

缓存的优先级

一、先在内存中查找
二、若是内存中不存在,则在硬盘中查找
三、若是硬盘中也没有,那么就进行网络请求
四、请求获取的资源缓存到硬盘和内存

缓存分类

• 强缓存
• 协商缓存

先来捋一捋逻辑

一、当客户端请求某个资源时，会先根据这个资源的 http header 判断它是否命中强缓存，若是命中，则直接从本地获取缓存资源，不会发请求到服务器
二、当没有命中强缓存时，客户端会发送请求到服务器，服务器经过 request header 验证这个资源是否命中协商缓存，若是命中，服务器将返回304，告诉客户端从缓存中获取
三、当协商缓存也没命中时，服务器就会将资源返回客户端

• 当 ctrl+f5 强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存
• 当 f5 刷新网页时，跳过强缓存，可是会检查协商缓存

强缓存

• Expires（是 http1.0 时的规范，值为一个绝对时间的 GMT 格式的时间字符串，表明缓存资源的过时时间）
• Cache-Control:max-age（是 http1.1的规范，强缓存利用其 max-age 值来判断缓存资源的最大生命周期，它的值单位为秒）

Cache-Control 还有一些经常使用其它属性：

一、no-cache：须要进行协商缓存，发送请求到服务器确认是否使用缓存。
二、no-store：禁止使用缓存，每一次都要从新请求数据。
三、public：能够被全部的用户缓存，包括终端用户和CDN等中间代理服务器。
四、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多路复用
  
  
  须要完整版浏览器面试题资料的小伙伴们请直接点击这领取哦，也别忘啦点赞+评论，大家的支持是我最大动力！