阿里前端攻城狮们(二)

[webVueBlog]

[字节跳动] 怎么与服务端保持连接

和服务端保持连接，最简单粗暴的方法就是通过请求轮询保持跟服务端的通信，客户端不光要花成本维护定时轮询器，还会使得服务器压力变大，所以不推荐。

还有一种可以借助请求超时的设置，将超时时间设置一个足够大的值，客户端发起连接后，只要服务端不返回消息，整个连接阶段都会受到阻塞，所以这种方式也不推荐。

最后一种是WebSocket，当服务器完成协议从HTTP到WebSocket的升级后，服务端可以主动推送信息给客户端，解决了轮询造成的同步延迟问题。由于 WebSocket 只需要一次 HTTP 握手，服务端就能一直与客户端保持通信，直到关闭连接，这样就解决了服务器需要反复解析 HTTP 协议，减少了资源的开销。

[百词斩] CDN的原理

CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。
最简单的CDN网络由一个DNS 服务器和几台缓存服务器就可以组成，当用户输入URL按下回车，经过本地DNS系统解析，DNS系统会最终将域名的解析权交给CNAME指向的CDN专用DNS服务器，然后将得到全局负载均衡设备的IP地址，用户向全局负载均衡设备发送内容访问请求，全局负载均衡设备将实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上，使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度

[腾讯一面] 性能优化从哪些方面入手？

• 分屏加载，当页面需要渲染的数据较多时，先渲染首屏，下滑时再加载第二屏的数据；
• 图片大小优化，在不影响视觉效果的前提下，把图片尺寸降到最小；
• 图片懒加载，on appear时再加载图片；
• Code splitting，或者拆包，应用下的某些组件不需要立刻import，可以采用动态import的方式，打包时也可以将它们打到不同的bundle里，给index bundle瘦身；
• Chrome Devtools - Trace & Timeline等一系列强大的分析工具可以去研究一下，它们可以深入到内核分析应用的性能问题所在；

[腾讯二面] 如何加快首屏渲染，你有哪些方案?

• 降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyload。
• 加快请求速度：预解析DNS，减少域名数，并行加载，CDN 分发。
• 增加缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage、PWA。
• 渲染优化：首屏内容最小化，JS/CSS优化，加载顺序，服务端渲染，pipeline。

[字节跳动] 鼠标滚动的时候，会触发很多次事件，如何解决的？

防抖是指连续触发的时候只会执行一次，停止触发 N 秒后才能继续执行，而节流是指如果你持续触发事件，每隔一段时间，只执行一次事件。像防止按钮多次点击就用防抖，像是监听滚动事件就用节流，函数实现都可以参照 underscore 代码中的实现