web前端提高开发速度 web开发从前端能通过哪些方式提供网页的加载速度

我爱编程网小编给大家带来了web前端提高开发速度 web开发从前端能通过哪些方式提供网页的加载速度相关文章，一起来看一下吧。

web开发从前端能通过哪些方式提供网页的加载速度

一、使用良好的结构
可扩展 HTML (XHTML) 具有许多优势，但是其缺点也很明显。XHTML 可能使您的页面更加符合标准，但是它大量使用标记（强制性的 <start> 和 <end> 标记），这意味着浏览器要下载更多代码。所以，事情都有两面性，尝试在您的网页中使用较少的 XHTML 代码，以减小页面大小。如果您确实不得不使用 XHTML，试着尽可能对它进行优化。
二、不要使布局超载
坚持简约原则：少即是多。页面中充斥着各种类型的图像、视频、广告等，这大大违背实用性原则。
三、不要使用图像来表示文本
使用图像表示文本的最常见示例就是在导航栏中。美观的按钮更加具有吸引力，但是它们的加载速度很慢。此外，图像仍然不能由搜索引擎直接索引，因此，使用图像进行导航不利于搜索引擎优化（search engine optimization，SEO）。当无需图像就可以通过大量 CSS 技巧创建漂亮的按钮时，绝不使用图像来表示文本。
四、检查cookie使用情况
设置一个较早的 expire 日期或者根本不设置 expire 日期，会缩短响应时间。要在 PHP 语言中设置 cookie 的 expire 日期，使用以下代码：
<?php
$expire = 2592000 + time();
// Add 30 day’s to the current time
setcookie(userid, “123rrw3”, $expire);
?>
这段代码设置 cookie userid，并将 expire 日期设置为自当前日期之后 30 天。
五、不要包含不必要的 JavaScript 代码，尽可能将其外部化
应该明智地使用 JavaScript（仅在真正必要时才使用）并优化脚本的大小和速度。缩短 JavaScript 下载时间的另一种方式是使用外部文件，而不是包含脚本内联。这种方法也适用于 CSS，因为浏览器会缓存外部化的文本，而（在 HTML 页面自身中）以内联方式编码的 CSS 或 JavaScript 每次都会随 HTML 一起加载。
六、尽可能避免使用表格
表格被用作网页的主要构建块，但是作为页面布局元素，使用表格现在被认为是糟糕的做法。有时候，您必须使用表格（并且它们被认为是显示表格数据的出色实践）。如果是这样，明确地指定表格单元格、行和列的宽度和高度，否则，浏览器必须执行许多操作来计算如何显示它们，这会降低页面加载速度。
七、删除任何不必要的元素
可能这是所有技巧中最显而易见的一个，但是它也是最容易忘记的一个技巧。如果您真正需要在网页上放置许多内容，考虑将网页分为 2 个、3 个或更多的独立页面。
八、一些优化网页的技巧
可以使用许多方法来优化您的网页，包括压缩 JavaScript 文件，使用超文本传输协议（Hypertext Transfer Protocol，HTTP）压缩，以及设置图像大小。
九、压缩和缩小 JavaScript 文件
您可以使用 GNU zip (gzip) 来完成此任务，因为许多浏览器都支持这种压缩算法。另一种替代方法是缩小文件。这种方法删除代码中所有不必要的字符，比如制表符（tab）、新行和空格。它删除代码中的注释和空白，进一步缩小文件大小。外部和内部样式表都可以缩小。两种最流行的缩小工具是 JSMin 和 YUI Compressor。
十、使用 HTTP 压缩，并始终使用小写的 div 和类名
可以使用 HTTP 压缩来减少服务器与浏览器之间的通信量。可以在 Apache 中配置 HTTP 压缩（.htaccess 文件），或者可以将其包含到页面中（对于 PHP，可以使用一个 HTTP_ACCEPT_ENCODING 选项）。但是请注意：不是所有浏览器都支持压缩。即使是支持压缩的浏览器，压缩和解压缩都会加重处理器的负载。要在 Apache 中启用地毯式（blanket）压缩（即压缩所有文本和 HTML），使用以下命令：
AddOutputFilterByType DEFLATE text/html text/plain text/xml
另外，考虑一下您想要压缩的内容。图像、音乐和视频在创建时已经进行了压缩，因此您可以将压缩对象限制为 HTML、CSS 和 JavaScript 文件。另一种减少压缩工作的技巧是使用小写形式的 <div> 元素和类名。由于大小写敏感性，并且使用的是无损压缩，<header> 与 <Header> 不同，它们被压缩为两个不同的标记。
十一、设置图像大小
与表格单元格、行和列一样，当您未明确设置图像大小时，浏览器需要执行计算来显示图像，这会降低处理速度。
十二、将 CSS 图像映射用于装饰功能
使用图像映射代替多个图像，这是另一种缩短加载时间的方式，因为同时下载图像的各个独立部分能够加快整个页面的下载进度。或者，您可以使用某种名为 CSS sprites 的工具。CSS sprites 可帮助减少 HTTP 请求的数量。一个图像可以包含装饰或布置页面所需的所有图像元素。您使用 CSS 来选择（通过调用某些位置和维度）用于特定元素的映射。
十三、尽可能延迟脚本加载
一种提升页面下载速度的潜在方式是将脚本放在页面的底部，使页面加载更迅速。通常，浏览器只能（从同一个域）下载不超过两个并行对象，如果一个对象是一段 JavaScript 代码，那么在该脚本下载完之前，其他页面组件的下载将会暂停。如果将 JavaScript 代码放在页面底部，（在大多数情况下）它将在最后下载，这时所有其他组件都已下载完。
十四、按需加载 JavaScript 文件
要按需加载 JavaScript，使用 import() 函数。
import() 函数：
function $import(src){
var scriptElem = document.createElement('script');
scriptElem.setAttribute('src',src);
scriptElem.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(scriptElem);
}
// import with a random query parameter to avoid caching
function $importNoCache(src){
var ms = new Date().getTime().toString();
var seed = "?" + ms;
$import(src + seed);
}
十五、验证函数加载
也可以验证一个函数是否被加载，如果没有，加载 JavaScript 文件。
验证函数是否被加载：
if (myfunction){
// The function has been loaded
}
else{ // Function has not been loaded yet, so load the javascript.
$import(' ');
}
注意：可以使用 defer 属性，但不是所有浏览器（包括 Firefox）都支持它。

十六、优化 CSS 文件
如果经过适当优化和维护，CSS 文件不一定很大。例如，具有很多独立类的 CSS 文件会影响下载速度。与 JavaScript 文件一样，您需要优化 CSS 文件，使其包含所需的所有内容，同时保持合理的大小。另外，使用外部文件代替内联定义来适应浏览器的缓存机制。
十七、使用内容分布网络
内容分布网络（Content-distribution network，CDN）是另一种缩短下载时间的好方法。当您将静态图像放在 Internet 上的许多服务器上时，用户能够从离他们最近的服务器下载这些图像。此外，大多数 CDN 都在快速服务器上运行，因此无论服务器的加载速度如何，其响应速度都比小型的超载服务器快。
十八、对资产使用多个域来增加连接
CDN 的另一个优势是它们是独立的域。因为您的浏览器将并发连接的数量限制到一个单一的域，因此无论何时加载一个页面，都很容易占满所有线程。因此，到其他资产的连接被延迟了。然而，您的浏览器能够打开新线程或到其他域的连接，这样，从另一个域加载的任何资产都可以与其他所有资产同时加载。
十九、在合适的时候使用 Google Gears
使用 Google Gears（参见 参考资料）是避免用户反复下载同一内容的另一种好方法。Gears 允许用户离线访问 Web 应用程序，但是也允许将页面元素持久化到用户的计算机上。因此，频繁加载但未进行更新的内容可以存储在 Gears 数据库中，该数据库是一个 SQLite3 关系数据库管理系统。对同一内容的所有 next 请求都可以从数据库（而不是服务器）直接加载。
二十、使用 PNG 格式的图像
Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 图像格式都已过时了：Portable Network Graphic (PNG) 是未来流行的格式。当然，您可以说 GIF 和 JPEG 已经消亡，或者 PNG 没有任何缺陷，但是所有事物都有各自的优缺点，PNG 以最佳的文件大小提供了出色的质量。因此，如果进行选择的话，应该尽可能使用 PNG 图像。
二十一、保持 Ajax 调用简短、准确
当统称为 Asynchronous JavaScript + XML (Ajax) 的技术在两年前出现时，这些技术为处理页面请求和响应提供了一种革命性方法。然而，拨号用户可能从来没机会体验其真正的优势，因为在许多情形下，Ajax 需要在浏览器与服务器之间大量通信。因此，如果您能够保持 Ajax 调用简短和准确，可以避免用户花费无止尽的时间来等待元素刷新或响应。
二十二、进行一次较大的 Ajax 调用并在本地处理客户机数据
如果不能进行简短的 Ajax 调用，或者如果这些调用不能提供期望的结果，可以考虑一种替代方法：进行一次大的 Ajax 调用来获取所需的一切内容，然后让客户机在本地处理数据。通过这种方式，客户机只需等待一次（获取传入的数据），但是在此之后（当浏览器与服务器之间没有必要通信时），处理速度将更快。当然，还有大量 Ajax 优化技术，本教程无法一一列出。
二十三、在沙箱中测试代码
还有一个经常被遗忘的常用技巧。尽管清醒的 Web 开发人员通常会在启动应用程序之前对其进行测试，但是有时候测试会使他们不那么重视维护任务，或者新功能添加得太快，并且未经过充分考虑或测试。结果，余下的脚本减缓了应用程序的速度。如果您添加一项新功能，可以首先在沙箱里（完全脱离了应用程序的其余部分）进行测试，查看它作为单个函数的行为。通过这种方式，您可以反复检查，并分析性能和响应时间，无需考虑 Web 应用程序的其余部分。然后，当新功能的行为符合预期时，可以将其引入到应用程序的其余部分中，运行其他测试，保证功能本身的行为符合预期。
二十四、分析站点代码
在许多场景中，自我反省是一个不错的建议。幸运的是，在开发过程中，我们可以使用工具来帮助反省，并尽可能客观地进行实践。像 JSLint（参见 参考资源）这样的工具的价值是无法衡量的，尽管其站点宣称它 “可能令您备受挫折”，因为它向您提供了所有的潜在代码缺陷，这些缺陷不但使调试更加困难，而且可能导致更长的响应时间。
二十五、检查孤立的文件和丢失的图像
检查孤立的文件和丢失的图像是一种明智之举。大部分 Web 开发人员都会检查错误的文件引用，但是这里仍然需要说明一下。丢失的文件容易引起各种问题，因为它们会导致 “The image/page cannot be displayed” 之类的错误消息。但是在网页速度优化方面，它们具有更大的缺陷：当浏览器寻找丢失的或孤立的文件时，它会消耗资源，这不可避免地会导致页面处理速度变慢。因此，请检查孤立或丢失的文件，包括拼写错误的文件名。

我爱编程网

Web前端新手要掌握的性能优化

今天小编要跟大家分享的文章是关于Web前端新手要掌握的性能优化知识。本文将分享一些前端性能优化的常用手段，包括减少请求次数、减小资源大小、各种缓存、预处理和长连接机制，以及代码方面的性能优化等方面。下面来和小编一起看一看吧！





base64：尤其是在移动端，小图标可以base64(webpack)，大图片慎用(如果加载速度过于慢的，而且很重要的图片，可以用base64)


1、减少HTTP的请求次数和传输报文的大小


「CSSSprite(雪碧图、图片精灵)技术」


使用字体图标(IconFont)或者SVG等矢量图


+减少HTTP请求次数或者减少请求内容的大小


+渲染更快：因为它们是基于代码渲染的，而对于位图(png/jpg/gif)是需要先把图片编码在渲染


+不容易是帧变形


+也可以使用webp格式图片，这种格式要小一些(但是需要服务器端支持这种格式的请求处理)


「图片懒加载(延迟加载)技术」


+第一次加载页面的时候不去请求真实的图片，提高第一次渲染页面的速度，请求图片的额外消耗尽可能不要处理


+当页面加载完，把出现在用户视野区域中的图片做真实加载，没有出现的先不加载(节约流浪，也能减少对服务器的请求压力)


o对于数据我们也尽可能分批加载(不要一次请求过多的数据，例如分页技术)


音视频文件取消预加载(preload='none')，这样可以增加第一次渲染页面的速度，当需要播放的时候在加载


客户端和服务器端的数据传输尽可能基于JSON格式完成，XML格式比JSON格式要大一些(还可以基于二进制编码或者文件流格式，这种格式比文件传输好很多)


「把页面的css/js等文件进行合并压缩」


合并：争取css和js都只导入一个(webpack可以实现并合并压缩哦)


压缩：基于webpack可以压缩，对于图片自己找工具先压缩，可以使用服务器的GZIP压缩


图片BASE64(用BASE64码代表图片，减少HTTP，增加浏览器渲染速度，所以真是项目中，尤其是移动端，如果图片加载缓慢，BASE64一下就好了，;但是base64会导致文件中心的代码超级恶心，不利于维护和开发，所以减少使用);webpack中科院配置图片


2、设置各种缓存、预处理和长连接机制


不经常更改的静态资源做缓存处理(一般做的是304或者ETAG等协商缓存)


「建立Cache-Control和ExpiresHTTP的强缓存」


DNS缓存或者预处理(DNSPrefetch)，减少DNS的查找


设置本地的离线存储(manifest)或者把一些不经常更改的数据做本地临时存储(webstorage，indexdb)等


有钱就做CDN(地域分布式服务器)，或者加服务器


「建立Connection：keep-aliveTcp长连接」


使用HTTP2版本协议(现在用的一般都是http1.1)，可以多条tcp通道共存=>管道化链接


一个项目分为不同的域(不同的服务器)，例如：资源web服务器、数据服务器，图片服务器，视频服务器等，合理利用服务器资源，但是导致过多的DNS解析


Cache-Control的优先级高于Expires


基于本地存储，做数据的存储


3、代码方面的性能优化


减少对闭包的使用(因为过多使用闭包会产生很多不销毁的内存，处理不好的话，会导致内存溢出“栈溢出”)，减少闭包的嵌套(减少作用域链的查找层级)


对于动画来说：能用css解决的不用js(能够用transform处理的，不用传统的css样式，因为transform开启硬件加速，不会引发回流，或者使用定位的元素也会好很多，因为定位的元素脱离文档流，不会对其他元素的位置造成影响)，能用
requestAnimationFrame解决的不用定时器


+用requestAnimationFrame还有一个好处，当页面处于休眠无访问状态，动画会自己暂停，知道回复访问才开始，而定时器是不论什么状态，只要页面不管，就一直处理


避免使用iframe(因为iframe会嵌入其他页面，这样父页面渲染的时候，还要同时把子页面也渲染了，渲染进度会变慢)


减少直接对DOM的操作(原因是减少DOM的回流和重绘...)，当代项目基本基于mvvm，mvc数据驱动视图渲染的，对DOM的操作框架本身完成，性能要好很多


低耦合高内聚(基于封装的方式：方法封装，插件，组件，框架，类库等封装，减少页面中的冗余代码，提高代码使用率)


尽可能使用事件委托


避免出现死循环或者嵌套循环(嵌套循环会成倍增加循环的次数)


项目中尽可能使用异步编程来模拟出多线程的效果，避免主线程阻塞(异步操作基于Promise设计模式来管理)


JS中不要使用with


避免使用css表达式


函数的防抖和节流


减少使用eval(主要原因是防止压缩代码的时候，由于符号书写不合规，导致代码混乱)


图片地图：对于多次调取使用的图片(尤其是背景图)，尽可能把它提取成为公共的样式，而不是每一次重新设置background


减少filter滤镜的使用


尽可能减少选择器的层级


尽可能减少table布局


手动回收堆栈内存(赋值为null)


「栈溢出：死递」


functionfunc(){


func();


}func();


解决方案：


functionfunc(){


setTimeout(func,0);


}func();


相互引用：引用类型之间的相互调用，形成嵌套式内存


letobj1={


name:'obj1',};


letobj2={


name:'obj2',


x:obj1}


obj1.x=obj2;


以上就是小编今天为大家分享的关于Web前端新手要掌握的性能优化知识的文章，希望本篇文章能够对正在从事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开发从前端能通过哪些方式提供网页的加载速度，希望能对大家有所帮助。