漫漫前端路

前言React组件的渲染，是React机制中非常重要的部分，出于对性能优化的考虑，在开发过程中我们应该尽可能去避免重新渲染。但很多时候，由于缺乏对React组件重新渲染的理解和意识，导致代码并未按照设想避免重复渲染。由此可见，要想写出性能高效的React代码，就必须了解组件渲染的机制。在开始之前，我 ...

通过前两章的学习，已经对WebRTC有了大致的理解，那么作为前端开发，最关键的就是要通过WebRTC提供sdk来建立P2P的连接。 两端建立连接 AB两端通过信令服务器交换各自的SDP信息 AB两端通过实现STUN协议的STUN Server，获取各自的NAT结构，子网IP，公网IP和端口（Cand ...

连接的建立离不开Offer与Answer的交换流程先来看个场景，两个端通信，和我们平时和服务器通信类似（http三次握手），都需要进行一些信息的交换。对WebRTC来说，至少需要如下步骤： 创建Offer，发送Offer 创建Answer，发送Answer 发送 / 接收媒体信息和网络信息 创建P ...

WebRTC简介什么是WebRTC网页即时通信（Web Real-Time Communication），是一个支持浏览器进行实时语音对话或视频对话的API。能通过简单的API为Browser和App提供实时通信（RTC）的功能。WebRTC 是一种 HTML5规范，是无需在浏览器中安装任何插件就可 ...

前言2022了，自从CommonJS奠定了javascript的模块基调后，近十多年来，ESModule作为EcmaScript钦定的模块标准，早已经深入人心，其静态连接的特性在使用中能帮我们避免类似循环引用等之前CommonJS无法解决的问题。再加上现代打包工具的支持，让我们在编写代码的时候也能按 ...

前言浏览器作为前端开发工程师的主战场，每天我们都要和它打交道，因此能更好的搞懂现代高级浏览器（以Chrome为例），对前端工程师的开发和性能优化的理解，都有很大的帮助。本文在经典系列文章Inside look at modern web browser的基础上，结合我的实际经验，尽可能通俗易懂的解释 ...

前沿React从18版本起，不推荐再使用老版本的ReactDOM.render方法，建议用两个新方法，createRoot和root对象的render来替代： 1234import { createRoot } from 'react-dom/client';const root ...

前言自从进入tx，项目都是采用vue，使用多了难免怀旧react。而且react自从16.8.0版本后发布hooks的后，更是风靡前端界,react-router，react-redux 等陆续拥抱hooks，就可以看出业界对此的赞同。耐不住真香的诱惑，在工作之余，自己用react hooks体验了 ...

前沿React发展至今，针对页面复杂渲染会导致卡顿、组件渲染waterfall的不合理性、不能及时响应用户操作等，提出了一些很棒的设计思想和解决方案： CPU密集型问题（渲染卡顿，不及时响应用户事件），16版本推出了fiber架构，重构了以前的stack架构。 I/O密集型问题（组件渲染water ...

ReactDOM.render 判断container容器是否合法 容器是否标记为root legacyRenderSubtreeIntoContainer topLevelUpdateWarnings: 判断是否是合法的container，否则会抛出warning warnOnInval ...