规则1-减少HTTP请求

请求网页时只有10%-20%的最终用户响应时间花在接收请求的HTMl文档上,剩下的80%-90%时间花在为HTML文档所引用的所有组建(图片,脚本,样式表,Flash等)进行的HTTP请求上,因此改善响应时间的最简单途径就是减少组件的数量,并由此减少HTTP请求数量。

图片地图:我们可以将多个图片完成的功能,使用一个图片,根据的不同区域来响应不应的请求。

合并脚本和样式表:每个文件都会导致一个HTP请求,尽量将css和js合并到一个文件中。

规则2-使用内容发布网络

在多个地理位置不同的服务器上部署内容,如果web服务器离拥护更近,则一个http请求的响应时间将缩短,如果组件web服务器离拥护更近,则多个http请求的响应时间将缩短。有很多公司提供CDN(内容发布网络)服务。CDN用于发布静态内容,如图片,脚本,样式表和Flash。

规则3-添加Expires

使用Expires来设置浏览器缓存,指到指定的时间为止一直访问缓存中的内容。另外在http1.1中引入了cache-control头来克服Expires头的限制,因为Expires头使用一个特定时间,它要求服务器和客户端的时钟严格同步,过期时间需要经常检查,并且一旦未来这一天到来了,还需要在服务器配置中提供一个新的日期。

Cache-control使用max-age指定指定组件被缓存多久,它以秒为单位定义了一个更新窗。如果从组件被请求开始过去的秒数少于max-age,浏览器就使用缓存版本。

如果你同时指定了Expires和cache-control头,max-age指令将重写Expires头。

使用浏览器缓存减少了响应时间,但是当我们的组件更新的时候,已经访问过用户不太可能获取最新的组件,因为前一个版本已经在缓存中了,解决这个问题的方案就是修改文件名,比如我们组件使用变量.

规则4-压缩组件

压缩已经在Email应用和FTP站点中使用了10年,http1.1开始,web客户端可以使用htpp头Accept-Encoding(Accept-Encoding:gzip;deflate)来标识压缩。deflate 也是一种压缩方式但不流行,Gizp是最理想的压缩方法。我们一般压缩的对象是html,样式表,脚本,图片和pdf不应该压缩,因为它们本来已经备压缩了,在去压缩只会白白的浪费cpu资源。压缩通常能将响应的数量减少将近70%。

正常情况下,当浏览器直接与服务器通信时我只要按常规的配置即可。但是当浏览器通过代理来发送请求的时候就变得非常复杂。需要考虑压缩和缓存之间的平衡。

规则5-将样式表放在顶部

在早先的IE中比如将样式表放在底部,会导致白屏或者是无样式内容的闪烁。白屏是由于浏览器要等待css下载完再显示页面的组件,所以在等待css下载的时候页面就是白屏。无样式的闪烁是由于先下载页面的组件比如文字图片,并逐步显示,等css下载完则需要应用新的css样式渲染,就产生了这种无样式的闪烁现象。

正确使用方式是使用link标签将样式表放在文档的head中。

规则6-将脚本放在底部
并行下载:页面中的每个组件都会产生一个http请求,http请求会影响相应时间,浏览器对其下载的规则要依照http规范。在http1.1规范里建议浏览器从每个主机名并行下载两个组件,也就是说如果我们的组件在两个主机名下就会并行下载4个组件。但并非是主机名越多越好,Yahoo的研究表明使用两个主机名是最佳的。而且不同的浏览器会有不同的默认设置。
下载脚本时是禁止并行下载的,因为脚本可能使用document.write来修改内容,或者有多个脚本时他们之间可能存在依赖关系。所以脚本放在最下面就会先下载脚本而阻止页面其他组件的下载。所以最佳的情况就是将脚本放在底部。

规则7-避免css表达式
CSS表达式是动态设置CSS属性的一种强大但很危险的方式,它收到IE5之后版本的支持。类似background-color:expression();格式的。任何css表达式实现的功能我们都可以找到它的替代方式,我们尽量避免使用Css表达式。

规则8-使用外部JavaScriptCSS
使用内联比外部文件确实有更快的响应速度,但是使用外部文件被浏览器缓存,哪种方式好还要考虑页面的浏览次数,缓存设置等。也有两全其美的方法,比如加载后下载,我们首先使用内联的方式,在主页加载完毕后动态下载外部组件来实现,这样能将外部文件放到浏览器的缓存中以便用户接下来访问其他页面。还可以使用动态内联的方式。

规则9:减少DNS查找
Domain Name System(DNS)将主机名映射到IP上,比如你输入www.a.com,连接到浏览器的DNS解析器会返回服务器的ip地址。
DNS解析也是开销,在DNS查找之前浏览器不能从主机名那里下载到任何东西,相应时间依赖于DNS解析器,他所能承担的请求压力,
你与它之间的距离和你的带宽速度。
实际中操作系统和浏览器做为缓存DNS查找记录,但是浏览器的Keep-Alive属性会覆盖操作系统的缓存过期时间。

规则10-精简JavaScript
Javascript我们精简和混淆,精简只是去掉代码中空白等。而混淆会对一些变量函数名进行修改。一般混淆是为了增加反向工程的
难度,但是也容易带来错误,一般我们不建议去混淆JavaScript代码。精简和混淆我们都可以借助一些工具来实现。

规则11-避免重定向
重定向就是从一个URL到另一个URL,它会使你的页面变慢。下面是一些使用重定向的典型解决方案:
1.缺少结尾的斜线:我们在请求www.a.com时会引起重定向url变为www.a.com/,这是一般浏览器的默认行为。
2.连接网站:当我们改变网站后端逻辑的时候,很可能所需的url也变了,这时候就需要将用户从旧的url转移到新的url,这个时候
我们往往使用最多的也是重定向。我们应该尽量去避免。
3.跟踪内部流量
4.跟踪出战流量
5.美化url:有的时候某个url很复杂,不利用用户去输入,我们就提供一个友好的url来给用户,这个时候也会发生重定向。

规则12-移除重复脚本
该规则说的是同一个脚本被包含两次。

规则13-配置ETag
当网站被宿主在多于一台服务器上时,ETag头可能会阻碍缓存。
ETag:实体标签,是web服务器和浏览器用于确认缓存组件的有效性的一种机制。

规则14-使用Ajax缓存
确保Ajax请求遵守性能指导,尤其应具有长久的Expires头。

转载于:https://www.cnblogs.com/JemBai/archive/2009/10/16/1584499.html

规范HTML页的几点注意相关推荐

  1. ios开发之 icon规范+启动图规范+启动页规范

    作为一名开发人员,有时候碰上美工有事外出,那么偶尔就得顶下美工的岗位,切切图.今天就简单的说一下. 手机以(iPhone 4s-iPhone 6P)为主,若有新产品,会及时更新内容. 1.先说说App ...

  2. 移动端布局规范-固定页头页尾-中间随高度滑动

    <!DOCTYPE html> <html> <head><title>移动端上下固定中间滑动</title><meta charse ...

  3. seo-移动站优化问题修改针对落地页规范

    url校验,用二级域名做手机站,或者自适应站 m.baidu.com|mobile.baidu.com|dabaojian.baidu.com 整体布局 1.加载速度保证在3秒以内 2.手机版面要适合 ...

  4. 【UI设计No7】单页

    什么是单页 DM单有两种表述,但是在本质上的意思上都是差不多的,都是强调的是直接投递或是邮寄.第一种,DM是英idirect mail advertising的省略表述,译为"直接邮寄广告& ...

  5. 访问网址 token的格式_2020杭州电子科技大学数学建模竞赛论文格式规范与要求...

    杭州电子科技大学2020"新生杯"数学建模竞赛 论文格式规范 1.参赛队从A.B题中任选一题. 2.论文用白色A4纸单面打印:上下左右各留出至少2.5厘米的页边距:从左侧装订. 3 ...

  6. SDO/DAS研究(1): SDO规范

    数据对象是 SDO 框架的核心.数据对象是一个业务对象的一般表达,并且没有和特殊的持久化存储机制绑定. 数据图是一个相关数据对象的集合.在 SDO1.0 里,一个数据图总是被一个 DataGraph ...

  7. HTML编码规范 - (WEB前端命名规范)

    HTML编码规范 1 (一)命名规则: 2 3 头:header 4 内容:content/container 5 尾:footer 6 导航:nav 7 侧栏:sidebar 8 栏目:column ...

  8. ECMAScript 和 JavaScript 的未来

    本文摘自<深入理解JavaScript特性>,本书将JavaScript新特性融入简单易懂的示例中,包括ES6及后续更新,助你大幅提升代码表达能力. JavaScript之父Brendan ...

  9. ui设计现状与意义_想转行UI设计?你必须要了解以下内容

    @AALina邹琳 原创文章,转载请标注来源 https://www.zcool.com.cn/article/ZMTE3MDY2MA==.html ------------------------- ...

最新文章

  1. pytorch 笔记: torch.nn.Embedding
  2. [项目管理]团队管理中的起点:尊重
  3. java 序列化 原理解析
  4. windows10 环境下的amqp安装步骤(图文)
  5. 今日代码(20210225)--数据处理
  6. JavaScript 验证表单不为空和获取select下拉列表的值和文本
  7. 安笙机器人_张翰新戏搭档徐璐!包贝尔要和辛芷蕾演奇幻电影?
  8. 这些神经网络调参细节,你都了解了吗
  9. win8计算机背景黑色,Win8电脑桌面背景突然变黑怎么办?
  10. Atitit.导出excel报表的设计与实现java .net php 总结
  11. 智能指针shared_ptr, auto_ptr, scoped_ptr, weak_ptr总结
  12. LSTM神经网络介绍
  13. 计算机中所有文字信息都是,计算机文字 计算机文字与信息处理
  14. Bing必应来帮忙之-查询虚拟主机服务器上的同IP网站
  15. Android Q Data Setup For Long Connection
  16. 小米全国高校编程大赛 高弗雷勋爵
  17. java阴阳师抽卡概率_《阴阳师》手游随机抽取类玩法概率公示
  18. 2021正睿csp7连day1
  19. 小白深度学习起步中——读取人像图像
  20. android swstnw cn,Android应用开发之ubuntu14.04编译ijkplayer备忘

热门文章

  1. jquery 遍历java对象的属性_用jquery each标签遍历java list对象
  2. Ribbon-饥饿加载
  3. EventLoopGroup 的实例化
  4. 消息消费端的确认机制
  5. 一台机器理论能支持的连接数
  6. keepAliveTime和线程工厂
  7. 字符输出流的续写和换行
  8. 数据库-优化-为什么要进行数据库优化
  9. Spring Boot整合@Cacheable注解使用
  10. 定义简单类-创建多个猫对象