web开发前端性能优化 Web前端性能优化的实用技巧汇总相关内容,小编在这里做了整理,希望能对大家有所帮助,关于web开发前端性能优化 Web前端性能优化的实用技巧汇总信息,一起来了解一下吧!
Web前端性能优化的实用技巧汇总
今天小编要跟大家分享的文章是关于Web前端性能优化的实用技巧汇总。javascript在浏览器中运行的性能,可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂,事实上,多数浏览器使用单一进程来处理用户界面和js脚本执行,所以同一时刻只能做一件事。js执行过程耗时越久,浏览器等待响应的时间越长。
一.提高加载性能
1.IE8,FF,3.5,Safari4和Chrome都允许并行下载js文件,当script下载资源时不会阻塞其他script的下载。但是js下载仍然会阻塞其他资源的下载,如图片。尽管脚本下载不会互相影响,但页面仍然必须等待所有js代码下载并执行完才能继续。因此仍然存在脚本阻塞问题.推荐将所有js文件放在body标签底部以减少对整个页面的影响。
2.减少页面外链脚本文件的数量将会提高页面性能:
http请求会带来额外的开销,因此下载单个300k的文件将比下载10个30k的文件效率更高。
3.动态脚本加载技术:
无论何时启动下载,文件的下载和执行都不会阻塞页面其他进程。
functionlaodScript(url,callback){
varscript=document.createElement('script');_
_cript.type='text/javascript';
__f(script.readyState){//ie
____cript.onreadystatechange=function(){_____
if(script.readyState=='loaded'||script.readyState=='complete'){_______
_cript.onreadystatechange=null;_______
callback()_____
____
__
}else{//其他浏览器___
script.onload=function(){_____
_allback()
___}_
}_
script.src=url;_
document.getElementsByTagName('head')[0].appendChild(script);
}
//使用
loadScript('./a.js',function(){_
loadScript('./b.js',function(){___
loadScript('./c.js',function(){_____
console.log('加载完成')___
})_
})
})
4.无阻塞加载类库——LABjs,使用方法如下:
//链式调用时文件逐个下载,.wait()用来指定文件下载并执行完毕后所调用的函数
$LAB.script('./a.js')_
.script('./b.js')_
.wait(function(){__
_pp.init();
})
//为了保证执行顺序,可以这么做,此时a必定在b前执行
$LAB.script('./a.js').wait()_
.script('./b.js')_
.wait(function(){___
_pp.init();
})
二.数据存取与JS性能
1.在js中,数据存储的位置会对代码整体性能产生重大影响。数据存储共有4种方式:字面量,变量,数组项,对象成员。他们有着各自的性能特点。
2.访问字面量和局部变量的速度最快,相反,访问数组和对象相对较慢
3.由于局部变量存在于作用域链的起始位置,因此访问局部变量的比访问跨域作用变量更快
4.嵌套的对象成员会明显影响性能,应尽量避免
5.属性和方法在原型链位置越深,访问他的速度越慢
6.通常我们可以把需要多次使用的对象成员,数组元素,跨域变量保存在局部变量中来改善js性能
三.DOM编程
1.访问DOM会影响浏览器性能,修改DOM则更耗费性能,因为他会导致浏览器重新计算页面的几何变化。<通常的做法是减少访问DOM的次数,把运算尽量留在JS这一端。
注:如过在一个对性能要求比较高的操作中更新一段HTML,推荐使用innerHTML,因为它在绝大多数浏览器中运行的都很快。但对于大多数日常操作而言,并没有太大区别,所以你更应该根据可读性,稳定性,团队习惯,代码风格来综合决定使用innerHTML还是createElement()
2.HTML集合优化
HTML集合包含了DOM节点引用的类数组对象,一直与文档保持连接,每次你需要最新的信息时,都会重复执行查询操作,哪怕只是获取集合里元素的个数。
①_优化一——集合转数组collToArr
functioncollToArr(coll){_
for(vari=0,a=[],len=coll.length;i
a._ush(coll[i]);
__
returna
}
②缓存集合length
③访问集合元素时使用局部变量(即将重复的集合访问缓存到局部变量中,用局部变量来操作)
3.遍历DOM
①使用只返回元素节点的API遍历DOM,因为这些API的执行效率比自己实现的效率更高:
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
属性名
被替代属性
children
childNodes
childElementCount
childNodes.length
firstElementChild
firstChild
lastElementChild
lastChild
nextElementSibling
nextSibling
previousElementSibling
previousSibling
_谘≡衿_PI——querySelectorAll()
querySelectorAll()方法使用css选择器作为参数并返回一个NodeList——包含着匹配节点的类数组对象,该方法不会返回HTML集合,因此返回的节点不会对应实时文档结构,着也避免了HTML集合引起的性能问题。
let_rr=_ocument.querySelectorAll('div.warning,_iv.notice>_')
4.重绘和重排
浏览器在下载完页面的所有组件——html,js,css,图片等之后,会解析并生成两个内部数据结构——_OM树,渲染树.一旦DOM树和渲染树构建完成,浏览器就开始绘制页面元素(paint).
①重排发生的条件:
添加或删除可见的DOM元素位置变化元素尺寸改变内容改变页面渲染器初始化浏览器窗口尺寸变化出现滚动条时会触发整个页面的重排_嘏疟囟ㄖ鼗
5.渲染树变化的排列和刷新
大多数浏览器通过队列化修改并批量执行来优化重排过程,然而获取布局信息的操作会导致队列强制刷新。
offsetTop,offsetWidth...
scrollTop,scrollHeight...
clientTop,clientHeight...
getComputedStyle()
一些优化建议:将设置样式的操作和获取样式的操作分开:
//设置样式
body.style.color='red';
body.style.fontSize='24px'
//读取样式
letcolor=body.style.color
let_ontSize=_ody.style.fontSize
另外,获取计算属性的兼容写法:
functiongetComputedStyle(el){_
varcomputed=(document.body.currentStyle?el.currentStyle:document.defaultView.getComputedStyle(el,'');_
returncomputed
}
6.最小化重绘和重排
①.批量改变样式
/*使用cssText
*/el.style.cssText='border-left:1px;_order-right:2px;_adding:20px';
②.批量修改dom的优化方案——使元素脱离文档流-对其应用多重改变-把元素带回文档
functionappendDataToEl(option){
vartargetEl=option.target||document.body,___
createEl,___
data=option.data||[];_//让容器脱离文档流,减少重绘重排_
vartargetEl_display=targetEl.style.display;_
targetEl.style.display='none';
_
//*****创建文档片段来优化Dom操作****_
varfragment=document.createDocumentFragment();_//给元素填充数据_
for(vari=0,max=data.length;i
createEl=
document.createElement(option.createEl);___
for(varitemindata[i]){_____
if(item.toString()==='text'){_______
createEl.appendChild(document.createTextNode(data[i][item]));________ontinue;___________
_f(item.toString()==='html'){_______
createEl.innerHTML=item,data[i][item];_______
continue;_____
}_____
_reateEl.setAttribute(item,data[i][item]);_______
//****将填充好的node插入文档片段****___
fragment.appendChild(createEl);___
//****将文档片段统一插入目标容器****_
targetEl.appendChild(fragment);_
//显示容器,完成数据填充_
targetEl.style.display=
targetEl_display;
}
//使用
varwrap=document.querySelectorAll('.wrap')[0];
vardata=[_
_name:'xujaing',text:'选景',title:'xuanfij'},_
{name:'xujaing',text:'选景',title:'xuanfij'},_
{name:'xujaing',text:'选景',title:'xuanfij'}];
appendDataToEl({_
target:wrap,_
createEl:'div',
_ata:data
});
上面的优化方法使用了文档片段:_蔽颐前盐牡灯尾迦氲浇诘阒惺保导噬媳惶砑拥闹皇歉闷蔚淖咏诘悖皇瞧伪旧怼?梢允沟_om操作更有效率。
②.缓存布局信息
//缓存布局信息
letcurrent=el.offsetLeft;
current++;
el.style.left=current+'px';
if(current>300){_
stop();
}
④.慎用:hover
如果有大量元素使用:hover,那么会降低相应速度,CPU升高
⑤.使用事件委托(通过事件冒泡实现)来减少事件处理器的数量,减少内存和处理时间
functiondelegation(e,selector,callback){_
e=e||window.event;_
vartarget=e.target||e.srcElement;
_if(target.nodeName!==selector||
target.className!==selector||target.id!==selector){___
return;
_}_
if(typeofe.preventDefault==='function'){__
_.preventDefault();___
e.stopPropagation();
}else{___
e.returnValue=false;
e.cancelBubble=true;_
}
__allback()}
四.算法和流程控制
1.循环中减少属性查找并反转(可以提升50%-60%的性能)
//for循环
for(vari=item.length;i--){_
process(item[i]);
}
//while循环
varj=item.length;
while(j--){_
process(item[i]);
}
2.使用Duff装置来优化循环(该方法在后面的文章中会详细介绍)
3.基于函数的迭代(比基于循环的迭代慢)
items.forEach(function(value,index,array){__rocess(value);})
4.通常情况下switch总比if-else快,但是不是最佳方案
五.字符串和正则表达式
1.除了IE外,其他浏览器会尝试为表达式左侧的字符串分配更多的内存,然后简单的将第二个字符串拷贝到他的末尾,如果在一个循环中,基础字符串位于最左侧,就可以避免重复拷贝一个逐渐变大的基础字符串。2.使用[\s\S]来匹配任意字符串3.去除尾部空白的常用做法:
if(!String.prototype.trim){_
String.prototype.trim=function(){___
returnthis.replace(/^\s+/,'').replace(/\s\s*$/,'')_
}
}
六.快速响应的用户界面
1.浏览器的UI线程:用于执行javascript和更新用户界面的进程。
2.在windows系统中定时器分辨率为15毫秒,因此设置小于15毫秒将会使IE锁定,延时的最小值建议为25ms.
3.用延时数组分割耗时任务:
functionmultistep(steps,args,callback){_
vartasks=steps.concat();
__etTimeout(function(){___
vartask=tasks.shift();___
task.apply(null,args||[]);_//调用Apply参数必须是数组
___
if(tasks.length>0){_____
setTimeout(arguments.callee,25);
___else{_____
_allback();___
__
},25);
}
4.记录代码运行时间批处理任务:
functiontimeProcessArray(items,process,callback){_
vartodo=item.concat();
__etTimeout(function(){___
varstart=+newDate();
__o{_____
_rocess(todo.shift());___
}while(todo.length>0&&(+newDate()-start<50));
____f(todo.length>0){_____
_etTimeout(arguments.callee,25);
___else{____
_allback(items);_
}_
_,25)
}
5.使用WebWorker:它引入了一个接口,能使代码运行且不占用浏览器UI线程的时间。一个Worker由如下部分组成:
①一个navigator对象,包括app
网站WEB前端开发需要掌握什么技术_web前端需要哪些技术
前端的应用非常广泛,基本网站、APP、HTML5小程序等都需要前端开发,所以只要是互联网产品基本都需要前端。
前端程序猿切页面写页面,Web上、H5上的炫酷效果,是前端开发大展身手的地方。最常见的用于前端开发的技术组合是:
HTMLCSSJavaScript。
Web前端开发需要掌握的几个必备技术是:
HTML_CSS核心、JavaScript、VUE框架
web前端是在开发人员中最直接面向产品、面向用户的设计人员,一个开发团队的成果是要靠web前端去展现,因为用户不会去关心后台的处理有多么强大。
后端开发是写后台,各种业务逻辑、数据处理、模块接口、客户端接口等等。后端开发者通常精通于一种Web编程语言和一个数据库管理系统。电商平台点击筛选条件下面为你筛选出来的宝贝的功能以及付款人数数据的变化等都是由后台来实现提供的。
目前web产品交互越来越复杂,用户使用体验和网站前端性能优化这些都得靠web前端去做。
前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,最新的高级版本HTML5、CSS3,以及SVG等。
前端开发需要学习的技术
我爱编程网
1掌握基本web前端开发技术:HTML、CSS、JavaScript、DOM、BOM、AJAX等,而且要了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug
2必须掌握网站性能优化、SEO和服务器端开发技术的基础知识
3必须学会运用各种web前端开发与测试工具进行辅助开发
4除了掌握技术层面的知识,还要掌握理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等
5未来web前端开发工程师还要研究HTML5、web视觉设计、网站配色、网站交互设计模式等相关技术
web前端有广阔的发展空间,app、小程序、移动端、pc端等都网站是需要前端技术的开发支持才能够完成,技术门槛相对较低、需求量较大,薪资待遇良好。只要是互联网端的客户界面,就需要前端来制作完成,前端开发的编程量不大,但是需要部分编程,入门简单,但是要学的深入需要一个过程。
Web前端招聘岗位
?前端开发工程师、Web开发工程师、网页开发工程师、HTML开发工程师...
?H5开发工程师、移动应用开发工程师、App开发工程师、小程序开发工程师...
?JS开发工程师、Vue.js开发工程师、Node.js开发工程师、前端架构师...
?小游戏开发工程师、数据可视化开发工程师、WebGL开发工程师、WebVR开发工程师、Web安全工程师...
常见的前端性能优化手段都有哪些?都有多大收益?
我是一个初中都没有毕业的学渣,对于计算机非常喜欢,在2001年买了第一台电脑。我买电脑的第一天,就安装了VisualBasic的软件,版本还是6.0。我对于电脑方面非常感兴趣,并自学了编程。
VB作为微软的亲儿子,推广力度非常大的,最主要的是应用非常广。在2000年初IE还是全球的老大,占全球浏览器80%的份额。VBS不仅可以前端还可以后端开发,而且难度也非常低,学习上也很简单,就是VB让我进入了编程的世界,并开发了自己的网站。
我的文化水平很低,对于编程也只是爱好,帮助一些朋友也写过网站。对于你说前端的优化,一般最基本的就是静态化了,生成纯文本的HTML文件可以减少对数据库的读写,微软有专门的FSO控件,使用上也非常简单。
在2000年初的时候,真是做网站的最好的时候。当时学习不好的学生都会很早去当兵,回来安排工作。那时候,工作也很轻松整天没有什么事,就自己学习了编程。但我这人最大的缺点就是不能坚持吧,如果坚持下来现在早发了。
就说个简单的例子,那个时候好的域名超多的,如果多注册一些留到现在不就是发死。记得CN域名才出来的时候,1元一个,3字母的随便注册,哎自己眼光不行。还有,那时候网页随便写写百度都收录,哎错过了一个好的世代,我现在还是穷人一个,老老实实上班,贷款买房,碌碌无为。
以上就是web开发前端性能优化 Web前端性能优化的实用技巧汇总全部内容了,了解更多相关信息,关注我爱编程网。