充电-2018.11.16

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刷新：所有资源都会如图所示