阅读 296

前端面试之浏览器篇

前言

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

浏览器内核和渲染引擎

常见的浏览器内核有哪些

  • 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

通过一个表格来对比一下

特性cookielocalStoragesessionStorage
生命周期一般由服务器生成,可以设置过期时间持久存储当前会话层存储,关闭即清除
数据存储大小4K5M5M
是否跨域同源 http 请求中携带 , 默认不允许跨域 ,跨域需要设置withCredentials = true,服务器端需要允许默认不允许跨域,可以使用 postMessage 解决cros
存储位置服务器端,每次请求会携带存放在 header 中硬盘内存

关于 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 是否一致来判断资源是否在两次请求之间有过修改,如果没有修改,则命中协商缓存

结论

  • 强缓存优先级高与协商缓存
  • 只要使用缓存,服务器均不会返回资源
  • 强缓存不会发送请求到服务器
  • 协商缓存会发送请求到服务起
文章分类
前端
文章标签