前端攻城狮在浏览器中常见却容易忘记的4个知识点 ,另附有浏览器面试题

前言

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

浏览器内核和渲染引擎

常见的浏览器内核有哪些

  • 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

通过一个表格来对比一下
前端攻城狮在浏览器中常见却容易忘记的4个知识点 ,另附有浏览器面试题_第1张图片

关于 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多路复用
    前端攻城狮在浏览器中常见却容易忘记的4个知识点 ,另附有浏览器面试题_第2张图片
    前端攻城狮在浏览器中常见却容易忘记的4个知识点 ,另附有浏览器面试题_第3张图片
    需要完整版浏览器面试题资料的小伙伴们请直接点击这领取哦,也别忘啦点赞+评论,你们的支持是我最大动力!

你可能感兴趣的:(面试,面试,前端,浏览器,经验分享,程序人生)