Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo
2011彩票首页开发实践栋寒www.cnblogs.com/zhenn栋寒
2011彩票首页开发实践
2011彩票首页开发实践
典型的两列结构float:leftfloat:right栋寒
Dom解析顺序自 上 而 下
在一段时间内用户所看到的页面等待渲染…
卧 槽 , 好 慢
无法改变用户的带宽环境What we can do?
优化策略:破坏规整的dom结构
使用定位来实现UI设计
优化显示次序损坏的html:焦点图右侧彩种导航焦点图数字彩快速投注开奖公告(左上)广告排行榜工具列表(左下)广告彩票攻略足篮彩快速投注推荐合买彩票资讯
32145                     1024*768浏览器首屏参考线861440*900浏览器首屏参考线79
So:至上而下的逐次展现方式假装很快
2011彩票首页开发实践
功能颗粒化
Why do like this
更加适合团队开发
易维护性
便于做按需加载e.g.点击触发异步请求Async()载入html文档加载js逻辑文件
Full code插入html代码加载js模块并执行回调
弊端:太多的http请求?
Combo利器
基于yui3的实现
合并use进一步减少请求数
2011彩票首页开发实践
Fast by default
提 高 页 面 速 度 ?
用户最关注的速度资源文件加载所耗时间
浏览器渲染时间资源文件加载所耗时间
浏览器渲染时间减少http请求数通过combo合并js、css请求
延时加载图片、非展示不加载
地球人都知道的css sprite技术延时加载图片延时加载的图片对象
压缩http请求收发数据量减小html文档的大小
异步加载js模块
minify css、js
保证质量前提下,压缩图片
Gzip(deflate),服务器配置资源文件加载所耗时间
浏览器渲染时间精简dom节点数避免冗余的html标签
适时做延时渲染和异步加载
让用户的浏览器视口决定页面首次加载时的dom节点数前后端交互:缓解前端渲染压力并分隔后端的处理时间,缺点在于前端发生交互事件时,等待时间稍长异步加载 VS延时渲染纯前端交互:交互效率较高,等待时间短,缺点在于页面首次加载时,要把后端查询的数据全部push到前端,增加服务器负担
Js执行效率数据访问
算法和流程控制
dom操作
......了解更多请参考此书
电子版下载Ref:http://ishare.iask.sina.com.cn/f/8344965.html
较之老版首页扔掉cubbe
应用yui3.3.0,减小对domready的依赖
合理的注册事件Avialable而非DomReady,更及时的展现页面交互结果?
yslow
Pagespeed
我们不过分依赖于yslow、pagespeed
我们更愿意相信真实的数据

More Related Content

2011彩票首页开发实践