扩展和定制

优质

小牛编辑

184浏览

2023-12-01

这里是优化 HTML5 Boilerplate 主题的一些建议。因为并不是所有的特性都适合具体的需求，所以我们没有默认导入这些特性。

App Stores

安装 Chrome 插件

用户可以直接从网站安装 Chrome 应用，前提是该应用已经通过谷歌的网络管理工具接驳了网站。更多信息详见内置 Chrome 商店的开发文档。

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">

iOS 6+ Safari 中的 Smart App Banners

不用再向用户介绍复杂的方式进入 App Store 获取相关的应用程序了。引用下面的元标签，将会给用户提供更友好的方式下载你的 iOS App，或者用来用户的当前状态优化网站体验。

<meta name="apple-itunes-app" content="app-id=APP_ID,app-argument=SOME_TEXT">

DNS 预加载

简而言之，DNS 预加载是告知浏览器当前网站域名的一种方法，这样一来客户端才能解析拥有该 DNS 的主机，缓存这些网站，当再次需要使用时，请求速度就会更快。

隐式预加载

浏览器会自动为用户预加载诸多信息。当浏览器在 html 中检测到一个链接标签时，并不会分配给它浏览器当前请求的域名，而是从客户端系统，根据 IP 地址分配域名。客户端首先检测缓存，如果缓存中不存在，则从 DNS 服务器发送请求。这些请求发生在后台，并不会阻塞页面渲染进程。

采用这种方式，可以让需要的外部 IP 地址预加载到客户端缓存中，同时又不会阻塞外部内容的加载。请求越少，则页面渲染越快。在移动端这种感觉会更明显，因为移动端的延迟更强烈。

禁用隐式预加载

<meta http-equiv="x-dns-prefetch-control" content="off">

即使禁用 X-DNS-Prefetch-Control 元标签或者 HTTP 头信息，浏览器也会预加载所有显式的 dns-prefetch 链接。

注意：如果你的网站依赖于外部域名的资源，那么这种做法将会降低加载速度。

显式预加载

通常，浏览器扫描 html 只会预加载外部域名。如果所需资源在当前 html 之外（比如说，需要请求一个远程服务器的 javascript，或是需要一个存储了所有网页信息的 CDN），那么你就可以将需要预加载的域名全部列出来。

<link rel="dns-prefetch" href="//example.com">
<link rel="dns-prefetch" href="//ajax.googleapis.com">

如果有很多外部域名需要请求，建议使用上述方式。如果能够将它们编写在Meta Charset 元素之后就更棒了，这样浏览器将会尽快加载它们。

常用预加载链接

Amazon S3:

<link rel="dns-prefetch" href="//s3.amazonaws.com">

Google APIs:

<link rel="dns-prefetch" href="//ajax.googleapis.com">

Microsoft Ajax Content Delivery Network:

<link rel="dns-prefetch" href="//ajax.microsoft.com">
<link rel="dns-prefetch" href="//ajax.aspnetcdn.com">

更多 DNS 预加载信息请参考：

谷歌通用分析

隐藏 IP 地址

在某些国家，如果两个司法管辖区之间没有相同严厉的法律，那么个人信息就不允许在相互间传递，比如从德国向欧盟之外传送。因此，网络管理员需要确保使用谷歌通用分析时，不能将个人信息从德国传到美国。开发者可以在发送 events/pageviews 前，设置 ga('set', 'anonymizeIp', true);。

ga('create', 'UA-XXXXX-X', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');

追踪 jQuery AJAX 请求

这里有一篇来自 Jango Steve 的文章，介绍了如何在谷歌分析中追踪 jQuery AJAX 请求。

在 plugins.js 中添加如下代码：

/*
 * Log all jQuery AJAX requests to Google Analytics
 * See: http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/
*/
if (typeof ga !== "undefined" && ga !== null) {
    $(document).ajaxSend(function(event, xhr, settings){
        ga('send', 'pageview', settings.url);
    });
}

追踪 JavaScript 错误

在 ga 定义之后，添加如下函数：

(function(window){
  var undefined,
      link = function (href) {
          var a = window.document.createElement('a');
          a.href = href;
          return a;
      };
  window.onerror = function (message, file, line, column) {
      var host = link(file).hostname;
      ga('send', {
        'hitType': 'event',
        'eventCategory': (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error',
        'eventAction': message,
        'eventLabel': (file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : '')).trim(),
        'nonInteraction': 1
      });
  };
}(window));

追踪页面滚动

在 ga 定义之后，添加如下函数：

$(function(){
    var isDuplicateScrollEvent,
        scrollTimeStart = new Date,
        $window = $(window),
        $document = $(document),
        scrollPercent;

    $window.scroll(function() {
        scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height());
        if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90%
            isDuplicateScrollEvent = 1;
            ga('send', 'event', 'scroll',
                'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's'
            );
        }
    });
});

Internet Explorer

在 IE 10 中提示用户切换到“桌面模式”

在 Metro 模式下，IE 10 并不支持插件，比如 Flash。如果你的网站需要使用插件，那么可以使用 x-ua-comptible 元标签，提醒用户切换到桌面模式。

<meta http-equiv="x-ua-comptible" content="requiresActiveX=true">

下面是 HTML5 Boilerplate 中 x-ua-comptible 的默认值：

<meta http-equiv="x-ua-comptible" content="ie=edge,requiresActiveX=true">

IE 9+ 固定网站

如果启用了固定功能，那么 IE 9 的用户就可以将应用程序添加到任务栏或者开始菜单。这一功能也带来了一系列的工具，方便用户对元素进行个性化配置。更多信息请参考 documentation on IE9 Pinned Sites。

为固定的网站命名

如果不使用这条标签，Windows 将会使用页面标题作为应用程序的标题。

<meta name="application-name" content="Sample Title">

为固定的网站添加提示

如你所知，这里讲的是一个提示工具。当用户将鼠标悬停在固定网站的图标上边时，就会出现一个预览窗口。

<meta name="msapplication-tooltip" content="A description of what this site does.">

为固定的网站设置默认页面

如果当网站固定时需要制定一个特定的 URL（比如首页），那就在这里设置。一个好的想法是让固定网站发送特别编写的 URL，这样开发者就可以追踪到有多少用户使用了固定网站，就像下面这样：

<meta name="msapplication-starturl" content="http://www.example.com/index.html?pinned=true">

自定义 IE 的控制按钮色彩

IE 9+ 会自动使用固定网站图标的颜色，给浏览器按钮添加相应的阴影颜色。除非开发者自定义其他色彩，同时自定义色彩只能使用颜色关键字 (red) 和十六进制色彩 (#ff0000)。

<meta name="msapplication-navbutton-color" content="#ff0000">

自定义窗口大小

如果固定网站打开时需要使用确定的大小，那么可以在这里自定义尺寸。该功能只支持静态的像素尺寸，且最小为 800x600。

<meta name="msapplication-window" content="width=800;height=600">

添加跳转列表

开发者可以给固定网站添加跳转列表，当鼠标点击右键时，就可以快速显示跳转列表了。每个列表项都指向特定的 URL，并拥有自己的图标（通常为 16x16 的图标）。开发者可以添加任意数量的列表项。

<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico">
<meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico">

（Windows 8)高级质量视觉效果

Windows 8 允许开发者提供一张 PNG 瓷贴图片，也允许自定义瓷贴的背景色。Full details on the IE blog。

为网站创建一个 144x144 分辨率的图标，将其填充满整个画布，再将其背景色改为透明。
将图片保存为 32-bit PNG 格式，同时在不降低画质的前提下进行优化处理。然后重命名为任何你希望的名字，比如 metro-tile.png。
可以在 IE 博文中添加 HTML meta 元素引用瓷贴及其颜色。

Windows 8 固定网站的信息识别

IE 10 可以通过轮询网站的 XML 文档识别主要信息，继而将其展示在首屏的应用图标上。这样即使用户没有打开应用，也可以接受更新的信息。该识别值可以是数字，也可以是预定义符号列表中的一个。

<meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=http://www.example.com/path/to/file.xml">

在 IE 10 中禁用点击时链接的高亮效果

这非常类似于 iOS Safari 中的 -webkit-tap-highlight-color。但与这个 CSS 属性有所区别的是，这里使用的是一个 HTML 元标签，并且是一个布尔值而不是颜色值。使用这个功能就会对全体使用或禁用。

<meta name="msapplication-tap-highlight" content="no" />

更多帮助信息和技巧，请参考 Microsoft's documentation on adapting WebKit-oriented apps for IE10。

搜索

为搜索引擎蜘蛛设置 sitemap

了解如何创建 sitemap。

<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml">

对搜索引擎屏蔽页面

根据 FLickr 前社区经理 Heather Champ 的看法，如果你足够理智，那么就不应该允许搜索引擎检索 “联系” 和 “投诉” 页面。

<meta name="robots" content="noindex">

提醒：不应该在页面中出现展示给搜索引擎的信息。

Firefox 和 IE 搜索插件

内置搜索功能的网站，可以考虑使用浏览器搜索插件提高性能。“搜索插件” 本质上就是一个 XML 文件，它定义了插件于浏览器的信息交互行为。How to make a browser search plugin。

<link rel="search" title="" type="application/opensearchdescription+xml" href="">

其他参数

使用polyfills。
通过 microdata 使用 Microformats 优化搜索结果的准确性。
如果你正在构建一个网页应用，那么你可能会考虑在 iOS 5+ 中滚动时，通过-webkit-overflow-scrolling: touch 调用本地样式。
如果想要屏蔽 Chrome 的翻译提示，或在网页中的禁用 Google 翻译，那么可以使用 <meta name="google" value="notranslate">。如果只是在某一个部分禁用翻译，那么可以添加 class="notranslate"。
如果想在 iOS 中，禁用 Safari 对手机号的自动检测和格式化功能，那么可以使用 <meta name="format-detection" content="telephone=no">。
可以通过使用 implementing X-Robots-tag headers，避免开发阶段的网站被搜索引擎抓取。
当前的屏幕阅读器对 HTML5 的支持还不是很好，建议通过使用 accessifyhtml5.js 给 HTML5 元素添加 ARIA roles 增强无障碍使用体验。

社交网络

Facebook 图谱

当用户分享当前站点时，开发者可以设置其分享到 Facebook 或其他社交网络的信息内容。以下就是开发者需要的最基本信息。更多具体的内容类型，请参考 Facebook's built-in Open Graph content templates。如果想要使用 Facebook 支持的高级特性，可以参考Open Graph tutorial。

<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">

Twitter 卡贴

Twitter 卡贴提供了类似 Facebook 图谱的功能。实际上，当卡贴不能使用时，Twitter 也会使用类似图谱的功能。注意，对于这种方式，Twitter 要求开发者在每个基本域名上都激活卡贴功能。更多格式和应用处理方式，请参考 official Twitter Cards documentation。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="http://www.example.com/path/to/page.html">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="http://www.example.com/path/to/image.jpg">

URL

Canonical URL

通过在 URL 后面追加参数 # 或 ? 来显示页面状态，对浏览器或其他使用者都会有所帮助。http://www.example.com/cart.html?shopping-cart-open=true 就可以比 http://www.example.com/cart.html 更精确地定义页面。

<link rel="canonical" href="">

Official shortlink

向搜索引擎或该网站的使用者提示“这是本网站的短地址”，这种方式已经不被支持。更多信息请参考 article about shortlinks onthe Microformats wiki。

<link rel="shortlink" href="h5bp.com">

独立的移动端地址

如果在桌面端和移动端分别使用独立的 URLs，那么就要考虑好如何让搜索引擎算法更好地解析网站的配置信息。

在 HTML 页面中添加如下注释会对此有所帮助：

对于桌面端网页，添加 link rel="alternate" 标签指向相关的移动端地址，比如 <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page.html" >。
对于移动端网页，添加 link rel="canonical" 标签指向相关的桌面端地址，比如 <link rel="canonical" href="http://www.example.com/page.html">。

网页应用

当网页应用在 iOS 中被添加到桌面后，可以使用如下标签获取信息：

使用 apple-mobile-web-app-capable，可以减少网页应用对 Chrome 的依赖，并提供 IOS App 的视图支持。可以通过使用 apple-mobile-web-app-status-bar-style，控制默认视图的色彩模式。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

使用 apple-mobile-web-app-title，可以为桌面图标重命名。该功能支持 iOS 6+。

<meta name="apple-mobile-web-app-title" content="">

更多信息请参考苹果官方文档。

Apple Touch Icons

Apple Touch Icons 相当于 iOS 设备的桌面图标。Apple Touch Icons 的主要尺寸如下：

57×57px – iPhone with @1x display and iPod Touch
72×72px – iPad and iPad mini with @1x display running iOS ≤ 6
76×76px – iPad and iPad mini with @1x display running iOS ≥ 7
114×114px – iPhone with @2x display running iOS ≤ 6
120×120px – iPhone with @2x and @3x display running iOS ≥ 7
144×144px – iPad and iPad mini with @2x display running iOS ≤ 6
152×152px – iPad and iPad mini with @2x display running iOS 7
180×180px – iPad and iPad mini with @2x display running iOS 8

显示尺寸含义：

@1x - non-Retina
@2x - Retina
@3x - Retina HD

更多有关 iOS 设备的显示信息，请参考 List of iOS devices display。

大多数情况下，可以使用 180×180px 大小的图标，命名为 apple-touch-icon.png 后包含在页面的 <head> 即可：

<link rel="apple-touch-icon" href="apple-touch-icon.png">

如果希望每个设备有不同的内容，那么可以添加多个 Apple Touch Icons。更多信息情参考 article on Touch Icons。

Apple Touch Startup Image

除此之外，可以给 iOS 上的网页应用添加启动界面。该功能需要使用 apple-touch-startup-image，并附加相关的图片链接。由于 iOS 应用于多种尺寸的屏幕下，所以有必要使用媒体查检测尺寸，然后再加载图片。这里是一个在 retina iPhone 的示例：

<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="img/startup-retina.png">

不过，该功能可能需要使用 JavaScript 检测启动界面的图片。Mobile Boilerplate 提供了一个有效地功能来解决这个问题，请参考helpers.js 的实现方法。

Chrome Mobile web apps

Chrome 移动端拥有一个专有的元标签，用来在桌面安装网页应用，该标签比苹果的属性属性标签更具有通用性。

<meta name="mobile-web-app-capable" content="yes">

同样适用于 touch icons:

<link rel="icon" sizes="192x192" href="highres-icon.png">