面试题：浏览器

清欢OvO
54 阅读5分钟

常见浏览器内核

内核

  • Trident：IE 浏览器内核；
  • Gecko：Firefox 浏览器内核；
  • Presto：Opera 浏览器内核；
  • Webkit：Safari 浏览器内核；
  • Blink：谷歌浏览器内核，属于 Webkit 的一个分支，与 Opera 一起在研发；

浏览器

  • IE：Trident，IE 内核；
  • Chrome：以前是 Webkit，现在是 Blink 内核；
  • Firefox：Gecko 内核；
  • Safari：Webkit 内核；
  • Opera：一起是 Presto，现在是 Blink 内核；
  • 360、猎豹浏览器内核：IE + Blink 双内核；
  • 搜狗、遨游、QQ 浏览器内核：Trident（兼容模式）+ Webkit（高速模式）；
  • 百度浏览器、世界之窗内核：IE 内核；
  • 2345 浏览器：以前是 IE 内核，现在是 IE + Blink 双内核；
  • UC 浏览器内核：Webkit + Trident；

页面导入样式时，使用 link 和 @import 有什么区别。

  1. 从属关系区别。@import 只能导入样式表，link 还可以定义 RSS、rel 连接属性、引入网站图标等；
  2. 加载顺序区别；加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载；
  3. 兼容性区别；

浏览器的渲染原理

  1. 首先解析收到的文档，根据文档定义构建一颗 DOM 树，DOM 树是由 DOM 元素及属性节点组成的；
  2. 然后对 CSS 进行解析，生成 CSSOM 规则树；
  3. 根据 DOM 树和 CSSOM 规则树构建 Render Tree。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 对象相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。
  4. 当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情就是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
  5. 布局阶段结束后是绘制阶段，比那里渲染树并调用对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。

为了更好的用户体验，渲染引擎会尽可能早的将内容呈现到屏幕上，并不会等到所有的 html 解析完成之后再去构建和布局 render tree。它是解析完一部分内容就显示一部分内容，同时可能还在网络下载其余内容。

如何实现浏览器内多个标签页之间的通信？

实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者来让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。

  1. 使用 Websocket，通信的标签页连接同一个服务器，发送消息到服务器后，服务器推送消息给所有连接的客户端；
  2. 可以地调用 localStorage，localStorage 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个 storage 事件，我们可以通过监听 storage 事件，控制它的值来进行页面信息通信；
  3. 如果我们能够获得对应标签页的引用，通过 postMessage 方法也是可以实现多个标签页通信的；

XSS（跨站脚本攻击）

XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。

避免方式

  • 不用服务器端拼接后返回（不使用服务端渲染）。
  • 对一些敏感信息进行保护，比如 cookie 使用 http-only，使得脚本无法获取。
  • 对用户输入的地方和变量都需要仔细检查长度和对 ”<”,”>”,”;”,”’” 等字符做过滤

CSRF（跨站请求伪造）

CSRF 攻击的本质是利用 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。

避免方式

  • 添加验证码验证
  • 使用token验证
  • 限制 cookie 不能作为被第三方使用
  • 进行同源检测

简述前端性能优化

页面内容方面

  1. 通过文件合并、css 雪碧图、使用 base64 等方式来减少 HTTP 请求数，避免过多的请求造成等待的情况；
  2. 通过 DNS 缓存等机制来减少 DNS 的查询次数；
  3. 通过设置缓存策略，对常用不变的资源进行缓存；
  4. 通过延迟加载的方式，来减少页面首屏加载时需要请求的资源，延迟加载的资源当用户需要访问时，再去请求加载；
  5. 通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速度；

服务器方面

  1. 使用 CDN 服务，来提高用户对于资源请求时的响应速度；
  2. 服务器端自用 Gzip、Deflate 等方式对于传输的资源进行压缩，减少传输文件的体积；
  3. 尽可能减小 cookie 的大小，并且通过将静态资源分配到其他域名下，来避免对静态资源请求时携带不必要的 cookie；
avatar
文章
阅读
粉丝