web前端开发if语句 Web前端性能优化的实用技巧汇总

在平时的学习生活当中，对于前端开发一定都很关心，今天我爱编程网小编为大家整理了web前端开发if语句 Web前端性能优化的实用技巧汇总，希望能够帮助到大家。

web前端javascript能实现什么算法或者计算

在Web开发中，JavaScript很重要，算法也很重要。下面整理了一下一些常见的算法在JavaScript下的实现，包括二分法、求字符串长度、数组去重、插入排序、选择排序、希尔排序、快速排序、冒泡法等等。仅仅是为了练手，不保证高效与美观，或许还有Bug，有时间再完善吧。

1.二分法：

function binary(items,value){

var startIndex=0,

stopIndex=items.length-1,

midlleIndex=(startIndex+stopIndex)>>>1;

while(items[middleIndex]!=value && startIndex

if(items[middleIndex]>value){

stopIndex=middleIndex-1;

}else{

startIndex=middleIndex+1;

}

middleIndex=(startIndex+stopIndex)>>>1;

}

return items[middleIndex]!=value ? false:true;

}

2.十六进制颜色值的随机生成：

function randomColor(){

var arrHex=["0","2","3","4","5","6","7","8","9","a","b","c","d"],

strHex="#",

index;

for(var i=0;i < 6; i++){

index=Math.round(Math.random()*15);

strHex+=arrHex[index];

}

return strHex;

}

一个求字符串长度的方法：

function GetBytes(str){

var len=str.length,

bytes=len;

for(var i=0;i < len;i++){

if(str.CharCodeAt>255){

bytes++;

}

}

return bytes;

}

3.js实现数组去重：

Array.protype.delRepeat=function(){

var newArray=new Array();

var len=this.length;

for(var i=0;i < len;i++){

for(var j=i+1;j < len;j++)

{

if(this[i]==this[j])

{

++i;

}

}

newArray.push(this[i]);

}

return newArray;

}

4.插入排序。所谓的插入排序，就是将序列中的第一个元素看成一个有序的子序列，然后不段向后比较交换比较交换。

function insertSort(arr){

var key;

for(var j = 1; j < arr.length ; j++){

//排好序的

var i = j - 1;

key = arr[j];

while(i >= 0 && arr[i] > key){

arr[i + 1] = arr[i];

i --;

}

arr[i + 1] = key;

}

return arr;

}

5.选择排序。其实基本的思想就是从待排序的数组中选择最小或者最大的，放在起始位置，然后从剩下的数组中选择最小或者最大的排在这公司数的后面。

function selectionSort(data)

{

var i, j, min, temp , count=data.length;

for(i = 0; i < count - 1; i++) {

/* find the minimum */

min = i;

for (j = i+1; j < count; j++)

{

if (data[j] < data[min])

{ min = j;}

}

/* swap data[i] and data[min] */

temp = data[i];

data[i] = data[min];

data[min] = temp;

}

return data;

}

6.希尔排序，也称递减增量排序算法。其实说到底也是插入排序的变种。

function shellSort(array){

var stepArr = [1750, 701, 301, 132, 57, 23, 10, 4, 1]; //
reverse()在维基上看到这个最优的步长较小数组

var i = 0;

var stepArrLength = stepArr.length;

var len = array.length;

var len2 = parseInt(len/2);

for(;i < stepArrLength; i++){

if(stepArr[i] > len2){

continue;

}

stepSort(stepArr[i]);

}

// 排序一个步长

function stepSort(step){

//console.log(step) 使用的步长统计

var i = 0, j = 0, f, tem, key;

var stepLen = len%step > 0 ? parseInt(len/step) + 1 : len/step;

for(;i < step; i++){// 依次循环列

for(j=1;/*j < stepLen && */step * j + i < len;
j++){//依次循环每列的每行

tem = f = step * j + i;

key = array[f];

while((tem-=step) >= 0){// 依次向上查找

if(array[tem] > key){

array[tem+step] = array[tem];

}else{

break;

}

}

array[tem + step ] = key;

}

}

}

return array;

}

7.快速排序。其实说到底快速排序算法就系对冒泡排序的一种改进，采用的就是算法理论中的分治递归的思想，说得明白点，它的做法就是：通过一趟排序将待排序的纪录分割成两部分，其中一部分的纪录值比另外一部分的纪录值要小，就可以继续分别对这两部分纪录进行排序;不段的递归实施上面两个操作，从而实现纪录值的排序。

function quickSort(arr,l,r){

if(l < r){

var mid=arr[parseInt((l+r)/2)],i=l-1,j=r+1;

while(true){

while(arr[++i] < mid);

while(arr[--j]>mid);

if(i>=j)break;

var temp=arr[i];

arr[i]=arr[j];

arr[j]=temp;

}

quickSort(arr,l,i-1);

quickSort(arr,j+1,r);

}

return arr;

}

8.冒泡法：

function bullSort(array){

var temp;

for(var i=0;i < array.length;i++)

{

for(var j=array.length-1;j > i;j--){

if(array[j] < array[j-1])

{

temp = array[j];

array[j]=array[j-1];

array[j-1]=temp;

}

}

}

return array;

}

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

2020年Web前端面试题汇总(一)

今天小编要跟大家分享的文章是关于2020年Web前端面试题汇总。由于内容较多小编分开为大家介绍，今天首先来和小编一起看一看第一部分的内容，希望这些面试题能够对正准备找Web前端相关工作的小伙伴们有所帮助。





1.说几条写JavaScript的基本规范?


1)不要在同一行声明多个变量;


2)请使用===/!==来比较true/false或者数值;


3)使用对象字面量替代newObject这种形式;


4)减少使用全局函数,全局变量;


5)switch语句必须带有default分支;


6)if语句必须使用大括号;


7)for-in循环中的变量;


应该使用var关键字明确限定作用域;


从而避免作用域全局污染。


2.说说平衡二叉树?


平衡二叉搜索树(Self-balancingbinarysearchtree)


又被称为AVL树。


具有以下性质：


1)它是一棵空树或它的左右两个子树


的高度差的绝对值不超过1，


并且左右两个子树都是一棵平衡二叉树。


2)平衡二叉树必定是二叉搜索树，反之则不一定。


3)平衡二叉树的常用实现方法有红黑树、AVL、


替罪羊树、Treap、伸展树等。


最小二叉平衡树的节点的公式如下：


F(n)=F(n-1)+F(n-2)+1备注：1是根节点，


F(n-1)是左子树的节点数量，


F(n-2)是右子树的节点数量。


3.清除浮动和解决垂直外边距重叠的解决方案?


问题描述:


1)父元素没有设置宽高，尺寸由子元素撑起;


子元素一旦浮动，父元素高度会发生塌陷。


2)子元素设置margin-top会作用的父元素的margin-top;


此时会造成垂直外边距重叠。


.clearfix::after,.clearfix::before{


content:'';


display:table;


clear:both;


}


4.sessionStorage、localStorage和cookie?


相同点:


都用于浏览器端存储的缓存数据;


不同点:


1)存储内容是否发送到服务器端


当设置了Cookie后，数据会发送到服务器端，


造成一定的宽带浪费;xxxstorage则会将数据保存


到本地，不会造成宽带浪费;


2)数据存储大小不同


Cookie数据不能超过4K，适用于会话标识;


xxxstorage数据存储可以达到5M;


3)数据存储的有效期限不同


cookie只在设置了Cookid过期时间


之前一直有效，即使关闭窗口或者浏览器;


sessionStorage,仅在关闭浏览器之前有效;


localStorage,数据存储永久有效;


4)作用域不同


cookie和localStorage是在同源同窗口中


都是共享的;


sessionStorage不在不同的浏览器窗口


中共享，即使是同一个页面;


5.判断一个单词是否是回文?


回文是指把相同的词汇或句子，


在下文中调换位置或颠倒过来，


产生首尾回环的情景，


叫做回文，也叫回环。


比如cacac，redivider。


letcheckPalindrom=(str)=>{


returnstr===


str.split('').reverse().join('');


}


6.不借助临时变量，进行两个整数的交换?


输入a=3,b=1,


输出a=1,b=3


letswap=(a,b)=>{


b=b-a;


a=a+b;


b=a-b;


return[a,b];


}


7.请写出至少5个html5新增的标签，并说明其语义和应用场景?


section：定义文档中的一个章节;


nav：定义只包含导航链接的章节;


header：定义页面或章节的头部;


它经常包含logo、页面标题和导航性的目录。


footer：定义页面或章节的尾部;


它经常包含版权信息、法律信息链接和反馈建议用的地址。


aside：定义和页面内容关联度较低的内容，


如果被删除，剩下的内容仍然很合理。


8.get和post请求在缓存方面的区别?


get请求类似于查找的过程，用户获取数据，


可以不用每次都与数据库连接，所以可以使用缓存。


post不同，post做的一般是修改和删除的工作，


所以必须与数据库交互，所以不能使用缓存。


因此get请求适合于请求缓存。


9.如何解决异步回调地狱?


promise、generator、async/await


10.图片的懒加载和预加载?


预加载：提前加载图片，


当用户需要查看时可直接


从本地缓存中渲染。


懒加载：懒加载的主要目的


是作为服务器前端的优化，


减少请求数或延迟请求数。


两种技术的本质：


两者的行为是相反的，


一个是提前加载，


一个是迟缓甚至不加载。


懒加载对服务器前端有一定


的缓解压力作用，


预加载则会增加服务器前端压力。


11.bind，apply，call的区别?


通过apply和call改变函数的this指向，


这两个函数的第一个参数都是一样的，


表示要改变指向的那个对象，


第二个参数，apply是数组，


而call则是arg1,arg2...这种形式。


通过bind改变this作用域


会返回一个新的函数，


这个函数不会马上执行。


12.js怎么控制一次加载一张图片，加载完后再加载下一张?


方法一:





varobj=newImage();


obj.src="#/21.jpg";


obj.onload=function(){


document.getElementById("pic")


.innnerHTML=" ";


}


加载中 我爱编程网

以上就是关于web前端开发if语句 Web前端性能优化的实用技巧汇总的全部内容了，如果需要了解更多相关资讯敬请关注我爱编程网。