页面中每发送一次HTTP请求，都需要完成请求+响应这个完整的HTTP事务，会消耗一些时间，也可能会导致HTTP链接通道的堵塞，为了提高页面加载速度和运行的性能，我们应该减少HTTP的请求次数和减少请求内容的大小（请求的内容越大，消耗的时间越长）

1、采用CSS雪碧图（CSS Sprit / CSS 图片精灵）技术，把一些小图合并在一张大图上，使用的时候通过背景图片定位，定位到具体的某一张小图上

.pubBg{
    background:url('../img/sprit.png') no-repeat;
    background-size:x y; /*和原图的大小保持一致*/
}
.box{
    background-position:x y; /*通过背景定位，定位到具体的位置，展示不同的图片即可*/
}
...

<div class='pubBg box'></div>

2、真实项目中，我们最好把CSS或者JS文件进行合并压缩；尤其是在移动端开发的时候，如果CSS或者JS内容不是很多，我们可以采取内嵌式，以此减少HTTP请求的次数，加快页面加载速度；

1）CSS合并成一个，JS也最好合并成一个 
2）首先同过一些工具（例如：webpack）把合并后的CSS或者JS压缩成 xxx.min.js，减少文件大小 
3）服务器端开启资源文件的GZIP压缩 
… 
通过一些自动化工具完成CSS以及JS的合并压缩，或者再完成LESS转CSS，ES6转ES5等操作，我们把这种自动化构建模式，
称之为前端“工程化”开发

3、采用图片懒加载技术，在页面开始加载的时候，不请求真实的图片地址，而是用默认图占位，当页面加载完成后，在根据相关的条件依次加载真实图片（减少页面首次加载HTTP请求的次数）

真实项目中，我们开始图片都不加载，页面首次加载完成，先把第一屏幕中可以看见的图片进行加载，随着页面滚动，
在把下面区域中能够呈现出来的图片进行加载

根据图片懒加载技术，我们还可以扩充出，数据的懒加载 
1）开始加载页面的时候，我们只把首屏或者前两屏的数据从服务器端进行请求（有些网站首屏数据是后台渲染好，整体返回给客户端呈现的） 
2）当页面下拉，滚动到哪个区域，在把这个区域需要的数据进行请求（请求回来做数据绑定以及图片延迟加载等） 
3）分页展示技术采用的也是数据的懒加载思想实现的：如果我们请求获取的数据是很多的数据，我们最好分批请求，
开始只请求第一页的数据，当用户点击第二页（微博是下拉到一定距离后，再请求第二页数据…）的时候在请求第二页数据…

4、对于不经常更新的数据，最好采用浏览器的304缓存做处理（主要由服务器端处理）

例如： 
第一次请求CSS和JS下来，浏览器会把请求的内容缓存起来，如果做了304处理，用户再次请求CSS和JS，直接从缓存中读取，
不需要再去服务器获取了（减少了HTTP请求次数）

当用户强制刷新页面（CTRL+F5）或者当前缓存的CSS或者JS发生了变动，都会从新从服务器端拉取
…
对于客户端来讲，我们还可以基于localStorage来做一些本地存储，例如：第一次请求的数据或者不经常更新的CSS和JS，
我们都可以把内容存储在本地，下一次页面加载，
我们从本地中获取即可，我们设定一定的期限或者一些标识，可以控制在某个阶段重新从服务器获取

5、使用字体图标代替一些页面中的位图（图片），这样不仅做适配的时候方便，而且更加轻量级，而且减少了HTTP请求次数（类似于雪碧图）

6、如果当前页面中出现了AUDIO或者VIDEO标签，我们最好设置它们的preload=none：页面加载的时候，音视频资源不进行加载，播放的时候再开始加载（减少页面首次加载HTTP请求的次数）

preload=auto：页面首次加载的时候就把音视频资源进行加载了 
preload=metadata：页面首次加载的时候只把音视频资源的头部信息进行加载 
…

7、在客户端和服务器端进行数据通信的时候，我们尽量采用JSON格式进行数据传输

[优势] 
1）JSON格式的数据，能够清晰明了的展示出数据结构，而且也方便我们获取和操作 
2）相对于很早以前的XML格式传输，JSON格式的数据更加轻量级 
3）客户端和服务器端都支持JSON格式数据的处理，处理起来非常的方便

真实项目中，并不是所有的数据都要基于JSON，我们尽可能这样做，但是对于某些特殊需求（例如：文件流的传输或者文档传输），
使用JSON就不合适了

8、采用CDN加速

CDN：分布式（地域分布式）