前端性能优化
xuexiaodong2009
主要从事C#编程,精通SQL,JS,jquery等技术,目前主要从事内部办公,微信企业号方面的应用
展开
-
前端性能优化:循环优化二,循环展开
这种方式就是把循环展开,据说可以提高性能,但测试效果不明显,在谷歌50中展开反倒变慢了,IE10这种变快了。看来实际使用中中还是需要测试测试代码: function doProcess(value1, value2) { return value1 + value2; } function createArr() { var t = [];原创 2016-07-01 17:19:58 · 3086 阅读 · 0 评论 -
前端性能优化:哪些DOM操作查询会引起刷新渲染树改变?
因为计算量与每次重排版有关,大多数浏览器通过队列化修改和批量显示优化重排版过程。然而,你可能(经常不由自主地)强迫队列刷新并要求所有计划改变的部分立刻应用。获取布局信息的操作将导致刷新队列动作,这意味着使用了下面这些方法: • offsetTop, offsetLeft, offsetWidth, offsetHeight • scrollTop, scrollLeft, scrollWidth原创 2016-08-03 09:44:46 · 3179 阅读 · 0 评论 -
前端性能优化:CSS 选择器性能
CSS选择器效率:CSS选择器具有高效的继承性,引用Steve Souders的话, CSS选择器效率从高到低的排序如下:ID选择器 比如#header类选择器 比如.promo元素选择器 比如 div兄弟选择器 比如 h2 + p子选择器 比如 li > ul后代选择器 比如 ul a 7. 通用选择器 比如 *属性选择器 比如 type = “text”伪类/伪元素选择器 比如 a:hover转载 2016-08-03 09:43:51 · 3483 阅读 · 0 评论 -
前端性能优化:重写自己,减少判断
重写自己如何减少判断?其实我也是学习别人的代码,才明白的。具体代码: //兼容的绑定事件方法 function addHandler(target, eventType, handler) { //重写自己 if (target.addEventListener) { //DOM2 Events ad原创 2016-08-01 09:27:33 · 1970 阅读 · 1 评论 -
前端性能优化:DOM操作标签对性能的影响
给DOM添加相同的数量的字符串,到底什么会相应性能呢?测试代码: var length = 300000; function Test1() { var t = [length]; for (var i = 0; i < length; i++) { t.push("" + i.toString()); }原创 2016-08-01 09:26:31 · 2688 阅读 · 0 评论 -
前端性能优化:DOM操作性能优化建议
其实在web开发中,单纯因为js导致性能问题的很少,主要都是因为DOM操作引起的。1查找元素的优化2改变DOM,包括添加,修改,删除DOM3改变DOM的样式类等1查找元素的优化 因为ID是唯一的,也有原始的方法,因此使用ID查找元素是最快的,其次的是根据类和类型查找元素,通过属性查找元素是最慢的,因此应该尽可能的通过ID或者类来查找元素,避免通过类来查找元素。2改变DOM,包括添加,修改,删除D原创 2016-07-07 11:45:56 · 7019 阅读 · 0 评论 -
前端性能优化:循环优化
近段时间在处理前端性能的优化,而优化的重点自然是循环的处理,循环能优化吗?可以肯定的是可以优化。核心是数组长度外提,去掉必要的判断。另外避免使用for in的循环,更不要使用封装过的循环。使用基本的for循环性能是for in的的好多倍,谷歌里边相差10几倍,IE10里边相差三倍,对于复杂的数据类型的就偏差更大了注意把数组的长度定位的循环外边,避免反复读取测试代码: var length = 30原创 2016-07-01 16:02:33 · 4504 阅读 · 0 评论 -
前端性能优化:jquery的each为什么比原生的for循环慢很多?
其实查看jQuery的源代码,发现each的代码很简单,但为什么性能和原生的for循环相差几十倍呢?jQuery的each的核心代码 for (; i < length; i++) { value = callback.call(obj[i], i, obj[i]); if (value === false) {原创 2016-07-05 14:15:51 · 7631 阅读 · 0 评论 -
前端性能优化:jquery性能优化
1不使用each,2尽量使用ID,类,类型选择器,避免使用属性选择器3选择器添加第二个参数4翻译 2016-07-05 14:14:21 · 3622 阅读 · 0 评论 -
前端性能优化:JSON数据的优化
JSON数据的可以优化吗?肯定可以,之前都是使用XML,但之后用XML越来越少了,就是因为XML包含的冗余信息太多了。那么JSON数据有没有冗余呢?肯定有,名称就是重复的!!例如如下的JSON数据:{"total":28,"rows":[ {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","list原创 2016-07-05 14:00:23 · 4491 阅读 · 0 评论 -
前端性能优化:数组操作的优化二
数据通过中括号的方式定义,定义时加不加长度,这两种方式性能有区别吗?填充元素使用下标的方式和push有性能差别吗?测试代码: var length = 30000; function Test1() { var date1 = new Date().getTime(); var t = [length]; for (var i = 0; i原创 2016-07-05 13:59:34 · 1832 阅读 · 0 评论 -
前端性能优化:数组操作的优化
数组的定义有好几种方式,据说使用new方式是最慢的,但是不是呢?测试代码: var length = 300000; function Test1() { var date1 = new Date().getTime(); for (var i = 0; i < length; i++) { var t = [];原创 2016-07-05 13:59:03 · 1926 阅读 · 0 评论 -
前端性能优化:字符串的连接操作改进
在web开发中,避免不了字符串连接的操作,但字符串的连接操作性能高吗?之前有不少文章说使用加号性能地下,建议使用数组的join操作。测试代码:var length = 300000; /*数组的 join*/ function Test1() { var date1 = new Date().getTime(); var t = [];原创 2016-07-05 13:56:41 · 2874 阅读 · 0 评论 -
前端性能优化:创建对象二
既然使用var obj = { name1: name1, name2: name2, name3: name3 ,name4:name1+name2}; 方式是最快的,那么使用原型的方式会变快吗?测试代码:var length=30000;/*构造函数创建对象*/function mYObj(name1,name2,name3){ this.name1=name1; this.nam原创 2016-07-05 13:53:49 · 1277 阅读 · 0 评论 -
前端性能优化:创建对象
有的资料上说不同的创建对象的方式会有一定的性能差别,var obj =new Object();这种方式最慢,var obj = { name1: name1, name2: name2, name3: name3 ,name4:name1+name2}; 这种方式最快。但发展了这么多年,有变化吗?测试代码如下:var length=30000;/*new 的方式创建*/function Cr原创 2016-07-05 13:52:28 · 1192 阅读 · 0 评论 -
前端性能优化:循环内部优化
代码优化,首先应该优化循环,但循环处理展开,判断条件的优化,还有其他方式吗?其实在操作系统中介绍了系统会优化的一个方法,就是循环不变量外提。其实在for循环中把长度定义在循环外就是循环不变量外提。1循环不变量外提 var lengtharr = t.length; for (var i = 0; i < lengtharr; i++) { total +原创 2016-07-03 10:21:47 · 3540 阅读 · 0 评论 -
前端性能优化:条件判断优化
条件比较少时使用if,比较多是使用switch,超过十个时使用数组判断。例如如下的if判断: if (value==0) { do0(); } else if (value == 1) { do1(); } else if (value == 2) {原创 2016-07-03 10:16:33 · 3892 阅读 · 0 评论 -
前端性能优化:for in循环的优化
for in循环非常慢,但有时候却不能不使用,那有没有方法改进呢?for in循环之所以慢,就是因为需要不停的遍历原型链,如果知道能够减少原型链的遍历就可以改进。改进方法,就是需要遍历的属性明确列出来:代码: function createArr() { var t = []; for (var i = 0; i < 1000; i++) {原创 2016-07-03 10:15:45 · 4380 阅读 · 0 评论 -
前端性能优化:那些操作会引起DOM操作重排版?
添加或删除可见的 DOM 元素 元素位置改变 元素尺寸改变(因为边距,填充,边框宽度,宽度,高度等属性改变) 内容改变,例如,文本改变或图片被另一个不同尺寸的所替代 浏览器窗口改变尺寸 根据改变的性质,渲染树上或大或小的一部分需要重新计算。某些改变可导致重排版整个页面:例如,当一个滚动条出现时。原创 2016-08-03 09:45:12 · 2225 阅读 · 0 评论