前端性能优化

在以往做项目过程中，发现网站和移动端的性能优化还是比较重要的，借此总结一下我个人的经验：

      1、减少http请求

            这个方法大家都知道，也是最重要最有效的。一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。但是请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象，即使可能用户能看到的第一屏的资源都已经请求完了，但是浏览器的进度条会一直存在。

          减少 HTTP请求数的主要途径包括：
　　        (1). 从设计实现层面简化页面

                      保持页面简洁、减少资源的使用是最直接的。
               (2).合理设置HTTP缓存

                      缓存的力量是强大的，恰当的缓存设置可以大大的减少 HTTP请求。怎样才算合理设置 ?原则很简单，能缓存越多越好，能缓存越久越好。例如，很少变化的图片资源可以直接通过HTTP Header中的Expires设置一个很长的过期头;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。

               (3).文件瘦身

                如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。另外， CSS、 Javascript、Image都可以用相应的工具进行压缩，压缩后往往能省下不少空间。移动端的小按钮，可以采用css3的content:before  去加载小图片。

              (4).CSS Sprites
                网站内的小icon或者小图片尽量去做图片精灵，通过background-position来获取需要的图片。

       2、引入外部js、css

             因为每次页面渲染，html会被重新加载，但js、css会被浏览器缓存，所以在html页面中尽量不要写js、css了。将脚本内容在页面信息内容加载后再加载，尽可能的往后挪。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。

       3、减少不必要的 HTTP跳转

             对于以目录形式访问的 HTTP链接，很多人都会忽略链接最后是否带 ’/'，假如你的服务器对此是区别对待的话，那么你也需要注意，这其中很可能隐藏了 301跳转，增加了多余请求。

       4、避免重复的资源请求

             这种情况主要是由于疏忽或页面由多个模块拼接而成，然后每个模块中请求了同样的资源时，会导致资源的重复请求。

       5、减少DNS查询次数

           网站文件（js、css、images等）放到很多域名下， DNS  查询就会多，所以文件存放的域名尽量少。

       6、缓存ajax数据

           如果是请求过的ajax，我们把返回的数据存放到本地，用的时候就不发ajax了，直接拿数据来用；如果是不同的接口，更应该避免缓存，给ajax加个随机数。

       7、减少使用iframe、table等这些不利于搜索引擎抓取，页面渲染也受影响，还有减少DOM元素数量。

       8、避免404

           如果你的网站404了以后是个空白页，用户会觉得不专业，搜索引擎抓网站也受影响，所以做一个自己网站的404指向页面吧。