乐趣区

关于前端:前端攻城狮浏览器中需要知道哪些知识点-附赠浏览器面试题

jiezi

前言

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

浏览器内核和渲染引擎

常见的浏览器内核有哪些

  • 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 多路复用


    须要完整版浏览器面试题材料的小伙伴们请间接点击这支付哦 ，也别忘啦 点赞 + 评论，你们的反对是我最大能源！
退出移动版