页面优化参考.pptVIP

* 用户第一次访问页面 cache为空 -》200 用户随后访问其他页面，如果有相同的资源文件，expire? Has been modifed? 当用户刷新，expire失效， Has been modifed? 当用户强制刷新，清空浏览器缓存，重新下载资源。 * * 减少http请求数可以简单理解为减少页面中的资源数 * 这个和我们的认识有矛盾，因为以前的经验是一张大图应该切成几个小图，这样下载速度能够更快一些。 其实这样的认识是错误的。 把一张大图切成小图，是在当时宽带远未普及的网络条件下，可以提高用户的浏览体验，但是并不能减少图片的下载时间。 现在网络条件有了很大的改善，下载图片的速度有了提高，但网络链接时间并没有得到缩短而是变得更长了，因为网络环境越来越复杂。 这是建立链接的时间反而成了我们应该首先考虑的因素，尤其对那些本身就比较小的图片。 * 没有CDN，网络不可想象。 80% 垃圾无用的信息流。 * 当html文档下载完毕以后，浏览器就开始对它解析和下载相关的资源的文件，一边解析一边开始渲染。 * Blank White Screen 和Flash of Unstyled Content IE会出现白屏的现象 FF和Opera会出现闪屏现象 * Blank White Screen 和Flash of Unstyled Content IE会出现白屏的现象 FF和Opera会出现闪屏现象 * Blank White Screen 和Flash of Unstyled Content IE会出现白屏的现象 FF和Opera会出现闪屏现象 * Blank White Screen 和Flash of Unstyled Content IE会出现白屏的现象 FF和Opera会出现闪屏现象 * 浏览者对网站的耐心只有8秒钟 * 浏览者对网站的耐心只有8秒钟 * 1.学会去控制 第一个屏肯定是使用DIV布局了，其他频道首页也要使用DIV，宁愿第一版的工期长一起，也要减轻后续的维护工作。 2. 有害的需求会浪费公司有限的人力时间成本 有害的需求主要有两方面 一个是无意义的需求，比如说滚动新闻需要淡入淡出的延时效果-》marquee 一个是损害可维护性的需求，比如要求CMS增加各种功能的需求 3.内容部分始终是强势的一份 损害可维护性的需求，坚决抵制 * * * * * 前面提到了图片映射可以加速下载,但是在维护性方面很差,所以尽量不要使用. 页面优化参考 凤凰网技术中心 技术支持部 页面优化的对象 搜索引擎 浏览用户 编辑 开发人员 一、搜索引擎 使用语义化标签进行编码 ul div liaa/li libb/li /div /ul ph1cc/h1/p 一、搜索引擎 div class=“breakingNews” h1恐怖袭击/h1 p……/p /div div class=“breakingNews” div class=“head”恐怖袭击/div div class=“content”……/div /div 二、浏览用户 三、前端工作的重要性 占据了80%的响应时间 实施简单易行 比程序开发需要更多的努力 四、HTTP概述 四、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和主页面分离(*) 图像映射 CSS Sprites 避免跳转 /test --/test/ Window.location.href= …; meta http-equiv=refresh content=0;URL= / Server.Transfer(…); Response.Redirect(…); (二)缩短HTTP请求时间 使用CDN Gzip压缩 减