将字符串动态转换为DOM节点，在开发中经常遇到，尤其在模板引擎中更是不可或缺的技术。 字符串转换为DOM节点本身并不难，本篇文章主要涉及两个主题：
不过众所周知的原因，对 DOM 反复操作会导致页面重绘、回流，效率非常低，而且页面可能会被卡死。
对面上面那种问题，可能就会想到通过innterHTML方式去创建DOM元素 这里先举个栗子:
常见的优化网络请求的方法有：DNS Lookup，减少重定向，避免 JS、CSS 阻塞，并行请求，代码压缩，缓存，按需加载，前端模块化…
如你改变了一个div的位置，或者是改变了这个div的width, height, position 或者布局类的样式。
懒加载也叫延迟加载、按需加载，指在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或者应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可是窗口的哪一部分图片数据，对性能有浪费。
在实际工作中，我们很少会遇到一次性需要向页面中插入大量数据的情况，但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。
浏览器内核中的JS 引擎和渲染引擎是独立存在的，当我们用JS去操作DOM时，本质上是JS引擎和渲染引擎之间进行的“跨界交流”。
在一些文章类程序中，我们直接对文章内容检索的话，数据量大，速度较慢，我们可以在保存的时候获取文章的摘要，方便后续检索。
1所表示的ELEMENT_NODE 很常见，我们平时用的 div 等标签，其类型都是 ELEMENT_NODE。
对于早期的w3c浏览器，并没有实现ie的私有方法insertAdjacentHTML（目前已是HTML5标准），可以用appendChild模拟该方法的实现： if(typeof HTMLElement !=='undefined' && !HTMLElement.prototype.insertAdjacentHTML){ var insertAdjacentElement = function(node,position,el){ switch (
如果你需要首屏快的话，要用分页，其中requestAnimationFrame分页更为优秀，因为这个api会是系统调用的，刷新时机和屏幕刷新保持一致。setTimeout则不能保证一致。
node类型是DOMLevel 1中定义的，除了ie浏览器所有的浏览器都可以访问这个类型，在js中，所有的节点类型都继承node类型。
所以为了避免这种情况，我们可以使用两种方案，一种是Web Worker，另一种是时间切片（Time Slicing）。
toDom方法用来将html标签字符串转化成DOM节点。1.7之后toDom方法被分配到了dom-construct模块。
DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。
柯里化（currying） 指的是将一个多参数的函数拆分成一系列函数，每个拆分后的函数都只接受一个参数。
HTTP/3基于UDP协议实现了类似于TCP的多路复用数据流、传输可靠性等功能，这套功能被称为QUIC协议。
前言 HTML DOM 可以创建一个新元素，并插入到指定元素的位置 createElement 创建元素 document.createElement() 可以创建一个元素 document.createTextNode() 创建一个文本节点 appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。 使用示例 这是文本内容 <script> // div下添加一个子元素节点，放到p标签下 b
这是文本内容
提示：如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。
fragmentRE是一个匹配普通标签<xxx>的表达式，关键是zepto.fragment()函数。
本文主要介绍如何使用原生javascript和Css3来实现一个在各大移动应用中经常出现的转盘游戏，由于改实现可以有不同方式，如果熟悉canvas的话也可以用canvas实现，本文采用js和css实现主要考虑到复杂度较小性能较好，所以如果有更好的方案，也可以随时和我交流。
DOM 文档对象模型。 节点 元素 即 标签 Element 1 文本 文本 Text 3 属性 Attr 2 注释节点 Comment 8 文档节点 Document 9 文档类型节点 DocumentType 10 <!DOCTYPE html> 文档片段节点 DocumentFragment 11 Javascript obj.nodeName obj.nodeValue obj.attributes[0].nodeName
表示HTML文档元素的HTMLElement对象定义了读/写属性。映射了元素的HTML属性。HTMLElement定义了通用的HTTP属性。以及事件处理程序的属性。特定的Element子类型为其元素定义了特定的属性。
指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定具体类型的一种特性。
CDN（Content Delivery Network，内容分发网络）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。
XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。
1、请描述cookie,sesstionStorage,localStorage三者之间的区别
前言： 看 jQuery 源码的一个痛点就是调用一个函数时，里面会调用 N 个其他函数，然后这 N 个函数里面又会调用 M 个其他其他函数。。
该 Node 接口是整个文档对象模型的主要数据类型。它表示该文档树中的单个节点。当实现 Node 接口的所有对象公开处理子节点的方法时，不是实现 Node 接口的所有对象都有子节点。例如，Text 节点可能没有子节点，且将子节点添加到这样的节点将导致引发 DOMException。
本文技术路线采用和上篇文章教你用200行代码写一个爱豆拼拼乐H5小游戏（附源码）同样的技术,即均使用本人自己写的dom库去简化dom操作,具体需要掌握的知识点有：
Nicholas Zakas是一位 JS 大师，Yahoo! 首页的前端主程。他是《高性能 Javascript》的作者，这本书值得每个程序员去阅读。
浏览器使用流式布局模型 (Flow Based Layout)。有了 RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
当延迟超过100ms，用户就会察觉到轻微的延迟。所以为了避免这种情况，我们可以使用两种方案，一种是Web Worker，另一种是时间切片（Time Slicing）。
多数现代浏览器都实现了innerHTML操作，它的方便性让我们爱不释手，但如果使用不当，很容易出现效率问题，本文通过一个例子来说明如何优化innerHTML操作。
所谓无规矩不成方圆，前端时间在团队 code-review 中发现，推荐大家可以大致过一遍，形成自己的编码习惯
节点的类型 元素节点 —— 1 属性节点 —— 2 文本节点 —— 3 注释节点 —— 8 document —— 9 DocumentFragment —— 11 获取节点类型 nodeType 复制代码 节点的四个属性 nodeName 节点的名，以大写形式表示只读的意思 nodeValue Text节点或Comment节点的文本内容,可读写 nodeType 该节点的类型，只读 attributes Element 节点的属性集合 节点的一个方法 Node.hasCh
对于 React 开发人员来说，从一个组件返回多个元素一直是个问题。这是因为 React 依赖于创建用于协调的树形结构。因此，当在呈现方法中返回多个元素时，用于协调的算法将不会像预期的那样发挥作用，树将有一个组件的根节点的假设将不再有效。React Fragment 在库的 16.2 版本中修复了这个问题。
一、前言 当我们使用String-base的模板引擎（如Handlebars.js等）时，要么就通过外部文件存放模板文本，需要时再通过XHR或script标签加载进来；要么通过<script type="text/x-template"></script>等标签直接写在当前页面上。现在HTML5为我们提供了一个全新的template标签，以更统一、有效的方式存放String-base模板引擎的模板文本了！ 目录一坨： 二、那些年我们存放
DNS 服务器中以资源记录的形式存储信息，每一个 DNS 响应报文一般包含多条资源记录。一条资源记录的具体的格式为
众所周知 JS 是门非阻塞单线程语言，因为在最初 JS 就是为了和浏览器交互而诞生的。如果 JS 是门多线程的语言话，我们在多个线程中处理 DOM 就可能会发生问题（一个线程中新加节点，另一个线程中删除节点），当然可以引入读写锁解决这个问题。
1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。 2. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。 回流何时发生：
var div = document.getElementById(‘id名’)；//返回是一个，不是数组 var div = document.getElementsByTagName(‘标签名’)；//返回数组 （实时） var div = document.getElementsByClassName(‘class名’);//（带s的都是数组） var div = document.getElementsByName(‘name’)；//name名 var div = quarySelector();//css选择器 选择一个 里面放’id’，‘class’… var div - quarySelectorAll();//css选择器 选择一个（静态的，不实时。用途受局限）
我会首先介绍几个涉及JS方面的知识,然后着重对于实现一个MVVM框架的三大基本原理(即数据代理、模板解析、数据绑定)进行介绍,在接下来的几篇文章中会对涉及到的其他技术(发布订阅、热重载、Virtual DOM等)逐一介绍.
关键字：ES2015类的自定义元素写法、全局声明自定义元素、shadowroot,生命周期事件
一、前言 IE6~8除了不遵守W3C标准和各种诡异外，我想最让人诟病的应该是内存泄露的问题了。这阵子趁项目技术调研的机会好好的再认识一回，以下内容若有纰漏请大家指正，谢谢！ 目录一大坨！ 二、内存泄漏到底是哪里漏了？ 2.1. JS Engine Object、DOM Element 和 BOM Element 2.2. JS Engine Object的内存回收机制 2.3. DOM Element的内存回收机制 2.4. 两种泄漏
本文主要介绍如何使用原生js，通过面向对象的方式实现一个文件上传预览的组件，该组件利用FileReader来实现文件在前端的解析，预览，读取进度等功能，并对外暴露相应api来实现用户自定义的需求，比如文件上传，进度监听，自定义样式，读取成功回调等。
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
