前端基础：优化前端网页性能

1.减少http请求

网页响应时间大多数花在下载网页内容（images，stylesheets，javascript，scripts等），减少https请求来缩短响应时间，我们可以优化页面设计来提高性能

• CSS Sprite （雪碧图）也成css精灵，是一种css图像合并技术，把页面多个icon和背景图合并到一张图上，页面使用的时候用css中 background-images和background-position 定位出雪碧图中的区域 达到一次http请求就可以获得全部图片，从而来提高网页性能。
• 多个 js/css 文件合并成一个 js/css 文件，减少下载次数来缩短网站响应时间

2.减少DNS查询次数

页面尽量避免引用外部文件，dns查询结果会在本地系统和浏览器中缓存一段时间，但是页面首次加载会增加响应时间

3.避免非200返回值

每一个http请求都有一个相对于的返回状态标志当次请求是否如期完成，如：
（1）xx：请求收到，这些状态代码表示临时的响应。
（2）xx：操作成功，这类状态代码表明服务器成功地接受了客户端请求。
（3）xx：重定向，客户端浏览器必须采取更多操作来实现请求。
（4）xx：客户端错误，发生错误，客户端似乎有问题。
（5）xx：服务器错误，服务器由于遇到错误而不能完成该请求。
所以，如果有http请求返回为非200的状态码，我们认为这一次请求时无意义的，占用了稀缺的网络资源，所应该避免非200的返回状态码。

4.css和js的引用位置

• css 在浏览器渲染过程中谈到，dom树构建完成后。CSS要放到html代码的开头的head标签结束前。如果网页是动态生成的，那么在head代码完成后可以页面输出，这样浏览器就会更快地解析出来head中的内容，开始下载CSS文件资源。而CSS放在底部则会引起重新绘制，用户侧感受到“闪屏”的不好体验。
• js JS在下载的时候会引起两个问题：阻止网页内容的展示并阻止其他资源下载。在“减少http数量”部分中，我们谈到各种资源的下载是并行的，根据不同域名不同浏览器内核并行数量有所不同，所以下载js时候，并行下载机制失效。并且在js中可能包括document.write等改变页面布局的操作，所以渲染引擎会等待js下载完成再开始渲染。所以用户侧页面加载时间会因为等待而变得更长。

5.css和js代码压缩

压缩css/js代码，缩小http传输过程数据。

6.图片懒加载

先加载loading图片，可以减少首次打开网页的响应时间