前端性能优化主要目标是减少用户等待时间，通过减少HTTP请求次数来提升页面加载速度。组合文件、CSS Sprites、内嵌图片等技术能有效减少请求。例如，合并CSS和JS文件、使用CSS Sprites合并背景图片，或利用数据URL内联小图片。减少HTTP请求对首次访问者尤其重要，因为大部分访问者在无缓存情况下浏览。
前端性能优化之最小化http请求
关于前端性能优化的总结，随处都可以看到这方面的文章，而优化方法，也无外乎那些“固定”方面，当然，有些方面已经过时，所以，在这里，我主要是针对于一点去做出了总结也是能为了加深印象。
一、什么是前端性能优化（what）？
从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。
二、为什么要做前端性能优化（why）？
在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利网站访问速度的因素会形成累加，从而严重影响网站的性能，导致网站访问速度变慢，用户体验低下，最终导致用户流失。
三、前端性能优化的原则（rule）
1、不要按照准则照本宣科的做，需要根据实际情况因地制宜；
2、不出bug！
回归重点如何尽量减少HTTP请求？
80%的终端用户响应时间是花在前端。这其中大部分时间被占用在下载页面中的所有组件上：图片、样式表、脚本、Flash等。减少组件的数量又可以减少渲染页面所需的http请求。这是加快页面速度的关键。
减少页面中的组件数量的方法之一是简化页面的设计。但是有没有一种方法可以在构建内容更丰富的页面的同时还能实现快速响应时间呢？下面是一些减少HTTP请求数量。同时又支持丰富页面的技术。
- 组合文件
组合文件是一种减少http请求数量的方法，将所有脚本组合成一个脚本，同样将所有脚本组合成一个脚本，同样将所有CSS组合成一个样式表。当脚本和样式表因页面而异时，合并文件更具挑战性，但将其作为流程发布的一部分，可以提高响应时间。
- CSS Sprites
css sprites是减少图片请求数量的首选方法，将你的背景图片组合成一张图像，并使用css background-image和background-position属性来显示所需的图像段。
图像地图将多个图像组合成一个图像。整体大小差不多，但减少了HTTP请求的数量，加快了页面的速度。图像地图只有在页面中的图像是连续的时才有效，例如导航栏。定义图像地图的坐标会很繁琐，而且容易出错。使用图像地图做导航也是无法访问的，所以不建议使用。
内嵌图片使用数据。URL方案将图像数据嵌入到实际页面中。这可能会增加你的HTML文档的大小。将内联图片结合到你的（缓存）样式表中是一种减少HTTP请求并避免增加页面大小的方法。并非所有主流浏览器都支持内联图片。
减少页面中的HTTP请求数量是开始的地方。这是提高首次访问者性能的最重要准则。正如Tenni Theurer的博客文章《浏览器缓存使用情况–曝光！》中所描述的那样，每天有40-60%的网站访问者是在缓存为空的情况下进入的。让你的页面对这些首次访问者来说是快速的，
扫一扫
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
