Web前端优化小结

一、尽可能的减少http请求数，提高访问速度。这些请求包括html文件、CSS文件、JS文件和图片文件等外部资源。
1、可以将多个CSS或JS文件合并
　　a.合并引入。如：<link  type="text/css"   rel="stylesheet"  href="css/a.css,css/b.css"> //淘宝的服务器技术，目前只有tengine可以支持这种模式。
　　DOS命令：copy a.css+b.css ab.css /b，就可以得到合并的“ab.css”文件。
　　b.可以用minify工具合并。

2、可以将多个图片文件整合到一个图片文件，然后用CSS读取需要的某一部分图像。

其实影响网站访问速度最主要的是我们的网络环境，我们大部分时间花在了网络阻塞和等待响应上，而真正用在接收数据上的时间还真不多。但是我们做前端优化的，你不能去要求用户的网络环境，你要接受用户网络状况差的事实，在其他方面进行优化。

PS：
Minify 是用PHP5开发的应用，通过遵循一些Yahoo的优化规则来提高网站的性能。它会合并多个CSS或者JavaScript文件，移除一些 不必要的空格和注释，进行gzip压缩，并且会设置浏览器的缓存头。Minify 在设计上和Yahoo的 Combo Handler Service 非常像，不过Minify可以合并任何你想要合并的JavaScript和CSS文件

时间： 2024-11-05 11:35:27

Web前端优化小结的相关文章

【转】关于大型网站技术演进的思考（二十一）--网站静态化处理—web前端优化—下【终篇】（13）

本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别是硬件采购的成本都由总公司来承担,当然互联网业务上的市场营销成本这块还是由该事业部自己承担,可是网站一年运维下来,该公司发现该事业部里最大的成本居然不是市场营销的开销,而是短信业务和宽带使用上的开销,是不是有点让人感到意外呢?下面我来分析下这个场景吧. 短信这块是和通讯运营商有关,很难从根本上解决,

关于大型网站技术演进的思考（二十一）--网站静态化处理—web前端优化—下【终篇】（13）

本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别是硬件采购的成本都由总公司来承担,当然互联网业务上的市场营销成本这块还是由该事业部自己承担,可是网站一年运维下来,该公司发现该事业部里最大的成本居然不是市场营销的开销,而是短信业务和宽带使用上的开销,是不是有点让人感到意外呢?下面我来分析下这个场景吧. 短信这块是和通讯运营商有关,很难从根本上解决,

关于大型网站技术演进的思考（二十）--网站静态化处理—web前端优化—中（12）

Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳的预期效果,今天我在这里分析下浏览器和服务端通讯的一些细节问题,希望通过分析这些细节问题,能给大家一个启迪,能更好的理解这些优化原则背后的隐秘,最终能更好的运用这些原则. 网站的通讯技术是构建在http协议上,http协议底层通讯手段使用的是tcp/ip协议,但是tcp通讯协议在建立连接和断开连接这

关于大型网站技术演进的思考（十九）--网站静态化处理—web前端优化—上（11）

网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属于web前端的技术范畴,要回答清楚这个问题我们要明确下网站应用的本质到底是什么?网站的本质其实就是BS,这里的BS我没有带上架构二字,而就是指Browser和Server即浏览器和服务器,而网站静态化技术的作用目标就是让客户端即浏览器的用户体验更好,但是如果我们想让网站在浏览器上运行的更快,在更快的

web 前端优化-戈多编程

大家好,我是戈多,从事web开发工作接近三年了,今天来归纳下web前端优化的解决方案(码农搬砖工,来自各网络汇总) 1.减少Http请求 http请求越多,那么消耗的时间越多,如果在加上网络很糟糕,那么问题就更多了.且如果网页中的图片.css文件.js文件很多甚至有音乐文件时,这势必会造成负担. (1)图片地图 即多个图片排成一行作为链接到其他页面的按钮,我们当然可以使用五福图片,发送5个http请求,但是这是不合适的. 我们可以选择使用图片地图,即只用一张图片,然后使用<map>属性通过控制

Web 前端优化最佳实践

面向内容的优化规则目前有 10 条. 1. 尽量减少HTTP请求 (Make FewerHTTPRequests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最大受益.有几种常见的方法能切实减少HTTP请求: 1) 合并文件,比如把多个CSS文件合成一个: 2) CSSSprites 利用CSSbackground 相关元素进行背景图绝对定位:参见:CSS Sprites: Image Slicing’s Kiss of De

Web前端优化

前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快.对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升.下图显示了页面加载速度对于用户体验的影响. 你的Web页面的速度是否已经足够快了?其实可能还有很多可以提升的地方.Google和雅虎也提出了一些Web应用的前端优化建议,并发布了一些工具,你可以逐一检验你的Web应用,以便达到更高的性能. 这些优化不仅仅可以给用户提供更好的体验,从开发者角度来说,进行优化还可以减少页面的请求数.降低请求所占的带宽.减少资

【转】关于大型网站技术演进的思考（十九）--网站静态化处理—web前端优化—上（11）

网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属于web前端的技术范畴,要回答清楚这个问题我们要明确下网站应用的本质到底是什么?网站的本质其实就是BS,这里的BS我没有带上架构二字,而就是指Browser和Server即浏览器和服务器,而网站静态化技术的作用目标就是让客户端即浏览器的用户体验更好,但是如果我们想让网站在浏览器上运行的更快,在更快的

【转】关于大型网站技术演进的思考（二十）--网站静态化处理—web前端优化—中（12）

Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳的预期效果,今天我在这里分析下浏览器和服务端通讯的一些细节问题,希望通过分析这些细节问题,能给大家一个启迪,能更好的理解这些优化原则背后的隐秘,最终能更好的运用这些原则. 网站的通讯技术是构建在http协议上,http协议底层通讯手段使用的是tcp/ip协议,但是tcp通讯协议在建立连接和断开连接这