前端技术专家面试-浏览器&webview

YSP13
208 阅读9分钟

=========

更新

  • V1.1 添加移动端的webview的种类和UC内核

=========

1. 浏览器渲染流程：

1.1 请求阶段

  • 当浏览器请求页面时，它首先会通过 DNS 查询 获取目标域名的 IP 地址，然后建立 TCP 链接 和 TLS 加密连接，随后发送 HTTP 请求。
  • 如果本地有 HTTP 缓存，且缓存内容没有过期，浏览器会直接从缓存中获取内容，避免重复请求服务器，从而加快资源加载速度。

1.2 解析阶段

  • HTML 解析： 浏览器收到服务器响应的 HTML 文档后，开始解析 HTML，并逐步构建 DOM 树。DOM 树是一个由页面的元素和内容组成的树形结构，表示页面的结构。
  • CSS 解析： 当浏览器遇到 标签时，它会发出额外的请求来获取 CSS 文件。CSS 文件加载完成后，浏览器会将其解析为 CSSOM 树，该树包含所有元素的样式信息。
  • JavaScript 执行： 如果浏览器遇到 <script> 标签，它会暂停构建 DOM，等待JavaScript 加载完成并执行。JavaScript 有时会修改 DOM 树，因此必须等脚本执行完毕后再继续解析 HTML。

1.3 生成渲染树

  • 渲染树（Render Tree）： 渲染树是由 DOM 树和 CSSOM 树共同生成的，只包含需要显示的可见节点。例如，display: none 的元素不会被加入到渲染树中。
  • 渲染树的主要作用是为每个可见元素确定其样式和布局信息，浏览器使用渲染树来决定如何在页面上显示内容。

1.4 布局（Layout）

  • 布局（回流）： 布局阶段，浏览器计算出渲染树中每个元素的确切几何位置和尺寸，确定它们在页面上的排布。这一过程涉及到大量计算，尤其是当页面复杂时，计算开销会较大。
  • 如果页面中有动态变化（如改变元素的宽度、高度等），浏览器会触发 回流，即重新计算元素的布局。这一过程是非常耗时的，需要避免频繁触发。

1.5 绘制（Paint）

  • 绘制阶段： 浏览器根据布局信息，使用计算出的样式为每个元素绘制图形，将页面的内容呈现到屏幕上。
  • 在某些情况下（如改变元素的颜色、背景色等），只会触发 重绘（Repaint） ，不需要重新计算布局，开销较小。

1.6 交互阶段：

  • 用户的交互（如点击、输入等）可能会导致 DOM 或样式发生变化，如果这些变化影响了元素的布局，浏览器将触发 回流，并重新计算布局。某些样式的改变则只会触发 重绘，如仅改变颜色。

  • 对于性能敏感的应用程序，避免不必要的回流和重绘是优化的关键。

2. 回流与重绘的区别

  1. 回流（Reflow）： 当页面的布局信息发生变化时（如元素的尺寸、位置、添加/删除 DOM 节点等），浏览器必须重新计算所有受影响元素的布局位置，这个过程被称为 回流。触发回流的常见操作：

    • 修改元素的 宽度、高度 等几何属性（如 width、height、margin、padding 等）。
    • 添加或删除 DOM 元素，如通过 appendChild、removeChild 操作 DOM。
    • 读取布局信息时，浏览器可能会为了返回准确值而强制触发回流，如访问 offsetWidth、offsetHeight 等属性。

  2. 重绘（Repaint）： 如果只改变元素的样式（如背景色、字体颜色等），不影响布局，浏览器只需重绘元素的外观，而不需要重新计算其位置和尺寸。重绘的开销相对较小。触发重绘的操作包括：

    • 修改 颜色、背景色、阴影等 不影响布局的属性。

3. 性能优化技巧

  1. 减少 DOM 操作：
    • 尽量减少直接操作 DOM 的次数，因为每次操作 DOM 都可能触发回流或重绘。可以使用 Document Fragment 批量更新 DOM，最后再一次性将更新应用到页面。
    • 对频繁修改的元素，可以先将其 从文档流中移除，完成修改后再添加回去，这样可以减少回流的次数。
  2. 批量修改样式：
    • 避免逐一修改样式属性，这样可能会多次触发回流或重绘。尽量使用 class 一次性修改多个样式，而不是频繁地使用 style 属性逐个修改。
    • CSS 动画优先：使用 CSS 动画代替 JavaScript 动画，尤其是使用 transform 和 opacity，它们不会触发回流，只会触发重绘，且可以利用 GPU 加速，提升性能。
  3. 避免触发同步布局：
    • 在操作 DOM 后立即读取布局信息（如访问 offsetWidth）会触发 强制同步回流，应避免这种操作。
    • 将读取布局和修改 DOM 的操作分开，使用 requestAnimationFrame 或 setTimeout 将这些操作放入不同的事件循环周期中。
  4. 使用异步脚本加载：
    • 异步加载 JavaScript：使用 async 或 defer 属性来异步加载 JavaScript，避免阻塞 HTML 解析，优化渲染过程。
    • 懒加载非关键资源：对于不影响首屏渲染的图片、脚本，使用懒加载策略，减少阻塞渲染的资源。

4. 浏览器和Webview的性能区别

  1. 浏览器的TAB实现
    • 4个进程：浏览器主进程、渲染进程（html css javascript）、网络进程、GPU进程。
    • 特点：并行处理能力强；进程间通信；安全、稳定；消耗资源。
  2. webview的实现
    • 一个进程内完成所有。
    • 特点：更快的启动时间、更低的内存占用；进程内通信；集成简便，适合嵌入式场景；性能弱。
    • webview内h5性能差的原因
      1. 内存限制：、CPU资源限制导致整个webview执行慢。
      2. 和APP主进程竞争: 共享应用进程资源，可能相互影响性能。
      3. JavaScript执行慢。
      4. 网络处理：移动网络不稳定。

5. webview&h5需要重点考虑的优化

webview内h5面临的问题是：资源受限、网络受限。

  1. WebView初始化慢：预热WebView、并行加载、复用WebView、使用更轻量的WebView。
  2. JS的解析和执行：代码分割、延迟加载、使用轻量级框架、JS缓存、避免长任务、使用Web Workers。
  3. 减少DOM数量。
  4. 网络敏感：DNS优化、连接优化、传输优化、内容大小优化。
  5. 渲染优化：避免重排和重绘、使用CSS3硬件加速、优化DOM操作、考虑使用虚拟DOM。

6. 移动端的webview有哪些？

  1. Android WebView

    • 系统默认 WebView：Android自带的WebView组件，从Android 4.4开始，基于Chromium内核。用户可以通过Google Play Store更新WebView版本，这意味着它在不同Android版本下的表现可能不同。
    • Chrome WebView：部分高版本Android设备允许使用Chrome作为WebView内核。它具有较新的Chromium版本和更好的性能，但需要设备安装了Chrome。
    • Custom WebView：一些应用使用自定义的WebView实现，比如UC、X5等内核，以便控制更多的渲染、性能和兼容性。

  2. iOS WebView

    • UIWebView（已废弃）：iOS早期的WebView组件，功能相对简单，且性能较差。在iOS 12之后已被废弃。

    • WKWebView：iOS 8开始引入，替代UIWebView，基于WebKit内核，性能更强，资源占用更少。WKWebView采用与Safari相同的WebKit渲染引擎。

    • SFSafariViewController：iOS 9引入，用于在应用内嵌入Safari浏览器。其本质是轻量的Safari浏览器，提供与Safari一致的渲染和交互体验，但主要用于打开外部链接，而非展示内嵌的网页内容。

  3. 第三方 WebView 内核

    • X5内核（腾讯）：一种用于Android的WebView内核，由腾讯开发，广泛应用于微信、QQ等腾讯产品以及其他需要增强WebView体验的应用。X5内核基于Chromium开发，具有高性能、兼容性好和快速加载等特点。
    • UC内核（阿里巴巴）：阿里开发的WebView内核，用于UC浏览器及阿里系产品，如淘宝、支付宝等。UC内核优化了移动端的性能，特别是在网络传输和页面渲染方面。

  4. 跨平台框架的WebView

    • React Native WebView：React Native框架中提供的WebView组件，底层使用原生WebView（Android的WebView和iOS的WKWebView）渲染网页内容，支持JavaScript交互和注入。
    • Flutter WebView：Flutter框架中提供的WebView插件，同样使用原生WebView渲染，适合需要在跨平台应用中嵌入网页内容的场景。

  5. Hybrid方案中的WebView

    • Cordova/PhoneGap WebView：主要用于Hybrid应用中，将网页打包为原生应用的容器。底层使用系统的原生WebView，在应用中提供HTML、CSS和JavaScript的渲染环境。

    • Weex WebView：阿里推出的Weex框架使用的WebView组件，用于在Hybrid开发中提供原生渲染体验，支持Vue.js语法。

不同WebView种类的适用场景

  • 系统 WebView：适用于一般需求，系统升级可以获得最新的安全性和性能更新。

  • 第三方内核 WebView：适合对WebView性能、兼容性和功能性有特定需求的应用，如大型电商、社交和资讯类应用。

  • 跨平台框架 WebView：适用于需要跨平台且兼容性较强的应用开发需求。

7. UC内核

专注于在移动设备上的高效渲染和性能优化，特别适合资源受限的移动环境。

  1. 高效渲染：UC内核对资源加载和渲染流程进行了优化，确保在移动设备上提供快速的页面加载和流畅的交互体验。
  2. 双核架构：早期UC内核采用了双核架构（即Webkit和Trident），这使得它可以在不同的网页场景中切换，以兼容更多的网页。如今，它主要基于Webkit核心进行优化。
  3. 网络优化：针对移动网络环境进行了多种优化，包括流量压缩、资源预加载和智能缓存等，提升了浏览器的网络性能。
  4. 兼容性与稳定性：UC内核在开发时考虑了多种Android设备的兼容性和稳定性，因此能支持较多的移动设备配置，提供一致的浏览效果。
  5. 安全与隐私：UC内核注重用户的安全与隐私，内置了防钓鱼、防恶意网站检测等安全功能，并定期更新漏洞修复。

UC内核的诞生源于国内市场对高性能、低资源消耗的移动浏览器需求，也因为其高兼容性和高性能，成了阿里巴巴多个移动产品的基础内核支持。

avatar
文章
阅读
粉丝