充电-2018.11.16

最新推荐文章于 2025-04-08 16:15:19 发布

原创最新推荐文章于 2025-04-08 16:15:19 发布 · 547 阅读

CC 4.0 BY-SA版权

本文探讨微信小程序性能提升策略，包括setData优化、局部更新、自定义组件利用、React Hooks高效使用、if-else语句优化、信标请求、requestIdleCallback应用、longtask监测、CSSOM与TypedDOM运用、常见安全漏洞防范及组件分类。同时，介绍字体截取技巧与浏览器缓存策略，助力开发者打造高性能、安全的前端应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 微信小程序性能优化方案

setData
- setData两次开销：通信的开销 + webview更新的开销
- 局部更新
```
this.setData({
    list[index] = newList[index]
})
```
页面隐藏后注意清理定时器、监听器
onPageScroll是webview层向js逻辑层的通讯，尽量避免
获取节点位置用intersectionObserver替代
自定义组件更新是独立的，不受页面影响，也不影响页面；频繁更新的部分尽量使用组件

2. React hook

常用的两种方式
- render props
- 高阶组件
- 缺点：生成DOM嵌套太多
useState
- setState合并状态、useState替换状态
- 通过顺序保证state间的相互独立

useEffect

useEffect在componentDidMount和componentDidUpdate周期内都会调用
useEffect 异步执行；componentDidMount和componentDidUpdate同步执行

解绑：每次组件渲染后清理函数都会执行，避免props.friend.id改变却无法解绑

useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // 一定注意下这个顺序：告诉react在下次重新渲染组件之后，同时是下次调用ChatAPI.subscribeToFriendStatus之前执行cleanup
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

3. if else 优化

利用Map，与Object相比：

key类型多样【正则是亮点】
size方便获取大小

const actions = () => {
  const functionA = () => { /*do sth*/ }
  const functionB = () => { /*do sth*/ }
  const functionC = () => { /*send log*/ }
  return new Map([
    [/^guest_[1-4]$/, functionA],
    [/^guest_5$/, functionB],
    [/^guest_.*$/, functionC],
    //...
  ])
}

const onButtonClick = (identity, status) => {
  let action = [...actions()].filter(([key, value]) => (key.test(`${identity}_${status}`)))
  action.forEach(([key, value]) => value.call(this))
}

4. 信标（Beacon）请求

用于日志上报，可以避免竞争关键资源，可以合并
请求方法为POST，不支持修改

var data = JSON.stringify({
  name: 'Berwin'
});
navigator.sendBeacon('/haopv', data)

5. requestIdleCallback 浏览器空闲回调

不要在requestIdleCallback 中直接修改DOM

function doWork(deadline) {
  // 如果还有空闲时间，或者到超时时间了，就继续执行任务直到做完
  while ((deadline.timeRemaining() > 5 || deadline.didTimeout) && tasks.length > 0) { // 毫秒
    doSomeTask();
  }
  // 否则，剩余的任务安排到下一次空闲时间执行
  if (tasks.length > 0) {
    requestIdleCallback(doWork)
  }
}
...
requestIdleCallback(doWork, 2000)

6. long task 定位性能问题

超过50ms可以简单认为是 long task

const observer = new PerformanceObserver(list => {
  list.getEntries().forEach(item => {
    // longtask 的类型
    console.log(`long task name is: ${item.name}`);
    console.log(`long task attribution is:`);
    // longtask 的具体信息
    console.log(JSON.stringify(item.attribution, null, 2));
  });
});
// 仅关注 longtask
observer.observe({ entryTypes: ["longtask"] });

7. CSSOM、Typed OM

可避免getComputedStyle字符串问题
检测可用

window.CSS && CSS.number

8. 总结下常见的漏洞

SQL注入
权限绕过
XSS
CSRF
SSRF
邮件/短信轰炸

9. 组件分类

展示型组件
接入型组件（container component）
交互型组件（各种UI组件）
功能型组件（<router-view>、<transition>）

10. 字体截取

软截取：CSS中 unicode-range
不能真正减少浏览器需要下载的字体文件大小
硬截取：Node命令行工具glyphhanger

11. 缓存

浏览器缓存策略
 彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法

当前地址栏，不改变内容，直接回车
- Chrome：等同于刷新当前页
- Firefox：与其他在地址栏回车一样
主资源和派生资源
- 主资源是地址栏输入的URL请求返回的资源，派生资源是主资源中所引用的JS、CSS、图片等资源
- Chrome刷新：只有 主资源 的缓存应用方式如图所示，派生资源 的缓存应用方式与 新标签 打开类似，会判断缓存是否过期。强缓存生效时的区别在于新标签打开为from disk cache，而当前页刷新派生资源是from memory cache
- Firefox刷新：所有资源都会如图所示