只有10-20%的最終用戶響應時間是花在了下載HTML源文件上。其它的80-90%是花在了下載頁面中的所有組件上。
You can use the HTTP requests checker to check how many requests your web pages make. You can also see which type of requests your web pages make (images, css files, etc..).
I test the site : https://www.inforalogy.com here and here is the result:
- Javascript: 23 (1506 KB)
- Images: 9 (388 KB)
- Font: 6 (194 KB)
- HTML: 3 (82 KB)
- OCTET-STREAM: 2 (87 KB)
- CSS: 2 (880 KB)
- TOTAL HTTP REQUESTS: 45
When a page makes more than 20 HTTP requests from the same domain you should start to look into lowering the amount. It also depends on the type of page you have. More information here.
我们访问网站的时候，会对服务器发出HTTP请求，网站打开的速度快慢与页面的大小有关外，还有个重要的因素就是HTTP的请求数。尽量减少页面的HTTP请求，可以提高页面载入速度。以下介绍6种减少http请求的方式：
减少页面中的元素
网页中的的图片、form、flash等等元素都会发出HTTP请求，尽可能的减少页面中非必要的元素，可以减少HTTP请求的次数。
尽量用雪碧图：CSS Sprites（CSS精灵) Combine & inline your CSS scripts
图片是增加HTTP请求的最大可能者，把全站的图标都放在一个图像文件中，然后用CSS的background-image和background-position属性定位来显示其中的一小部分。
这种方法把CSS写到HMTL文件里，而不采用外部调用，与Div+CSS中「表现与内容分离、把CSS都立出来」相悖，缺点就是不利于SEO；当然，从整体上减少HTTP请求、提高页面载入速度，是有利于SEO的。
精简JS文件和CSS文件的数量: Combine all Javascripts
合并脚本和CSS文件，可以减少了HTTP请求。有的人喜欢把CSS分成结构清晰的几个部分，比如base.css、header.css、mianbody.css、 footer.css这样对页面的维护和修改是比较方便的，但是对加快服务器响应时间就存在问题了。
用 location.href() 代替 location.reload()：
使用location.reload() 会刷新页面，刷新页面时页面所有资源（css，js，img等）会重新请求服务器。
建议使用location.href=”当前页url” 代替location.reload() ，使用location.href 浏览器会读取本地缓存资源。
动态页面静态化：
动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。
用户访问动态页面需要与数据库服务器进行数据交换。动态页面静态化，也就是把动态网页生成HTML文件，用空间换效率。
图片地图（Image Maps）：
也就是图像热点，图像地图就是把一张图片分成若干区域,每个区域指向不同的URL地址，这些区域也称为热点。Image Maps只适用于连续的图标。1人点赞日记本