- 浏览: 2612043 次
- 性别:
- 来自: 小胖儿的大城
文章分类
最新评论
-
ni4wangba0:
ni4wangba0 写道亲测,算法有问题。对不起,其实是我自 ...
谈谈"求线段交点"的几种算法(js实现,完整版) -
ni4wangba0:
亲测,算法有问题。
谈谈"求线段交点"的几种算法(js实现,完整版) -
kers007:
苹果不让Webapp 在appstore 里发布,我不知道对 ...
苹果真的要在 AppStore 里封杀 WebApp 吗? -
striveandlive:
fins = js大牛
[原创]GT-Template, 一个超轻量级的js模板工具. -
AlwaysYang:
基础扎实的才能行走天下。
关于body的"大小"在ie和ff下的一些基础知识
今天无意间发现, IE和FF在取得页面元素的 client/offset/scroll + width/height 时,居然相当耗时.
大家可以下载我附件里的文件试一试.
文件代码如下, 大家注意看一下我里面的那段注释.
希望有朋友可以帮我解决这个疑问, 如果能提出优化方案更是感激不尽.
大家可以下载我附件里的文件试一试.
文件代码如下, 大家注意看一下我里面的那段注释.
希望有朋友可以帮我解决这个疑问, 如果能提出优化方案更是感激不尽.
<html> <head> <style type="text/css"> .gt-body { overflow: auto; width:500px; height:300px; } .gt-table { table-layout:fixed; } .gt-row { cursor: default; background-color:#ffffff; } .gt-row-even { cursor: default; background-color:#f3f6f5; } .gt-row td { width:110px; line-height:16px; padding: 2px 2px 2px 2px; font-size:12px; } .gt-row div { white-space:nowrap; } </style> <script language="JavaScript"> function init(){ var divC=document.getElementById("scr"); var t0=new Date().getTime(); var tableHTML=["<table id=\"testTable1\" class=\"gt-table\" cellSpacing=\"0\" cellPadding=\"0\" border=\"0\" ><tbody>"]; for (var r=0;r<3000; r++){ tableHTML.push("<tr class=\"gt-row "+ (r%2==0?"":"gt-row-even")+ "\">"); for (var c=0;c<10;c++){ tableHTML.push("<td><div class=\"\" >"+r+","+c+"__testdata</div></td>"); } tableHTML.push("</tr>"); } tableHTML.push("</tbody></table>"); divC.innerHTML=tableHTML.join('\n'); var t1=new Date().getTime(); /* 在下面那行里 不管是取 client/offset/scroll + width/height 哪种,耗时都很惊人 :( . 我上面生成table的代码实际上应该比较耗时的,双重循环,拼接字符串数组. 但是下面那句简单的语句 耗时竟然达到 生成table耗时的 1/3---1/2 !!!!! 为什么呢 ??????????/ 谁来帮忙解答一下吧 谢谢了 :( */ var w=divC.scrollHeight; var t2=new Date().getTime(); alert( "创建table耗时 :"+(t1-t0)+ " \n " + "取得xWidth/Height 耗时 :"+(t2-t1)); } </script> </head> <body onload="init();"> <div id="scr" class="gt-body"> </div> </body> </html>
- ntable.zip (1 KB)
- 下载次数: 20
评论
5 楼
fins
2007-09-26
我做下总结吧:
当创建完大的table时, 不要急着用js对table的属性或内部进行操作.
这时候可以试着做一些与这个table无关的工作
然后再回头来继续做和这个table相关的工作
因为table的渲染与"这个table无关的工作"是可以并行的
但是table的渲染与"和这个table相关的工作"是串行的.
也就是说 如果
刚创建完 table 就操作table,js总体的运行时间会提高(浪费了异步渲染这一优势)
下面是改造后的js
当创建完大的table时, 不要急着用js对table的属性或内部进行操作.
这时候可以试着做一些与这个table无关的工作
然后再回头来继续做和这个table相关的工作
因为table的渲染与"这个table无关的工作"是可以并行的
但是table的渲染与"和这个table相关的工作"是串行的.
也就是说 如果
刚创建完 table 就操作table,js总体的运行时间会提高(浪费了异步渲染这一优势)
下面是改造后的js
<script language="JavaScript"> var t0,t1,t2,t3; function init(){ var divC=document.getElementById("scr"); t0=new Date().getTime(); var tableHTML=["<table id=\"testTable1\" class=\"gt-table\" cellSpacing=\"0\" cellPadding=\"0\" border=\"0\" ><tbody>"]; for (var r=0;r<2000; r++){ tableHTML.push("<tr class=\"gt-row "+ (r%2==0?"":"gt-row-even")+ "\">"); for (var c=0;c<10;c++){ tableHTML.push("<td><div class=\"\" >"+r+","+c+"__testdata</div></td>"); } tableHTML.push("</tr>"); } tableHTML.push("</tbody></table>"); divC.innerHTML=tableHTML.join('\n'); var tableC=document.getElementById("testTable1"); t1=new Date().getTime(); /* 用下面的语句模拟: 做了一些与这个table无关的工作 ,耗时2秒 ,然后执行与这个table相关的工作 */ window.setTimeout(getScrollHeight,2000); } function getScrollHeight(){ divC=document.getElementById("scr"); // key point is here t2=new Date().getTime(); var w2=divC.scrollHeight; t3=new Date().getTime(); alert( "创建table耗时 :"+(t1-t0)+ " \n " + "取得xWidth/Height 耗时 :"+(t3-t2)); } </script>
4 楼
goncha
2007-09-26
的确如此,没有alert之后是不快
3 楼
fins
2007-09-26
谢谢楼上二位:
to Readonly:
创建表格和取得 宽高是一个完整的事物 中间不能用alert中断.
你的代码
中 把alert去掉依然不行 还是很慢 :'(
to goncha
把alert()去掉 一样慢. :'(
实际上楼上两位的做法 是 把 "表格生成 表格渲染 取得表格高度"这三个操作的总耗时
变成了 "表格生成 表格渲染(这时候是用alert将页面的js运行悬挂起来,而这时浏览器还在偷偷的渲染表格,但是这时候js不继续运行,所以计时就不准确了) 取得表格高度"
但是楼上二位消除了我的一个误解.
我一直以为
divC.innerHTML=tableHTML.join('\n');
这时候 会渲染表格 不渲染完js不会继续运行
而实际情况是 js会继续运行
但是 遇到 需要等表格渲染完才能正确执行的语句时 如取得scrollHeight, js会暂停
这个很重要啊 呵呵 谢谢二位
to Readonly:
创建表格和取得 宽高是一个完整的事物 中间不能用alert中断.
你的代码
function init(){ //... alert( "创建table耗时 :"+(t1-t0)); getScrollHeight(); }
中 把alert去掉依然不行 还是很慢 :'(
to goncha
把alert()去掉 一样慢. :'(
实际上楼上两位的做法 是 把 "表格生成 表格渲染 取得表格高度"这三个操作的总耗时
变成了 "表格生成 表格渲染(这时候是用alert将页面的js运行悬挂起来,而这时浏览器还在偷偷的渲染表格,但是这时候js不继续运行,所以计时就不准确了) 取得表格高度"
但是楼上二位消除了我的一个误解.
我一直以为
divC.innerHTML=tableHTML.join('\n');
这时候 会渲染表格 不渲染完js不会继续运行
而实际情况是 js会继续运行
但是 遇到 需要等表格渲染完才能正确执行的语句时 如取得scrollHeight, js会暂停
这个很重要啊 呵呵 谢谢二位
2 楼
goncha
2007-09-25
function init() { var divC=document.getElementById("scr"); var t0=new Date().getTime(); ... divC.innerHTML=tableHTML.join('\n'); var t1=new Date().getTime(); alert("Table Cost:" + (t1 - t0)); divC=document.getElementById("scr"); // key point is here t0=new Date().getTime(); var w=divC.scrollHeight; t1=new Date().getTime(); alert("GetScrollHeight Cost:"+(t1-t0)); }
1 楼
Readonly
2007-09-25
你这样的计时代码是不正确的,你应该把计时getScrollHeight的代码移到另外一段代码里面,让它在表格渲染完毕以后再进行调用:
调整最后2行代码,让代码在alert之前和之后执行就发现区别了
function getScrollHeight() { var divC=document.getElementById("scr"); var t1=new Date().getTime(); var w=divC.scrollHeight; var t2=new Date().getTime(); alert("取得xWidth/Height 耗时 :"+(t2-t1)); }
调整最后2行代码,让代码在alert之前和之后执行就发现区别了
function init(){ //... alert( "创建table耗时 :"+(t1-t0)); getScrollHeight(); }
发表评论
-
HTML5 与 ”性工能“障碍
2012-12-13 18:08 9533HTML5 与 ”性工能“障碍 最近看了@王淮Harr ... -
聊聊 iOS 5 和 iOS 6 在HTML5 canvas渲染上的差异
2012-09-13 18:40 5953我录制了一段iphone4s 下 ios 5 和 ios 6 ... -
尝试挑战 running panda , HTML5的跑酷类游戏(开发中)
2011-08-01 00:02 5993我业余时间一直在尝试用HTML5 在ios平台上开发webga ... -
移动互联网 与 Web标准化技术
2011-07-14 19:54 3660移动互联网 与 Web标准化技术 ... -
为什么我喜欢safari 胜过chrome和ff?
2011-07-04 00:35 7793抛下IE不谈,目前在浏览器市场里 最受欢迎的莫过于chrome ... -
欢迎参加 "移动平台HTML5动画性能大赛"
2011-03-31 11:38 3771移动平台HTML5动画性能大赛 注 : 此页面为临时页面 待 ... -
为什么在今天,我要选择HTML5 (上) 【此文标题党,还是别看了】
2011-03-30 16:19 4003当初苹果禁止Flash登陆iOS设备时,曾经引起过一场“HTM ... -
HTML5游戏开发入门实例<脆弱的马里奥>
2011-03-14 20:10 10132HTML5游戏开发入门实例<脆弱的马里奥>: ht ... -
3月26号,北京,我将做一期HTML5游戏开发的技术讲座,欢迎参加.
2011-03-11 11:57 21383月26号,我将去北京做一次"html5游戏开发入门 ... -
w3ctech 2011 - 拥抱HTML5 技术大会即将召开,欢迎报名
2011-03-03 23:46 1636w3ctech 2011 - 拥抱HTML5 技术会议将于4月 ... -
[新增视频]我在<当HTML5来敲门>技术沙龙上做的一个关于HTML5游戏开发的分享
2011-02-27 11:03 1921我在2月26号的<当HTML5来敲门>技术沙龙上做 ... -
说说 iOS safari在retina屏下显示图像的原理
2011-02-24 17:05 8214我在 简析 HTML5 canvas在retina屏(视网膜屏 ... -
一个 HTML5 编写的 简谱播放程序
2011-02-17 15:14 3835一个 HTML5 编写的 简谱播放程序 : http:// ... -
试用了一下 HP touchPad ,有点小失望.
2011-02-16 12:57 2809我手里的这台机器是 工程样机. 从样机来看, 这台平板并不出色 ... -
简析 HTML5 canvas在retina屏(视网膜屏幕,如iphone4)设备上的优化(更新原理)
2011-02-11 04:01 9577随着iphone4 的推出, retina ... -
[更新,bug修复了]chrome开启canvas 2D GPU加速后, clearRect的一个严重bug.
2011-01-24 15:54 9815最新版的 chromium. 已经修复了这个bug 经过进一 ... -
我也来重复造个轮子吧 ,发布一个利用原型,在Javascript中实现类机制的简单框架: GT-Class
2011-01-07 11:23 3449我也来重复造个轮子吧 ,发布一个利用prototype(原型, ... -
关于"GPU加速"的简单问答.
2011-01-05 22:34 2744如今使用GPU来代替CPU进 ... -
求助:用这样的方式写Kissy组件,可行吗?(Kissy推荐的方式是怎样的?)
2010-12-29 09:43 2033看了Kissy自带组件的代码,又看了你在D2上的PPT , 看 ... -
简单聊一聊百度的开源JS库:Tangram
2010-12-24 12:20 9503简单聊一聊百度的开源JS库:Tangram 最近百度开源了 ...
相关推荐
Infinitescroll、imagesLoaded 和 Masonry 是网页开发中三个非常重要的库,它们分别用于实现无限滚动、图片懒加载和网格布局。这个压缩包 "infinitescroll+imagesLoaded+Masonry.zip" 提供了一个整合这三种技术的...
网页元素位置(scroll、client、offsetWidth等)获取、设置详解
本篇将详细介绍与元素尺寸位置和滚动相关的三个重要的属性家族:offset系列、client系列和scroll系列。这些属性为我们提供了元素位置信息,窗口或元素内部的滚动距离等重要数据,对于实现页面布局和交互功能至关重要...
vscode 快捷键windows版本 Ctrl+Shift+P, F1 Show Command Palette Ctrl+P Quick Open, Go to File… Ctrl+Shift+N New window...Ctrl+/ Toggle line comment Shift+Alt+A Toggle block comment Alt+Z Toggle word wrap
在学习前端的过程中,我们经常会碰到offset, client与scroll,所以我就把它们称作为‘三剑客’。 01 offset – 偏移量 定义:元素在屏幕上占用的所有的可见的空间。 元素可见的大小由其高度、宽度决定,包括所有内...
# 个人博客前端项目,使用Vue3+Vite开发, ...+ 页面滚动动画: `utils/scrollAnimation.js` + localStorage封装: `utils/storage.js` + 回到顶部组件:`components/BackToTop` + markdown解析组件:`components/Markd
Web前端开发技术中,`client` 和 `scroll` 属性是JavaScript中用于处理元素可视区和滚动行为的关键概念。这两个属性对于创建动态交互的网页至关重要,尤其在设计浮动广告或其他需要响应用户滚动行为的场景中。 1. *...
05-offset,scroll,client.html
JavaScript中的`offset`、`client`和`scroll`是一组用于获取和操作页面元素位置及大小的重要属性。这些属性在Web开发中非常常见,尤其是在处理动态布局和交互时。下面将详细讲解这些属性的含义、用途及其在不同...
在JavaScript中,`scroll`和`offset`是两个重要的概念,它们主要用于获取和操作网页元素的位置和滚动状态。本文将详细解析这两个概念以及它们的区别。 首先,`offset`属性主要包含`offsetTop`, `offsetLeft`, `...
### CSS兼容IE6、IE7、FF的技巧详解 #### 一、CSS Hack技术 **CSS Hack**是一种针对不同浏览器的特性和版本差异编写特定样式的技术。它可以帮助开发者解决跨浏览器兼容性问题。 ##### 1. 通用Hack方法 对于**IE6...
通过以上步骤,你可以创建一个在子元素滚动时,父元素容器不跟随滚动的Vue组件,同时兼顾了PC和移动端的兼容性。如果遇到复杂场景,还可以结合现有的库或插件进一步优化。在实践中,不断调试和完善,将使你的代码...
扩展安装页面https://chrome.google.com/extensions/detail/nbokbjkabcmbfdlbddjidfmibcpneigj 特性 - Picasa-like smooth scrolling- Mouse wheel, middle mouse and keyboard support- Arrow keys, PgUp/PgDown...
例如,你可以设置`overflow`属性为`auto`或`scroll`,使元素在内容溢出时显示滚动条。 ```css .container { width: 200px; height: 200px; overflow: auto; /* 或 'scroll' */ } ``` 在这个例子中,`.container...
JavaScript中的offset、client和scroll属性是用于获取和操作HTML元素...在JavaScript中处理元素尺寸和位置时,了解并正确使用offset、client和scroll属性至关重要,它们可以帮助我们创建更加动态和响应式的网页界面。
在本示例中,"js新闻上下滚动效果(兼容IE和ff)"指的是利用JavaScript实现一个新闻标题在网页上进行上下滚动的效果,这种效果常见于新闻网站,能够展示多条新闻,同时保持页面空间的有效利用。这个效果不仅在现代...
为了使图片在页面加载时位于正确的位置,我们还需要在CSS中设置其初始位置为固定,并设置`z-index`以确保其在其他元素之上: ```css #scrolling-image { position: fixed; top: 0; /* 初始化时图片的顶部与浏览器...
适用于iOS / tvOS的Parallax Scroll-Jacking Effects引擎.zip,Parallax Scroll-Jacking Effects Engine for iOS / tvOS
4. **缓动函数**:为了让滚动更加平滑,我们可以自定义缓动函数,这里使用的是四次方的缓动函数`Math.easeInOutQuart()`,它会在滚动开始和结束时减速,使得动画看起来更加自然。 **三、应用场景** 平滑滚动不仅...
在网页设计中,为了优化用户体验,尤其是在数据量庞大的表格展示时,经常需要用到表格滚动条功能。jQuery Table Scroll 插件正是解决这个问题的一个有效工具。它允许用户在表格内容区域添加垂直或水平滚动条,以便在...