第19周技术周报

第19周技术周报

尝试每周总结遇到的技术问题，分享一些有用的知识点，贵在持续累积：

• 2018全美大公司最佳CEO袁征的访谈
• HTTP: 为什么后端每个请求都会先发送OPTIONS
• Web通信技术概览
• 灵机一动：开发浏览器插件增加对网页标注和历史功能
• XMLHttpRequest的timeout
• JavaScript内存泄漏

1. 2018全美大公司最佳CEO袁征的访谈

2018年，GlassDoor发布了全美大公司最佳CEO榜单，袁征（Eric S.Yuan）战胜了所有知名的CEO，成为员工心目中的最佳老板。这是一篇袁征的访谈：tips-from-the-top-one-on-one-with-eric-yuan-founder-ceo-of-zoom，一些个人觉得有最有启发的点：

• 卓有成效的领导者很重要的一点是能在团队中传递快乐
• 选择人才最重要的是自我驱动，愿意学习新技术、新东西，这胜过于你工作技巧和经验
• 找到愿意投资你的人，而不只是投资你的生意的人，他们不会因为生意变化而离开，而是一直支持你

作为重度阅读者，袁征推荐了 《信任的速度》

2. HTTP: 后端每个接口每次调用都会先发送OPTIONS

a. 问题

项目中前后端在不同的服务器上，调用接口时候每个请求都会先发送OPTIONS，然后再发送正常的请求。调试接口的时候在同名接口中找到有数据交互的时候不免有点麻烦。

b. 分析

原因是非简单请求触发了 CORS preflight，在方法不变的前提下 OPTIONS 不是可避免，每个请求都会发送，但每次发送可以通过配置 Access-Control-Max-Age 来解决。

可以打开正在查看的一个知乎页，发现调用两个请求 /A /B，他们都发送了OPTIONS请求，其中前者的 access-control-max-age 为 3600，后者没有设置。刷新当前网页，/A 没有再发送 OPTIONS请求，而 /B 仍旧会发送 OPTIONS 请求。

因此让后端接口进行配置即可解决该问题。

3. Web通信技术概览

面试官：前端跨页面通信，你知道哪些方法？ @segmentfault.com

对于同源页面，常见的方式包括：

• 广播模式：Broadcast Channe / Service Worker / LocalStorage + StorageEvent
• 共享存储模式：Shared Worker / IndexedDB / cookie
• 口口相传模式：window.open + window.opener
• 基于服务端：Websocket / Comet / SSE 等

而对于非同源页面，则可以通过嵌入同源 iframe 作为“桥”，将非同源页面通信转换为同源页面通信。

4. 灵机一动的点子

4.1 开发浏览器插件增加对网页标注和历史功能

对于网页上阅读到的一些比较好的文章/问答，会有一些重点段落或关键字句，可以帮你达成理解。假定你日后再想翻到这篇文章，可能还是需要从头阅读。

开发一个浏览器插件，可以直接用高亮、插入的标注来对网页进行标记。下次再次打开该页面的时候，仍旧可以看到自己做过的标记。

https://segmentfault.com/a/1190000018981813提到了一些做高亮的技术点。

5. XMLHttpRequest的timeout

XMLHttpRequest对象提供了方法 abort 来取消请求，onabort 可以别用来监听请求的取消。它仅仅被用来取消客户端的请求，服务端已经收到请求了还是会继续自己的操作的。页面跳转的时候，ajax请求也会自动abort。

timeout的值是XMLHttpRequest中支持的设置，在达到设置的时间后，会abort掉发送的请求，

客户端的timeout设置要区分于服务器端的timeout设置，客户端timeout通常是自己的error会被抛出，而服务端的超时则会返回status 503。

关于封装的Ajax库如何实现timeout，自己想到的两个思路：

• 使用 timeout ontimeout的方式
• 手动 setTimeout，到时间的时候自己去做 abort

6. JavaScript内存泄漏

英文：JavaScript中4种常见的内存泄漏和解决办法，可读性还挺不错的一篇文章，。