前端工程师必读网站前端性能优化最佳方案.docVIP

前端工程师必读:网站前端性能优化最佳方案 一个网站影响用户访问的最大部分是前端的页面。网 站可以划分为：前端和后台。后台可以理解成是用来实现 网站的功能的，而前端是属于功能的表现。然如除了后台 需要在性能上做优化外，其实前端的页面更需要在性能优 化上下功夫，只有这样才能给我们的用户带来更好的用户 体验。 如今浏览器能够实现的特性越来越多，并且网络逐渐 向移动设备转移，使我们的前端代码更加紧凑，如何优化, 就变得越来越重要了。开发人员普遍会将他们的代码习惯 优先于用户体验。但是很多很小的改变可以让用户体验有 个飞跃提升，所以任何一点儿小小的优化都会提升你网站 的性能。前端给力的地方是可以有许多种简单的策略和代 码习惯让我们可以保证最理想的前端性能。说了这么多， 那么我们应该如何对我们前端的页面进行性能优化呢？ 而前端开发工 可以控制的是什么呢？。前端的页 面主要包括xhtm 1, css, jso其实x 就是现实中所谈到 的内容，页面的内容：文字，图片，flash,视频等。 网站前端性能优化最佳方案1:使用documentf ragments或in ner 取代复杂的元素注入 dom操作在浏览器上是要付税的。尽管性能提升是在浏 览器，dom很慢，如果你没有注意到，你可能会察觉浏览器 运行非常的慢。这就是为什么减少创建集中的dom节点以 及快速注入是那么的重要了。 现在假设我们页面中有一个ltjulgt;元素，调用ajax 获取j son列表，然后使用j avascript更新元素内容。通 常，程序员会这么写： varl ist=documen t. querysele ctor uT ); ajaxresul t. items, for each (functi on(item) { //创建It; ligt;元素 varli=do cument. crea t eelement (li); li. i nner 二it em. text; //ltjligt;元素常规操作，例如添加cl ass,更改属 性att ribute,添加事件监听等 //迅速将1 t; ligt;元素注入父级It ;ulgt;中 list, appp endchild(li ); })； 上面的代码其实是一个错误的写法，将ltjulgt;元素 带着对每一个列表的d om操作一起移植是非常慢的。如果 你真的想要使用document, c reateelemen t,并且将对象当 做节点来处理，那么考虑到性能问题，你应该使用doc umentfragem ent。 docum entfragemen t是一组子节点的“虚拟存储，并 且它没有父标签。在我们的例子中，将documentfra gement 想象成看不见的lt;ulgt;元素，在dom夕卜，一直保管着你 的子节点，直到他们被注入dom中。那么，原来的代码就 可以用d ocumentfrag ment优化一下: varfrag=doc ument? creat edocumentfr agment (); ajaxresuIt. items? forea ch(function (item) { //创建It; ligt;元素 varli=docu ment? create element (Ti ); li. inn er =item . text; //It; ligt;元素常规操作 //例如添加cla ss,更改属性attr ibute,添加事件 监听，添加子节点等 //将It ;ligt;元素添加到碎片中 frag . appendchi 1 d(li); }); //最后将所有的列表对象通过document fragment集中 注入dom docum ent? queryse lector C uT)? appendchi Id(frag); 为documentfr agment追加子元素，然后再将这个 docu mentfragmen t加到父列表中，这一系列操作仅仅是一 个dom操作，因此它比起集中注入要快很多。 如果你不需要将列表对象当做节点来操作，更好的方 法是用字符串构建 内容： var st r=，; ajax resuIt. item s. foreach(f unction(ite m) { //构建包含 页面内容的字符串 str+=，It; ligt; +i tem. text+ 1 t;/ligt;; })； //通过inner 设定ul内容 document, q ueryselecto r (* uT). inn er = str; 这当中也只有一个dom操作，并且比起documentf ragment代码量更少。在任何情况下，这两种方法都比在每 一次