- 浏览: 2614831 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (1286)
- js-oop (2)
- js-window (10)
- js-event (19)
- js-string (37)
- js-array (27)
- js-page (4)
- js-dom (62)
- js-lang (8)
- js-number (7)
- js-platform (3)
- js-object (15)
- js-element (3)
- js-browser (7)
- js-url (6)
- js-date (10)
- css基础 (48)
- css优化 (15)
- html基础 (17)
- html标签 (19)
- js基础 (117)
- js-兼容性差异 (33)
- js引擎 (3)
- js性能 (14)
- json (6)
- jQuery源码浅析 (43)
- web mobile开发资料 (78)
- js跨域 (2)
- html5 (74)
- html5-canvas (7)
- css3 (53)
- 浏览器 (5)
- api设计学 (3)
- js-加载 (3)
- linux (37)
- 架构师 (1)
- php (2)
- self开发的脚本库--凤凰 (2)
- web应用名词 (6)
- javascript新特性翻译 (8)
- ajax (6)
- jQuery动画效果 (7)
- prototype的解读 (13)
- 优秀插件翻译 (1)
- css解决方案 (26)
- 数据库 (2)
- english daily (59)
- 浏览器内核探究 (1)
- jQuery插件介绍 (9)
- jquery基础篇 (26)
- chrome浏览器问题整理 (14)
- js选择器那些事 (3)
- 前端框架 (26)
- Firefox私有属性 (11)
- webkit私有属性集合 (17)
- 书籍推荐 (21)
- 数据结构 (1)
- 网站建设相关 (7)
- 好文翻译 (2)
- 个人作品 (3)
- kissy的解读 (4)
- css-layout(布局研究) (5)
- less研究 (1)
- YUI探究 (1)
- hash探究 (1)
- js动画 (7)
- 前端面试题 (37)
- css书写规范 (1)
- js模板引擎 (6)
- js模块化 (19)
- 编写高质量代码 (3)
- 性能探究--应用协议 (2)
- 前端图像处理 (19)
- Mac OS相关 (21)
- 正则表达式 (11)
- 离线应用相关 (0)
- 前端工具 (65)
- nodeJS (55)
- jquery优化篇 (2)
- 设计模式探究系列 (3)
- windows7 (2)
- IE10 (10)
- 微博开放平台探究 (2)
- 常用web服务接口 (1)
- 数据存储相关 (8)
- 零时文件 (2)
- jQuery Mobile (16)
- backbone (15)
- underscore (22)
- sass (11)
- android (3)
- phonegap (10)
- IE私有 (11)
- qwrap (8)
- git (14)
- chrome extensions (5)
- freemarker (11)
- angularJS (3)
- seo (2)
- markdown (3)
- css动画 (4)
- 安卓开发 (2)
- React (7)
- 活动页技术 (1)
- 网络安全 (3)
- grunt (7)
- Lo-Dash (3)
- 前端国际化 (4)
- 版本控制 (2)
- 盒模型 (4)
- 微信开发 (1)
- Mock数据工具 (1)
- sails (1)
- vim (1)
- js-color (1)
- iOS 基础 (43)
最新评论
-
jertom:
<div id="showInfo" ...
addEventListener等事件监听的参数细谈 -
乌托邦国王:
引用[u][/u]
css3动画属性系列之transform细讲移动translate -
hvang1988:
能提供附件下载吗,找不到js库,google封了访问不了
Syntaxhighlighter---代码高亮插件介绍 -
sscsacdsadcsd:
我的天 那到底是为什么function是object我看und ...
typeof func ==='function'的疑惑 -
wkjiangwk:
试了,没用,你们从不去测试。
介绍一下x-webkit-speech -------实现语音输入
前面有一篇记录了重绘和重排(http://zhangyaochun.iteye.com/blog/1681641)
改变样式方面:
多次修改样式的时候应该合并所有的改变最后一次处理,这样只修改DOM一次
1、使用cssText。
var el = document.getElementById("test"); el.style.cssText = "color:blue;border:1px solid red;width:100px;"
(这个其实在动画里面还是有比较多应用,比如以前百度世界末日专题里面的动画)。
2、修改class的名称,而不是修改内联样式
试用的场景:不依赖运行逻辑和计算的情况。
var el = document.getElementById("test"); el.className = 'hover';
发表评论
-
自执行函数相关
2013-05-07 20:39 1392整理几种自执行函数: 在最前最后加括 ... -
一淘首页优化总结
2013-02-01 17:10 0尽量减少DOM节点 不需要初始加载就渲染 ... -
严格模式探究
2013-01-18 17:32 1451探究一下严格模式 ... -
《JavaScript高级程序设计》性能探究之优化DOM交互
2012-10-20 17:50 1453本文来自《JavaScript高级程序设计》阅读笔记 ... -
《JavaScript高级程序设计》性能探究之最小化语句数
2012-10-20 16:18 1401本篇主要整理于《JavaScript高级程序设计》的第三版 6 ... -
翻译学习《how-web-page-loads》
2012-10-19 17:42 1350本文大部分来源于: http://www.douban ... -
关于页面的资源文件组织合理性探究
2012-10-18 13:55 1417本文主要来自于kejun's Blog里面的js和css的顺序 ... -
js性能-DOM编程之重绘和重排
2012-09-19 16:59 7237浏览器下载完页面中的所有组件----HTML标记,Js,CSS ... -
IE下的:hover
2012-09-19 16:22 1566从IE7(严格模式下)任何元素都可以使用:hover这 ... -
书写高质量JavaScript代码的要点(The Essentials of Writing High Quality JavaScript)翻译
2012-02-25 17:08 1658前言: 1、文章尾部带有原文的链接和来自zhang ... -
关于ajax类库的局限思考
2012-01-17 20:35 1473目前对于各大前端框架来言,都支持访问一个ajax对象,它屏蔽了 ... -
关于iframe加载完成的判断
2011-10-28 21:18 0//创建iframe var iframe = ... -
你会用string.lastIndexOf()吗?
2011-10-15 16:29 2119很多的人可能会不屑这个问题,请听我慢慢说道。 需求设计 ... -
js性能优化之 Object/Array直接量
2011-10-14 14:30 2707以前可能自己写的时候也有这个习惯,但是理论性的没有认真去中总结 ... -
js性能研究系列之----数据访问相关
2011-09-28 12:42 1546前言: 本来按照自己的计划是推出的是 常用性 ...
相关推荐
特别是在窗口大小改变或页面最小化恢复时,如果JavaScript代码执行不当,可能会触发不必要的重排或重绘。 4. **浏览器优化**:某些浏览器可能有自己的优化策略,比如延迟重绘或重排到一个批次进行,但这并不总是...
5. **减少重排与重绘**:修改DOM元素可能导致浏览器进行重排(布局调整)和重绘(样式更新),这是性能杀手。尽量避免直接改变元素尺寸和位置,或者使用CSS `transform`和`opacity`属性来实现动画,因为这些操作通常...
在性能方面,Cardinal通过最小化CSS代码、优化重排和重绘、以及利用CSS3特性如媒体查询和Flexbox,实现了快速的页面渲染。此外,Cardinal还支持CSS变量,这使得全局样式更改变得轻松,而无需修改大量代码,进一步...
7. **资源优化**:PageAccelerator可能还包含了对HTML、CSS和JavaScript的进一步优化,例如通过最小化DOM操作,减少重排和重绘,以及优化CSS选择器以提高渲染效率。 8. **HTTP/2多路复用**:如果支持,...
例如,它们可以进行更少的DOM操作,更有效地处理动画的回调,以及通过更智能的调度机制来最小化布局重排和重绘。 为了避免布局颠簸和垃圾回收引起的动画延迟,建议将DOM查询和更新分开进行。在JavaScript中进行动画...
8. 轻量级优化:考虑到性能,模板可能使用了最小化的CSS和JavaScript,避免不必要的重排和重绘,以及优化了图片大小和格式,以实现快速加载和流畅的用户体验。 9. 文档结构:HTML5的语义化标签(如, , , , , )可以...
2. **DOM操作**:JavaScript可以修改DOM,这会导致浏览器重新构建受影响的部分,可能导致重排和重绘。 3. **异步加载**:使用`window.onload`或`DOMContentLoaded`事件监听整个页面或DOM加载完成,此时可以安全地...
在前端框架中使用虚拟DOM可以提高性能,因为它可以减少与真实DOM的直接操作,通过批量更新来减少重排重绘的次数。当状态变更时,框架会首先构建一个新的虚拟DOM树,然后通过与旧的虚拟DOM树进行比较,计算出最小的...
当JavaScript修改DOM结构时,浏览器会重新计算元素布局(重排),并根据新的布局重新绘制元素(重绘)。这些过程对性能有很大影响,因为它们可能导致屏幕闪烁和用户体验延迟。 1. **DOM操作**:高效的JavaScript...
4. **重排与重绘分析**:识别可能导致频繁重排和重绘的操作,如动态修改样式或DOM结构。 5. **代码审查**:查找可能引起性能问题的代码片段,如不必要的JavaScript计算或循环。 通过Westcliff Test,开发者可以了解...
- 选择轻量级的框架或库,如React或Vue,并正确配置虚拟DOM以减少重绘和重排。 12. **A/B测试** - 进行A/B测试,评估性能优化措施的实际效果。 13. **持续监控** - 使用如Google Lighthouse、WebPageTest等工具...
4. **虚拟DOM**:Vue使用虚拟DOM来提高性能和效率,当数据变化时,Vue会计算出最小化的DOM更新操作,避免不必要的重绘和重排。 5. **路由管理**:对于单页面应用(SPA),Vue有官方的vue-router库,用于管理应用的...
6. **最小化重排和重绘**:通过合理安排CSS属性和布局,减少浏览器需要进行的重排和重绘操作,从而提升页面渲染速度。 从压缩包文件名称"Loading-Page-master"来看,这可能是项目的主分支或者源代码仓库,通常包含...
React通过虚拟DOM(Document Object Model)提高应用性能,当组件状态变化时,React会计算出最小化的DOM更新,从而减少页面重绘和重排。在React应用中,数据流通常是单向的,这使得状态管理更加清晰。 接下来,我们...
MobileComponent 可能会采用延迟加载、最小化 CSS 文件、减少重排和重绘等方式来提升组件的加载速度和运行效率。 8. **可访问性**:遵循 WCAG(Web 内容无障碍指南)标准,MobileComponent 可能会确保组件对辅助...
3. **最小化DOM深度**:减少DOM节点数量和深度,可以降低布局和渲染的复杂性。 4. **避免阻塞渲染**:尽量避免在HTML头部放置大型CSS文件,以免阻塞浏览器对DOM的解析。 5. **使用HTTP/2**:HTTP/2协议支持多路...
- **性能优化**:考虑使用更高效的DOM操作方法,减少重绘和重排成本。 通过上述分析可以看出,这个右下角弹出窗口及点击关闭效果的实现是基于纯JavaScript和CSS完成的,不仅简单易懂,而且具备一定的实用价值。...
7. **减少重排和重绘**:理解DOM渲染原理,避免在关键渲染路径中引起不必要的布局和绘制操作。 8. **使用异步加载**:对于非阻塞脚本,使用`async`或`defer`属性加载。 9. **正确设置缓存**:通过HTTP头部信息告诉...