页面优化参考

页面优化参考 凤凰网技术中心技术支持部

页面优化的对象 • 搜索引擎 • 浏览用户 • 编辑 • 开发人员

一、搜索引擎 使用语义化标签进行编码 <ul> <div> <li>aa</li> <li>bb</li> </div> </ul> <p><h1>cc</h1></p>

一、搜索引擎 <div class=“breakingNews”> <h1>恐怖袭击</h1> <p>……</p> </div> ----------------------------------------- <div class=“breakingNews”> <div class=“head”>恐怖袭击</div> <div class=“content”>……</div> </div>

二、浏览用户

三、前端工作的重要性 • 占据了80%的响应时间 • 实施简单易行 • 比程序开发需要更多的努力

四、HTTP概述

五、优化网页加载速度的建议 • Make Fewer HTTP Requests • Use a Content Delivery Network • Add an Expires Header • Gzip Components • Put CSS at the Top • Move Scripts 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和主页面分离(*)

(二)缩短HTTP请求时间 • 使用CDN • Gzip压缩 • 减少DNS查询 • 压缩Javascript和CSS文件

(三)缩短页面渲染时间 • 将CSS置顶 • 将Javascript置底 • 避免CSS表达式(CSS Expression)

六、优化首屏加载速度 • 设计规格1000*600 • 为什么重要？

六、优化首屏加载速度 • 减少图片的数量 • Image Map • CSS Sprites • 降低HTML布局的复杂性 • 设计方面 • 页面制作方面基本要保证布局能够横向切断 • 减少或延迟脚本的下载和执行

编辑和开发人员 提高可维护性，易于协同开发和维护。实际操作上来讲，和面向搜索引擎页面优化一样，就是使用语义化标签进行编码。

困难 • 需求变化太快 • 有害的需求 • 坚持还是放弃

总结 • 首屏设计1000*600 • 使用CSS Sprites处理装饰图片 • CSS置顶，Javascript置底 • CSS和JS定义使用区块化编码 • 首页与列表页、单页中CSS的不同处理方式 • 减少页面中资源文件的数量

The End 参考书目：《High Performance Web Sites》

页面优化参考

页面优化参考

Presentation Transcript