Linux系统运维:http://www.linuxyw.com,QQ交流群:244914685

Linux系统运维

当前位置: 主页 > 架构 >

前端速度优化及案例

时间:2013-04-20 15:47来源:www.itkoala.com 作者:itkoala 点击:
这里所说的前端泛指Web前端,也就是在Web应用中用户可以看得见碰得着的东西,包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现,同时也包含前端研发工程师、运营编辑等

转载请注明出处: Linux系统运维 http://www.linuxyw.com/linux/jiagou/20130420/66.html


这里所说的前端泛指Web前端,也就是在Web应用中用户可以看得见碰得着的东西,包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现,同时也包含前端研发工程师、运营编辑等角色生产的所有网页内容。任何一个优化项目,前期网络层、系统层优化是立竿见影的,因为这两层做一个优化,整个产品都会受益,而且是一劳永逸。中后期主要优化工作在前端和内容,涉及页面和人多而且不断在迭代更新。接合个人的经验,将主要的前端优化实践汇总如下:
 

前端优化项 优化说明 备注
首屏优先优化 1、用户访问网页的第一感知和关注点在网页第一屏,即首屏,首屏可以优化到0.5-2秒,几乎立刻可见和可点击,大大提升了用户体验。
2、最快速度显示页面的首屏内容,可以给用户明显的感知体验,首屏优化是前端优化之首。
建议任何产品以首屏优化做为切入口,首屏优化目标是<2s
减少Http请求次数和页面大小,避免重定向和404 1、在页面中图片、css、script、flash等元素都会增加http的请求数,减少这些元素的数量就能减少响应时间。
2、合并文件:把多个JS、CSS文件尽可能的合并到一个文件里,使用图片优化及拼合技术(Css sprites)。
3、避免重定向和404,跳转会拖延页面中所有元素的显示,因为在HTML文件被加载前任何文件都不会被下载,404多一个无用的请求,多一个请求的消耗。
网页元素过多,在百度、腾讯参与的优化项目中,这个问题是100%命中的
适当使用多域名增加并行下载 1、在一般情况下返回给定域名对应的IP地址会花费20到120毫秒的时间。而且在这个过程中浏览器什么都不会做直到DNS查找完毕。
2、浏览器效率受自身并发(各浏览器及版本并发各不相同)及keep-alive影响,可根据产品类型及元素数量适当使用2~3个非主域域名来增加浏览器并行加载
域名的数量与域名解析时间需要平衡,通常网页元素越多大,域名的拆分收益越大
把脚本置于页面底部 1、因为防止script脚本的执行阻塞页面的下载。在页面loading的过程中,当浏览器读到js执行语句的时候一定会把它全部解释完毕后在会接下来读下面的内容。
2、脚本会阻塞并行下载数量。浏览器可以并行加载,但是当脚本文件下载时,浏览器不会启动其他的并行下载。
JS是公认的网页性能杀手,数量、大小越小越好,逻辑越简单越好
延迟加载,预加载 1、延迟加载简单的说就是最先加载必须的组件进行页面初始化,然后再加载其他内容。
2、预加载是在浏览器空闲时请求将来可能会用到的页面内容(如图像、样式表和脚本)。使用这种方法,当用户要访问下一个页面时,页面中的内容大部分已经加载到缓存中了,因此可以大大改善访问速度。
与首屏优化原则一致,让用户尽可能快的看到有价值的网络内容
coockie隔离 HTTP Cookie可以用于权限验证和个性化身份等多种用途。 Cookie在服务器及浏览器之间的通过HTTP文件头进行交换。因此去掉不必要的Cookie、保持Cookie尽可能的小、设置合理的过期时间,能够很好的提高效率,以减少用户的响应时间,尽可能保持图片等静态应用不带Cookie。 收益与网站规模成正比,规模越大,网页内容越多,收益就越大

主要前端优化案例分享如下:

1、首屏优化案例,腾讯网首屏优化,布局块的大小控制在首屏以内,将拖延时间的内容放到首屏后执行或加载,首屏速度由原来3.5s提速到1.5s左右,基本做到输入网扯,立即可见。(数据来自腾讯网JS监测)

2、延时加载案例,腾讯网体育频道首页优化,将7屏的首页,最后面4屏进行滚动延时加载,只有当用户下拉的时候才加载,优化之后整页速度提升20%-40%,节省该页面内50%的图片下载量。(数据来自腾讯网JS监测)

3、coockie隔离,以前腾讯网所有的网页元素都使用qq.com域名,每个请求都带了cookie。量比较多,大小有500-2K,采用非qq.com域名的图片和素材服务器(gtimg.com),可以有效地隔离cookie,素材服务器延时由原来的0.46秒降到0.35秒,速度提升24%,上行流量减少20%。
 

Cookie Size Time Delta
0 bytes 78 ms 0 ms
500 bytes 79 ms +1 ms
1000 bytes 94 ms +16 ms
1500 bytes 109 ms +31 ms
2000 bytes 125 ms +47 ms
2500 bytes 141 ms +63 ms
3000 bytes 156 ms +78 ms

本文来自linux系统运维http://www.linuxyw.com/linux/jiagou/20130420/66.html

顶一下
(0)
0%
踩一下
(0)
0%
分享按钮
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片