本节目标实现ReactDOM.render，只关心向 DOM 添加内容，之后处理更新和删除内容；
最近系统梳理HTML5所有涉及到的标签时，梳理至<link>和<script>标签时，碰巧想到一个困扰很久的问题，即一般把<script>放在<body>尾部，<link>标签放在<head>内部，而页面通过CDN引入第三方框架或库时，基本都是将其<script>标签放在<link>标签前面。
为了达到所有页面在用户端达到秒开，也就是网络（JS Bundle下载）和首屏渲染（展现在用户第一屏的渲染时间）时间和小于1s。
我们需要一个可以转换 jsx 的 vanilla js 环境，使用 vite 可以很方便设置好我们的开发环境
第三方JS插件在日常开发中经常会使用到。对于一些不涉及到展示的功能插件，仅需要引入一个js文件即可，但对于一些界面级插件，如轮播图、富文本编辑器等，往往还需要单独引入css文件使之展示正常。但由于CSS存在覆盖问题，即使遵循某些规范（如BEM），仍然不可忽视。
文章中涉及到的知识都是渐进式的讲解开发，当然如果对之间内容不感兴趣(已经了解)，也可以直接切入本文内容，每一个章节都和之前不会有很强的耦合。
在React17之前，我们写React代码的时候都会去引入React，不引入代码就会报错，而且自己的代码中没有用到React，这是为什么呢？带着这个问题我们向下学习；
我们打算实现一下jsx语法的转换过程。但是在此之前要说一下react17之后的一个变化。
网上讲粘贴复制的很多，讲清楚复制异步数据得很少，在真机上真正验证过得凤毛麟角，正巧工作上遇到了复制接口返回的数据这个问题，求助了很多人，没有太好的解决办法，最终通过修改交互实现了这个复制功能，故写篇文档记录一下，也分享给大家。
平时写CSS，感觉有很多多余的代码或者不好实现的方法，于是有了预处理器的解决方案，主旨是write less &do more。其实原生css中，用上css变量也不差，加上bem命名规则只要嵌套不深也能和less、sass的嵌套媲美。在一些动画或者炫酷的特效中，不用js的话可能是用了css动画、svg的animation、过渡，复杂动画实现用了js的话可能用了canvas、直接修改style属性。用js的，然后有没有想过一个问题：“要是canvas那套放在dom上就爽了”。因为复杂的动画频繁操作了dom，违背了倒背如流的“性能优化之一：尽量少操作dom”的规矩，嘴上说着不要，手倒是很诚实地ele.style.prop = <newProp>，可是要实现效果这又是无可奈何或者大大减小工作量的方法。
我相信大家首先想到的思路就是在useEffect中通过getBoundingClientRect()获得对应传入元素(id)的位置，然后通过定位增加一个类似的弹窗效果。
如果一个页面中有十几个地方用到Ajax，那么我们需要写十几次open()、十几次send()、十几次获取xhr对象； 代码重复相当多，而凡是有代码重复的地方，就有封装的可能；
自定义标签通过扩展一个HTMLElement或HTMLElement的子类来定义一个新的html标签，是通过原生js实现的组件化。
因为使用了 Virtual DOM 的原因，Vue.js具有了跨平台的能力，例如：weex、小程序、web、h5、等
前端这个岗位的出现最根本的原因是互联网的出现，浏览器是最早互联网的唯一入口。人们通过浏览器浏览各种不同网站的内容。这些内容来自服务器中，但浏览器从服务器拿到这些内容之后，应该怎么展示给用户，这就是前端的职责。所以，最早的时候前端工作者本质上做的是告诉浏览器怎么展示数据。
stalar电商平台是bigo 2020年的新业务，目标市场主要是中东五国，主要技术栈为nuxt。
由于 Jest 运行在 Node 环境 中，所以并不支持 import 这个来自 ESM 的关键字，所以就需要 @babel/preset-env ，文档 jest/using-babel
web-see[1] 前端监控方案，提供了 前端录屏+定位源码 方式，让bug无处藏身
json 异步加载js js加载的缺点：加载工具方法没必要阻塞文档，过得js加载会影响页面效率，一 旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。 有些工具方法需要按需加载，用到再加载，不用不加载。 复制代码 javascript 异步加载的三种方案： 1.defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用，也可以将代码写到内部。 2.async 异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script 标签里。 1.2 执行时也不阻塞页面 3
2.去除Switch中的<Redirect>，用react-router-dom中的Redirect 替代，或者用 <Navigate> 实现
因为之前用过Vue的router，所以在学习react的router的话我会将vue和react之间router进行一个区别，比较。从而更好的入门router。 \
服务端渲染是数据与模版组成的html，即 HTML = 数据 ＋ 模版。将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。页面没使用服务渲染，当请求页面时，返回的body里为空，之后执行js将html结构注入到body里，结合css显示出来;
React-Router是React生态里面很重要的一环，现在React的单页应用的路由基本都是前端自己管理的，而不像以前是后端路由，React管理路由的库常用的就是React-Router。本文想写一下React-Router的使用，但是光介绍API又太平淡了，而且官方文档已经写得很好了，我这里就用一个常见的开发场景来看看React-Router是怎么用的吧。我们一般的系统都会有用户访问权限的限制，某些页面可能需要用户具有一定的权限才能访问。本文就是用React-Router来实现一个前端鉴权模型。
React库包含两部分：1、React包含了所有基本功能；2、ReactDOM只包含了操作DOM的功能。
说明 react 初学者 es6 初学者，对装饰模式有一定了解和使用 react 装饰器的使用 看看装饰模式 Decorator模式并不严重依赖于创建对象的方式，而是关注扩展其额外功能。我们使用了一个单一的基本对象并逐步添加提供额外功能的Decorator对象，而不是仅仅依赖于原型继承。这个想法是：向基本对象添加属性或者方法，而不是进行子类化 ，因此它较为精简。 react 在 redux 中使用装饰器来写 connect 通常情况下我们需要一个 reducer 和一个 action 来包裹你的 Compo
v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”
在项目文件目录下，使用命令行 npm install react --save 或 npm i react --save
面试官:"你了解虚拟DOM(Virtual DOM)跟Diff算法吗,请描述一下它们";
这篇文章主要参考了 Vue.js 核心成员Guillaume Chau在 19 年美国的 Vue conf 分享的主题：9 Performance secrets revealed，分享中提到了九个 Vue.js 性能优化的技巧。
这里可以理解为await后面的语句相当于放到了new Promise中，下一行及之后的语句相当于放在Promise.then中。
Refs 提供了一种访问在render方法中创建的 DOM 节点或者 React 元素的方法。在典型的数据流中，props 是父子组件交互的唯一方式，想要修改子组件，需要使用新的pros重新渲染它。凡事有例外，某些情况下咱们需要在典型数据流外，强制修改子代，这个时候可以使用 Refs。
HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。
react使用也有一段时间了，大家对这个框架褒奖有加，但是它究竟好在哪里呢？ 让我们结合它的源码，探究一二！（当前源码为react16，读者要对react有一定的了解）
东东是一名前端工程师，主要用 React 技术栈，用了多年之后想深入一下，所以最近开始看 React 源码。
对于其他浏览器，google了半天，发现不太好搞，比如 对于firefox，要让网站的js有使用剪切板的权限是要用户授权的 http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard
今天我们使用脚手架来创建属于自己的第一个react项目，来看看创建出来的项目结构是什么样的？在react中又是怎么样的语法~
在react官方中讲到，关于jsx语法最终会被babel编译成为React.createElement()方法。
Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中。 然后把在你要使用复制功能的页面中引入Zero Clipbo
根据公司业务要求而定，一般： 主流程测试：Chrome 30+、IE9+； 完整测试： Chrome 21、IE8+、360浏览器、微信webview/QQ手机浏览器。
某些网站例如某度文库、道客某某等都不允许用户选中文本进行复制，作为一个搞前端的，就感觉离谱，文本都下载到本地了，还不让我复制，于是为了更好的学(复)习(制)，实现了一个脚本去解决这些限制。
在日常业务开发，比如复制后增加版权信息，点击复制，等场景中需要进行复制粘贴的操作，以下是几种实现方案。
首先分析宏任务和微任务的运行机制，并针对日常开发中遇到的各种宏任务&微任务的方法，结合一些例子来看看代码运行的顺序逻辑，把这部分知识点重新归纳和梳理。
承接上篇【dart-skeleton】自动生成骨架屏项目内容，这一篇主要来说一下第二块内容逻辑篇。
为了金三银四的跳槽季做准备，并且我是 vue 技术栈的，所以整理了若干个 vue 的面试题。
1. 从Google Code加载jQueryGoogle Code上已经托管了多种JavaScript类库，从Google Code上加载jQuery比直接从你的服务器加载更有优势。它节省了你服务器上的带宽，能够很快的从Google的内容分布网络(CDN)上加载JS类库。更重要的是，如果用户访问那些发布在Google Code上的站点后它会被缓存下来。 这样做很有意义。有多少站点使用了没有被缓存的相同jQuery副本，而这些很容易做到,引入:
大家好，今天我们来花 1 分钟来学习 DOM 相关的基础操作，内容虽然简单，但是还是有必要归纳总结的，希望这些整理对大家有所帮助。
function clickBut(id){ // 获取要复制的内容 var value=document.getElementById(id).innerText; // 创建临时编辑控件，将内容写入临时dom节点 var temDom = document.createElement(‘input’); temDom.setAttribute(‘value’, value); // 临时控件加入到body下 document.body.appendChild(temDom); // 选择临时dom对象 temDom.select(); // 执行浏览器复制命令，将从选择的对象里复制内容 document.execCommand(“Copy”); temDom.style.display=’none’; alert(‘复制成功’); // 删除临时控件 document.body.removeChild(temDom); }
当 Facebook 第一次发布 React 时，他们还引入了一种新的 JS 方言 JSX，将原始 HTML 模板嵌入到 JS 代码中。JSX 代码本身不能被浏览器读取，必须使用Babel和webpack等工具将其转换为传统的JS。很多开发人员就能无意识使用 JSX，因为它已经与 React 结合在一直了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
