页面中的性能优化

  • svg/icon 代替图片、cdn、http 缓存、html 使用 viewport
  • 节流(下拉加载)/防抖(输入框)
  • 骨架屏、懒加载(react.lazy + suspense)、预加载、按需加载

如何选择图片格式

图片格式 压缩方式 透明度 动画 浏览器兼容 适应场景
JPEG 有损压缩 不支持 不支持 所有 复杂颜色及形状、尤其是照片
GIF 无损压缩 支持 支持 所有 简单颜色,动画
PNG 无损压缩 支持 不支持 所有 需要透明时
APNG 无损压缩 支持 支持 FirefoxSafariiOS Safari 需要半透明效果的动画
WebP 有损压缩 支持 支持 ChromeOperaAndroid ChromeAndroid Browser 复杂颜色及形状浏览器平台可预知
SVG 无损压缩 支持 支持 所有(IE8以上) 简单图形,需要良好的放缩体验需要动态控制图片特效

首屏和白屏时间如何计算?

  • 首屏
    • Native WebView: 类似 onLoad 的方法实现
    • ios: webViewDidFinishLoad
    • android: onPageFinished
  • 白屏: 根据不同的场景, 白屏的计算方式就不同
    • 没有任何内容
    • 网络或服务一场
    • 数据加载中
    • 图片加载不出来

小程序和 H5 有什么区别?

  1. 渲染方式不同
    • 小程序: 通过 Native 原生渲染, 但是小程序也支持 web 渲染, 如果使用 web 渲染的方式, 需要初始化一个 WebView 组件, 然后在 WebView 中加载 H5 页面

      当开发一个小程序时, 通常会使用 hybrid 的方式, 即根据具体情况选择部分功能用小程序原生的代码开发, 部分功能通过 WebView 加载 H5 页面来实现, Native 与 Web 渲染会和使用, 以实现项目的最优解

      注意: 小程序下, native 方式通常情况下性能要优于 web 方式

  2. 小程序特有的双线程设计
    • H5 下所有资源通常都会打到一个 bundle.js 文件里(不考虑分包加载), 而小程序编译后的结果会有两个 bundle, index.js 封装的是小程序项目的 view 层, index.worker.js 封装的是项目的业务逻辑;
    • 在运行时, 会有两条线程来分别处理这两个 bundle, 一个是主渲染线程, 它负责加载并渲染 index.js 里的内容, 另外一个是 Service Worker 线程, 它负责执行 index.worker.js 里封装的业务逻辑, 这里面是很多底层 API 的调用

如何判断 0.1 + 0.2 与 0.3 是否相等?

侧重点: 原理 / 解决方案

1
2
let isTrue = 0.1 + 0.2 === 0.3 // false
console.log(0.1 + 0.2) // 0.30000000000000004

原理

  1. IEEE754 标准中 64 位的存储格式, 比如 11 位存偏移值
  2. 并不是 ECMAScript 独有
  3. 其中涉及的三次精度丢失
    解决方案
  • math.js 等

扩展: 超出安全值的数字计算问题

项目中遇到过哪些难点