ahuaxuan
- 浏览: 639654 次
- 性别:
- 来自: 杭州
-
文章分类
最新评论
-
liuche20083736：
非常好
从问题看本质: 研究TCP close_wait的内幕 -
xiaopohai85707：
优化算法与原来需求不符
过滤字符的性能调优?挤一挤还是有的 -
kmy_白衣：
生成的area图有时候 标签的数值和图标上看上去的数值不一致。 ...
OpenFlashChart2之恶心文档 -
tom&jerry：
大神，请教一个问题，按名称排序为何无效，用的2.4.3 XPA ...
深入浅出jackrabbit之十三 查询之AST和QT -
jd2bs：
改成精确匹配可以了< filter-mapping &g ...
细谈Ehcache页面缓存的使用
/**
*作者：张荣华
*日期：2008-12-01
**/
乘着第3届d2论坛的顺利结束的秋风,我也来分享一下自己在前端优化方面的一些些小经验,其实这些经验本身都是来自yahoo的优化原则,不过经过ahuaxuan自身的实践和再次的思考,把原来的原则都进行了分组和分析.不过由于ahuaxuan涉及到的东西有限,并没有经历过全部的优化点,所以只把自己做过的拿出来和大家讨论讨论,其中不免加入自己一些观点,希望大家指正.
先说说目标,前端优化的目标是什么,一个字:快.两个字:更快.那么下面我们来看看慢的网页将会给我们带来什么:
1. 慢的页面可能会网站失去更多的用户.
2. 慢500ms意味着20%的用户将放弃访问(google)
3. 慢100ms意味着1%的用户将放弃交易(amazon)
4. 慢 ???ms意味着??%的用户将放弃xx(your site)
所以我们的目标很明确,就是要网页展现的速度更快.
经过ahuaxuan的实践和总结,其实要让网页展现更快只需要注意几个大的方面,下面会一一描述这几个大的方面.
[size=medium]1减少http请求,我把它排在了第一点,为啥要在第一点呢,很简单,因为它最重要.
如何做呢.让ahuaxuan带着大家分析一下这个问题.从何处着手呢.ahuaxuan大声疾呼,我们要从数据开始.ok,一般来说,我们从变化性上把数据分成两种类型,变和不变.那么不变的数据可以缓存,变化的数据不能缓存,这是一个常识,也就是说要减少我们的http请求次数这个目标可以转换成把数据分为变化和不变化两个部分.不变化的数据不需要再次请求,这样http请求的次数就减少了,下面我们分点来描述将数据分类的途径.
1. 合并脚本文件
包括脚本,样式和图片,可以有选择的把一些Js和css可以合并成一个文件,一些图片可以使用css sprites技术.这样做的原因是什么?做过web开发的人都知道,js和css基本是不变的,是静态文件,图片亦然.那么不变的文件如果适当的合并在一起,会有什么效果呢?请求的次数从多次变成了一次.这样http请求的次数就减少了.当时合并之后,文件体积变大了,会影响速度吗?答:肯定会啊,不过这里是需要权衡的,比如我100份静态文件,合并成10份还是合并成1份这就得看你得具体情况了.
2. 指定Expires或者Cache-Control,
对于静态内容：设置文件头过期时间Expires的值为“Never expire”（永不过期）
动态页面,在代码中添加cache-control,表示多少时间之后过期,如:
response.setHeader("Cache-Control", "max-age=3600");
如果使用了Expires文件头，当页面内容改变时就必须改变内容的文件名。通常是在文件内容后加版本号
这一点是大多数人都忽略得,之前很多人在坛子上发布自己得小系统,还有demo,ahuaxuan跑过去一看,my god,一堆又一堆得js,css,既没有恰当得合并,也没有设置过期时间.每次刷新页面都要重新下载这一堆又一堆的js,css.http请求那叫一个多啊.无谓了流量就这样产生了.
这一点在企业应用的系统中也时有发生.比如我们使用extjs作为前端的技术,400多k啊,每打开一个页面都导入,下载这个js,够无聊的.那么童子们可能就要问了,静态文件为啥不用apache,lighttpd等呢,答,用了又怎么样,不设expire或者max-age不是一样要下载,最好的方法是写一个filter,再filter中判断,如果url满足一定的条件(比如符合配置文件中的正则表达式),那么就设置一个max-age,这样就ok,太简单了,几行代码就可以搞定.快哉.
3. 缓存Ajax请求
缓存的方法同动态页面,ajax请求需要使用get方式,url长度为2k(ie)限制(post请求有两个过程,1发送请求headers,2发送请求数据,根据http规范,get请求只会发送一个tcp包).--------这一段话来自yahoo,先不管其真假,我们从另外一个方面来考虑一下为什么最好使用get方式,讲一个ahuaxuan经历过的事情,之前有一个项目的ajax请求使用了post方式,后来发现经常出错,而且抛出了squid的错误,因为我们的网站使用了squid,问题就出在这里了,从http协议上可以了解到,method=post是指把数据提交到服务器上去,那么squid的一个特性是不会缓存post请求(事实上它确实不应该缓存,因为这样会违反http协议中的语义),把ajax请求改成get方式之后,一切恢复如常.
4. 移除重复的js
重复的js导入也有可能导致ie重新加载该脚本.没啥好说的,照做.
5. 避免重定向
有一种经常被网页开发者忽略却往往十分浪费响应时间的跳转现象。这种现象发生在当URL本该有斜杠（/）却被忽略掉时。这时候会返回一个301的状态码,然后浏览器重新发起一次请求.在企业应用里,重定向是我们在企业应用中常用的技术,不过用在网站项目上,您可要小心了,因为普通的重定向其实是server在response header中设置http status=302,浏览器收到之后,判断出是302,会重新发送一个请求,目标地址是前一次返回中指定的地址.在网站项目中如果可以不用重定向就别用吧.如果您做企业应用项目,ok,关系不大,您就放心的”定”吧.
小节,ahuaxuan把减少http请求次数分为了以上5个小点,每个小点之后附加一些实例,大家可以根据这些点来判断自己的项目是否可以有优化的地方.
使用cdn
让内容更靠近用户,这有啥好说呢,原理很简单,就是根据用户浏览器所在机器的ip来判断哪些服务器离用户最近,浏览器会再次去请求这些最近的机器.一般的cdn服务商是通过开发自己的dns server来达到这个目的的.不过这个是通常情况哦,技术实力比较高,或者场景比较特殊的公司会开发自己的cdn.当然不管怎么说,使用cdn肯定可以使页面响应更快(也包括音频,视频,图片,文本文件,等等等等)
减小返回数据的体积
1. 使用gzip压缩返回数据
Gzip压缩所有可能的文件类型是减少文件体积增加用户体验的简单方法。比如本来400k的文件,压缩一下之后只有50k-100k,那么网络的流量就立刻下来了,压缩的代价是服务器端要压缩文件,需要消耗cpu,浏览器需要解压文件,也需要消耗cpu,不过对于现代这么nb的pc,来说,浏览器解压一下数据带来的cpu消耗简直不值一提.所以您就压吧.不过压的时候要小心哦,有的浏览器在特定场景下会出去一些小bug,导致页面不正常.比如ie6在跨域的时候可能会有些小麻烦,把这部分数据的gzip去掉就可以了.
2. 最小化js文件和css文件
压缩js可以使用JSMin或者YUI Compressor,后者同时可以压缩css,这个也没啥好说的,照做吧.
3. 将css和js独立成外部文件
其实这一点也可以看成是区分不变数据和变化数据.很多人喜欢在页面商写很多很多的js和css,这些数据其实都是不会变化的数据,也就是说这些数据也是可以缓存在浏览器上的,通过把它们独立成外部文件,可以把这些数据缓存起来.这样做看上去是增加的请求的次数,但是由于第一次请求之后该部分数据已经被缓存,所以第二次就无需再请求后端,减少了网络带宽的开销.
优化Cookie
1. 减小cookie体积
能不放就别放吧,为啥呀,cookie就象钥匙串,只有出门和回家得时候才用,但是一整天你都要带在身上,麻烦不.
2. 合理设置Cookie域
由于二级域名可以拿到一级域名得cookie,那么如果,而二级域名之间确不能相互共享cookie,所以合理得设置cookie得域名也可以避免无必要得带宽浪费和响应速度得增加.
3. 设置合理的cookie过期时间
该过期就过期,不要让不必要的数据一直带在身上走来走去.
4. 使用域分离
为图片或者其他静态资源文件使用子域或者建立新的独立域名(申请新的域名),避免无必要的cookie传输,当然也是要在有必要得情况下,图片类网站肯定有必要,javaeye上得图片并没有使用域分离,所以我们得cookie其实会带到坛子得图片服务器上去,每次请求图片都是如此(不过还好,坛子里没有什么图片,所以这方面的浪费不大).
小结,其实cookie上得问题,单词请求看上去也不是什么大问题,好像是无所谓得事情,就那么几十个byte,至于吗,不过大家都听说过水滴石穿,绳锯木断的故事.所以该做的,我们还是要做,正所谓,勿以善小而不为,勿以恶小而为之.
优化浏览器加载
1. 将css放在页面顶部加载
把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会中止内容的有序呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不得不面对一个空白页面。
HTML规范清 楚指出样式表要放包含在页面的<head />区域内：“和<a />不同，<link />只能出现在文档的<head />区域内，尽管它可以多次使用它”。无论是引起白屏还是出现没有样式化的内容都不值得去尝试。最好的方案就是按照HTML规范在文 档<head />内加载你的样式表。
2. 将js放在页面底部加载
脚本带来的问题就是它阻止了页面的平行下载。HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个。如果你的图片放在多个主机名上，你可以在每个并行下载中同时下载2个以上的文件。但是当下载脚本时，浏览器就不会同时下载其它文件了，即便是主机名不相同。
Js放在底部加载其实并不影响浏览器展示页面,除非用户会在js加载完成之前就调用某个js方法,比如说页面刚展现到一半,但是恰好这一半里有一部分是调用了还未下载的js,这个时候就会出问题了,如果童子们遇到这种情况,可以把这部分js先加载.
总结一下下:以上这些优化点其实只是前端优化的部分内容,不过根据80/20原则,这些优化点已经覆盖了80%的情况了,同时前端优化其实也不是什么复杂的东西,原理上是很简单的,更多的是需要我们的实践,因为我们可能会碰到各种各样的问题,而很多的这些问题其实一般是预测不到的.只有遇到过才知道.
说的不对的地方请大家拍砖,或者童子们也可以把自己的经验在这里和大家分享一下.代表其他童子表示十分的感谢.
当然,由于ahuaxuan水平有限,文章中难免有不到之处,还望不吝指正,谢谢.
[/size]
点石是做SEO的，他们一般不偏向这个方面。
肯定赚啊,现在的pc很强劲的.
点石是什么我都不知道,呵呵,这些东西都是我看了yahoo的文章之后,去实践,然后实践的过程中产生的一些想法和经验,
还有你能否告诉我你说的原文是哪篇文章?我想原文应该是yahoo出的才对
这是一个全局的控制。通常一个页面里既有动态的，也有静态的内容（如CSS，JS），但因为有动态的，必须使用NO-CACHE。这样就变成连静态的内容也要每次获取。
其实我在最开始就有提到，我们最好把数据分成变化和不变化两种，像页面里的js和css完全可以剥离出去，使其变成不变的数据，这样就可以指定expires值了
所以，指定Expires或者Cache-Control，只适合纯静态页面。
这个我不能同意哦，因为我之前做的一个东西就是属于动态数据，不过这个动态数据在一段时间内，比如10分钟之内是不变的，那么这10分钟之内用户无需再次发送请求，所以就把这个结果返回的时候指定了max-age。
*作者：张荣华
*日期：2008-12-01
**/
乘着第3届d2论坛的顺利结束的秋风,我也来分享一下自己在前端优化方面的一些些小经验,其实这些经验本身都是来自yahoo的优化原则,不过经过ahuaxuan自身的实践和再次的思考,把原来的原则都进行了分组和分析.不过由于ahuaxuan涉及到的东西有限,并没有经历过全部的优化点,所以只把自己做过的拿出来和大家讨论讨论,其中不免加入自己一些观点,希望大家指正.
先说说目标,前端优化的目标是什么,一个字:快.两个字:更快.那么下面我们来看看慢的网页将会给我们带来什么:
1. 慢的页面可能会网站失去更多的用户.
2. 慢500ms意味着20%的用户将放弃访问(google)
3. 慢100ms意味着1%的用户将放弃交易(amazon)
4. 慢 ???ms意味着??%的用户将放弃xx(your site)
所以我们的目标很明确,就是要网页展现的速度更快.
经过ahuaxuan的实践和总结,其实要让网页展现更快只需要注意几个大的方面,下面会一一描述这几个大的方面.
[size=medium]1减少http请求,我把它排在了第一点,为啥要在第一点呢,很简单,因为它最重要.
如何做呢.让ahuaxuan带着大家分析一下这个问题.从何处着手呢.ahuaxuan大声疾呼,我们要从数据开始.ok,一般来说,我们从变化性上把数据分成两种类型,变和不变.那么不变的数据可以缓存,变化的数据不能缓存,这是一个常识,也就是说要减少我们的http请求次数这个目标可以转换成把数据分为变化和不变化两个部分.不变化的数据不需要再次请求,这样http请求的次数就减少了,下面我们分点来描述将数据分类的途径.
1. 合并脚本文件
包括脚本,样式和图片,可以有选择的把一些Js和css可以合并成一个文件,一些图片可以使用css sprites技术.这样做的原因是什么?做过web开发的人都知道,js和css基本是不变的,是静态文件,图片亦然.那么不变的文件如果适当的合并在一起,会有什么效果呢?请求的次数从多次变成了一次.这样http请求的次数就减少了.当时合并之后,文件体积变大了,会影响速度吗?答:肯定会啊,不过这里是需要权衡的,比如我100份静态文件,合并成10份还是合并成1份这就得看你得具体情况了.
2. 指定Expires或者Cache-Control,
对于静态内容：设置文件头过期时间Expires的值为“Never expire”（永不过期）
动态页面,在代码中添加cache-control,表示多少时间之后过期,如:
response.setHeader("Cache-Control", "max-age=3600");
如果使用了Expires文件头，当页面内容改变时就必须改变内容的文件名。通常是在文件内容后加版本号
这一点是大多数人都忽略得,之前很多人在坛子上发布自己得小系统,还有demo,ahuaxuan跑过去一看,my god,一堆又一堆得js,css,既没有恰当得合并,也没有设置过期时间.每次刷新页面都要重新下载这一堆又一堆的js,css.http请求那叫一个多啊.无谓了流量就这样产生了.
这一点在企业应用的系统中也时有发生.比如我们使用extjs作为前端的技术,400多k啊,每打开一个页面都导入,下载这个js,够无聊的.那么童子们可能就要问了,静态文件为啥不用apache,lighttpd等呢,答,用了又怎么样,不设expire或者max-age不是一样要下载,最好的方法是写一个filter,再filter中判断,如果url满足一定的条件(比如符合配置文件中的正则表达式),那么就设置一个max-age,这样就ok,太简单了,几行代码就可以搞定.快哉.
3. 缓存Ajax请求
缓存的方法同动态页面,ajax请求需要使用get方式,url长度为2k(ie)限制(post请求有两个过程,1发送请求headers,2发送请求数据,根据http规范,get请求只会发送一个tcp包).--------这一段话来自yahoo,先不管其真假,我们从另外一个方面来考虑一下为什么最好使用get方式,讲一个ahuaxuan经历过的事情,之前有一个项目的ajax请求使用了post方式,后来发现经常出错,而且抛出了squid的错误,因为我们的网站使用了squid,问题就出在这里了,从http协议上可以了解到,method=post是指把数据提交到服务器上去,那么squid的一个特性是不会缓存post请求(事实上它确实不应该缓存,因为这样会违反http协议中的语义),把ajax请求改成get方式之后,一切恢复如常.
4. 移除重复的js
重复的js导入也有可能导致ie重新加载该脚本.没啥好说的,照做.
5. 避免重定向
有一种经常被网页开发者忽略却往往十分浪费响应时间的跳转现象。这种现象发生在当URL本该有斜杠（/）却被忽略掉时。这时候会返回一个301的状态码,然后浏览器重新发起一次请求.在企业应用里,重定向是我们在企业应用中常用的技术,不过用在网站项目上,您可要小心了,因为普通的重定向其实是server在response header中设置http status=302,浏览器收到之后,判断出是302,会重新发送一个请求,目标地址是前一次返回中指定的地址.在网站项目中如果可以不用重定向就别用吧.如果您做企业应用项目,ok,关系不大,您就放心的”定”吧.
小节,ahuaxuan把减少http请求次数分为了以上5个小点,每个小点之后附加一些实例,大家可以根据这些点来判断自己的项目是否可以有优化的地方.
使用cdn
让内容更靠近用户,这有啥好说呢,原理很简单,就是根据用户浏览器所在机器的ip来判断哪些服务器离用户最近,浏览器会再次去请求这些最近的机器.一般的cdn服务商是通过开发自己的dns server来达到这个目的的.不过这个是通常情况哦,技术实力比较高,或者场景比较特殊的公司会开发自己的cdn.当然不管怎么说,使用cdn肯定可以使页面响应更快(也包括音频,视频,图片,文本文件,等等等等)
减小返回数据的体积
1. 使用gzip压缩返回数据
Gzip压缩所有可能的文件类型是减少文件体积增加用户体验的简单方法。比如本来400k的文件,压缩一下之后只有50k-100k,那么网络的流量就立刻下来了,压缩的代价是服务器端要压缩文件,需要消耗cpu,浏览器需要解压文件,也需要消耗cpu,不过对于现代这么nb的pc,来说,浏览器解压一下数据带来的cpu消耗简直不值一提.所以您就压吧.不过压的时候要小心哦,有的浏览器在特定场景下会出去一些小bug,导致页面不正常.比如ie6在跨域的时候可能会有些小麻烦,把这部分数据的gzip去掉就可以了.
2. 最小化js文件和css文件
压缩js可以使用JSMin或者YUI Compressor,后者同时可以压缩css,这个也没啥好说的,照做吧.
3. 将css和js独立成外部文件
其实这一点也可以看成是区分不变数据和变化数据.很多人喜欢在页面商写很多很多的js和css,这些数据其实都是不会变化的数据,也就是说这些数据也是可以缓存在浏览器上的,通过把它们独立成外部文件,可以把这些数据缓存起来.这样做看上去是增加的请求的次数,但是由于第一次请求之后该部分数据已经被缓存,所以第二次就无需再请求后端,减少了网络带宽的开销.
优化Cookie
1. 减小cookie体积
能不放就别放吧,为啥呀,cookie就象钥匙串,只有出门和回家得时候才用,但是一整天你都要带在身上,麻烦不.
2. 合理设置Cookie域
由于二级域名可以拿到一级域名得cookie,那么如果,而二级域名之间确不能相互共享cookie,所以合理得设置cookie得域名也可以避免无必要得带宽浪费和响应速度得增加.
3. 设置合理的cookie过期时间
该过期就过期,不要让不必要的数据一直带在身上走来走去.
4. 使用域分离
为图片或者其他静态资源文件使用子域或者建立新的独立域名(申请新的域名),避免无必要的cookie传输,当然也是要在有必要得情况下,图片类网站肯定有必要,javaeye上得图片并没有使用域分离,所以我们得cookie其实会带到坛子得图片服务器上去,每次请求图片都是如此(不过还好,坛子里没有什么图片,所以这方面的浪费不大).
小结,其实cookie上得问题,单词请求看上去也不是什么大问题,好像是无所谓得事情,就那么几十个byte,至于吗,不过大家都听说过水滴石穿,绳锯木断的故事.所以该做的,我们还是要做,正所谓,勿以善小而不为,勿以恶小而为之.
优化浏览器加载
1. 将css放在页面顶部加载
把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会中止内容的有序呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不得不面对一个空白页面。
HTML规范清 楚指出样式表要放包含在页面的<head />区域内：“和<a />不同，<link />只能出现在文档的<head />区域内，尽管它可以多次使用它”。无论是引起白屏还是出现没有样式化的内容都不值得去尝试。最好的方案就是按照HTML规范在文 档<head />内加载你的样式表。
2. 将js放在页面底部加载
脚本带来的问题就是它阻止了页面的平行下载。HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个。如果你的图片放在多个主机名上，你可以在每个并行下载中同时下载2个以上的文件。但是当下载脚本时，浏览器就不会同时下载其它文件了，即便是主机名不相同。
Js放在底部加载其实并不影响浏览器展示页面,除非用户会在js加载完成之前就调用某个js方法,比如说页面刚展现到一半,但是恰好这一半里有一部分是调用了还未下载的js,这个时候就会出问题了,如果童子们遇到这种情况,可以把这部分js先加载.
总结一下下:以上这些优化点其实只是前端优化的部分内容,不过根据80/20原则,这些优化点已经覆盖了80%的情况了,同时前端优化其实也不是什么复杂的东西,原理上是很简单的,更多的是需要我们的实践,因为我们可能会碰到各种各样的问题,而很多的这些问题其实一般是预测不到的.只有遇到过才知道.
说的不对的地方请大家拍砖,或者童子们也可以把自己的经验在这里和大家分享一下.代表其他童子表示十分的感谢.
当然,由于ahuaxuan水平有限,文章中难免有不到之处,还望不吝指正,谢谢.
[/size]
分享到：
评论
23 楼
yanjie349957322
2009-02-07
ahuaxuan 写道
/**
*作者：张荣华
*日期：2008-12-01
**/
乘着第3届d2论坛的顺利结束的秋风,我也来分享一下自己在前端优化方面的一些些小经验,其实这些经验本身都是来自yahoo的优化原则,不过经过ahuaxuan自身的实践和再次的思考,把原来的原则都进行了分组和分析.不过由于ahuaxuan涉及到的东西有限,并没有经历过全部的优化点,所以只把自己做过的拿出来和大家讨论讨论,其中不免加入自己一些观点,希望大家指正.
先说说目标,前端优化的目标是什么,一个字:快.两个字:更快.那么下面我们来看看慢的网页将会给我们带来什么:
1. 慢的页面可能会网站失去更多的用户.
2. 慢500ms意味着20%的用户将放弃访问(google)
3. 慢100ms意味着1%的用户将放弃交易(amazon)
4. 慢 ???ms意味着??%的用户将放弃xx(your site)
所以我们的目标很明确,就是要网页展现的速度更快.
经过ahuaxuan的实践和总结,其实要让网页展现更快只需要注意几个大的方面,下面会一一描述这几个大的方面.
[size=medium]1减少http请求,我把它排在了第一点,为啥要在第一点呢,很简单,因为它最重要.
如何做呢.让ahuaxuan带着大家分析一下这个问题.从何处着手呢.ahuaxuan大声疾呼,我们要从数据开始.ok,一般来说,我们从变化性上把数据分成两种类型,变和不变.那么不变的数据可以缓存,变化的数据不能缓存,这是一个常识,也就是说要减少我们的http请求次数这个目标可以转换成把数据分为变化和不变化两个部分.不变化的数据不需要再次请求,这样http请求的次数就减少了,下面我们分点来描述将数据分类的途径.
1. 合并脚本文件
包括脚本,样式和图片,可以有选择的把一些Js和css可以合并成一个文件,一些图片可以使用css sprites技术.这样做的原因是什么?做过web开发的人都知道,js和css基本是不变的,是静态文件,图片亦然.那么不变的文件如果适当的合并在一起,会有什么效果呢?请求的次数从多次变成了一次.这样http请求的次数就减少了.当时合并之后,文件体积变大了,会影响速度吗?答:肯定会啊,不过这里是需要权衡的,比如我100份静态文件,合并成10份还是合并成1份这就得看你得具体情况了.
2. 指定Expires或者Cache-Control,
对于静态内容：设置文件头过期时间Expires的值为“Never expire”（永不过期）
动态页面,在代码中添加cache-control,表示多少时间之后过期,如:
response.setHeader("Cache-Control", "max-age=3600");
如果使用了Expires文件头，当页面内容改变时就必须改变内容的文件名。通常是在文件内容后加版本号
这一点是大多数人都忽略得,之前很多人在坛子上发布自己得小系统,还有demo,ahuaxuan跑过去一看,my god,一堆又一堆得js,css,既没有恰当得合并,也没有设置过期时间.每次刷新页面都要重新下载这一堆又一堆的js,css.http请求那叫一个多啊.无谓了流量就这样产生了.
这一点在企业应用的系统中也时有发生.比如我们使用extjs作为前端的技术,400多k啊,每打开一个页面都导入,下载这个js,够无聊的.那么童子们可能就要问了,静态文件为啥不用apache,lighttpd等呢,答,用了又怎么样,不设expire或者max-age不是一样要下载,最好的方法是写一个filter,再filter中判断,如果url满足一定的条件(比如符合配置文件中的正则表达式),那么就设置一个max-age,这样就ok,太简单了,几行代码就可以搞定.快哉.
3. 缓存Ajax请求
缓存的方法同动态页面,ajax请求需要使用get方式,url长度为2k(ie)限制(post请求有两个过程,1发送请求headers,2发送请求数据,根据http规范,get请求只会发送一个tcp包).--------这一段话来自yahoo,先不管其真假,我们从另外一个方面来考虑一下为什么最好使用get方式,讲一个ahuaxuan经历过的事情,之前有一个项目的ajax请求使用了post方式,后来发现经常出错,而且抛出了squid的错误,因为我们的网站使用了squid,问题就出在这里了,从http协议上可以了解到,method=post是指把数据提交到服务器上去,那么squid的一个特性是不会缓存post请求(事实上它确实不应该缓存,因为这样会违反http协议中的语义),把ajax请求改成get方式之后,一切恢复如常.
4. 移除重复的js
重复的js导入也有可能导致ie重新加载该脚本.没啥好说的,照做.
5. 避免重定向
有一种经常被网页开发者忽略却往往十分浪费响应时间的跳转现象。这种现象发生在当URL本该有斜杠（/）却被忽略掉时。这时候会返回一个301的状态码,然后浏览器重新发起一次请求.在企业应用里,重定向是我们在企业应用中常用的技术,不过用在网站项目上,您可要小心了,因为普通的重定向其实是server在response header中设置http status=302,浏览器收到之后,判断出是302,会重新发送一个请求,目标地址是前一次返回中指定的地址.在网站项目中如果可以不用重定向就别用吧.如果您做企业应用项目,ok,关系不大,您就放心的”定”吧.
小节,ahuaxuan把减少http请求次数分为了以上5个小点,每个小点之后附加一些实例,大家可以根据这些点来判断自己的项目是否可以有优化的地方.
使用cdn
让内容更靠近用户,这有啥好说呢,原理很简单,就是根据用户浏览器所在机器的ip来判断哪些服务器离用户最近,浏览器会再次去请求这些最近的机器.一般的cdn服务商是通过开发自己的dns server来达到这个目的的.不过这个是通常情况哦,技术实力比较高,或者场景比较特殊的公司会开发自己的cdn.当然不管怎么说,使用cdn肯定可以使页面响应更快(也包括音频,视频,图片,文本文件,等等等等)
减小返回数据的体积
1. 使用gzip压缩返回数据
Gzip压缩所有可能的文件类型是减少文件体积增加用户体验的简单方法。比如本来400k的文件,压缩一下之后只有50k-100k,那么网络的流量就立刻下来了,压缩的代价是服务器端要压缩文件,需要消耗cpu,浏览器需要解压文件,也需要消耗cpu,不过对于现代这么nb的pc,来说,浏览器解压一下数据带来的cpu消耗简直不值一提.所以您就压吧.不过压的时候要小心哦,有的浏览器在特定场景下会出去一些小bug,导致页面不正常.比如ie6在跨域的时候可能会有些小麻烦,把这部分数据的gzip去掉就可以了.
2. 最小化js文件和css文件
压缩js可以使用JSMin或者YUI Compressor,后者同时可以压缩css,这个也没啥好说的,照做吧.
3. 将css和js独立成外部文件
其实这一点也可以看成是区分不变数据和变化数据.很多人喜欢在页面商写很多很多的js和css,这些数据其实都是不会变化的数据,也就是说这些数据也是可以缓存在浏览器上的,通过把它们独立成外部文件,可以把这些数据缓存起来.这样做看上去是增加的请求的次数,但是由于第一次请求之后该部分数据已经被缓存,所以第二次就无需再请求后端,减少了网络带宽的开销.
优化Cookie
1. 减小cookie体积
能不放就别放吧,为啥呀,cookie就象钥匙串,只有出门和回家得时候才用,但是一整天你都要带在身上,麻烦不.
2. 合理设置Cookie域
由于二级域名可以拿到一级域名得cookie,那么如果,而二级域名之间确不能相互共享cookie,所以合理得设置cookie得域名也可以避免无必要得带宽浪费和响应速度得增加.
3. 设置合理的cookie过期时间
该过期就过期,不要让不必要的数据一直带在身上走来走去.
4. 使用域分离
为图片或者其他静态资源文件使用子域或者建立新的独立域名(申请新的域名),避免无必要的cookie传输,当然也是要在有必要得情况下,图片类网站肯定有必要,javaeye上得图片并没有使用域分离,所以我们得cookie其实会带到坛子得图片服务器上去,每次请求图片都是如此(不过还好,坛子里没有什么图片,所以这方面的浪费不大).
小结,其实cookie上得问题,单词请求看上去也不是什么大问题,好像是无所谓得事情,就那么几十个byte,至于吗,不过大家都听说过水滴石穿,绳锯木断的故事.所以该做的,我们还是要做,正所谓,勿以善小而不为,勿以恶小而为之.
优化浏览器加载
1. 将css放在页面顶部加载
把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会中止内容的有序呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不得不面对一个空白页面。
HTML规范清 楚指出样式表要放包含在页面的<head />区域内：“和<a />不同，<link />只能出现在文档的<head />区域内，尽管它可以多次使用它”。无论是引起白屏还是出现没有样式化的内容都不值得去尝试。最好的方案就是按照HTML规范在文 档<head />内加载你的样式表。
2. 将js放在页面底部加载
脚本带来的问题就是它阻止了页面的平行下载。HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个。如果你的图片放在多个主机名上，你可以在每个并行下载中同时下载2个以上的文件。但是当下载脚本时，浏览器就不会同时下载其它文件了，即便是主机名不相同。
Js放在底部加载其实并不影响浏览器展示页面,除非用户会在js加载完成之前就调用某个js方法,比如说页面刚展现到一半,但是恰好这一半里有一部分是调用了还未下载的js,这个时候就会出问题了,如果童子们遇到这种情况,可以把这部分js先加载.
总结一下下:以上这些优化点其实只是前端优化的部分内容,不过根据80/20原则,这些优化点已经覆盖了80%的情况了,同时前端优化其实也不是什么复杂的东西,原理上是很简单的,更多的是需要我们的实践,因为我们可能会碰到各种各样的问题,而很多的这些问题其实一般是预测不到的.只有遇到过才知道.
说的不对的地方请大家拍砖,或者童子们也可以把自己的经验在这里和大家分享一下.代表其他童子表示十分的感谢.
当然,由于ahuaxuan水平有限,文章中难免有不到之处,还望不吝指正,谢谢.
[/size]
*作者：张荣华
*日期：2008-12-01
**/
乘着第3届d2论坛的顺利结束的秋风,我也来分享一下自己在前端优化方面的一些些小经验,其实这些经验本身都是来自yahoo的优化原则,不过经过ahuaxuan自身的实践和再次的思考,把原来的原则都进行了分组和分析.不过由于ahuaxuan涉及到的东西有限,并没有经历过全部的优化点,所以只把自己做过的拿出来和大家讨论讨论,其中不免加入自己一些观点,希望大家指正.
先说说目标,前端优化的目标是什么,一个字:快.两个字:更快.那么下面我们来看看慢的网页将会给我们带来什么:
1. 慢的页面可能会网站失去更多的用户.
2. 慢500ms意味着20%的用户将放弃访问(google)
3. 慢100ms意味着1%的用户将放弃交易(amazon)
4. 慢 ???ms意味着??%的用户将放弃xx(your site)
所以我们的目标很明确,就是要网页展现的速度更快.
经过ahuaxuan的实践和总结,其实要让网页展现更快只需要注意几个大的方面,下面会一一描述这几个大的方面.
[size=medium]1减少http请求,我把它排在了第一点,为啥要在第一点呢,很简单,因为它最重要.
如何做呢.让ahuaxuan带着大家分析一下这个问题.从何处着手呢.ahuaxuan大声疾呼,我们要从数据开始.ok,一般来说,我们从变化性上把数据分成两种类型,变和不变.那么不变的数据可以缓存,变化的数据不能缓存,这是一个常识,也就是说要减少我们的http请求次数这个目标可以转换成把数据分为变化和不变化两个部分.不变化的数据不需要再次请求,这样http请求的次数就减少了,下面我们分点来描述将数据分类的途径.
1. 合并脚本文件
包括脚本,样式和图片,可以有选择的把一些Js和css可以合并成一个文件,一些图片可以使用css sprites技术.这样做的原因是什么?做过web开发的人都知道,js和css基本是不变的,是静态文件,图片亦然.那么不变的文件如果适当的合并在一起,会有什么效果呢?请求的次数从多次变成了一次.这样http请求的次数就减少了.当时合并之后,文件体积变大了,会影响速度吗?答:肯定会啊,不过这里是需要权衡的,比如我100份静态文件,合并成10份还是合并成1份这就得看你得具体情况了.
2. 指定Expires或者Cache-Control,
对于静态内容：设置文件头过期时间Expires的值为“Never expire”（永不过期）
动态页面,在代码中添加cache-control,表示多少时间之后过期,如:
response.setHeader("Cache-Control", "max-age=3600");
如果使用了Expires文件头，当页面内容改变时就必须改变内容的文件名。通常是在文件内容后加版本号
这一点是大多数人都忽略得,之前很多人在坛子上发布自己得小系统,还有demo,ahuaxuan跑过去一看,my god,一堆又一堆得js,css,既没有恰当得合并,也没有设置过期时间.每次刷新页面都要重新下载这一堆又一堆的js,css.http请求那叫一个多啊.无谓了流量就这样产生了.
这一点在企业应用的系统中也时有发生.比如我们使用extjs作为前端的技术,400多k啊,每打开一个页面都导入,下载这个js,够无聊的.那么童子们可能就要问了,静态文件为啥不用apache,lighttpd等呢,答,用了又怎么样,不设expire或者max-age不是一样要下载,最好的方法是写一个filter,再filter中判断,如果url满足一定的条件(比如符合配置文件中的正则表达式),那么就设置一个max-age,这样就ok,太简单了,几行代码就可以搞定.快哉.
3. 缓存Ajax请求
缓存的方法同动态页面,ajax请求需要使用get方式,url长度为2k(ie)限制(post请求有两个过程,1发送请求headers,2发送请求数据,根据http规范,get请求只会发送一个tcp包).--------这一段话来自yahoo,先不管其真假,我们从另外一个方面来考虑一下为什么最好使用get方式,讲一个ahuaxuan经历过的事情,之前有一个项目的ajax请求使用了post方式,后来发现经常出错,而且抛出了squid的错误,因为我们的网站使用了squid,问题就出在这里了,从http协议上可以了解到,method=post是指把数据提交到服务器上去,那么squid的一个特性是不会缓存post请求(事实上它确实不应该缓存,因为这样会违反http协议中的语义),把ajax请求改成get方式之后,一切恢复如常.
4. 移除重复的js
重复的js导入也有可能导致ie重新加载该脚本.没啥好说的,照做.
5. 避免重定向
有一种经常被网页开发者忽略却往往十分浪费响应时间的跳转现象。这种现象发生在当URL本该有斜杠（/）却被忽略掉时。这时候会返回一个301的状态码,然后浏览器重新发起一次请求.在企业应用里,重定向是我们在企业应用中常用的技术,不过用在网站项目上,您可要小心了,因为普通的重定向其实是server在response header中设置http status=302,浏览器收到之后,判断出是302,会重新发送一个请求,目标地址是前一次返回中指定的地址.在网站项目中如果可以不用重定向就别用吧.如果您做企业应用项目,ok,关系不大,您就放心的”定”吧.
小节,ahuaxuan把减少http请求次数分为了以上5个小点,每个小点之后附加一些实例,大家可以根据这些点来判断自己的项目是否可以有优化的地方.
使用cdn
让内容更靠近用户,这有啥好说呢,原理很简单,就是根据用户浏览器所在机器的ip来判断哪些服务器离用户最近,浏览器会再次去请求这些最近的机器.一般的cdn服务商是通过开发自己的dns server来达到这个目的的.不过这个是通常情况哦,技术实力比较高,或者场景比较特殊的公司会开发自己的cdn.当然不管怎么说,使用cdn肯定可以使页面响应更快(也包括音频,视频,图片,文本文件,等等等等)
减小返回数据的体积
1. 使用gzip压缩返回数据
Gzip压缩所有可能的文件类型是减少文件体积增加用户体验的简单方法。比如本来400k的文件,压缩一下之后只有50k-100k,那么网络的流量就立刻下来了,压缩的代价是服务器端要压缩文件,需要消耗cpu,浏览器需要解压文件,也需要消耗cpu,不过对于现代这么nb的pc,来说,浏览器解压一下数据带来的cpu消耗简直不值一提.所以您就压吧.不过压的时候要小心哦,有的浏览器在特定场景下会出去一些小bug,导致页面不正常.比如ie6在跨域的时候可能会有些小麻烦,把这部分数据的gzip去掉就可以了.
2. 最小化js文件和css文件
压缩js可以使用JSMin或者YUI Compressor,后者同时可以压缩css,这个也没啥好说的,照做吧.
3. 将css和js独立成外部文件
其实这一点也可以看成是区分不变数据和变化数据.很多人喜欢在页面商写很多很多的js和css,这些数据其实都是不会变化的数据,也就是说这些数据也是可以缓存在浏览器上的,通过把它们独立成外部文件,可以把这些数据缓存起来.这样做看上去是增加的请求的次数,但是由于第一次请求之后该部分数据已经被缓存,所以第二次就无需再请求后端,减少了网络带宽的开销.
优化Cookie
1. 减小cookie体积
能不放就别放吧,为啥呀,cookie就象钥匙串,只有出门和回家得时候才用,但是一整天你都要带在身上,麻烦不.
2. 合理设置Cookie域
由于二级域名可以拿到一级域名得cookie,那么如果,而二级域名之间确不能相互共享cookie,所以合理得设置cookie得域名也可以避免无必要得带宽浪费和响应速度得增加.
3. 设置合理的cookie过期时间
该过期就过期,不要让不必要的数据一直带在身上走来走去.
4. 使用域分离
为图片或者其他静态资源文件使用子域或者建立新的独立域名(申请新的域名),避免无必要的cookie传输,当然也是要在有必要得情况下,图片类网站肯定有必要,javaeye上得图片并没有使用域分离,所以我们得cookie其实会带到坛子得图片服务器上去,每次请求图片都是如此(不过还好,坛子里没有什么图片,所以这方面的浪费不大).
小结,其实cookie上得问题,单词请求看上去也不是什么大问题,好像是无所谓得事情,就那么几十个byte,至于吗,不过大家都听说过水滴石穿,绳锯木断的故事.所以该做的,我们还是要做,正所谓,勿以善小而不为,勿以恶小而为之.
优化浏览器加载
1. 将css放在页面顶部加载
把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会中止内容的有序呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不得不面对一个空白页面。
HTML规范清 楚指出样式表要放包含在页面的<head />区域内：“和<a />不同，<link />只能出现在文档的<head />区域内，尽管它可以多次使用它”。无论是引起白屏还是出现没有样式化的内容都不值得去尝试。最好的方案就是按照HTML规范在文 档<head />内加载你的样式表。
2. 将js放在页面底部加载
脚本带来的问题就是它阻止了页面的平行下载。HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个。如果你的图片放在多个主机名上，你可以在每个并行下载中同时下载2个以上的文件。但是当下载脚本时，浏览器就不会同时下载其它文件了，即便是主机名不相同。
Js放在底部加载其实并不影响浏览器展示页面,除非用户会在js加载完成之前就调用某个js方法,比如说页面刚展现到一半,但是恰好这一半里有一部分是调用了还未下载的js,这个时候就会出问题了,如果童子们遇到这种情况,可以把这部分js先加载.
总结一下下:以上这些优化点其实只是前端优化的部分内容,不过根据80/20原则,这些优化点已经覆盖了80%的情况了,同时前端优化其实也不是什么复杂的东西,原理上是很简单的,更多的是需要我们的实践,因为我们可能会碰到各种各样的问题,而很多的这些问题其实一般是预测不到的.只有遇到过才知道.
说的不对的地方请大家拍砖,或者童子们也可以把自己的经验在这里和大家分享一下.代表其他童子表示十分的感谢.
当然,由于ahuaxuan水平有限,文章中难免有不到之处,还望不吝指正,谢谢.
[/size]
22 楼
kevyu
2008-12-27
《high performance web site》这本书有更详细的讲解，yahoo的性能专家写的。
21 楼
ahuaxuan
2008-12-15
to 唯快不破:
cache-control和expires不需要同时设置,有一个就可以了.expires头是指定到某个时间点过期,二cache-control是指过一个时间段之后过期.
另:
你对版本号的理解是正确的,这样你的页面就重新的引用了这份新文件了.
cache-control和expires不需要同时设置,有一个就可以了.expires头是指定到某个时间点过期,二cache-control是指过一个时间段之后过期.
另:
你对版本号的理解是正确的,这样你的页面就重新的引用了这份新文件了.
20 楼
唯快不破
2008-12-15
请问博主，Expires头和Cache-Control头是否有必要同时设置？我看了《高性能网站建设指南》的样章，它上面写Cache-Control具有优先权，且max-age指令将重写Expires头。给我的感觉就是只要用户使用的是支持http1.1的浏览器如ie6、ff2，只需要设置Cache-Control头。
另外
博主这句话是否是指在文件名后加版本号？如myeclipse7.0.jpg
另外
引用
如果使用了Expires文件头，当页面内容改变时就必须改变内容的文件名。通常是在文件内容后加版本号
博主这句话是否是指在文件名后加版本号？如myeclipse7.0.jpg
19 楼
yukaizhao
2008-12-11
<p>我做了个css背景图合并工具，可以方便的优化背景图</p>
<p><a href='http://yukaizhao.iteye.com/blog/290538'>http://yukaizhao.iteye.com/blog/290538</a></p>
<p><a href='http://yukaizhao.iteye.com/blog/290538'>http://yukaizhao.iteye.com/blog/290538</a></p>
18 楼
jsnjlc
2008-12-08
呵呵,优化确实不错,但是有点希望各位了解到,很多的优化其实确实都非常的消耗时间,比如将多张图片合并成1张图片来说,需要一个像素一个像素的调整才能达到最好的效果,虽然现在有将多张图片合并成1张的网站,但是其也只能垂直方向的合并,水平方向的合并貌似我没有试出来.因此,更加合理的合并还是需要手工进行.而这些时间都是要算入工期的,当你的开发时间紧张,无法旁顾的时候,只能怎么简单怎么来了.
优化无止境,想从一开始就做好,那需要付出的不仅仅是时间,还有精力.对PM来说,那是最允许发生的事情,因为他们在控制着成本...
优化无止境,想从一开始就做好,那需要付出的不仅仅是时间,还有精力.对PM来说,那是最允许发生的事情,因为他们在控制着成本...
17 楼
bruce
2008-12-04
用 fiddler 可以看看你的web 应用如何, cache? ziped?
16 楼
eason007
2008-12-03
卡拉阿风 写道
点石社区。
点石是做SEO的，他们一般不偏向这个方面。
15 楼
eason007
2008-12-03
《高性能网站建设指南》 我前段时间已经看了，的确不错，就是网上流传很久的什么网站前端优化13条。
里面有提到不要使用etag，前面提这个建议的同学要注意了。
里面有提到不要使用etag，前面提这个建议的同学要注意了。
14 楼
ahuaxuan
2008-12-03
13 楼
dlee
2008-12-03
12 楼
土匪一份子
2008-12-02
总结的不错，目前大多做企业应用，你说的很多前端优化我都没注意。
11 楼
卡拉阿风
2008-12-02
点石社区。
10 楼
ahuaxuan
2008-12-02
cuiyi.crazy 写道
对“使用gzip压缩返回数据”我有疑问想请教：
所有的server端都支持gzip压缩么？所有client端都支持gzip解压么？
另外压缩过程耗时比照流量减少，会有赚么？
所有的server端都支持gzip压缩么？所有client端都支持gzip解压么？
另外压缩过程耗时比照流量减少，会有赚么？
肯定赚啊,现在的pc很强劲的.
卡拉阿风 写道
文章似曾相识。
但和原文还是有出入的。
LZ文章写的也不错。
加上对爬虫的限制。
应用服务器的优化等等。
LZ经常逛点石？
但和原文还是有出入的。
LZ文章写的也不错。
加上对爬虫的限制。
应用服务器的优化等等。
LZ经常逛点石？
点石是什么我都不知道,呵呵,这些东西都是我看了yahoo的文章之后,去实践,然后实践的过程中产生的一些想法和经验,
还有你能否告诉我你说的原文是哪篇文章?我想原文应该是yahoo出的才对
9 楼
卡拉阿风
2008-12-02
文章似曾相识。
但和原文还是有出入的。
LZ文章写的也不错。
加上对爬虫的限制。
应用服务器的优化等等。
LZ经常逛点石？
但和原文还是有出入的。
LZ文章写的也不错。
加上对爬虫的限制。
应用服务器的优化等等。
LZ经常逛点石？
8 楼
cuiyi.crazy
2008-12-02
对“使用gzip压缩返回数据”我有疑问想请教：
所有的server端都支持gzip压缩么？所有client端都支持gzip解压么？
另外压缩过程耗时比照流量减少，会有赚么？
所有的server端都支持gzip压缩么？所有client端都支持gzip解压么？
另外压缩过程耗时比照流量减少，会有赚么？
7 楼
aids198311
2008-12-02
收藏了 很好!谢谢
6 楼
bottom
2008-12-02
试了一下，的确不会再取CSS,js，而是用CACHE里的。俺用的是：
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="0">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
并没有指定MAX-AGE。
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="0">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
并没有指定MAX-AGE。
5 楼
ahuaxuan
2008-12-01
bottom 写道
这是一个全局的控制。通常一个页面里既有动态的，也有静态的内容（如CSS，JS），但因为有动态的，必须使用NO-CACHE。这样就变成连静态的内容也要每次获取。
其实我在最开始就有提到，我们最好把数据分成变化和不变化两种，像页面里的js和css完全可以剥离出去，使其变成不变的数据，这样就可以指定expires值了
bottom 写道
所以，指定Expires或者Cache-Control，只适合纯静态页面。
这个我不能同意哦，因为我之前做的一个东西就是属于动态数据，不过这个动态数据在一段时间内，比如10分钟之内是不变的，那么这10分钟之内用户无需再次发送请求，所以就把这个结果返回的时候指定了max-age。
4 楼
bottom
2008-12-01
对于 2. 指定Expires或者Cache-Control
这是一个全局的控制。通常一个页面里既有动态的，也有静态的内容（如CSS，JS），但因为有动态的，必须使用NO-CACHE。这样就变成连静态的内容也要每次获取。所以，指定Expires或者Cache-Control，只适合纯静态页面。
使用eTag(no change status)应该能减少静态的内容下载。
这是一个全局的控制。通常一个页面里既有动态的，也有静态的内容（如CSS，JS），但因为有动态的，必须使用NO-CACHE。这样就变成连静态的内容也要每次获取。所以，指定Expires或者Cache-Control，只适合纯静态页面。
使用eTag(no change status)应该能减少静态的内容下载。
发表评论
-
从问题看本质: 研究TCP close_wait的内幕
2010-05-01 14:11 41225/* * @author: ahuaxuan * @d ... -
RPC or noRPC,这是个问题
2010-04-01 08:31 7242/** * author:ahuaxuan * ... -
信p2p者，得永生(一)
2009-08-11 10:44 2894开篇 此文章的题目来自于当下的两哥之争，本意有调侃之 ... -
OpenFlashChart2之恶心文档
2009-03-28 23:16 6027N久没有做界面相关的项目了，最近一个核心项目中正好有用到几个图 ... -
lighty的lb问题
2008-03-23 00:00 1756看了galaxystar的帖子之后对lighty有了初步的了解 ... -
java反编译工具推荐
2007-11-09 15:31 5502最近用到jfreechart，之前没有用过，而且也没有比较全面 ... -
4个mysql客户端工具的比较
2007-07-05 13:53 65737mysql是我以前学习和练习所使用的数据， ...
相关推荐
网站Web前端优化主要关注提升网页加载速度、用户体验和性能效率，这一领域对于现代互联网产品至关重要。以下是关于Web前端优化的详细说明： 一、关于Web Web作为一种新媒体，它源自印刷业，但随着互联网的发展，Web...
"前端笔试题面试题汇总+前端优化总结" 前端优化的目的是什么？从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。从服务商角度而言，优化能够减少页面请求数、...
### 大型网站性能优化实战从前端网络CDN到后端大促的全链路性能优化 #### 一、基于用户体验的性能优化要素 在现代互联网应用中，用户体验是衡量一个网站成功与否的重要标准之一。良好的用户体验不仅仅体现在美观的...
另外，前端优化还包括代码压缩和合并，通过压缩JavaScript和CSS文件减小传输大小，合并多个文件以减少HTTP请求。此外，利用懒加载技术，可以按需加载非首屏内容，进一步提高首屏加载速度。利用HTTP/2的多路复用功能...
作为腾讯的Web前端高级工程师，对性能优化有着丰富经验，以下是一些具体的优化技巧： - 精简代码：去除无效和冗余的代码，只保留必要的逻辑。 - 使用Web Workers处理复杂计算：避免JavaScript在主线程中执行大量...
web前端优化方案的知识点包括： ...主要手段包括合并CSS、JS和图片，减少...以上是web前端优化方案的主要知识点，从减少HTTP请求到优化JS代码，涵盖了前端性能优化的多个方面，可以帮助提升网站的加载速度和用户体验。
《大型网站性能优化实战：从前端、网络、CDN到后端、大促的全链路性能优化详解》的初衷就是将实践经验分享给读者，展示性能优化相关知识的全貌。《大型网站性能优化实战：从前端、网络、CDN到后端、大促的全链路性能...
在前端开发领域，性能优化是提升用户体验和网站可访问性的重要环节。这本"前端性能优化原理与实践"小册子深入探讨了如何通过一系列技术手段优化前端页面，旨在帮助开发者构建更快、更流畅的Web应用。以下是该压缩包...
此外，郭碧青也谈到了前端优化在移动端的应用，特别是在手机QQ兴趣部落项目中的实践。因为移动端设备的资源和网络条件通常受限，所以对于性能优化的要求更高。他分享了使用了如React Native和Vue等现代前端框架的...
美团买菜iOS工程师王梓童分享了前端性能优化的实践经验，包括性能优化思路、措施和未来规划。 一、前端页面加载性能优化思路 前端页面加载性能优化的思路包括多个方面： 1. 首屏优化：首屏时间是用户体验的关键...
### 前端优化的几种方法 随着互联网技术的发展与用户需求的日益增长，前端页面的性能优化成为了提高用户体验、降低服务器压力的关键因素之一。本文将详细介绍几种主流的前端优化方法，包括但不限于优化图片资源、...
前端性能优化是指通过对网站或Web应用的前端部分进行改进，以提升用户体验的过程。优秀的前端性能优化能够显著提高网页加载速度、减少资源消耗、增强用户交互体验，进而提升整体的业务表现。本指南将深入探讨几个...
通过深入研究这个“前端网站实例100套源码”的资源，无论是初学者还是有经验的开发者，都能从中汲取到宝贵的知识和实践经验，提升自己的前端技能。每个案例都是一个活生生的教程，通过实际动手操作，可以更好地理解...
通过这样的学习路径，你不仅可以创建出美观且功能齐全的政府网站前端页面，还能深入理解网页开发的原理，为未来的项目打下坚实基础。在实践中，还可以参考其他优秀的政府网站，分析其设计特点，吸取其中的精华，以...
Web前端、模块化、组件开发、性能优化 随着互联网技术的发展，人们越来越习惯通过网络获取信息，在线学习平台 也因此应运而生。同时，人们对于网站的易用性和交互体验的要求也越来越高， 设计良好、性能优良的网站...
【企业网站前端代码】是指构建企业官方网站所使用的...以上是关于“企业网站前端代码”涉及的关键知识点，涵盖了从网页结构、样式到交互、性能优化等多个方面，是构建一个专业且用户体验良好的企业官网所必需的技术栈。