web前端9大性能优化方案汇总

　　网页的性能问题是产品开发过程中的一个重要的环节，在产品成功地把功能实现后，性能能好与坏就直接影响了用户体验，以至于影响了产品的成败！作为web前端开发者，对前端部分进行性能上的优化，是责无旁贷，刻不容缓的工作。下面简介一下9种性能优化方案。

一、罪魁祸首是http请求

　　一般网页，80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash等)。减少请求次数是缩短响应时间的关键！可以通过简化页面设计来减少请求次数，但页面内容较多可以采用以下技巧。

捆绑文件

现在有很多现成的库可以帮你将多个脚本文件捆绑成一个文件，将多个样式表文件捆绑成一个文件，以此来减少文件的下载次数。
CSS Sprites

就是把多个图片拼成一副图片，然后通过CSS来控制在什么地方具体显示这整张图片的什么位置。主要涉及到的css知识是background-position。

例如：把多个小图标合并成一张图片，减少网络请求。
Image Maps

也是将多幅图拼在一起，然后通过坐标来控制显示导航。主要使用到map标签，具体教程，网上一搜就有。
Inline images

通过编码的字符串将图片内嵌到网页文本中。

多一份资源就多一个http请求，以上的方法对于资源多的网站来说事十分有用的，这技能一定要get到！

二、不能忽视的DOM元素

　　网页中元素过多对网页的加载和脚本的执行都是沉重的负担，500个元素和5000个元素在加载速度上会有很大差别。

　　想知道你的网页中有多少元素，通过在浏览器中的一条简单命令就可以算出，document.getElementsByTagName('*').length

　　多少算是多了呢？雅虎（https://www.yahoo.com/）在写这篇文章的时候号称主页只有700多元素，但现在接近多了一倍。我们的网页至少别比雅虎还多吧...

　　所以html结构尽可能的简洁，符合w3c的规范，一来可以优化加载性能，二来更符合seo的优化。这个需要经验的积累，需要新手们大量的去练习实践。

三、避免空的图片src属性

　　空的图片src仍然会使浏览器发送请求到服务器，这样完全是浪费时间，而且浪费服务器的资源。

　　尤其是你的网站每天被很多人访问的时候，这种空请求造成的伤害不容忽略。

　　浏览器如此实现也是根据RFC 3986 - Uniform Resource Identifiers标准，空的src被定义为当前页面。

所以注意我们的网页中是否存在这样的代码

straight HTML

JavaScript

var img = new Image();

img.src = "";

这是很简单缺很实用的技能，很多新手会忽略。大家要谨记，养成良好的编程习惯。

四、千万别使用CSS表达式

　　CSS表达式可以动态的设置CSS属性，在IE5-IE8中支持，其他浏览器中表达式会被忽略。例如下面表达式在不同时间设置不同的背景颜色。

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00");

　　CSS表达式的问题在于它被重新计算的次数远比我们想象的要多，不仅在网页绘制或大小改变时计算，即使我们滚动屏幕或者移动鼠标的时候也在计算，因此我们还是尽量避免使用它来防止使用不当而造成的性能损耗。

　　如果想达到类似的效果我们可以通过简单的JavaScript做到。

<script type="text/javascript">
        var currentTime = new Date().getHours();
        if(currentTime%2){
          if(document.body){
            document.body.style.background = "#B8D4FF";
          }
        }else{
          if(document.body){
        document.body.style.background = "#F08A00";
      }
        }
    </script>

五、css内部or外部，该如何选择？

注明一下：内部样式包括了：嵌入式样式和内联式样式。在此不展开解释，统称内部样式。

　　使用外部Javascript和CSS文件可以使这些文件被浏览器缓存，从而在不同的请求内容之间重用。同时将Javascript和CSS从内部变为外部文件也减小了网页内容的大小。

　　但是，并不是所有情况都适合使用将代码抽取到外部文件去，使用外部Javascript和CSS文件的决定因素在于这些外部文件的重用率，如果用户在浏览我们的页面时会访问多次相同页面或者可以重用脚本的不同页面，那么外部文件形式可以为你带来很大的好处。

　　但对于用户通常只会访问一次的页面，那内部的javascript和css相对来说可以提供更高的效率。因为减少了http请求次数去加载资源，此时无疑是内部更合适。

六、为什么一定要将css置顶？

　　很多新手都知道的一点：要将css置顶，这早已不是什么秘密。但是背后的原因是什么我们要知道，面试官最喜欢追问这些细节。

　　样式表(css)放在网页的head中会让网页显得加载速度更快。因为这样做可以使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤其重要。用户不用一直等待在一个白屏上。而是可以先看已经下载的内容。

　　如果将样式表放在底部，浏览器会拒绝渲染已经下载的网页。因为大多数浏览器在实现时都努力避免重绘。样式表中的内容是绘制网页的关键信息。没有下载下来之前只好对不起观众了。

　　知道了吗？是因为浏览器机制，没有下载到css之前，即使下载了网页结构，没有了关键绘制信息—css，浏览器也不会绘制的，用户只有等...等...等...

七、教你如何正确的使用css选择器

1、避免通配选择器

　　优化选择器的原则是减少匹配时间。CSS选择器的匹配机制是：从右向左进行规制匹配的！

　　#header > a { font-weight:blod; }

　　上面这条规制实际是浏览器遍历页面所有a元素，并确定其父元素的id是否为header。

　　#header a {...}

　　后代选择器开销更大，在遍历页面的所有a元素后，会需向上遍历直到根节点。

　　由此可知，选择器最右边的规制往往决定了向左移匹配的工作量。故最右边的选择规则称之为关键选择器。

　　.selected * {...}

　　在匹配所有元素后，再分别向上匹配直至根节点。通常比开销最小的ID选择器高出3个数量级。

2、避免单规则的属性选择器

　　.selected [href='#index'] {...}

　　浏览器先匹配所有的元素，检查其是否有href属性并且值为“#index”，再分别向上匹配class为selected的元素。故应该避免使用关键选择器是单规则属性选择器的规则。

3、避免正则的属性选择器

　　CSS3添加了复杂的属性选择器，通过类正则表达式进行匹配。但这些类型的选择器会比基于类别的匹配慢很多。

4、移除无匹配的样式

　　1.删除无用的样式，可缩减样式文件大小，加快加载速度。

　　2.对于浏览器，所有样式规则都会被解析后索引起来，即使是当前页面无匹配的规则！故移除无匹配的规则，减少索引项，加快浏览器查找速度。

八、记得使用JavaScript缓存查询结果

缓存选择器查询结果

　　减少选择器查询的次数，并尽可能缓存选中的结果，便于以后的重用。特别是的对于查询次数较多的网页，或者再for循环里面做查询的程序，使用缓存查询，对于性能的提升是十分有效的。

//不使用缓存
        $('#box').find('.classA');
    $('#box').find('.classB');
    //使用下面的方法 减少开销
    var cached = $('#box');
    cached.find('.calssA');
    cached.find('.calssB');

九、切记要避免重定向

　　重定向的英文是Redirect，用于将用户从一个URL重新跳转到另一个URL。

　　最常见的Redirect就是301和302两种。

　　在我们实际开发中避免重定向最简单也最容易被忽视的一个问题就是，设置URL的时候，最后的“/”，有些人有时候会忽略，其实你少了“/”，这时候的URL就被重定向了，所以在给页面链接加URL的时候切记最后的“/”不可丢。

《-----------End----------》

posted @ 2016-06-13 14:37 枫林function 阅读(615) 评论(0) 编辑收藏举报

刷新页面返回顶部

枫林function