一般大家在处理这种情况,都使用ajax,先把html输出到客户端,然后再用ajax取加载比较耗时的资源。用ajax麻烦的地方是增加了请求数,而且需要写额外的js代码、和js调用的请求接口。 正对这种情况,还有一种处理方法,就是让response分块编码进行传输。response分块编码,可以先传输一部分不需要处理的html代码到客户端,等其他耗时代码执行完毕后再传输另外的html代码。 分块编码(chunked encoding) chunked encoding 是http1.1 才...
浏览器在处理HTML页面渲染和JavaScript脚本执行的时候是单一进程的,所以在当浏览器在渲染HTML遇到了标签会先去执行标签内的代码(如果是使用src属性加载的外链文件,则先下载再执行),在这个过程中,页面渲染和交互都会被阻塞。 ...虽然会有阻塞,但还是有几招可以减少JavaScript对性能的影响的。 1.script标签的位置 当出现在中的时候,比如:
概述Java语言中,提供了一套数据集合框架,其中定义了一些诸如List、Set等抽象数据类型,每个抽象数据类型的各个具体实现,底层又采用了不同的实现方式,比如ArrayList和LinkedList。除此之外,Java对于数据集合的遍历,也提供了几种不同的方式。开发人员必须要清楚的明白每一种遍历方式的特点、适用场合、以及在不同底层实现上的表现。下面就详细分析一下这一块内容。数据元素是怎样在内存中存放的?数据元素在内存中,主要有2种存...
在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新,一条条循环插入也会运行很好,也是我们常用的方法。代码如下: 代码如下: for(var i=0;i<5;i++){ var op = document.createElement("span"); var oText = document.createTextNode(i); op.appendChild(oText); document.body.appendChild(op); } 但是,如果当我们要向document中添加大量数据时(比如1w条),如果...
代码如下: function StringBuffer(){ this.__strings__ = new Array(); } StringBuffer.prototype.append = function(str){ this.__strings__.push(str); }; StringBuffer.prototype.toString = function(){ this.__strings__.join(" "); }; 其实上面的代码,主要利用了js的数组原理实现。
例如有一段HTML代码: 1.总是从ID选择器开始继承以下是引用片段: 如果采用下面的选择器,那么效率是低效的。以下是引用片段:var traffic_button = $("#content .button"); 因为button已经有ID了,我们可以直接使用ID选择器。如下所示:以下是引用片段:var traffic_button = $("#traffic_button");当然 这只是对于单一的元素来讲。如果你需要选择多个元素,这必然会涉及到 DOM遍历和循环,为了提高性能,建议从最近的ID开始...
同样如果一个页面结构很复杂或者电脑配置不好的话也会出现这种情况。为了弄清变慢的原因,我们做了几个demo对比,最后发现在mousemove事件上加上定时器能改进这个体验。 整个代码的关键地方在于当鼠标按下时开始了的计时器,这样Onmousemove事件会每隔30ms执行一次,然后在鼠标松下的时候清除计时器。 timer=setInterval(function(){flag=true;},30); 这样可以减轻浏览器绘制div层的负担,不至于拖动时每时每刻都在移动,其实太短了...
将jquery对象缓存起来在 for循环中,不要每次都要访问数组的length属性,我们应该先将对象缓存进一个变量然后再操作,如下所示: 代码如下: var myLength = myArray.length; for (var i = 0; i < myLength; i++) { // 要做的事 } 在循环外使用append 进行DOM操作是有代价的,如果需要往DOM中添加大量元素,你应该一次批量完成,而不是一次一个。 代码如下: // 别这样 $.each(reallyLongArray, function(count, item) { var newL...
1. 把数字转换成字符串,应用"" + 1,虽然看起来比较丑一点,但事实上这个效率是最高的,性能上来说:("" + ) > String() > .toString() > new String(),尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。String()属于内部函数,所以速度很快,而.toString()要查询原型中的函数,所以速度逊色一些,new String()用于返回一个精确的副本。 2. 浮点数转换成整型,这个更容易出错,很多人喜欢使用parseInt(),其实par...
1.避免使用eval或者Function构造函数 2.避免使用with 3.不要在性能要求关键的函数中使用try-catch-finally 4.避免使用全局变量 5.避免在性能要求关键的函数中使用for-in 6.使用字符串累加计算风格 7.原操作会比函数调用快 8.设置setTimeout() 和 setInterval() 时传递函数名而不是字符串 9.避免在对象中使用不需要的DOM引用 10.最清晰的目标速度,最小化作用域链 11.试着在脚本中少使用注释,避免使用长变量名 12.在当前作用域存储...
在之前的基础上,添加方向键左右支持。 在实际工作中,我们会碰到这样一个情况。在页面中显示着100个数据,同时用户还希望他可以更改其中的数据,普通的方式可能如下,这种方式会出现一个问题,就是页面显示的时候有点慢,同时如果有滚动条的话,会有些卡。下面给出我的一个解决方法,显示的时候全是td的,没有input标签,如下当你点击其中一个td时,就会出现下面这样当你点击td的时候,会在td动态加入一个input同时把td的值赋给in...
1、传统上,字符串连接一直是js中性能最低的操作之一。 var text="Hello"; text+=" World!"; 早期浏览器没有对这种运算进行优化。 由于字符串是不可变的,这意味着要创建中间字符串来存储连接的结果。频繁地在后台创建和销毁字符串导制性能异常低下。 2、发现这一点后,开发者们利用数组对象进行优化。 var buffer=[],i=0; buffer[i++]="Hello";//通过相应索引值添加元素比push方法快 buffer[i++]=" World!"; var text=buffer.join...
简言之,闭包是产生一个没有被释放资源的栈区。换言之,就是一个不可控的内存空间占用,如果与事件相关联,JS的垃圾回收机制也不会去触碰该区域。 例如:我们有个项目需要实现在一个div中有上百个热点区域(a标签),类似淘宝店铺广告位自定义,那么按照传统的做法,我们会如下做一个最典型的闭包使用的实例,目的是改变this的作用域,在其处理函数内部调用其他属于该作用域的方法或属性。 代码如下: var apply = function() { ...
从原理就可以知道,unshift的效率是较低的。原因是,它每添加一个元素,都要把现有元素往下移一个位置。但到底效率差异有多大呢?下面来测试一下。 测试环境的主要硬件:CPU T7100(1.8G);内存4G DDR2 667;硬盘5400转。主要软件:操作系统为Windows 7;浏览器为Firefox 3.6.9。测试代码: 代码如下: var arr = [ ], s = +new Date; // push性能测试 for (var i = 0; i < 50000; i++) { arr.push(i); } console.log(+new Da...
1 如何进行字符串连接? 首先让我们来回顾一下字符串连接的两种常用方法: 1.1 使用字符串连接运算符 常用的语言(如Java、C#、PHP等)都有字符串连接运算符,Javascript也不例外,代码示例: 代码如下: var str = ""; str = str + "a"; 1.2 使用数组 在常用的语言中,字符串连接运算的性能普遍不高,为此在C#中就专门提供了StringBuilder(Java中提供了StringBuffer)用于连接字符串。而在Javascript中就出现了通过Array模拟Str...