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

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

1、罪魁祸首是http请求

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

 

1. 捆绑文件

   如今有不少现成的库能够帮你将多个脚本文件捆绑成一个文件，将多个样式表文件捆绑成一个文件，以此来减小文件的下载次数。

    

2. CSS Sprites

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

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

    

3. Image Maps

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

    

4. Inline images

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

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

 

2、不能忽视的DOM元素

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

 

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

 

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

 

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

 

3、避免空的图片src属性

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

　　尤为是你的网站天天被不少人访问的时候，这种空请求形成的伤害不容忽略。

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

因此注意咱们的网页中是否存在这样的代码

 

straight HTML

<img src="">

 

JavaScript

var img = new Image();

img.src = "";

 

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

 

4、千万别使用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>

 

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

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

 

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

 

　　可是，并非全部状况都适合使用将代码抽取到外部文件去，使用外部Javascript和CSS文件的决定因素在于这些外部文件的重用率，若是用户在浏览咱们的页面时会访问屡次相同页面或者能够重用脚本的不一样页面，那么外部文件形式能够为你带来很大的好处。

 

　　但对于用户一般只会访问一次的页面，那内部的javascript和css相对来讲能够提供更高的效率。由于减小了http请求次数去加载资源，此时无疑是内部更合适。

 

6、为何必定要将css置顶？

　　不少新手都知道的一点：要将css置顶，这早已不是什么秘密。可是背后的缘由是什么咱们要知道，面试官最喜欢追问这些细节。

 

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

 

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

 

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

 

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

一、避免通配选择器

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

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

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

 

　　#header a {...}

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

 

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

 

　　.selected * {...}

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

 

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

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

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

 

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

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

 

四、移除无匹配的样式

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

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

 

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

缓存选择器查询结果

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

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

 

9、切记要避免重定向

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

 

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

 

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

 

 

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