平时在工作中,要优化自己开发的WEB应用的性能,一般是遵循以下几个原则: 1.减少网络请求. 2.压缩.合并静态资源文件,以此来减轻网络传输的带宽压力和资源消耗. 3.代码逻辑层面上的性能优化.比如减少循环次数.减少DOM操作的次数(减少DOM的获取与修改次数)等. 这里就来讲一下为什么DOM操作会影响WEB应用的性能. DOM与ES的关系 DOM(Document Object Model,文档对象模型)是一个独立于语言的.用于操作XML和HTML文档的程序接口(API),我们可以通过调用其中…

面试官经常会问你:"平时工作中,你怎么优化自己应用的性能?" 你回答如下:"我平时遵循以下几条原则来优化我的项目.以提高性能,主要有:" a. 减少DOM操作的次数(减少DOM的获取与修改次数) b. 减少网络请求 c. 压缩.合并静态资源文件(css.js.img等) d. 小图片文件base64化处理 e. js少用全局变量 f. ... Bingo!此时,你给自己抛了个可以把自己埋住的大坑. 因为面试官可能会追问你:"为什么减少DOM操作可以提高性能…

为什么dom操作会影响性能? 在浏览器当中,dom的实现和ECMAScript的实现是分离的. 例如,在IE中,ECMAScrit的实现在jscript.dll中,而DOM的实现在mshtml.dll中:在Chrome中使用WebKit中的 WebCore处理DOM和渲染,但ECMAScript是在V8引擎中实现的,其他浏览器的情况类似. 因此,操作dom,就是通过js代码调用dom的接口,就相当于两个相互独立的模块发生了交互.这样,相比于在同一个模块当中互相调用,这种跨模块的调用它的性能损耗是…

hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 控制就是获取以及设置 <h3>attr()方法设置元素属性</h3> <a href="http://127.0.0.1" id="a1">点我就变</a> <d…

js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周的时间整理,我将根据实例整理那些大大小小的“坑”. DOM的工作模式是:先加载文档的静态内容.再以动态方式对它们进行刷新,动态刷新不影响文档的静态内容. PS:IE 中的所有 DOM 对象都是以 COM 对象的形式实现的,这意味着 IE 中的 DOM可能会和其他浏览器有一定的差异. Node 接口 特性/方法 类型/返回类型 说 明 nodeName String 节点的名字:根据节点的类型而定义 nodeValue String…

最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.原生JS挺简单,为何需要jq?jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器性能好,跨平台兼容也不影响性能.但jq根本就不是为手机设计的.手机上只有webkit浏览器(忽略wp,反正mui不支持wp),根本就不需要jq这种封装框架来操作dom.选择元素//jq$('.el');//js   document.querySelector("di…

HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 jQuery.YUI.MooTools 等 JavaScript 库已经有这样的功能,这个框架不包裹或隐藏原生 DOM,而是暴露和增强,而且非常轻量. 您可能感兴趣的相关文章 那些让人惊叹的的国外创意404错误页面设计 让人爱不释手的精美 Web 应用程序图标素材 赞!10套精美的免费网站后台管理系统…

原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用原生 JavaScript 操作 DOM 了. 文章针对如下几个点进行介绍: 查询修改 DOM. 修改类和特性. 事件监听 动画 一.查询 DOM 1.1 .querySelector() 使用 CSS 选择器获取元素(一个),是网页中符合查询条件的元素快照,不是即时的. const myEleme…

最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.原生JS挺简单,为何需要jq?jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器性能好,跨平台兼容也不影响性能.但jq根本就不是为手机设计的.手机上只有webkit浏览器(忽略wp,反正mui不支持wp),根本就不需要jq这种封装框架来操作dom.选择元素//jq$('.el');//js   document.querySelector("di…

在<Angular开发实践(六):服务端渲染>这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window. document. navigator等浏览器特有的类型以及直接操作DOM元素. 这样就引出了 Angular 主要特性之一:横跨所有平台.通过合适的方法,使用 Angular 构建的应用,可复用在多种不同平台的应用上 -- Web.移动 Web.移动应用.原生应用和桌面原生应用. 为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异.比如…