性能提高

[Lawguancong]

JavaScript

WeakMap 和 Map 的性能有什么差别?(前者对 GC 更加友好，保持弱引用)

• 如果是在立即执行函数中，两者的性能有区别吗？(楞了一会，说强弱引用还是会有GC的区别，没影响)
• 换个说法吧，如果这个立即执行函数中有递归函数，两者性能有区别吗？(没 GET 到面试官的点啊，过了吧这题)
• 少用箭头函数，绑定的时候可能会判断不相等，导致重新渲染。

http

• 并行连接：通过多条TCP 连接发起并发的HTTP 请求
• 持久连接：keep-alive, 长连接，重用TCP 连接，以消除连接和关闭的时延, 以事务个数和时间来决定是否关闭连接
• 管道化连接：通过共享TCP 连接发起并发的HTTP 请求
• 复用的连接：交替传送请求和响应报文（实验阶段，还未实现）
• asayn await 同步

域名分片

一个域名不是可以并发 6 个长连接吗(6个tcp)？那我就多分几个域名。
比如 content1.sanyuan.com 、content2.sanyuan.com。

DNS Prefetch

重绘 重排

CSS

• 避免使用table布局。
• 尽可能在DOM树的最末端改变class。
• 避免设置多层内联样式。
• 将动画效果应用到position属性为absolute或fixed的元素上。
• 避免使用CSS表达式（例如：calc()）。

JavaScript

• 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
• 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
• 也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
• 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
• 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

提升为合成层

将元素提升为合成层有以下优点：

合成层的位图，会交由 GPU 合成，比 CPU 处理要快
当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
对于 transform 和 opacity 效果，不会触发 layout 和 paint

提升合成层的最好方式是使用 CSS 的 will-change 属性：

#target {
  will-change: transform;
}

css3硬件加速（GPU加速）

比起考虑如何减少回流重绘，我们更期望的是，根本不要回流重绘。这个时候，css3硬件加速就闪亮登场啦！！

划重点：

1. 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。
2. 对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。

本篇文章只讨论如何使用，暂不考虑其原理，之后有空会另外开篇文章说明。
如何使用
常见的触发硬件加速的css属性：

• transform
• opacity
• filters
• Will-change

如果要在UI渲染之前做一些事情你会怎么办？(我会启动微任务执行吧)

• requestAnimationFrame 在 EventLoop 中是一个什么位置？(给他解释显示器和浏览器的 Vsync 信号，然后rAF首先执行，他貌似不满意，我请教了他一下，给我解释实际上rAF会在UI渲染之前)
• 分离图层做动画有什么好处呢？(给他讲了分层的原理，通过设置 CSS 的 will-change 可以转换为一个图层，调用 GPU 加速)
• 分离图层会发生重绘吗？(会)那既然重绘，它的好处在哪里？(不会影响其他的图层)

web worker

• 动画 canvas优化
• 计算密集型的任务
• 压缩
• 数据处理

service worker

• 缓存
• 拦截
• https

base64为什么能提升性能，缺点

• 变成字符串
• 减少http请求
• 压缩50%
• 没有跨域 缓存 cookie等问题
• gzip
  https://www.jianshu.com/p/681e5e0933e3
  https://www.imooc.com/article/27804

webpack

UglifyJsPlugin

Tree Shaking

dns

dns优化

可以在html页面头部写入dns缓存地址，比如

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

dns预解析

dns-prefetch
https://juejin.cn/post/6844903822599389192#heading-11

CSS

CRP

fi3ework/blog#16

参考链接
https://www.cnblogs.com/along21/p/7691234.html
https://juejin.cn/post/6844903951377104903#heading-8
Advanced-Frontend/Daily-Interview-Question#24