`
fuhao_987
  • 浏览: 63714 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

加快网站速度的最佳做法_(1)最小化http请求

阅读更多
原文地址:http://developer.yahoo.com/performance/rules.html
自己做了点翻译:
最小化HTTP请求
80%的用户响应时间是花在前端。大多数时间用来下载需要的组件,例如,图片,样式,脚本,FLASH等。为了达到渲染页面的目的,减少下载组件的数量,从而减少HTTP请求的时间。这就是加快页面的关键。
一种减少下载组件的方法就是简化页面的设计。但是有没有一种方法既让页面有丰富的内容,又能达到快速响应的目的?毫无疑问,这当然有相应的技术啦。
(1)Combined files:
     把脚本文件合并到一个文件中,把CSS文件合并到一个文件中。当脚本和样式在页面之间改变的时候,合并文件是一件很有挑战性的工作。但是这部分工作会改进你的响应时间。
(2)CSS Sprites
     是减少图片请求最好的方法。把你的背景图合并到一个图中,使用CSS的background-image和backgroud-position属性来显示需要的图片片断。
(3)Image maps
     把很多图片合并到一个图片中,总体大小不变,但是减少了HTTP请求的数量。image maps只有在图片相邻的情况下可以实现,比如导航条。定义image maps的协调性是很容易出错的。对导航条使用image maps是不容易懂,也不推荐的。
(4)Inline images
     使用data这个url方案http://tools.ietf.org/html/rfc2397在实际的页面中嵌入图像数据。这会增加HTML文档的大小。合并inline images到你的样式中是一种减少HTTP请求和避免增加你的页面大小的方法。但是,inline images不是被所有的浏览器支持。

减少HTTP请求的数目只是一个开始。对第一次访问的用户来说这是很重要的。正如Tenni Theuer's的博客中提到的http://yuiblog.com/blog/2007/01/04/performance-research-part-2/ 40-60%对你的站点的日常访问者携带的是空的缓存。提高你页面的速度,对这些第一次的访问者来说是置关重要的。
分享到:
评论

相关推荐

    雅虎给出的34条优化网站访问速度加快方法

    14. **最小化重定向**:每增加一次重定向,就增加了额外的请求时间和等待时间,应尽量避免不必要的重定向。 15. **移除重复的JavaScript**:确保没有重复加载同一脚本,可以避免不必要的下载和执行时间。 16. **...

    《高性能网站建设指南》-- 想网站打开速度快,必看。

    《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...

    将多个CSS文件合并为一个文件,并使用Nant最小化CSS和JavaScipt

    "将多个CSS文件合并为一个文件,并使用Nant最小化CSS和JavaScipt"的主题旨在提高网页加载速度,减少HTTP请求数量,从而提升用户体验。以下是这个主题涉及的相关知识点: 1. **CSS合并**:在网站开发过程中,为了...

    Web前端开发最佳实践.pdf

    这包括图片压缩、使用CDN、最小化和合并CSS和JavaScript文件、异步加载资源等技术。 5. 语义化HTML:使用正确的HTML标签来增强页面的可访问性和搜索引擎优化(SEO)。语义化标签可以清晰表达内容的结构和含义,有助...

    yahoo网站优化建议.doc

    他们通过实验、工具开发和研究,总结出了一套针对网站速度提升的策略,共分为7大类35条建议。以下是对这些关键点的详细阐述: 1. **尽量减少HTTP请求** - HTTP请求是网页加载速度的主要影响因素。减少HTTP请求次数...

    高性能网站建设进阶指南

    1. **减少HTTP请求**:每个网络请求都会带来额外的延迟,因此减少HTTP请求次数是提高页面加载速度的关键。这包括合并CSS和JavaScript文件,使用CSS Sprites技术整合图片,以及利用内联样式和数据URI来避免额外的HTTP...

    tomcat5.0静态化shtml配置.

    - **最小化HTTP请求**:合并CSS和JavaScript文件,减少HTTP请求的数量,提高页面加载速度。 以上步骤完成后,Tomcat 5.0将能更好地处理静态资源,特别是SHTML文件,并通过缓存和压缩技术提升网站性能。记得在完成...

    Nginx安装配置PageSpeed模块实现网站加速.docx

    5. **最小化请求开销**:通过将多个小文件合并成一个大的文件,减少HTTP请求的数量,加快页面加载。 6. **最小化负载大小**:通过对HTML、CSS和JavaScript进行压缩,减小文件传输的大小。 7. **优化浏览器渲染**:...

    wp-rocket v3.0.3

    WP Rocket正是这样一个工具,它通过优化各种关键的性能因素,如静态资源缓存、数据库清理和最小化HTTP请求,来实现这一目标。 1. **静态缓存**:静态缓存是WP Rocket的核心功能之一。它会将动态的WordPress页面转化...

    Combining, Compressing, Minifying ASP.Net ScriptResource and HTML Markups

    当页面上有很多这样的ScriptResource请求时,合并可以显著减少HTTP请求的数量,因为每个HTTP请求都需要网络往返时间,这通常是页面加载速度的主要瓶颈。ASP.NET提供了一些工具和方法来自动或手动合并脚本和样式,...

    PageSpeedChrome.zip

    9. **最小化DOM元素**:减少DOM元素的数量,可以提高页面解析速度,降低内存占用。 10. **避免重定向**:重定向会增加页面加载时间,应尽量避免或优化重定向链。 PageSpeed Chrome插件不仅提供了性能评估,还为每...

    ITILFND V4 Exam – Free Actual Q&As, Page 1 _ ExamTopics

    - 变更控制(Change Control):管理和控制变更,以最小化对服务的影响。 最后,ITILFND V4认证的准备应涉及对ITIL框架的深入理解和应用,包括其核心概念、实践、流程和功能的详细知识。这个认证为个人提供了在IT...

    web前端优化方法

    9. **最小化iframe数量**:iframe可能导致额外的HTTP请求和性能损失,应谨慎使用。 这些优化方法旨在减少页面加载时间,提高用户满意度,同时也对SEO(搜索引擎优化)有积极影响。在实际应用中,应结合具体情况灵活...

    Sample_AngularJS_App:AngularJS应用程序具有承诺功能,使用Grunt进行最小化,使用业力进行少量测试用例

    在这个项目中,Grunt 被用来进行代码的最小化(minification),这是生产环境部署的一个关键步骤,因为它可以减少文件大小,从而加快页面加载速度。Gruntfile.js 文件定义了各种任务,如 CSS 压缩、JavaScript 合并...

    前端性能优化:掌握解决方案.zip

    5. **最小化HTTP请求**:合并CSS和JS文件,减少HTTP请求次数。同时,使用CDN(Content Delivery Network)服务可以将静态资源分发到全球各地的服务器,缩短响应时间。 6. **优化图片**:使用合适的图片格式(如WebP、...

    Script Minifier:脚本压缩程序可让您最小化Javascript,PHP和HTML-开源

    这一过程被称为"代码最小化"或"代码压缩"。 在Web开发中,脚本文件的大小直接影响到页面的加载速度。当用户访问一个网页时,浏览器需要下载所有的资源,包括CSS、JavaScript和HTML文件。如果这些文件过大,加载时间...

    Laravel开发-laravel-minify-response

    这两种方法结合使用,能显著加快网页加载速度,特别是对于移动用户或网络条件较差的用户来说。 ### 2. 安装laravel-minify-response 首先,你需要通过Composer将这个包添加到你的Laravel项目中: ```bash ...

    物联网设备安全防护:固件篡改防御策略

    - **增量更新**:对于大型固件,可以考虑使用增量更新方式,仅传输更改的部分,以减少带宽消耗和加快更新速度。 通过综合运用上述策略,可以显著提高物联网设备抵御固件篡改的能力,为设备及其用户的安全提供坚实...

Global site tag (gtag.js) - Google Analytics