由html2canvas截图空白引出的img跨域和canvas“污染”
前言工作中，有项目因为有截图上传的功能，用的 html2canvas 这个库，一直没什么问题，直到最近测试环境迁移，oss也跟着做了迁移，域名什么也做了，发现测试环境上，截屏上传的竟然都是空白图。虽然生产是好的，但是总不能让测试环境变坏吧，因此做了一些调研。在排除了功能代码改动、依赖版本不正确、环境 ...
React组件重新渲染理解 & 优化大全
前言React组件的渲染，是React机制中非常重要的部分，出于对性能优化的考虑，在开发过程中我们应该尽可能去避免重新渲染。但很多时候，由于缺乏对React组件重新渲染的理解和意识，导致代码并未按照设想避免重复渲染。由此可见，要想写出性能高效的React代码，就必须了解组件渲染的机制。在开始之前，我 ...
WebRTC学习终章：建立连接
通过前两章的学习，已经对WebRTC有了大致的理解，那么作为前端开发，最关键的就是要通过WebRTC提供sdk来建立P2P的连接。
两端建立连接
AB两端通过信令服务器交换各自的SDP信息
AB两端通过实现STUN协议的STUN Server，获取各自的NAT结构，子网IP，公网IP和端口（Cand ...
WebRTC学习中章：通话原理
连接的建立离不开Offer与Answer的交换流程先来看个场景，两个端通信，和我们平时和服务器通信类似（http三次握手），都需要进行一些信息的交换。对WebRTC来说，至少需要如下步骤：
创建Offer，发送Offer
创建Answer，发送Answer
发送 / 接收媒体信息和网络信息
创建P ...
WebRTC学习初章：基础知识
WebRTC简介什么是WebRTC网页即时通信（Web Real-Time Communication），是一个支持浏览器进行实时语音对话或视频对话的API。能通过简单的API为Browser和App提供实时通信（RTC）的功能。WebRTC 是一种 HTML5规范，是无需在浏览器中安装任何插件就可 ...
深入理解ESModule
前言2022了，自从CommonJS奠定了javascript的模块基调后，近十多年来，ESModule作为EcmaScript钦定的模块标准，早已经深入人心，其静态连接的特性在使用中能帮我们避免类似循环引用等之前CommonJS无法解决的问题。再加上现代打包工具的支持，让我们在编写代码的时候也能按 ...
现代浏览器原理
前言浏览器作为前端开发工程师的主战场，每天我们都要和它打交道，因此能更好的搞懂现代高级浏览器（以Chrome为例），对前端工程师的开发和性能优化的理解，都有很大的帮助。本文在经典系列文章Inside look at modern web browser的基础上，结合我的实际经验，尽可能通俗易懂的解释 ...
React 18源码分析：新的挂载方式
前沿React从18版本起，不推荐再使用老版本的ReactDOM.render方法，建议用两个新方法，createRoot和root对象的render来替代：
1234import { createRoot } from 'react-dom/client';const root ...
React知识理解拾遗备忘录
前言自从进入tx，项目都是采用vue，使用多了难免怀旧react。而且react自从16.8.0版本后发布hooks的后，更是风靡前端界,react-router，react-redux 等陆续拥抱hooks，就可以看出业界对此的赞同。耐不住真香的诱惑，在工作之余，自己用react hooks体验了 ...
React Suspense实现图片懒加载
前沿React发展至今，针对页面复杂渲染会导致卡顿、组件渲染waterfall的不合理性、不能及时响应用户操作等，提出了一些很棒的设计思想和解决方案：
CPU密集型问题（渲染卡顿，不及时响应用户事件），16版本推出了fiber架构，重构了以前的stack架构。
I/O密集型问题（组件渲染water ...