案例:如何在页面元素ul中一次性插入30000个li标签,保证页面体验流畅呢? 解决方案:可以从减少 DOM 操作次数.缩短循环时间两个方面减少主线程阻塞的时间 减少 DOM 操作次数的良方是 DocumentFragment: 缩短循环时间需要考虑使用分治的思想把 30000 个 <li> 分批次插入到页面中,每次插入的时机是在页面重新渲染之前,采用 requestAnimationFrame . 代码示例: (() => { const ndContainer = document.…

前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue&react的源码分析,我感觉这里有必要说下我的认识. 首先,要写源码分析很难,第一是他本来就很难,所以一般我们是想了解他实现的思路而不是代码: 第二每个开发者有自己发风格,所以你要彻底读懂一个人的代码不容易,除非你是带着当时作者同样的问题不断的寻找解决方案,不断的重构,才可能理解用户的意图. 我们…

取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解...... 根据之前的经验,就现有的前端项目,如果最初没有良好的设计,做到一定阶段一定会变得难以维护,就算最初有设计,变化无常的PM也会让你的项目BUG丛生. 一个页面的复杂程度不断的增加,依赖模块也会变得混乱,而其中最为头疼的就是页面级随心所欲的DOM操作了! MVC类的框架可以很好的解决以上问…

什么情况下使用到克隆节点? 我们知道在对DOM操作过程中如果直接使用节点会出现节点随操作而变动的情况.比如对节点使用.after/.before/.append等方法后,节点被添加到新的地方,原来的位置上的节点被移除了.有的时候需要保留原来位置上的节点,仅仅是需要一个副本添加到对应位置,这个时候克隆就有了使用场景. jQuery.fn.clone克隆当前匹配元素集合的一个副本,并以jQuery对象的形式返回. 你还可以指定是否复制这些匹配元素(甚至它们的子元素)的附加数据( data()函数 )…

jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接口,这种接口可以提供一种访问页面中所有的节点的机制,DOM提供了Netscape的JavaScript和Microsoft的Jscript之间的冲突的解决方案. 通常DOM操作分成三个部分,也就是核心DOM(DOM core)HTML-DOM还有CSS-DOM三种. 一.核心DOM: DOM cor…

JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检测当前浏览器支持CSS能力的级别. DOM1级实现了最基本的文档处理,DOM2和DOM3在这个基础上增加了更多的交互能力,这里我们主要探讨CSS,DOM2增加了CSS编程访问方式和改变CSS样式信息. DOM一致性检测 功能 版本号 说明 Core 1.0.2.0.3.0 基本的DOM,用于表现文档…

jQuery之所以击败Prototype.js,是因为它自一开始就了解这三大问题,并提出完善的解决方案. 第一个问题,DOM什么时候可用.JS不像C那样有一个main函数,里面的逻辑不分主次.但JS是这样玩,并不意味着DOM也是这样.被JS自由惯了的人,于是傻眼了. 这涉及一个时间的概念.牛顿与爱因斯坦的差别,也是在于这个时间的引入.我们的脚本并不是一下子就引入,页面也不是一下加载完毕.前者引发脚本加载管理问题,后者就是DOMReady这个概念的导入.页面是从上到下生成,除了样式或图片在浏览器的…

作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson3 转载请注明出处,保留原文链接和作者信息. 看看上一节我们的代码,仔细留意一下 changeLikeText 函数,这个函数包含了 DOM 操作,现在看起来比较简单,那是因为现在只有 isLiked 一个状态.由于数据状态改变会导致需要我们去更新页面的内容,所以假想一下,如果你的组件依赖了很多状态,那么你的组件基本全部都是 DOM 操作. 一个组件的显示形态由多个状态决定的情况非常常见.代…

看看上一节我们的代码,仔细留意一下 changeLikeText 函数,这个函数包含了 DOM 操作,现在看起来比较简单,那是因为现在只有 isLiked 一个状态.由于数据状态改变会导致需要我们去更新页面的内容,所以假想一下,如果你的组件依赖了很多状态,那么你的组件基本全部都是 DOM 操作. 一个组件的显示形态由多个状态决定的情况非常常见.代码中混杂着对 DOM 的操作其实是一种不好的实践,手动管理数据和 DOM 之间的关系会导致代码可维护性变差.容易出错.所以我们的例子这里还有优化的空间:…

一般通过JS代码操作DOM结构,会触发浏览器进行页面渲染.所以要尽量减少DOM操作,避免频繁的页面渲染对性能造成影响. 如有以下场景:程序执行ajax请求,并根据请求结果动态添加列表项.常见的做法是循环遍历数据项,生成LI节点,插入页面中的UL节点中. 如果返回结果有一万项,则整个流程会触发一万次页面渲染,页面会出现明显的卡顿现象. 解决方案有三种: 1) 原生JS代码可以通过创建documentFragment,将所有的添加列表项的操作先在创建的fragment上进行,再将整个fragment…