Web 项目性能提高

Question

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

CSS

CRP

fi3ework/blog#16

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