除了缓存存取策略还需要考虑过期策略

加入一个缓存除了考虑缓存是否最有效之外,缓存key策略是否完整,还需要考虑版本控制。也就是说,不仅仅要确保存取快,还要确保他能够快速失效。

这样,当某次构架调整上线,能够最快速度刷新缓存。
所以建议,将缓存的版本持久化,每次页面载入后端controller取版本库中的当前版本,如果过期则刷新版本重新读写缓存。

Firefox caches hidden inputs

I have a hidden input field in my form. I noticed that if that field’s value is changed by javascript, and then the user refreshes the page, that same value will be set when the page reloads. From what I’ve seen, this only happens in Firefox.

I’ve solved this unwanted behaviour by adding autocomplete="off" to that hidden input, but W3Cdoesn’t like this solution, and if i validate the page I get the error:

Attribute autocomplete not allowed on element input at this point.

Apparently, the autocomplete attribute works only on specific inputs – see here.

So is there any solution that will satisfy both W3C and Firefox?

Continue reading

HTML head 头标签

HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代,head 头部结构,移动端的 meta 元素,显得更为重要。了解每个标签的意义,写出满足自己需求的 head 头标签,是本文的目的。本篇以一丝的文章为基础,进行扩展总结介绍常用的 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 文档。 * 非怪异(标准)模式 * 怪异模式 * 部分怪异(近乎标准)模式 关于IE浏览器的文档模式,浏览器模式,严格模式,怪异模式,DOCTYPE 标签,可详细阅读模式?标准!的内容。

charset

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

<meta charset="utf-8">

html5 之前网页中会这样写:

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

这两个是等效的,具体可移步阅读:<meta charset='utf-8'> vs <meta http-equiv='Content-Type'>,所以建议使用较短的,易于记忆。

lang属性

简体中文

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

繁体中文

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

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

优先使用 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 内核进行渲染。

相关链接:浏览器内核控制 Meta 标签说明文档

百度禁止转码

通过百度手机打开网页时,百度可能会对你的网页进行转码,脱下你的衣服,往你的身上贴狗皮膏药的广告,为此可在 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">
    

相关链接:WEB1038 – 标记包含无效的值

viewport

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

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

width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)

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">

相关链接:非响应式设计的viewport

适配 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,则需要在<head>中加上这段

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

###iOS 启动画面

官方文档:https://developer.apple.com/library/ios/qa/qa1686/_index.html 参考文章:http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

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 -->

比较详细的 favicon 介绍可参考https://github.com/audreyr/favicon-cheat-sheet

移动端的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 -->

这是来自 toobug 的分享总结。

解决美国亚马逊提示纳税信息-Are you an agent acting as an intermediary?选择什么以及如何填写Amazon W-8BEN表格而不是IMY表格

许多做Amazon的朋友注册时候会出现Tax信息也就是经常被提及的Are you an agent acting as an intermediary?也有朋友最终出现的是Amazon W8IMY表格,不是经常出现的W8BEN、W8BENE表格,这些怎样选择呢?我们来一步一步看 Tax信息出现后,点进去到Are you an agent acting as an intermediary?步骤,选择NO(就是你问你是不是一个中间代理,是的话要多交税) (点此进入Amazon页面) 新出现的表单中,大家都会填写,着重说一下最下面的那个选择,我们选择“I do not have a U.S. TIN or a foreign (non-U.S.) income tax identification number” 好的,这样下来,Amazon自动生成了W8BEN表格,我们选择electronic signature(其他选项是打印完毕后手写签名然后Email到亚马逊,我个人不推荐,因为Amazon官方都说了electronic signature是立即提交并于予审核) 填写好自己的英文名(或者标准的汉语拼音,一定要与之前第一步填写的姓名一致),下一步。 Amazon回把之前的W8BEN表格完善,就会发现一个信息TAX表格被提交的信息,好了Congrats!静候美国亚马逊佳音吧~ Cash Online 愉快

《京东技术详解》P1-50读后感

这本书大概就是京东构架的编年史,有兴趣了解京东的构架可以看看。特点是通过介绍京东某些重要的模块诞生在哪个场景下,最初运用了哪些技术,到后来原有构架遇到了怎样的挑战,技术团队怎么解决的……等等,通过案例,给读者展示了一条京东清晰的技术脉络借鉴。没有一般公司传那种很枯燥的叙述,喜欢RPG游戏的同学可能会更喜欢这本书一些。 我自己感觉,京东最开始也是把许多功能耦合在一块。后面由于流量的原因先做了页面模块划分,也就是和我们公司一样的动态缓存,模块化加载。之所以称之为动态缓存,因为一般情况下会把网页划分开,各个模块用一个简单的Controller,由于单个页面的各个Controller是异步执且均使用 ob_start 包裹,速度会快很多,最终的输出页面试用 ob_get_content 获取缓存到的各个模块的页面代码整合并添加 缓存key标签 输出页面。类似的我自己是感觉和现在前端流行的使用JSX直接生成html避免DOM无序调用这种思想类似。 【疑问1:我对JS这块也不太了解,React这种JS框架试用JSX操作页面难道不会加重浏览器渲染负担吗?这周读完这本水书,下周看JS高级程序设计再解答吧。 疑问2:事实上我对公司中页面各个子模块 load 时候是否异步并不清楚, 也不清楚每次load时访问缓存的规则。 疑问3:一直以来,我只知道只要页面更新,消息队列会得到刷新缓存的指令,这个我还是不清楚具体的实现。】 在解决完成简单的解耦后,内部网络的复杂通讯使得京东开始了自研负载均衡, 从最开始的商业产品到后来使用LVS实现的软负载。外部访问压力的提升,加上第三方CDN厂商的产品不太稳定,京东从最开始的squid作为前端代理服务,过渡到HAProxy + ATS。 在讲述整个变迁过程中,京东的技术团队一直在努力的为京东的各个模块进行可降级处理。也就是当首页动态访问量巨大后端不堪重负时候,替换为静态页面(同理,某个展示模块负载过大也会直接载入不那么及时的静态页面展示)不至于让用户无内容可看。 通过对业务流程的梳理,得到一些与主干流程相比较过于复杂的逻辑模块,并将其拆分为独立的模块比如:京东的秒杀业务、购物车模块、订单合单模块(多个第三方商家或者与京东自营产品的订单在同一个页面显示)以及订单展示页所涉及到的发票管理、拆单功能、拆单算运费并统计总价等等这些看似简单,但实际上当业务量到一定程度会严重影响业务稳定性的功能。 37开始讲的是一些分布式的问题,讲述了为什么要分布式云云,鉴于自身经验不够,无法获取到有价值的信息。略过 ~ 下一篇打算大概是京东的供应链管理以及内部金融管理 过两天写了~