页面重构技能-内容篇

所属分类: 网页制作 / 应用技巧 阅读数: 1242
收藏 0 赞 0 分享

少叙闲言
结合网上大量关于Yahoo的高性能网站构建的黄金守则,说下自己眼中的守则。
守则分为7大类34条,包括内容、服务器、cookie、CSS、Javascript、图片、移动应用。

1、尽量减少HTTP请求
当用户载入你的页面时候,有80%的时间是用来下载页面里各个项目,包括图片、样式、脚本、FLash等。所以减少HTTP请求就可以提高响应速度。例如:baidu、google,就一个条条在那里......
像大家都知道的合并文件,CSS Sprite等,我想说的是:并不是一味的追求减少请求,而是要权衡这么做之后,对于其他因素的影响。
合并文件:耦合大,无法一眼辨别各个功能模块。
CSS Sprite:大量整合的图片对于改版这样的维护,难度会几何增长。
      另外超大的整合图片下载完之前,用到它的地方都会不显示。


2、减少DNS查找次数
每一个独立域名都会有一个对应的IP地址,也就是说,当你输入www.baidu.com时候,服务器不会知道你要找的是“baidu”,而是解析成对应的IP地址,然后再访问。类似你查找电话本一样,这个解析的过程,浏览器就在那傻等着,一般会花费20到120毫秒时间。
DNS查找次数也就是你下载CSS、JS、图片等所访问的不同域名的总数,包括子域名。和主域名不同的外域名会消耗更多的时间。
解决办法:CSS去解决一些图片样式,及JS动画(CSS3的NB地方)。
     将可移植的外域资源放在子域名下。


3、避免跳转
跳转是使用301和302代码实现的,例如下面的HTTP请求头中:
   HTTP/1.1 301 Moved Permanently
      Location: http://example.com/newuri
      Content-Type: text/html
浏览器会把用户指向到Location中指定的URL下,其中如需缓存需要指定Expires或Cache-Control
虽然JS可以实现跳转,但是为了保证后退按钮好使,还是老实用3XX状态码这种方式。
这一部分好像对纯前端没啥关系或是接触不太多,但是为了成长成真正NB的前端,早晚这些都得掌握。

4、可缓存AJAX
缓存对于用户来说的意义大家都懂的,所以ajax里必然少不了缓存的功能。
但我想说的是要根据需求来确定是否缓存。
其中IE自动添加缓存,而chrome却不是。
下面罗列一下常用清除缓存的办法:
    在服务器端header("Cache-Control:no-cache,must-revalidate");
    在ajax发送请求前加上xmlhttpObj.setRequestHeader("If-Modified-Since","0");
    在ajax发送请求前加上xmlhttpObj.setRequestHeader("Cache-Control","no-cache");
    再ajax的URL参数后面加上?t="Math.random()";

5、推迟加载内容
网页的表现和行为要分开,先表现,后行为。所以,第一要务是迅速将页面呈现出来,然后一些必要的功能交互,再然后是一些动画或是提升体验的花哨效果。

6、预加载
预加载的目标:利用异步或是浏览器空闲时间,加载即将使用到的内容,达到迅速响应用户操作的目的。
例如:
页游中,空闲时间加载下一场景的所需图片。
页面中的JS,利用img对象预加载js,然后按需执行。

7、减少DOM元素个数
一个复杂的页面意味着需要下载更多数据,同时也意味着JavaScript遍历DOM的效率越慢。
解决办法:深入理解各个标签的语义,减少为了布局而大量罗列的DIV。

8、根据域名划分页面内容
一个页面加载的时候会下载很多外部资源,例如CSS、JS、IMG等,然而把他们或按分类,分布在不同的子域名下会提高DNS并行的下载效率。
因为浏览器所允许的最多连接数和每个服务器所允许的最大连接数是有一定限制的

9、避免404
HTTP的消耗是巨大,让它来请求一个响应一个404是完全没有必要的。
例外,对站点的SEO也不利,有些网站的rabots.txt即使没有限制,也应该上传一个空文件,如果没有,会让引擎爬虫记录下你站点的一个404,从而降低你站点的权重。

更多精彩内容其他人还在看

sitemesh教程-页面装饰技术原理及应用

Sitemesh是一种页面装饰技术:它通过过滤器(filter)来拦截页面访问,据被访问页面的URL找到合适的装饰模板等等,感兴趣的朋友可以了解下哦
收藏 0 赞 0 分享

浏览器可以注册的事件小结

我们在网页制作中经常会用到浏览器事件,这里简单的整理下方便需要的朋友
收藏 0 赞 0 分享

从image/x-png谈ContentType(s)

今天在做一个文件上传的功能的时候,发现我总是上传不了png的图片。经过调试发现,应该是在ContentType的地方判断失误了。后来百度了一下发现一个有意思的现象,我发现png的图片的ContentType并不是我在注册表中看到的image/png,而是image/x-png
收藏 0 赞 0 分享

窗口中的各种距离/滚动距离的精确计算汇总

平时在项目开发中,没少跟边距,位置,坐标什么的打交道,悲剧的是,如果你对这些东西没有非常清晰的概念,编码的时候会非常痛苦,到处找资料寻求距离的精确计算,接下来本文提供一个示意他,希望对你有帮助
收藏 0 赞 0 分享

web的各种前端打印方法之CSS控制网页打印样式

使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人说导入这个样式,还傻乎乎的不知所措,接下来介绍CSS控制网页打印样式是如何实现的
收藏 0 赞 0 分享

响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

现在移动设备越来越普及,用户使用智能手机、pad上网页越来越普遍,但是传统的fix型的页面在移动终端上无法很好的显示。因此,Ethan Marcotte提出一种响应式web设计的概念,响应式web设计的英文为Responsive Web Design,简写为RWD,感兴趣的朋友可
收藏 0 赞 0 分享

响应式WEB设计学习(2)—视频能够做成响应式吗

除了图片以外,还有一种常见的多媒体形式是视频。有时在web设计中,根据需要会在页面中加入视频,视频大小的自适应单靠CSS本身似乎是做不到的,感兴趣的朋友可以详细了解下
收藏 0 赞 0 分享

响应式WEB设计学习(3)—如何改善移动设备网页的性能

究竟是网页中的何种元素拉低了网页在移动设备中加载的速度呢?这些元素应该做何处理以提升页面在移动设备中的整体性能?是否存在一种设计模式可以同时满足移动端及桌面端的页面设计呢?带着这些疑问开始本文之旅吧
收藏 0 赞 0 分享

网页设计必备手册 216网页安全色大全

网页安全色是指在不同硬件环境、不同操作系统和不同浏览器中都能够正常显示的颜色集合(调色板或者色谱),也就是说这些颜色在任何终端用户的显示设备上都是相同的效果
收藏 0 赞 0 分享

网页设计中设计出有层次感的界面的经验介绍

很多网友常说自己的网站为什么色彩上总是有问题,总是看起来没什么精神,没办法吸引人注意。观察了一些网友们设计的网站发现他们在用色上不够大胆,同时也缺乏对色彩层次的理解。
收藏 0 赞 0 分享
查看更多