《页面优化参考.ppt》由会员分享，可在线阅读，更多相关《页面优化参考.ppt（26页珍藏版）》请在三一文库上搜索。
1、页面优化参考,凤凰网技术中心 技术支持部,页面优化的对象,搜索引擎 浏览用户 编辑 开发人员,一、搜索引擎,使用语义化标签进行编码 aa bb cc,一、搜索引擎, 恐怖袭击 - 恐怖袭击 ,二、浏览用户,三、前端工作的重要性,占据了80%的响应时间 实施简单易行 比程序开发需要更多的努力,四、HTTP概述,四、HTTP概述,五、优化网页加载速度的建议,Make Fewer HTTP Requests Use a Content Delivery Network Add an Expires Header Gzip Components Put CSS at the Top Move Scri
2、pts to the Bottom Avoid CSS Expressions Make JavaScript and CSS External Reduce DNS Lookups Minify JavaScript Avoid Redirects Remove Duplicate Scripts Configure ETags Make Ajax Cacheable,(一)减少HTTP请求数,图像映射 CSS Sprites 增加过期时间 避免跳转 删除重复的脚本 Ajax缓存 Javascript、CSS和主页面分离(*),图像映射,CSS Sprites,避免跳转,http:/ htt
3、p:/ Window.location.href= “; Server.Transfer(“); Response.Redirect(“);,(二)缩短HTTP请求时间,使用CDN Gzip压缩 减少DNS查询 压缩Javascript和CSS文件,(三)缩短页面渲染时间,将CSS置顶 将Javascript置底 避免CSS表达式(CSS Expression),将CSS置顶,原因：Blank White Screen和Flash of Unstyled Content 凤凰网 import url(basic.css); ,将Javascript置底,原因：Javascript阻止并行下载
4、1.不要求实时效果的脚本，加到页面的最底部，并在window.onload事件中执行； 2.要求实时效果的脚本，在需要的时候才下载执行。 例子,将Javascript置底,避免CSS表达式(CSS Expression),.tplidxstyle filter:alpha(opacity=20); position: absolute; width:expression(parentElement.offsetWidth1024?300:parentElement.offsetWidth); height:expression(parentElement.offsetHeight); ,六、优
5、化首屏加载速度,设计规格1000*600 为什么重要？,六、优化首屏加载速度,减少图片的数量 Image Map CSS Sprites 降低HTML布局的复杂性 设计方面 页面制作方面 基本要保证布局能够横向切断 减少或延迟脚本的下载和执行,编辑和开发人员,提高可维护性，易于协同开发和维护。 实际操作上来讲，和面向搜索引擎页面优化一样，就是使用语义化标签进行编码。,困难,需求变化太快 有害的需求 坚持还是放弃,总结,首屏设计1000*600 使用CSS Sprites处理装饰图片 CSS置顶，Javascript置底 CSS和JS定义使用区块化编码 首页与列表页、单页中CSS的不同处理方式 减少页面中资源文件的数量,The End,参考书目： High Performance Web Sites,