在疫情期间，上班族开启了远程办公，体验了各种远程办公软件。老师做起了主播，学生们感受到了被钉钉支配的恐惧，歌手们开启了在线演唱会，许多综艺节目也变成了在线直播。在这全民互动直播的时期，我们来聊聊互动直播中的即时通讯技术在前端中的使用。 即时通讯（Instant Messagin…

本项目是淘系用户增长团队的一个大中台系统，单页应用，涵盖很多业务功能，运用了很多懒加载页面组件来提升性能，首屏时间 1s 左右，体验良好。然而大项目文件很多，导致构建和发布时间很长，内存占用较大。我的任务是尽可能优化与此相关的问题。 首先不难发现问题并不在用户体验上，而在于开发…

第一步是结合项目背景，调研比较优化的解决方案。 文件上传失败是老生常谈的问题，常用方案是将一个大文件切片成多个小文件，并行请求接口进行上传，所有请求得到响应后，在服务器端合并所有的分片文件。当分片上传失败，可以在重新上传时进行判断，只上传上次失败的部分，减少用户的等待时间，缓解…

WebRTC（Web Real-Time Communication），中文一般翻译为「Web 实时通信」。它由一组标准、协议和 JavaScript API 组成，用于实现端到端的音视频及数据共享。与其他浏览器通信机制不同，WebRTC 通过 UDP 传输数据，而我们早已熟知的 XMLHttpRequest、WebSocket 都基于 TCP。

设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经验的凝练和总结,能更大限度的优化代码以及对已有代码的合理重构.作为一名合格的前端工程师,学习设计模式是对自己工作经验的另一种方式的总结和反思,也是开发高质量,高可维护性,…

首先介绍下本项目的应用，是一个交互简洁的 Todo 应用，应用取名叫 Memo，Memory 的简写，参考了微软的 To Do 以及 Listify、Trello 等应用。不过最大的不同是，项目并不依赖后端，而是使用浏览器提供的 indexDB 进行数据的存储，可以保证数据的绝…

我们使用 window.onerror 捕获一般情况下 JS 错误的异常信息。 try...catch.. 埋点模式 - 调用埋点SDK的函数，在需要埋点的业务功能上去调用接口上报埋点数据，也可使用第三方的数据统计服务商友盟等。

WebSocket的出现，使得浏览器具备了实时双向通信的能力。本文由浅入深，介绍了WebSocket如何建立连接、交换数据的细节，以及数据帧的格式。此外，还简要介绍了针对WebSocket的安全攻击，以及协议是如何抵御类似攻击的。 HTML5开始提供的一种浏览器与服务器进行全双…

http：无状态、基于tcp请求/响应模式的应用层协议 （A:哎呀，上次你请我吃饭了么? B:我想想, 上次请你吃了么）tcp：面向连接、保证高可靠性(数据无丢失、数据无失序、数据无错误、数据无重复到达) 传输层协议。（看啊，大阅兵，如此规整有秩序） RFC开篇介绍：本协议的目…