月度归档:2015年02月

谈谈微信红包海量运营–发10亿个红包难在哪里?

编者按:2015年微信红包书写了一个全新奇迹——除夕摇一摇总次数110亿次,峰值1400万次/秒,8.1亿次每分钟,微信红包收发达10.1亿次!惊人数字的背后,腾讯是怎么支撑的?笔者有幸节前采访到微信后台技术负责人,与大家分享红包背后的技术。

02184704425
春晚当天,微信红包联合团队彻夜加班全程守护

400倍的挑战

今年微信红包方式与去年用户与用户之间互发红包相比,摇红包的方式对业务量来说是一个极大的爆发,光是除夕10:30送出的一波红包就达到了1.2亿个,已经是2014年除夕夜峰值的400倍之巨(2014年峰值每分钟被拆开红包数量仅2.5W个)!

02184714431
进入抢红包环节,后台数据瞬间飙升

发10亿红包,难在哪里?

微信团队总结下来有三大难点:

快——如何保证用户快速摇到红包?

准——如何保证摇到的红包能成功拆开?

稳——如何保证拆开的红包能分享出去?

大量用户在同一时间摇红包,瞬间产生每秒千万级的请求,这个量级的请求如果不加以疏导处理直接到达后台,必定会导致后端服务过载甚至崩溃。上文中除夕当天后台监控数据曲线便能说明一切——在前台重重的分流减压下,后台服务器负载仍然瞬间飙升十倍以上。

三大应对策略齐上阵

对于以上三个难点,微信后台开发团队主要通过三大应对策略应对:有损服务,柔性可用,大系统小做

  • 有损服务-追求高可用和快速响应。

什么是有损服务?有损服务是通过精心拆分产品流程,选择性牺牲一部分数据一致性和完整性从而保证核心功能绝大多数运行。这是腾讯在PC时代积累下来的一种特色运营策略——在资源一定的前提下,互联网条件千变万化的场景中,量力而为,满足用户的核心需求。

微信红包的核心点是摇,拆,分享红包,整个系统设计时必须尽最大可能保证这三个步骤一气呵成,任何关联系统出现异常的时候马上进行系统降级,防止引起系统雪崩。

系统降级可以分为两个方面,一是把核心功能进行分拆和简化,通过辅助轻量化的服务实现,确保最短关键路径的可行,比方说在接入层置入摇红包逻辑,将每秒千万级请求转化为每秒万级的红包请求,再传到红包服务的后端逻辑,降低雪崩的可能性。

02184804989

同时后端采用异步分拆,接收到用户请求时仅进行合法性验证,验证完成后直接告知成功,后续业务逻辑进入异步队列进行处理,减少了用户的等待时间,也极大降低了峰值雪崩的概率。

02184729531
耗时最长的入账操作,直接跳过,异步处理

另外一方面是采取过载保护措施:
微信红包的过载保护在客户端已提前预埋了策略,在连接失败或超时情况下会有相应提示,减少用户重复请求次数。接入层面也会进行自我保护,针对频繁发出请求的客户端限制响应速度,并对系统负载划分出若干等级,达到不同阈值时引导客户端使用不同限速速率;在异常情况出现时,采取减少红包数,异步限流降低拆/分享红包的速率等措施减轻服务器端压力;与此同时,微信红包还有全程压测流程,对整个业务链接进行自动提前评估,防止过载。

02184740901
这画面你可能没见过,它其实早已在手机待命

在有损服务思想的重重保护下,第一波的摇红包体验活动中,微信红包几乎满分通过考验,其中过载保护的作用相当明显,在客户端、接入层层减压、过滤,最终仅把十万级压力传递到后台。

  • 柔性可用-细化场景把握核心需求。

柔性可用是在有损服务价值观支持下的方法,重点在于实际上会结合用户使用场景,根据资源消耗,调整产品策略,设计几个级别不同的用户体验场景,保证尽可能成功返回关键数据,并正常接受请求,绝不轻易倒下。

柔性服务更具有产品的思维性质,意义在于深刻理解产品每一个场景的核心价值,把握用户在每一个场景中的核心需求,设计不同层次的满足核心诉求的办法,对柔性服务在微信红包中的实践,红包团队也有相应的措施,主要可以分为几大类。

1、系统容灾:面对大规模的请求量,系统容灾必不可少,容灾一般可分为逻辑层容灾和数据层容灾,这次微信后台开发团队在容灾布置中采用30%切换的逻辑层方案,即核心服务都能做到最多1/3服务器出问题的情况下自动容灾切换以保证服务质量,提高预警级别换取系统的可用性。

2、资源隔离:顾名思义就是把资源进行隔离减少服务支路间的影响,从逻辑入手,在资源逻辑中,当A服务同时分派任务给BC服务时,设定单个最大分配上限值,避免任意一个支路出问题影响整个服务链条,这样即使部分服务出现问题也不会影响到整个服务的崩塌。

3、快速拒绝:当服务过载时尽早拒绝请求,由服务调用方换机重试避免单一服务器重试过载,快速拒绝和有损服务中的及早拒绝是一个概念的方法,从过程的源头将问题解决,成本越低,影响越小,前端保护后端的方式来解决问题。

4、支付分组:从支付环节入手,将所有红包分为50个组,放在50个单独的set上互不影响,单组set出问题最多只影响1/50用户,保证多数人服务不受干扰。分组set化也是柔性可用的一个重要技术手段,这一思维非常类似于现实生活中的集装箱思维——通过标准化,规模化的箱体设计,应对复杂多样的货物,使每个流通环节既独立又不失灵活。

5、流量预加载:从客户端入手,将语音图片等极消耗流量的资源提前让客户端自动下载预置好,提前将流量洪峰疏导,并在活动当天CDN将准备数百G带宽应对,这块也与过载保护中的快慢分离是相通的,将耗流量的服务提前加载避免高峰期间的冲突。

  • 大系统小做-保证进程的功能单一 。

大系统小做应该来说,是一种意识,他的核心思想是将功能复杂较大的系统,化大为小,减少模块耦合,降低关联性,用多个独立的模块来实现整体系统的功能,大系统小做采用的是化繁为简,分而治之,便于开发和迅速实现。

微信红包如此庞大的后台系统,模块也相当之多,而这次的模块微信开发后台团队采用了系统高度模块化的方式,分成一个个高度自制的小系统,形成高内聚低耦合的格局,每个模块之间不会过分依赖对方,这样的好处是不会因为任何一个模块而影响全部服务,避免牵一发动全身的风险,实现真正的灰度服务。

海量服务能力决定成败

从2014的滴滴打车,到2015的微信红包,腾讯用一个个案例,去证明自身在海量服务方面的实力。事实上,真正支撑起微信红包顺畅运营的幕后英雄,正是腾讯内部一个叫做“海量之道2.0”的技术体系。有损服务,柔性服务,大系统小做三大手段也是脱胎于此体系中。移动互联网大战硝烟味愈浓,BAT都在为争夺支付入口使出浑身解数,在业务从起步到小跑再到腾飞的过程中,巨头背后的海量服务能力将对其最终成败有着来越发深远的影响。

02185159710

阿里再现《去啊》广告神文——一亿元!

2014年年底,一篇名为《梵高为什么自杀》的广告神文火遍朋友圈,该文剧情之跌宕起伏,广告植入之匪夷所思看得目瞪口呆。

今天阿里的另一篇广告神文再次亮瞎,虽然已经做好了看广告的准备,但结局还是万万没想到@@!……

阿里广告神文《一亿元》

阿里广告神文《一亿元》

阿里广告神文《一亿元》

阿里广告神文《一亿元》

阿里广告神文《一亿元》

阿里广告神文《一亿元》

阿里广告神文《一亿元》

阿里广告神文《一亿元》

阿里广告神文《一亿元》

阿里广告神文《一亿元》

阿里广告神文《一亿元》

阿里广告神文《一亿元》

阿里广告神文《一亿元》

阿里广告神文《一亿元》

阿里广告神文《一亿元》

阿里广告神文《一亿元》 阿里广告神文《一亿元》 阿里广告神文《一亿元》

推荐:阿里现支付宝广告神文:《梵高为什么自杀》

网页头部声明应该是用lang=”zh-cn”、lang=“zh”还是 lang=“zh-cmn-Hans”

lang属性的取值应该遵循 BCP 47 – Tags for Identifying Languages

单一的 zh 和 zh-CN 均属于废弃用法。

问题主要在于,zh 现在不是语言code了,而是macrolang,能作为语言code的是cmn(国语)、yue(粤语)、wuu(吴语)等。我通常建议写成 zh-cmn 而不是光写 cmn,主要是考虑兼容性(至少可匹配 zh),有不少软件和框架还没有据此更新。

zh-CN 的问题还在于,其实多数情况下标记的是简体中文,但是不恰当的使用了地区,这导致同样用简体中文的 zh-SG(新加坡)等无法匹配。更典型的是 zh-TW 和 zh-HK。所以其实应该使用 zh-Hans / zh-Hant 来表示简体和繁体。那么完整的写法就是 zh-cmn-Hans,表示简体中文书写的普通话/国语。一般而言没有必要加地区代码,除非要表示地区特异性,一般是词汇不一样(比如维基百科的大陆简体和新马简体)。

如何标记的例子:

  1. 简体中文页面:html lang=zh-cmn-Hans
  2. 繁体中文页面:html lang=zh-cmn-Hant
  3. 英语页面:html lang=en

需要加地区代码的情况一般比较少,除非为了强调不同地区汉语使用差异。比如:

<p lang="zh-cmn-Hans">
<b lang="zh-cmn-Hans-CN">菠萝</b>和<b lang="zh-cmn-Hant-TW">鳳梨</b>其实是同一种水果。只是大陆和台湾称谓不同,且新马一带的称谓也是不同的,称之为<b lang="zh-cmn-Hans-SG">黄梨</b>。
</p>

当然,由于历史原因,有时候不得不继续使用zh-CN。比如中文维基百科,沿用了传统的zh-CN/zh-HK/zh-SG/zh-TW(按照标准应该使用 zh-cmn-Hans-CN、zh-cmn-Hant-HK、zh-cmn-Hans-SG、zh-cmn-Hant-TW)。这时候,合理的软件行为,是将 zh-CN 等转化为 zh-cmn-Hans(即转化为最常见的误用所对应的实际标准写法)。

实际上,各相关标准,也存在一定的滞后。例如CSS的:lang选择器,不支持选择仅仅简体/繁体中文(而不管是cmn或是yue或是min等汉语方言)。理想情况是CSS3对:lang选择器的语法进行升级,即BCP 47中的高级匹配算法,支持 :lang(*-Hans)这样的写法。

更新:Selectors Level 4 已经加入了对BCP 47高级匹配算法的支持,即支持 :lang(*-Hans) 的写法。

百度SiteApp转码说明及如何取消转码

SiteApp转码声明

1.Siteapp页面转码的意义?

在百度移动搜索引擎中为更好满足用户信息需求,会同时为用户提供pc网页和mobile网页,但目前大多数PC页在移动终端中直接浏览的体验较差(交互、兼容和流量等)。因此为改善搜索用户的浏览体验,我们会对百度搜索结果中缺乏可替代mobile资源的PC页进行格式转换,转换为适合手机浏览的mobile网页,使其能在移动终端浏览器有较好的浏览体验。百度的Siteapp转码技术即是为实现此目的、服务于百度搜索的附属产品,各大搜索引擎均拥有并提供类似转码技术。

2.百度Siteapp转码的策略?

为了最大程度改善PC页面在手机上的体验,Siteapp转码须去除WEB页面中不能在手机浏览器上浏览的内容,并改善不适用mobile的交互功能。百度移动搜索还会智能地选择转码效果较好的页面进行转码 ,尽可能减少对转码后效果不佳的页面进行转码处理。

3.如果觉得自己的站点转码效果不佳怎么办?

百度提供了siteapp自助建站服务,您可以登录siteapp.baidu.com获取该服务,该服务提供了站长自助优化百度无线搜索访问其站点时的页面效果,也可以通过提供独立的域名创建属于自己的网站,您还可以在siteapp服务中,管理百度网盟广告获取收益。点击进一步了解SiteApp

4.站长如果不希望自己的站点被转码怎么办?

百度一共提供了两种解决方案: A. no-siteapp协议
Siteapp支持的no-siteapp协议为如下两种形式:
a. HTTP Response中显式声明Cache-control为no-siteapp。
b. meta标签中显式声明Cache-control为no-siteapp,格式为:
<head>
<meta http-equiv=”Cache-Control” content=”no-siteapp” />
</head>
如第三方站点不希望某页面被转码,可该页面上添加此协议,当用户通过移动搜索进入第三方网站时,会直接进入原网页。
B.开放适配协议
如第三方站点不希望页面被转码,且本身有对应手机页面时,建议站长使用百度的开放适配服务,百度将会帮助用户直接进入第三方网站自有的手机页面。
由于开放适配有多种参与方式,详细可以点击查看开放适配服务

HTML head 头标签属性详解

HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代,head 头部结构,移动端的 meta 元素,显得更为重要。了解每个标签的意义,写出满足自己需求的 head 头标签,是本文的目的。

DOCTYPE

DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

DTD(Document Type Definition) 声明以 <!DOCTYPE> 开始,不区分大小写,前面没有任何内容,如果有其他内容(空格除外)会使浏览器在 IE 下开启怪异模式(quirks mode)渲染网页。公共 DTD,名称格式为注册//组织//类型 标签//语言,注册指组织是否由国际标准化组织(ISO)注册,+表示是,-表示不是。组织即组织名称,如:W3C。类型一般是 DTD。标签是指定公开文本描述,即对所引用的公开文本的唯一描述性名称,后面可附带版本号。最后语言是 DTD 语言的 ISO 639 语言标识符,如:EN 表示英文,ZH 表示中文。XHTML 1.0 可声明三种 DTD 类型。分别表示严格版本,过渡版本,以及基于框架的 HTML 文档。

  • HTML 4.01 strict
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • HTML 4.01 Transitional
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
  • HTML 4.01 Frameset
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
    
  • 最新 HTML5 推出更加简洁的书写,它向前向后兼容,推荐使用。
    <!doctype html>

在 HTML中 doctype 有两个主要目的。

  • 对文档进行有效性验证。

它告诉用户代理和校验器这个文档是按照什么 DTD 写的。这个动作是被动的,每次页面加载时,浏览器并不会下载 DTD 并检查合法性,只有当手动校验页面时才启用。

  • 决定浏览器的呈现模式对于实际操作,通知浏览器读取文档时用哪种解析算法。如果没有写,则浏览器则根据自身的规则对代码进行解析,可能会严重影响 html 排版布局。浏览器有三种方式解析 HTML 文档。

charset

html5 声明文档使用的字符编码,

<meta charset="utf-8">

html5 之前网页中会这样写:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

lang属性

简体中文

<html lang="zh-cmn-Hans">

繁体中文

<html lang="zh-cmn-Hant">

为什么 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢,请移步阅读: 页头部的声明应该是用 lang=”zh-cn” 还是 lang=“zh-cmn-Hans”

优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

360 使用Google Chrome Frame

<meta name="renderer" content="webkit">

360 浏览器就会在读取到这个标签后,立即切换对应的极速核。 另外为了保险起见再加入

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

这样写可以达到的效果是如果安装了 Google Chrome Frame,则使用 GCF 来渲染页面,如果没有安装 GCF,则使用最高版本的 IE 内核进行渲染。

百度禁止转码

通过百度手机打开网页时,百度可能会对你的网页进行转码,脱下你的衣服,往你的身上贴狗皮膏药的广告,为此可在 head 内添加

<meta http-equiv="Cache-Control" content="no-siteapp" />

相关链接:百度SiteApp 转码说明及如何取消转码

SEO 优化部分

  • 页面标题<title>标签(head 头部必须)
    <title>your title</title>
    
  • 页面关键词 keywords
    <meta name="keywords" content="your keywords">
    
  • 页面描述内容 description
    <meta name="description" content="your description">
    
  • 定义网页作者 author
    <meta name="author" content="author,email address">
    
  • 定义网页搜索引擎索引方式,robotterms 是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。
    <meta name="robots" content="index,follow">

viewport

viewport 可以让布局在移动浏览器上显示的更好。 通常会写

<meta name="viewport" content="width=device-width, initial-scale=1.0">

content 参数:

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)
  • minimal-ui iOS 7.1 beta 2 中新增属性,可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
    

而如果你的网站不是响应式的,请不要使用 initial-scale 或者禁用缩放。

<meta name="viewport" content="width=device-width,user-scalable=yes">

适配 iPhone 6 和 iPhone 6plus 则需要写:

<meta name="viewport" content="width=375">
<meta name="viewport" content="width=414">

大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px,iPhone 6 上却是 375px,大部分 5.5 寸安卓机器(比如说三星 Note)的 viewport 宽为 400,iPhone 6 plus 上是 414px。

ios 设备

添加到主屏后的标题(iOS 6 新增)

<meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题(iOS 6 新增) -->

是否启用 WebApp 全屏模式

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 -->

设置状态栏的背景颜色

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 设置状态栏的背景颜色,只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 -->

只有在 “apple-mobile-web-app-capable” content=”yes” 时生效

content 参数:

  • default 默认值。
  • black 状态栏背景是黑色。
  • black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。

禁止数字识自动别为电话号码

<meta name="format-detection" content="telephone=no" /> <!-- 禁止数字识自动别为电话号码 -->

iOS 图标

rel 参数: apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图。 iPhone 和 iTouch,默认 57×57 像素,必须有

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch,默认 57x57 像素,必须有 -->

iPad,72×72 像素,可以没有,但推荐有

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad,72x72 像素,可以没有,但推荐有 -->

Retina iPhone 和 Retina iTouch,114×114 像素,可以没有,但推荐有

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 -->

Retina iPad,144×144 像素,可以没有,但推荐有

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad,144x144 像素,可以没有,但推荐有 -->

IOS 图标大小在iPhone 6 plus上是180×180,iPhone 6 是120×120。 适配iPhone 6 plus,则需要在中加上这段

<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">

iOS 启动画面

iPad 的启动画面是不包括状态栏区域的。

iPad 竖屏 768 x 1004(标准分辨率)

<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 竖屏 768 x 1004(标准分辨率) -->

iPad 竖屏 1536×2008(Retina)

<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008(Retina) -->

iPad 横屏 1024×748(标准分辨率)

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748(标准分辨率) -->

iPad 横屏 2048×1496(Retina)

<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496(Retina) -->

iPhone 和 iPod touch 的启动画面是包含状态栏区域的。

iPhone/iPod Touch 竖屏 320×480 (标准分辨率)

<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->

iPhone/iPod Touch 竖屏 640×960 (Retina)

<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->

iPhone 5/iPod Touch 5 竖屏 640×1136 (Retina)

<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->

添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) -->

iPhone 6对应的图片大小是750×1294,iPhone 6 Plus 对应的是1242×2148 。

<link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)">

<link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">

Windows 8

Windows 8 磁贴颜色

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->

Windows 8 磁贴图标

<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

rss订阅

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 订阅 -->

favicon icon

<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->

移动端的meta

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话,忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->

严格模式和怪异模式、IE的文档模式和浏览器模式详解

最近在工作中经常遇到浏览器兼容性的问题,让我焦头烂额,这里总结下浏览器的严格模式和怪异模式以及IE浏览下的文档模式和浏览器模式等内容。

严格模式和怪异模式

现代浏览器一般具有多种渲染模式:

在“标准模式”(standards mode) 页面按照 HTML 与 CSS 的定义渲染,而在“怪异模式(quirks mode) 模式”中则尝试模拟更旧的浏览器的行为。 一些浏览器(例如,那些基于 Mozilla 的 Gecko 渲染引擎的,或者 Internet Explorer 8 在 strict mode 下)也使用一种尝试于这两者之间妥协的“近乎标准”(almost standards) 模式,实施了一种表单元格尺寸的怪异行为,除此之外符合标准定义。

通常,浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式;如果存在一个完整的 DOCTYPE 则浏览器将会采用标准模式,而如果它缺失则浏览器将会采用怪异模式。 例如,一个以如下 DOCTYPE 开始的网页将会触发标准模式:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

如下 DOCTYPE 语法上是无效的,因为它包含公共标识符关键字 PUBLIC 却没有公共标识符(指示所用 HTML 版本的名称),也没有 HTML 文档类型定义的系统标识符 URL。这将会触发怪异模式:

<!DOCTYPE html PUBLIC>

此外,一个不含任何 DOCTYPE 的网页将会以 quirks 模式渲染。 对此一个值得一提的例外是微软的 Internet Explorer 6 浏览器,如果 DOCTYPE 之前有一个 XML 声明,不管是否指定完整的 DOCTYPE,它就会以 quirks 模式渲染一个页面。因此以如下代码开始的 XHTML 页面会被 IE 6 渲染为 quirks 模式:

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在一定程度上,上述代码是有用的,然而它仅仅会对 IE 6 触发怪异模式。如果 DOCTYPE 之前有任何语句,quirks 模式在任何版本的 IE 中(截至 IE 9)同样会被触发。 例如,如果一个超文本文件在 DOCTYPE 前包含一个注释或者任何标签,IE (截至 9) 会使用 quirks 模式:

IE的文档模式和浏览器模式

IE从IE8引入了文档兼容性开始有了浏览器模式和文档模式(按F12可见)

“浏览器模式”:用于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件备注解析、发送给网站服务器的用户代理(User-Agent)字符串的值。网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和安装的功能,这样就可以向不同的浏览器返回不同的页面内容。

IE8的浏览器模式:

IE8的浏览器模式

 

“文档模式”用于指定IE的页面排版引擎(Trident)以哪个版本的方式来解析并渲染网页代码。切换文档模式会导致网页被刷新,但不会更改用户代理字符串中的版本号,也不会从服务器重新下载网页。切换浏览器模式的同时,浏览器也会自动切换到相应的文档模式。

IE9下的文档模式

浏览器模式

 

我的理解就是浏览器模式是指IE浏览器 向服务器发送请求时,告诉服务器自己是哪个浏览器哪个版本,这里是指告诉服务器我是IE7还是IE8或者9,然后浏览器根据收到的用户代理字段返回IE7或者IE8或者IE9的页面内容。

而文档模式则是指浏览器将服务器端发送过来的内容按照某种特定的浏览器(IE7,IE8,IE9等)来渲染页面。

这里还涉及到怪异模式(Quirks Mode),IE旧的怪异模式现在被称为IE5怪异模式,一般不予考虑。

DOCTYPE

为什么要研究这些呢,是为了强调按照标准写html语言的重要性,近来在工作中遇到的各种诡异的IEbug,花费了巨大精力调试,最后都是因为没有按照标准来写,没有doctyle头,标签没有闭合,导致各浏览器渲染不同诡异。

DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。 其中的DTD(document type definition)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。 要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。

HTML5 (向后兼容,推荐使用):

<!DOCTYPE html>

HTML 4.01 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

IE兼容模式

IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。

内核控制Meta标签:让360浏览器默认使用极速模式打开网页

进来调试一个网页在IE、Chrome、Firefox下均表现正常,但是在360浏览器兼容模式下表现诡异。(国产的各种shell,我就呵呵了。)查查了内核控制Meta标签:让360浏览器默认使用极速模式打开网页,方法如下:

  1. 网页头部加入
<meta name="renderer" content="webkit">

360浏览器就会在读取到这个标签后,立即切换对应的极速核。

  1. 另外为了保险起见再加入
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

这样写可以达到的效果是如果安装了Google chrome frame,则使用GCF来渲染页面,如果没有安装GCF,则使用最高版本的IE内核进行渲染。