IT瘾chrome推荐

Octoman – 微博备份工具，可导出 HTML 文件[Chrome]

Sun, 23 Feb 2020 18:12:29 CST

Octoman 是一款简单易用的 Chrome 扩展，用来备份微博，可导出为 HTML 文件，在浏览器进行浏览，支持备份任意用户微博，需要登录微博。@Appinn

来自发现频道，@ misswell 同学的推荐：

这是一个新浪微博备份工具，Chrome 浏览器插件/扩展。使用方法：在 PC 版新浪微博页面点击扩展图片，选择需要保存的用户，点击保存按钮即可。

首先需要登录微博，然后进入你想备份的微博用户页面，点击扩展栏按钮，再点击保存，就开始下载了：

每 500 条微博会保存为一个 html 文件，保存的信息有微博文字、评论数、转发数、点赞数：

注意，图片可点击，会跳转到微博，而每一条微博下面那个评论和转发，是不能点的。

每备份 500 条，会休息两分钟，以防被微博踢掉封了 IP 就不好玩了。

一些注意事项：

请勿同时保存多个用户，会限制访问
需要登录微博
保存过程中不建议操作微博
每500条微博存为一个 HTML 文件
如想存图到本地，可开打 HTML 文件后右键另存
微博太多会保存不全，因为新浪接口返回暂无微博
保存的文件如果出现 finish 代表已经全部完成

Octoman 官网在这里，Chrome 商店链接，离线包（可用开发者模式安装）。

Chrome 开始启用深层链接技术

Sun, 23 Feb 2020 20:29:00 CST

最近发布的 Chrome 80 激活了 ScrollToTextFragment 功能，它是一种深层链接技术，用户可以通过特定网址直接指定想要分享的文本位置，其他人点击链接可以直接访问相关文本而不只是网址。这项功能去年引发了隐私方面的争议，但 Chrome 团队不管争议实现并启用这一功能。ScrollToTextFragment 功能类似在前往某个网页搜索特定文本，浏览器自动滚动到文本所在位置。这项功能听起来似乎人畜无害，但这意味着网站会对访问者有着更多的了解，它们可以知道你对特定的内容感兴趣，从而推断出你的更多信息，很可能你的个人隐私会因此泄露。

B站下载助手 – 地铁族必备，离线缓存 B 站视频 [Chrome]

Tue, 30 Jan 2018 10:18:13 CST

B站下载助手是一款在 Chrome 上辅助下载哔哩哔哩网站视频的工具，只要能播放就能下载，格式为 flv。@Appinn

来自发现频道，作者 @ indooorsman 同样是 Anything to QRcode – 给 Chrome 内容生产二维码[Chrome]、微信备份 – 备份与删除微信、朋友圈、公众号的照片和视频[Android] 的开发者。

B站下载助手是这样描述自己的：

帮助你下载你能在 Bilibili 网站播放的视频（所以前提是你能在网站上播放），适用于某些番剧可以看却不能离线缓存的场景，比如我本人购买了 B 站大会员，能直接看大部分番剧，但还是有很多不能离线缓存，对于地铁族来说很难受。。。所以就做了这个扩展，用来在 PC 上下载这些番剧，然后传到手机上，在上下班路上看。。。希望对大家也有所帮助✧(≖ ◡ ≖✿)

嗯，使用方法如下，请根据步骤来：

0. 安装本扩展（废话。。。
1. 打开你要播放的视频页面，必须是有播放器的那个页面
2. 在页面空白处点击右键，然后点右键菜单中的“检查元素” / “检查”
3. 在弹出的开发者工具中，点击 “B站下载助手”标签，找不到的看扩展的屏幕截图去。。。
4. 然后按“B站下载助手”中的说明操作即可

正常情况下，应该能看到下面的蓝色长条按钮：

然后就可以下载了，下载后的格式为 flv。

而在手机端，能够播放 flv 的播放器，比如 VLC、 MX Player、 nPlayer 等等常见的播放器都可以播放。

Chrome 商店 | ChromeFor（可直接下载 .crx 扩展文件）

异步脚本载入提高页面性能

Wed, 18 May 2016 08:00:00 CST

可能很多人都知道JavaScript的载入和渲染会暂停DOM解析，但可能仍缺乏直观的体验。本文通过几个例子详述脚本对页面渲染的影响，以及如何使用异步脚本载入策略提供页面性能和用户体验。包括在脚本载入缓慢或错误时尽早显示整个页面内容，以及早点结束浏览器忙提示（进度条、旋转图标、状态栏等）。

DOM 渲染流程

要理解异步脚本载入的用处首先要了解浏览器渲染DOM的流程，以及各阶段用户体验的差别。一般地，一个包含外部样式表文件和外部脚本文件的HTML载入和渲染过程是这样的：

浏览器下载HTML文件并开始解析DOM。
遇到样式表文件 link[rel=stylesheet]时，将其加入资源文件下载队列，继续解析DOM。
遇到脚本文件时，暂停DOM解析并立即下载脚本文件。
下载结束后立即执行脚本，在脚本中可访问当前 <script>以上的DOM。
脚本执行结束，继续解析DOM。
整个DOM解析完成，触发 DOMContentLoaded事件。

上述步骤只是大致的描述，你可能还会关心下面两个问题：

资源文件下载队列。样式表、图片等资源文件的下载不会暂停DOM解析。浏览器会并行地下载这些文件，但通常会限制并发下载数，一般为3-5个。可以在开发者工具的Network标签页中看到。
执行脚本文件前，浏览器可能会等待该 <script>之前的样式下载完成并渲染结束。详见外部样式表与DOMContentLoaded事件延迟一文。

脚本载入暂停DOM渲染

脚本载入真的会暂停DOM渲染吗？非常真切。比如下面的HTML中，在脚本后面还有一个 <h1>标签。

   <!DOCTYPE html>
<html>
<body>
  <h1>Hello</h1>
  <script src="/will-not-stop-loading.js"></script> 
  <h1>World!</h1>
</body>
</html>

我们编写服务器端代码（见本文最后一章），让 /will-not-stop-loading.js始终处于等待状态。此时页面的显示效果：

脚本等待下载完成的过程中，后面的 World不会显示出来。直到该脚本载入完成或超时。试想如果你在 <head>中有这样一个下载缓慢的脚本，整个 <body>都不会显示，势必会造成空白页面持续相当长的时间。所以 较好的实践方式是将脚本放在 <body>尾部。

很多被墙的网站加载及其缓慢就是因为DOM主体前有脚本被挡在墙外了。

DOMContentLoaded 延迟

既然脚本载入会暂停DOM渲染，OK我们把脚本都放在 <body>尾部。这时页面可以被显示出来了， 但是在脚本载入前， DOMContentLoaded事件仍然不会触发。 请看：

   <!DOCTYPE html>
<html>
<body>
  <h1>Hello</h1>
  <h1>World!</h1>
  <script>
    document.addEventListener('DOMContentLoaded', function(){
      alert('DOM loaded!');
    });
  </script>
  <script src="/will-not-stop-loading.js"></script> 
</body>
</html>

这时 Wrold!会显示，但浏览器忙指示器仍在旋转。这是因为 DOM 仍然没有解析完成，毕竟最后一个 <script>标签还未获取到嘛！当然 DOMContentLoaded事件也就不会触发。 DOM loaded!对话框也不会弹出来。

直到超时错误发生， DOMContentLoaded才会触发（在我的Chrome里超时用了好几分钟！），此时对话框也会弹出：

浏览器忙提示

本文关心的核心问题是页面性能和用户体验，现在来考虑一个问题：

对于非必须的页面脚本，在它的载入过程中如何取消浏览器的忙提示。

首先想到的办法一定是从HTML中干掉那些 <script>，然后在JavaScript中动态插入 <script>标签。比如：

   var s = document.createElement('script');
s.src = "/will-not-stop-loading.js";
document.body.appendChild(s);

不贴图了，标签页上的图标确实在旋转，和上一小节中的图一样 :(

那么等 DOMContentLoaded会后再来插入呢？

   document.addEventListener('DOMContentLoaded', function(){
    var s = document.createElement('script');
    s.src = "/will-not-stop-loading.js";
    document.body.appendChild(s);
});

上述代码仍然无法阻止浏览器忙提示。这充分说明浏览器JavaScript执行是单线程的，DOM事件机制也不例外。

异步加载脚本

为了阻止浏览器忙提示，应当可以使用异步加载脚本的策略。先看一个简单的示例：

   setTimeout(function(){
    var s = document.createElement('script');
    s.src = "/will-not-stop-loading.js";
    document.body.appendChild(s);
});

setTimeout未指定第二个参数（延迟时间），会立即执行第一个参数传入的函数。但是JavaScript引擎会将该函数插入到执行队列的末尾。这意味着正在进行的DOM渲染过程完全结束后（此时浏览器忙提示当然会消失），才会调用上述函数。看图：

其中 /will-not-stop-loading.js仍处于 pending状态，但浏览器忙提示已经消失。然而在Chrome中，如果插入 <script>时仍有其他资源正在载入，那么上述做法仍然达不到效果（浏览器会判别为页面仍未完全载入）。总之： 异步加载脚本来禁止浏览器忙提示的关键在于让DOM先加载完毕。

最佳实践

不要沮丧，在实际的项目中有两种成熟的办法可以禁止浏览器忙提示。

AJAX + Eval

使用AJAX获取脚本内容，并用Eval来运行它。因为AJAX一般不会触发浏览器忙提示，脚本执行只可能让浏览器暂停响应也不会触发忙提示。

首先在需要异步加载的脚本设置 type="text/defered-script"，并用 data-src代替 src防止浏览器直接去获取：

   <script type="text/async-script" data-src="http://foo.com/bar.js">

然后在站点的公共代码中加入『异步脚本加载器』：

   $('[type="text/defered-script"]').each(function(idx, el){
    $.get(el.dataset.src, eval);
});

注意：使用AJAX GET脚本文件时不要设置 Content-Type: "application/javascript" （包括 jQuery.getScript）。这会使浏览器发现你是在加载脚本，进而触发忙提示指示器。当然，如果此时页面已然载入完毕，任何AJAX都不会触发忙提示了。

上述方法的缺点在于，一旦被引入的JavaScript中需要以相对路径的方式载入其他JavaScript就会引发错误。因为被Eval的脚本中，当前路径变成了页面所在路径，不再是原来的 <script>中 src所指的路径。这在使用第三方库时非常常见。

Load 事件

既然禁止浏览器忙指示器的关键在于让DOM加载完毕，那就绑定页面载入完毕的事件： load。例如：

   $(window).load(function(){
    $('script[type="text/async-script"]').each(function(idx, el){
        var $script = $('<script>');
        if(el.dataset.src) $script.attr('src', el.dataset.src);
        else $script.html(el.text);
        $script.appendTo('body');
        el.remove();
    });
});

对于外部 <script>，生成一个新的包含正确 src的 <script>。
对于行内 <script>，生成一个新的包含正确内容的 <script>， type默认即为 "application/javascript"。

该方法采用DOM中 <script>加载的方式，没有AJAX+Eval改变脚本中当前路径的缺点。 http://harttleland.com中的Google Analytics、MathJax等脚本都采用这种处理方式。

服务器工具

本文所做实验服务器端都使用Node.js写成：

   const http = require("http");
const fs = require('fs');
const port = 4001;

var server = http.createServer(function(req, res) {
    switch (req.url) {
        case '/':
            var html = fs.readFileSync('./index.html', 'utf8');
            res.setHeader("Content-Type", "text/html");
            res.end(html);
            break;
        case '/will-not-stop-loading.js':
            break;
    }
});

server.listen(port, e =>
    console.log(`listening to port: ${port}`));

参考阅读

MDN Element.dataset: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
jQuery.getScript http://api.jquery.com/jQuery.getScript/

兼容所有浏览器的 DOM 载入事件

Sat, 14 May 2016 08:00:00 CST

本文就页面载入问题讨论 DOMContentLoaded、 load、 readyState等DOM事件的浏览器兼容性，并给出怎样绑定DOM载入事件以兼容所有的浏览器。接着介绍jQuery对该问题的实现源码，以及jQuery中 $(document).ready()和 $(window).load()方法的区别。

在讨论页面载入事件之前，首先需要区分的两个概念：DOM就绪和渲染结束。

DOM就绪是指浏览器已经接收到整个HTML并且DOM解析完成；
渲染结束是指浏览器已经接收到HTML中引用的所有样式文件、图片文件、以及Iframe等资源并渲染结束。

DOM API 提供的事件

DOM API 在页面载入问题上主要提供了三个接口：

DOMContentLoaded事件；
load事件；
document.readyState属性，及其对应的 readystatechange事件。

我们看看这三者有什么区别：

DOMContentLoaded

   document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM ready!");
});

页面文档（DOM）完全加载并解析完毕之后，会触发 DOMContentLoaded事件， HTML文档不会等待样式文件，图片文件，Iframe页面的加载。此时DOM元素可能还未渲染结束，位置大小等状态可能不正确，但DOM树已被创建，多数JavaScript已经操作DOM并完成功能了。 所以绝大多数场景下都应当使用 DOMContentLoaded事件， jQuery也采用了这种实现。

This (DOMContentLoaded) event fires after the HTML code has been fully retrieved from the server, the complete DOM tree has been created and scripts have access to all elements via the DOM API. – molily.de

其实样式文件的加载会阻塞后续脚本执行，此时多数浏览器都会推迟 DOMContentLoaded事件的触发，在样式表的载入会延迟DOM载入事件一文中详细地讨论了这一点。

考虑到IE8及以下不支持该事件，因此我们需要后面的两个 DOM 事件作为Fallback。

load

   document.addEventListener("load", function(event) {
    console.log("All resources finished loading!");
});

页面完全载入时触发 load事件，此时所有的图片等资源文件都已完全接收并完成渲染。因此 load总是在 DOMContentLoaded之后触发。 load事件没有任何兼容性问题。 load常常被作为最终的Fallback。

注意IE8及以下不支持 addEventListener，需要使用 attachEvent来绑定事件处理函数。详见： DOM 事件与 jQuery 源码：捕获与冒泡一文。

document.readyState

document.readyState属性用来表征DOM的加载状态，该属性值发生变化时会触发 redystatechange事件。 document.readyState属性有三种取值：

"loading"：DOM在加载过程中；
"interactive"：DOM就绪但资源仍在加载中；
"complete"：DOM加载完成。

由于IE8支持 document.readyState属性，也常常用来在IE8中作为 DOMContentLoaded的Fallback。

注意IE8以前的IE不支持 document.readyState属性。可以执行 document.documentElement.doScroll("left")，当DOM未就绪时执行该方法会抛出错误，以此检测DOM是否就绪。

jQuery 方法

jQuery提供了三种方法来提供页面载入事件：

$(document).ready(callback)：在DOM就绪时执行回调，返回值为 document构成的jQuery集合。
$(function(){})：这是最常用的写法，参数与返回值同上。
$(window).load()：DOM就绪，并且页面渲染结束（图片等资源已接收完成）时执行回调。

更多jQuery函数 $()的用法请参考 jQuery中$()函数有几种用法一文，本文不再赘述。

上述三个方法在事实上相当于只有两个： .ready()和 .load()。

.ready()方法的实现在这里： https://github.com/jquery/jquery/blob/master/src/core/ready.js

   if ( document.readyState === "complete" ||
    ( document.readyState !== "loading" && !document.documentElement.doScroll ) ) {
    // Handle it asynchronously to allow scripts the opportunity to delay ready
    window.setTimeout( jQuery.ready );
} else {
    // Use the handy event callback
    document.addEventListener( "DOMContentLoaded", completed );
    // A fallback to window.onload, that will always work
    window.addEventListener( "load", completed );
}

.load()就是DOM load的包装，不再赘述。 DOM 事件与 jQuery 源码：捕获与冒泡一文详述了jQuery如何包装DOM事件。

参考阅读

jQuery .ready()方法： https://api.jquery.com/ready/
MDN load 事件： https://developer.mozilla.org/en-US/docs/Web/Events/load
MDN DOMContentLoaded事件： https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded
MDN document.readyState属性： https://developer.mozilla.org/zh-CN/docs/Web/API/Document/readyState

Safari 和 Firefox 都抛弃了 Flash，Chrome 就剩你咯

Tue, 14 Jul 2015 19:06:11 CST

对于 Adobe 来说，这两天应该是挺不开心的。先是 Facebook 的首席安全官 Alex Stamos 在 Twitter 上公开说：Adobe，你真的应该对 Flash 做个了断了，黑客通过 Flash 已经偷窃了多达 400 GB 的缓存文件。接着 Firefox 的主管也表示将在 Firefox 浏览器中默认禁用所有版本的 Flash。

这些消息出来之后，Twitter 上的用户和媒体基本都是一副拍手叫好的姿态。比如 Engadget 说的是 Flash 接连遭到了 Facebook 和 Mozilla 的炮轰、抵制；而 Twitter 用户 @zaid 则表示：如果你是一个在意你的用户的广告展示商，那么你应该立刻停止接受 Flash 广告。

做出这种举动的其实不止 Firefox。在今年 4 月份，当苹果发现 Flash 的安全性问题后，就在更新 OS X 的网页插件遮蔽系统时禁用了所有旧版 Flash 插件。在 2014 年时，苹果也曾经有过类似的举动，由于当时 Adobe 根本就没能发布任何更新，所以也就等于 Flash 直接被苹果屏蔽了。

当 Firefox 和 Safari 都在用类似的方法抵制 Flash 时，Chrome 浏览器却和 Flash 紧紧地捆绑在一起。按照 Google 的说法，Flash 被直接集成在 Chrome 中并且处于默认开启的状态。

现在，Safari 和 Firefox 都抛弃了 Flash，Chrome 就剩你咯。

在互联网界，除了 Flash 之外，好像没有谁会像它这样经常沦为众人一起责难的对象。当乔布斯在 2010 年公开指责 Flash 时， Adobe 的 CEO Shantanu Narayen 还会出来回应一下苹果的指责，并大谈自己坚信多平台的应用程序将受到消费者欢迎之类的。而现在，Adobe 基本上是一副破罐子破摔的姿态。毕竟现实情况是：所有的 Flash 版本都有安全漏洞，而他们却没法立刻给出一个可行的解决方案。

当然，虽然 Firefox 和苹果都曾经禁用过 Flash，但用户其实也是自行手动开启的，而且在 Adobe 更新了安全的版本后，这些公司基本上也会更改之前的禁令规则。不过，即便这样，对于既不安全又耗电的 Flash，大家还是能离的远点就离的远点吧。

细数谷歌浏览器的 10 大隐藏技能

Tue, 10 Feb 2015 18:34:21 CST

谷歌 Chrome 浏览器一直以速度、简洁和安全为用户所熟知。除此之外，Chrome 的其他功能也非常强大，为了进一步提高工作效率，让我们一一揭晓它的那些隐藏技能吧。

同时登入多个账户

用户拥有多个谷歌账户（工作用或个人用）是很习以为常的事情，但是比较麻烦的是常常需要登出一个账号再登入另外一个。但是使用 Chrome 浏览器的话，就无需担心多账号同时登陆的问题。当使用 Gmail 邮箱和谷歌硬盘等其他谷歌服务时，用户能在多个账户之间快速切换。

离线安装扩展程序程序

如今有好一些应用程序不需要网络链接就能够离线使用，比如 Gmail 邮箱、谷歌硬盘和谷歌日历。这对那些不能使用网络或经常出差工作的用户来说是理想办公工具。用户可以从 Chrome 应用商店安装离线扩展程序，并使用 Chrome 应用启动器或 Chrome 浏览器来打开这些程序。

Chrome 进程管理

同时按住 SHIFT+ESC 键能调出 Chrome 任务管理器并显示 Chrome 的进程列表，包括打开的标签页、插件和扩展程序。此外还会显示进程 ID、内存、CPU 和网络等使用情况。通过右击鼠标还能显示其他参数，同时也能让用户结束那些使浏览器运行速度变慢的进程。

使用 Chrome 浏览器当记事本

通过使用 HTML5 的「contenteditable」属性，就能将浏览器的标签页转变成记事本。这个功能很简单，只需要将如下代码复制到地址栏点击回车键，就会出现一个简洁的不能再简洁的空白页面，再点击这个空白页面，就可以开始在页面上输入内容。如果你保存这个页面，你就会得到一个 HTML 文件，当你打开这个文件时，你就能看见你之前输入的内容了。

此外更加高级的编辑功能则需要如下代码：

语音搜索

如果用户不喜欢在键盘上打字，不妨试一试语音搜索这个功能。只需打开谷歌搜索框，轻轻一点搜索框末端的麦克风标志即可打开语音搜索功能。支持多种语言，用户只需通过浏览器设置来激活「OK，Google!」语音控制功能，用户只要一句「OK，Google!」Chrome 浏览器就会执行指令。面前用户可以通过语音控制让浏览器搜索任何想查看的东西，包括天气，方向等。对于某些搜索，Chrome 浏览器的会通过语音搜索朗读搜索结果并提供相关文本。

远程控制

如果用户在不同地方使用多台电脑，或者帮助亲朋好友解决电脑方面的问题，那么谷歌 Chrome 浏览器的远程桌面工具就能派上用场。它能让用户连接和控制在不同地点的电脑。

用户可以通过 Chrome 浏览器安装远程桌面控制扩展应用，这个插件必须装在每台的 Chrome 浏览器上，点击「分享」按钮则会生成一个密码与对方来共享桌面。在 Chrome 中打开一个新标签页，点击该工具图标，打开应用程序。点击分享这台电脑（Share this computer），接下来你可以选择分享你的 email 地址、你分享的电脑，以及聊天记录。每个远程分享进程都会获得一个唯一的授权码。把这个授权码发给你的好友，对方输入该授权码后便可以访问你分享的内容。

从地址栏搜索特定站点

用户可以通过地址栏搜索 Gmail 邮箱的邮件，或者是 Google Drive 的某个文件、亚马逊或京东的某个商品。用户必须先打开浏览器的设置，在搜索项进入管理搜索引擎。然后你就会发现一系列不同站点的搜索引擎，你可以编辑当前的搜索引擎或设置其他默认搜索引擎。例如淘宝已近存在列表里，通过将其设置成默认搜索引擎后，就可以直接在地址栏里输入关键词就能搜索到你想要的商品。

在注册页面自动生成新密码

Chrome 浏览器能够自动帮助用户在新账户注册页面生成新密码。你只需要在地址栏输入「about:flags」点击确认就能进入该功能的页面，选择「启用密码生成功能」然后重新启动浏览器即可。

完成操作后，Chrome 浏览器就能识别任何用户想要注册新账户的页面，用户可以像平常那样填写注册表单，当用户点击「选择密码」的选项框时，就会出现通知气泡和一个推荐的密码，用户可以选择使用这个推荐的密码或使用自己的密码。下次再登录这个网站的时候，Chrome 会自动调用最初生成的密码，当然所有生成的密码会与 Chrome 浏览器同步。不过该功能还在试验性阶段。

模拟移动设备访问当前网页

Chrome 浏览器除了为普通用户提供强大的 Chrome 扩展外，还提供了强大了 chrome 开发者工具，以帮助广大网站开发者提供诸如兼容性等的测试工作。按下 F12 或（Ctrl+Shift+I）键打开「开发者工具」，点击 [Show drawer] 图标，选择 [Emulation] 后使用者能在 Device 一栏的下拉列表中看到主流的移动设备。

固定标签页

如果有些网页用户需要一直打开，用户可以点击鼠标右键固定该标签页。而标签页的尺寸将变小并自动移到浏览器的最左端，关闭标签页的选项会被移除，在浏览器重新启动的时候会自动打开。用户也可以选择右击鼠标右键取消固定标签页。

使用Chrome DevTools的Timeline分析页面性能

Fri, 13 Nov 2015 15:50:38 CST

随着webpage可以承载的表现形式更加多样化，通过webpage来实现更多交互功能，构建web应用程序已经成为很多产品的首要选择。这种方式拥有非常明显的优势：跨平台、开发便捷、便于部署和维护等等，但随着功能的不断积累，web应用程序也会变得越来越复杂。但是，我们仍然想要在webpage支持丰富的呈现形式的同时，让页面效果能够达到>=60fps(帧)/s的刷新频率以避免出现卡顿，就需要我们使用一些比较直观的方式来分析衡量页面的性能问题，为性能优化方案提供依据。

为什么是60fps?
我们的目标是保证页面要有高于每秒60fps(帧)的刷新频率，这和目前大多数显示器的刷新率相吻合(60Hz)。如果网页动画能够做到每秒60帧，就会跟显示器同步刷新，达到最佳的视觉效果。这意味着，一秒之内进行60次重新渲染，每次重新渲染的时间不能超过16.66毫秒。

需求大体明确，就是要找到页面执行过程中的性能瓶颈。而Chrome DevTools的Timeline则正是用来记录和分析应用在运行时所有的活动情况，它是用来排查应用性能瓶颈的最佳工具。

下图是Timeline面板的预览效果：

Tips:为了避免浏览器插件对分析过程产生影响，建议在隐身模式下进行分析。

Timeline工具栏介绍

Timeline工具会详细检测出在Web应用加载的过程中时间花费情况的概览，包括下载资源、处理DOM事件、页面布局渲染、向屏幕绘制元素等。你可以通过分析Timeline得到的事件、框架和实时的内存用量，找出应用的性能问题。

在分析页面前，需要首先开启录制功能，记录页面的操作和渲染记录。如上图，左上角的灰色圆点就是录制按钮，点击后会变成红色，然后在页面上进行相关操作后再次按下变成灰色完成录制，这样就完成了一次对操作及加载渲染的记录过程，随后Timeline就会开始分析操作过程中的各项性能参数。

Timeline同时提供了两种查看模式：“事件模式(Event Mode)”和“帧模式(Frame Mode)”。如上图箭头所示。

事件模式：显示重新渲染的各种事件花费的时间。
帧模式：显示每一帧的时间花费情况。

事件模式 (Event Mode)

如果我们的一个页面执行效率不高，我们必须要搞清楚导致页面性能低下的原因，到底是javascript执行出了问题，还是页面渲染出了问题。要了解这里面的执行细节，我们可以使用“事件模式”来进行分析。首先我们需要录制一些需要被分析的操作，录制结束后进入事件模式预览Timeline。下图是得到的事件模式的视图：

在上图中，不同的颜色表示不同的事件。一种颜色的区块越长，说明在处理该事件的耗时就越长。单击某一区块，可以在下面的Summary概要中看到详细的事件处理过程及耗时分布。

蓝色(Loading)：网络通信和HTML解析
黄色(Scripting)：JavaScript执行
紫色(Rendering)：样式计算和布局，即重排
绿色(Painting)：重绘
灰色(other)：其它事件花费的时间
白色(Idle)：空闲时间

在显示的记录中，浏览器也会为在检测过程中发现的一些可能导致性能问题的过程进行标注，在 Mode View视图区域，可能会出现一些红色的区块段，这些红色的区块段表明，在对应的时间上执行的事件可能存在性能问题，而在对应的 Main Thread视图区域，事件区块的右上角会出现红色的小三角，点击当前区块，在下面的 Summary概要区域内会给出详细的警告内容以及脚本可能出现问题的行数，如下图，浏览器提示“强制同步布局可能会导致性能瓶颈”：

此外，在关闭Event Mode后，还可以看到Record Detail视图，详细列出一次记录中各类事件的详细内容。

Record Detail视图区域的左侧是事件标题，右侧是对应的时间线。点击每一条时间标题可以看到更多信息，如事件发生在脚本的哪一行等。如果你只对某一个时间段内的某些操作感兴趣，可以通过移动时间轴的始末位置来选择要浏览的区域：

帧模式 (Frame Mode)

帧模式从页面渲染性能的角度提供了数据支撑，一个柱状“frame”表示渲染过程中的一帧，也就是浏览器为了渲染单个内容块而必须要做的工作，包括：执行js，处理事件，修改DOM，更改样式和布局，绘制页面等。

如前文所述，我们的目标是保证页面要有高于每秒60fps(帧)的刷新频率，这样就能保证页面有高流畅度的渲染。

中在Frame视图中有两条贯穿该视图的横线，分别标识出60FPS和30FPS的基准，按照前面提到的16.66ms的计算方式，我们可以理解为分别标识了16.6ms和33.3ms两个时间点。下面的一条是60FPS，低于这条线，可以达到每秒60帧；上面的一条是30FPS，低于这条线，可以达到每秒30次渲染。如果色柱都超过30FPS，这个网页就有性能问题了。

图中帧柱的高度表示了该帧的总耗时，帧柱中的颜色分别对应该帧中包含的不停类型的事件。每一帧柱的高度越低越好，上图是艺龙PC首页 www.elong.com的帧渲染图，从图中可以看出，在进行某些帧的渲染时，帧的渲染频率低于30FPS/s，第二帧和第三帧就大幅低于30fps(帧柱高度高于30fps标准线)，在实际浏览器渲染中就有可能出现卡顿。对相关的帧进行分析时，可以点击其中某一帧查看渲染详情，也可以选择某个区域的几个帧查看渲染详情。而要找出可能影响性能的原因，点击当前问题帧，在 Summary面板及 Record Detail视图中的详细信息中进行逐条分析。

你可能注意到了在帧柱上存在灰色区域和空白区域,它们分别代表：
灰色区块：那些没有被DevTools感知到的活动
空白区块：显示刷新周期（display refresh cycles）中的空闲时间段

点击某一个帧柱还可以得到该帧的详细记录数据：

Warning: 警告信息
ScreenShot: 当前选中帧的渲染截屏
Duration: 该记录及其子记录的总耗时
FPS: 当前帧的渲染频率
CPU Time: CPU耗时
Aggregated Time: 合计耗时分布

总结

发现问题是解决问题的第一步，chrome浏览器的TimeLine工具可以很好地辅助我们分析页面的性能瓶颈，提供详细全面的分析数据，为我们进行性能优化提供数据依据。当然，TimeLine中有用的功能还有很多，比如 Memery Mode, Screen Shot等，使用技巧多种多样，在这里主要介绍了如何去记录一段渲染过程，如何去使用 Event Mode和 Frame Mode去查看并分析得到性能指标，后续如果有新的体会和发现，还会再做记录~

TimeLine中的事件汇总

Loading事件

事件	描述
Parse HTML	浏览器执行HTML解析
Finish Loading	网络请求完毕事件
Receive Data	请求的响应数据到达事件，如果响应数据很大（拆包），可能会多次触发该事件
Receive Response	响应头报文到达时触发
Send Request	发送网络请求时触发

Scripting事件

事件	描述
Animation Frame Fired	一个定义好的动画帧发生并开始回调处理时触发
Cancel Animation Frame	取消一个动画帧时触发
GC Event	垃圾回收时触发
DOMContentLoaded	当页面中的DOM内容加载并解析完毕时触发
Evaluate Script	A script was evaluated.
Event	js事件
Function Call	只有当浏览器进入到js引擎中时触发
Install Timer	创建计时器（调用setTimeout()和setInterval()）时触发
Request Animation Frame	A requestAnimationFrame() call scheduled a new frame
Remove Timer	当清除一个计时器时触发
Time	调用console.time()触发
Time End	调用console.timeEnd()触发
Timer Fired	定时器激活回调后触发
XHR Ready State Change	当一个异步请求为就绪状态后触发
XHR Load	当一个异步请求完成加载后触发

Rendering事件

事件	描述
Invalidate layout	当DOM更改导致页面布局失效时触发
Layout	页面布局计算执行时触发
Recalculate style	Chrome重新计算元素样式时触发
Scroll	内嵌的视窗滚动时触发

Painting事件

事件	描述
Composite Layers	Chrome的渲染引擎完成图片层合并时触发
Image Decode	一个图片资源完成解码后触发
Image Resize	一个图片被修改尺寸后触发
Paint	合并后的层被绘制到对应显示区域后触发

参考文档

https://developers.google.com/chrome-developer-tools/docs/timeline

http://www.w3cfuns.com/article-1248-1.html

http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles

7个触控技巧让Chrome远端桌面从手机灵活控制电脑

Wed, 22 Oct 2014 22:37:27 CST

三年前Google开始推出「 Chrome远端桌面］功能，利用安装在浏览器内的App进行电脑与电脑之间的远端桌面控制，而在今年4月（ 2014年）， Chrome远端桌面登陆Android系统，让Android使用者获得一个实用的免费工具，可以从手机远端操控自己家中、公司的电脑桌面。 为什么要从手机操控家里的电脑 ？我马上可以想到很多实用的例子，例如很多软体手机上没有，或是手机上功能阳春，如果在外面行动时有紧急需求必须打开这类软体工作，那么与其去找手机App，还不如用「远端桌面」，从手机连回家中电脑，打开家中电脑软体完成工作，像是Photoshop修图，或是我平常写部落格用的Blogger网页编辑后台。手机虽然有相应App ，但还是电脑上功能更完整，这时候若是有紧急需求，一个临时行动工作的折衷之道，就是用手机的远端桌面连回电脑操作。但是，这样的操作真的方便吗？当然不会比你直接在家里用电脑便捷，可是现在手机上的远端桌面App其实操控已经愈来愈完美、速度愈来愈顺畅，要从手机灵活控制桌面电脑的大萤幕是可以实现的梦想。 今天这篇文章，我就要以免费Google Chrome远端桌面Android App的 七个触控技巧 来示范手机如何灵活控制电脑的复杂操作。

「 Chrome远端桌面」支援Windows、 Mac等电脑系统之间的远端桌面操控，也可以透过Chrome远端桌面的Android App来操作远端的电脑。要怎么在电脑、手机上安装并完成Chrome远端桌面的设定呢？ 这部分请先参考之前电脑玩物上的「 Chrome远端桌面安装设定教学 」。完成安装设定后，就让我们一起来看看，手机端有哪些触控技巧，让我们也能从小萤幕轻松的完成桌面的大萤幕操作。

1. 放大缩小桌面：两指缩放画面

要在手机小萤幕容纳整个电脑桌面大萤幕是不可能的，所以我自己的使用习惯是在手机上拿出放大镜，放大我想要操作的那一小部分电脑桌面即可。这时候只要利用「双指缩放」，就可以放大、缩小任何范围内的桌面，透过这个小技巧，在手机上也能清楚看到电脑软体的每一个按钮功能，并且很方便的点选、编辑、操作。

2. 随着滑鼠移动画面视野：单指滑动

可是手机上把电脑桌面放到很大，这样不是只看到部分的桌面视野吗？如果要操作电脑桌面其他部分时要怎么移动？其实很简单，只要用「单指在手机萤幕上滑动」，就会看到电脑上的滑鼠游标跟着你的方向滑动，而当滑鼠游标移动到视野范围边缘时，整个画面视野就会自动的往游标方向移动，如此一来就好像移动你的放大镜，可以轻松看到桌面其他部分。

3. 滑鼠左键：单指单击

操控电脑软体最重要的滑鼠左键、右键，也可以在Chrome远端桌面上用简单的方法实现。如果要使用滑鼠左键打开档案、开启功能，只要利用前面提到的单指滑动先把滑鼠游标移动到你要点选的按钮上，这时候在手机萤幕任何地方进行「单指单击」，这就是模拟滑鼠左键动作，可以开启该按钮功能。

4. 滑鼠右键：双指单击

滑鼠右键也很简单，同样的方法将滑鼠游标先移动到目标上，这时候在手机萤幕任何地方进行「双指单击」，就可以启动滑鼠右键功能。通常我们利用这个功能来打开档案或连结的附加选单。

5. 卷动网页：双指拖曳

我有时候会从手机上远端桌面连回家里电脑，打开Blogger完整网页版后台进行部落格文章的编辑，但是文章写得很长，要怎么快速进行网页的卷轴卷动、文件的上下卷动？其实很简单，在手机萤幕的任何地方进行「双指拖曳」，上下拖曳就代表上下卷动长网页。

6. 按住后拖曳档案

有时候临时需要把电脑里的某个档案上传到云端硬碟来同步到手机，或是紧急需要电脑端的档案管理，这时候可以在手机端顺畅的完成电脑需要的档案管理操作吗？档案管理时我们最习惯的是使用滑鼠拖曳档案这样的功能，而在Chrome远端桌面的手机端，同样只要先将滑鼠移动到档案上，然后在手机萤幕任何地方「按住不放，开始拖曳」，就能进行和电脑一样的档案拖曳操作。

7. 快速拉出键盘：三指向上滑动

前面提到我会利用远端桌面从手机连回电脑进行部落格文章编辑，当然这通常不是正式的编辑，而是我在移动中忽然想到需要一些紧急修改，但无法马上回到电脑前，就可以利用手机远端桌面解决问题。而这时候怎么在手机进行远端桌面上的文件编辑、打字呢？其实很简单，从手机远端桌面打开任何电脑上的编辑工具，用「三指往上滑动」的手势，可以快速拉出手机键盘，这时候这就是你的电脑键盘，可以同样的输入任何内容。 利用上面这几个基本的触控技巧，其实手机上也能「 合理、实用 」的操控电脑桌面，完成你的临时工作需求，满足你必须使用电脑上更强大的软体的要求，而且从放大视野、滑鼠移动、网页卷动都能顺畅操控，提供给需要的朋友参考。当然，如果你不需要这么复杂的手机－电脑操控，你可能只是想利用手机「遥控」电脑端的影音播放器，那么这时候你不需要远端桌面，只需要安装像是「 Unified Remote免设定让Android手机变身PC万用遥控器」这样的免费App即可。

7个触控技巧让Chrome远端桌面从手机灵活控制电脑，首发于极客范 - GeekFan.net。

Google Stars到底是什么？Google要用它来替代书签管理器

Sat, 31 May 2014 12:31:53 CST

在今年4月份时曾经有媒体报道Google正在Chrome浏览器中测试一项名为Google Stars的新功能，这项新功能允许用户收藏、组织和分享网络上的内容。今天，名为 Florian Kiersch的Google+用户放出了一张Google Stars出现在Chrome Web Store上的截图（事实上目前在Chrome Web Store还搜不到这个扩展），随后这款扩展程序也被传到网盘上。所以接下来我们就可以看看Google Stars到底是一款怎样的产品了。

由于这款扩展并非来自Chrome Web Store，所以我选择在Chrome Canary浏览器上安装它。安装完成之后，你会发现Chrome浏览器地址栏上收藏星标的样式有明显的变化。而且，当你打开Chrome的书签管理器时，浏览器会直接把你带到Chrome Stars的管理界面。这也就意味着当你安装了这款扩展后，它就接管了Chrome本身的书签管理器功能。

在正式进入Google Stars界面之前，它会弹出一个功能介绍窗口。从图中我们可以看出Google Stars支持高级搜索、拖曳管理、分享、分类、自动删除垃圾网页等一系列功能。Google甚至不忘在上面表示他们正在努力让Google Stars变得更好。

进入Google Stars的管理界面后，它会把用户已有的书签以缩略图的形式展示出来。用户可以批量删除、移动书签或者文件夹。Google Stars把文件夹分为公开和私有两类。如果你想分享某些收藏的内容只需把它们放在一个公开的文件夹中，然后把链接发送给对方即可。由于产品并没有最终发布，所以个人觉得这或许不是分享功能的最终形态，毕竟这样的分享设置机制确实过于繁琐了。理想的状态下，应该是当用户选中某一个条目或者文件夹时立马就可以将其分享出去。

如果某些用户收藏的内容足够多，那么单纯的搜索功能可能没办法很好的帮用户找到想要的内容，所以Google Stars还提供了分类筛选功能。用户可以按图片、网页、视频这几个分类来浏览对应的内容。在左边栏上，Google还提供了过滤功能，不过目前还不能正常使用。

除此之外，用户还可以对每一个书签和文件夹添加描述。这项功能在用户收藏某个网址时同样适用。比如，当我收藏PingWest时，Google Stars会自动添加标题和描述，我不但可以改写这些文字描述，甚至还可以更改自动生成的背景图片。

通过这款泄漏出来的Chrome扩展，我们暂时能看到的Google Stars的主要特性基本就是这些。一路使用下来之后发现，Google Stars目前就是一个高级版的书签管理器。如果它的最终形态就是这样，那么个人可能更倾向于使用Chrome自带的书签管理功能。Google或许会在下个月的Google I/O上正式公布相关的消息，届时我们就可以一探究竟了。

基于Apache Cordova开发移动平台上的Chrome Apps

Tue, 04 Feb 2014 22:39:54 CST

不好意思，迟到的新闻，同时给大家拜个晚年，祝大家马年吉祥马上有钱！

据去年9月份的消息，Chrome Apps将可以像原生应用一样在各终端设备上离线运行，目前已经做到兼容了所有的桌面平台。而现在通过一个基于 Apache Cordova的开发者预览版工具包，Chrome Apps已经实现可以直接在Android和iOS设备上运行了。应用功能可以完全由HTML、CSS和Javascript打造。

该工具包还提供了一个shell工具以便你将你开发的应用发布到到Apple App Store和Google Play上。也提供了 developer workflow 用来为移动应用原生地打包Chrome App。你可以通过命令行或IDE调用，在设备或模拟器上运行Chrome App。或者你也可以使用 Chrome Apps Developer Tool 在安卓设备上运行你的app，这样不必安装IDE或者移动平台SDK。

Google为移动平台开发了Chrome Apps实现需要调用的各种Chrome API，包括：

identity - 身份认证，利用Oauth2实现
payments - 应用内支付（仅限Android）
pushMessaging - 消息推送
sockets - sockets通信
notifications 消息提醒（仅限Android）
storage - 本地Key－value数据存储
syncFileSystem - 基于Google Drive的文件存储
alarms - 定时任务

除了上面的这些Chrome API，还有更丰富的 Apache Cordova API及插件可供使用，Google也提供了大量的 Sample Code教程！

相信过不了多久，Google Play和Apple App Store和将涌现出各种基于Chrome Apps API打造的App。

十款值得一用的Chrome插件及Apps

Mon, 30 Dec 2013 17:06:03 CST

随着Chrome浏览器的不断完善，也许诸多用户都已把Chrome作为自己主要的上网工具。但对于部分用户来说在琳琅满目的Chrome Web Store里找到自己想要的Apps和扩展可能并不是一件容易的事，所以PingWest在此为大家推荐了一些可以提高工作、生活效率的工具类产品。

Awesome New Tab Page（改变新建标签页样式）：也许你也曾觉得Chrome的新建标签页有些单调，那么安装Awesome New Tab Page后你将会得到一个Metro风格的新标签页。除了可以方便地进入Google的大多数常用服务外，用户还可以直接在新建标签页里搜索Twitter和Facebook上的信息。此外Awesome New Tab Page还提供了一些窗口小部件，用户也可以选择自己需要的将其添加到新建标签也上。

Instagram for Chrome（浏览Instagram图片）：如果你是一位Instagram重度用户，那么这款应用也许会赢得你的喜爱。通过Instagram for Chrome用户可以方便地浏览自己Instagram的信息流、热门照片等，此外搜索和评论功能一样可以正常使用。美中不足的是用户不可以通过浏览器端发送图片。

View original size image for Picasa（查看Google+原始尺寸图片）：经常使用Google+的用户一定对不能查看信息流里原始尺寸的图片感到烦恼，从这款扩展的名称就可以看出它可以满足这个需求。安装之后，用户在Google+上的图片点击鼠标右键就可以选择查看原始尺寸图片了。

Download YouTube Videos as MP4（下载YouTube视频）：虽然Chrome Web Store里有不少下载视频的扩展，但由于Google的政策限制，这些扩展一般都不支持下载YouTube的视频，但用户只要安装这个脚本文件一样可以轻松地下载到YouTube的视频。由于该脚本并不是在Chrome Web Store中，所以安装起来略微麻烦，用户需要打开 chrome://extensions/页面，然后将下载到本地的脚本拖进去才可以成功安装。

Always Clear Downloads（自动清除下载历史记录）：是不是和我一样觉得在下载文件时Chrome浏览器下方多出一个下载横幅很多余？那么Always Clear Downloads将会帮你自动清除掉下载横幅。该扩展可以快速地清除掉下载文件的历史记录，随着文件记录被清除掉，浏览器下方的横幅自然也就消失了。

Xmarks Bookmark Sync（跨浏览器同步备份书签）：由于网站种类繁杂，所以不可避免的我们都存了很多书签，而Chrome的书签同步功能并不是100%有效，所以对书签进行双重备份还是比较重要的。Xmarks Bookmark Sync就是这么一款可以在多个浏览器之间同步书签的工具，通过它既可以实习跨浏览器同步又能防止书签丢失。

Smooth Gestures（鼠标手势操作）：Smooth Gestures曾经由于隐私问题被Google下架，不过再改正错误之后它又重新登录Chrome Web Store了。在Smooth Gestures的帮助下用户可以通过鼠标手势完成诸多浏览器操作，比如关闭标签页、重新打开刚刚关闭的标签页、新建标签页、刷新、后退、切换标签页等等都可以通过鼠标手势实现。我常用的两个手势是上滑回到页首、下滑到达页尾。

Wunderlist（任务管理工具）：Wunderlist是一款跨平台的任务管理工具，其在Chrome Web Store上并不止这一个版本，但比较下来我觉得这个版本最好，所以就介绍这一款了。用户通过Wunderlist建立的任务可以方便地在Chrome、iOS和Android之间同步而且它还是一款无广告的免费产品，所以需要的用户可以考虑升级到Pro版。

WebView（剪辑收集器）：用户安装WebView之后其图标就是一把剪刀，所以它的功能就是让用户可以把不同网页的某个部分剪辑下来汇聚到WebView标签页下以方便自己查看。这对于跟踪搜索某一类信息的用户还是比较有用的。此外，WebView也支持收藏某些剪辑的标签页。

Share Extensions（扩展/Apps分享）：看了这些扩展和Apps之后是不是觉得自己有更好的可以和其他用户分享？如果有的话就使用Share Extensions吧。这款扩展可以把用户安装的扩展和Apps信息集合起来然后输出BBCode、HTML、纯文本等格式以方便将其分享给其他用户。

事实上，Chrome Web Store中有趣的扩展和Apps远不止这些，Pocket、FaWave、Adblock Plus、Proxy SwitchySharp、Evernote Web Clipper等都有着大量的忠实用户，而 Picky Wallpapers、 20 Things I Learned About Browsers & the Web、 Chrome远程桌面一样有着其特定的用户群。由于Chrome本身就是占内存大户，而多数扩展安装之后又会一直在后台运行，所以选择扩展和Apps时还是要多考虑一些自己的需求，对于那些并不是经常需要的扩展完全可以选择禁用或者直接卸载掉。毕竟扩展是安装不完的，而电脑的性能却是受限的。

微软当心，Chromebook们要开始攻城略地了

Sun, 29 Dec 2013 14:02:38 CST

前不久还发广告嘲笑Chromebook并非是一台真正笔记本的微软，要开始担心自家的饭碗了。根据NPD最近公布的数据显示，2013年11月Chromebook系列产品已经占到笔记本销量的21%，仅算平板与PC份额，这个数字也接近10%。

截至今年前11个月，Chromebook家族总销量已达，176万台，去年同期这一数字为40万台。考虑到苹果几乎没有商业渠道销售（占比1.8%），Chromebook家族增加的市场份额实际是从微软手里夺取的。

实际在数年前，Chromebook类笔记本曾被广泛地沦为笑柄，这类用途单一的笔记本电脑（实际就为了上网），几乎没有支持者。哪怕Google的定价十分优惠，实际的销售业绩仍不尽人意。参与Chromebook计划的那几家硬件生产厂商，看起来更像是为了与Google保持良好关系才来的。整个Chromebook计划从诞生之日起，便被失败的氛围笼罩着。

但不知为何，Google在两年前突然发力，Chromebook家族产品从一个几乎与市场无关的角色，到从笔记本市场里挖去了一块份额，而且还不仅仅是商务市场的份额。Amazon在本周的报告里显示，节日期间销量最好的笔记本产品中，Chromebook占到了2/3。

这两年期间，看起来Chromebook的方向都在教育领域，毕竟这也是Google唯一分享的数据。但从去年开始，情况发生改变：Google创建的多元化生态系统有了更多的硬件生产合作伙伴，包括联想（虽然为教育领域提供）、HP、东芝、宏基。

Google甚至自行设计除了卖1300美金的高端Pixel笔记本，虽然给人的感觉是在今年的I/O大会上送给开发者的量还大于实际的销售量（虽然Pixel各方面都很优异，但这种高昂的成本并不是适合每个人），Pixel要完成的使命，是Google传达给外界声音：我们全力支持Chromebook计划。同时，这也为整个潜在的商业市场客户预热。

无论如何，ChromeOS也从过去的“一招鲜”变成今日有现实意义的操作系统（过去和一个浏览器没有区别），曾经微软嘲笑Chomebook是一款不能断网的产品，Google的工程师也开发出更多的离线功能。

今日的Chromebook家族产品，已经和当初的Cr-48原型相去甚远，微软的动作，实际也是在关系在商业市场中可能失去的份额。

题图来源：TC

Acer 发布 199 刀的 Haswell Chromebook

Sat, 16 Nov 2013 03:53:45 CST

Acer新款Chromebook C720-2848已经在Amazon上开始预售了，零售价229.99美元，Amazon仅售199美元。配置：

Intel Celeron 2955U 1.4GHz Haswell处理器
2GB DDR3L SDRAM内存
16GB SSD硬盘
11.6英寸防眩光屏幕
Intel HD显卡
蓝牙4.0
内置高清摄像头
双内置立体声喇叭
1个USB 3.0接口，1个USB 2.0接口
HDMI输出
全尺寸Acer FineTip键盘
多手势触摸板
3芯锂电池，8.5小时使用时间
1.25kg重

Via Chrome Story

© musiXboy 发表于谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ), 2013. | 没有评论 | 永久链接 | 关于谷奥 | 投稿/爆料
Post tags: Acer, Amazon, C720-2848, Chrome OS, Chromebook, Haswell

豪赌Web apps，谷歌Chrome开发工具直通Android

Thu, 05 Dec 2013 00:41:59 CST

关于谷歌内部web app团队和Android团队之间存在矛盾的传言在业界流传已久，但近日Chrome与Android的联姻让外界对谷歌内部两大应用平台之间矛盾的传言不攻自破。

本周二，但谷歌宣布Chrome DevTools开发工具新增多项功能，包括支持对Android设备的模拟，使用最新Chrome beta版的开发人员可以在浏览器中模拟运行Android设备，甚至直接将Android设备的应用界面投射到电脑屏幕中的Chrome浏览器中。

DevTools开发工具向来是Chrome和Chrome OS的一部分，如果你是两者之一的用户，可以通过Ctrl+Shift+I的组合就爱你运行Chrome；Mac用户运行Chrome时可以使用Cmd+Opt+I的快捷键组合调用DevTools。通过这个工具你能查看web网页元素，检查JavaScript性能等。Youtube上有一段视频介绍Chrome DevTools的新功能。

DevTools新增的功能中，与Android设备的直连无疑是最大的亮点。开发者无需再安装Android SDK（有时候你在Chromebook根本安装不了）或者使用ADB终端命令来连接外部设备，Chrome与Android的直连表明了谷歌的移动应用战略： Web App将与Native 原生应用各擅胜场，将来web app的地位甚至要高过原生app。

Chrome移动版取消双击放大，移动web大提速

Fri, 22 Nov 2013 11:28:50 CST

与原生APP相比，移动web最大的问题是延迟和功能受限。新的Chrome移动版有望改善这两个问题，同时也传递出Google推动移动web的决心。

Google最新推出的 32位Chrome测试版使桌面和手机浏览网页的性能和体验都得到了较大提升，尤其是取消了Android上的双击放大功能，此举吹响了移动web化的号角，取消双击放大功能后，那些没有为移动浏览优化的网站的用户体验将变得非常糟糕，在移动用户占比越来越高的未来面临被淘汰的危险。

Google本周四推出的32位移动版Chrome浏览器不但增加了不少新功能，但最受关注的无疑是对双击放大功能的取消，之前为了侦测双击放大动作，Chrome设定了300毫秒的点击延迟，在新的移动版Chrome中，这一功能被取消，因此浏览将更加快速流畅。

谷歌在博客中指出：
今后，那些为移动设备优化的网站可以对用户的点击事件立刻做出反应，对用户的输入做出更快的响应。而且新的移动版Chrome还支持web app开发者调用震动API。

32位Chrome Beta的桌面版也增加了一些新功能，包括支持WebP动画格式，WebP与GIF类似但是文件体积要比GIF小57%，能够提供更加流畅的用户体验。

Chrome与IE市场份额战火已经烧到PC之外？

Fri, 25 Oct 2013 16:51:54 CST

我们的印象中，从很早开始，IE 浏览器在市场上的份额一直都是远超 Chrome 、 Firefox 等桌面浏览器。因此今天一则关于 Chrome 浏览器市场份额超越 Firefox 、 IE 、Opera 的总和的消息引起了我们的关注。

消息称，根据社交分析公司 Shareaholic 的最新发布的 2013 年浏览器市场份额报告显示，在过去 9 个月，Chrome 浏览器的市场份额超过了 Firefox 、 IE 和 Opera 的总和。是的你没有听错，Chrome 的市场份额已经超越了这些浏览器市场份额的总和，Shareaholic 的数据显示，在上个月 Chrome 占据了市场 34.68% 市场份额，这个数字是排名第二的 Firefox ( 16.6% )的两倍，排在之后的分别是 Safari （ 16.15% ）和 IE （ 15.62% ）。同时该报告统计的半数浏览器都出现下滑，IE下滑幅度最大，其次分别是Opera、火狐和Opera Mini。

难道我们之前看到的报告都是错的？在早前市场研究公司 Net Applications 发布的全球浏览器市场份额统计数字中，每个月虽然市场份额都在变化，但 IE 一直都是全球市场份额最高的浏览器。

而今天这份报告却让我们有所困惑，在确定了 Shareaholic 的相关统计之后，你会发现，这个消息再一次被标题党了。

对比 Shareaholic 和 Net Applications 的统计方式。在过去的9个月，Shareaholic 追踪了 2.5 亿用户，同时了 20 万家网站的数据。在 Shareaholic 的统计数据中，是包涵了所有的桌面浏览器和移动浏览器，也就是说统计的样本包括了平板、智能手机和PC。而 Net Applications 则是每个月追踪 4 万家网站的 1.6 亿独立用户访问量，并且在统计时将桌面浏览器和移动浏览器分开统计。另外，Shareaholic 的数据统计的是浏览器使用量，Net Applications 则统计了每个浏览器的用户数。

在明确了两家公司的统计方法之后，今天 Shareaholic 公布的这样的数据，就不足为怪。凭借目前 Android 在移动市场上绝对的话语权，Chrome 浏览器在移动市场上能够获得更大的发挥空间，相反的是采用 IE 浏览器的 Windows Phone 在市场上不足两位数的市场份额，确实难以施展手脚。另外就 Chrome浏览器移动版本本身来说，也是一款十分不错的浏览器，在 iOS 上也有很多的用户喜欢使用 Chrome 而抛弃系统自带的 Safari，因此 Chrome 能够获得这样的成绩也就不足为奇。

但是我们实际上看，浏览器的主力市场在桌面平台，而在桌面平台，IE 更为主流。同时在 IE 10 和新推出的 IE 11 上，我们看到了众多的功能改进和性能的提升，过去用户对于 IE 的老印象已经在慢慢的改观。而在 Windows Phone 上，用户对于移动版 IE 的评价也十分不错，但没能为 IE 带来更好的成绩重要还是受到 Windows Phone 市场份额的限制。

题图来自 Nerds Central

ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性

Wed, 18 Dec 2013 17:49:34 CST

by zhangxinxu from http://www.zhangxinxu.com
本文地址： http://www.zhangxinxu.com/wordpress/?p=3835

一、发展与变化，疑问到实践

我之前就多次提过（例如介绍 HTML5 API classList的时候）这样的疑问：“现代浏览器的API相当丰富与强大，几乎可以很轻松应付各类交互，为何还要引入庞大的JS框架？”

事物总是在不断发展的，人的认知也要随着事物的发展不断变化。

在北京奥运会如火如荼举行的那会儿，jQuery等一些JS框架犹如农场的鸡毛满天飞，争论孰好孰坏优缺点的口水喷得鸡毛飞得更高。

大家现在静下心来想一想，为什么那个时候，JS框架这么的炙手可热，争相关注？

在那个点，Chrome浏览器还没有正式出生(2008-09-02)，还没有现代浏览器的概念，高档点的浏览器也就是FireFox以及出众但没受众的Opera浏览器。在China, 还是IE6一统天下，IE8 3月底才发布。

从目前的眼光看，那时候的浏览器世界是不是弱爆了哈！兼容性差异是不是强爆了啊！那是时候，我厂甚至只关心IE浏览器的兼容，FireFox就像农场的鸡屎，走路时候都是避开的。

此时，解决了兼容性问题，很多优秀方便API的JS框架自然成了香饽饽。这种感觉就像是，没吃没穿的旧时代里看到自行车的那种感觉，酷啊！

但是，现在呢？

变了，诸位。世界已经大便，错了，是大变！已经不是你骑个大杠自行车就嚣张的时代了。

我们来审时度势下现在的浏览器世界：

以上为百度浏览器研究院提供的最近3个月的浏览器份额。

可以看到，IE6-IE8浏览器加起来已经不足50%. IE9+, Chrome等其他现代浏览器已经占据了大半的江山。要知道，这大部分的浏览器有着丰富且兼容统一的API，可以很好的支持日常的一些或数据的或DOM的操作功能。

也就是说，浏览器世界现在分为了两个阵营： IE6-IE8保守派； IE9+, Chrome等现代派。

对于现代派浏览器而言，实际上类似jQuery这样的框架已经没有多少真正的价值可言！现代浏览器在选择器、事件处理、数据处理等方面都很高大上。除了API名称长了一点，我是看不到什么明显不足的！

要知道： 这个世界，绝大多数的网站都不复杂！

我敢打包票，很多人在自己的页面上引入jQuery, 可能就是仅仅用下其中的选择器API，方便选择一些元素，如获取 className包含 .ieYouCanntSelectMe的元素！

我说亲哪，占了大半江山的现代浏览器自己有超级强大的选择器API的，你为何为了老不死的IE6-IE8让我们也去加载庞大啰嗦的jQuery文件啊！

看到没，诸位，看到没，都21世纪了，还有“株连”这样匪夷所思的事情发生，难道你都没有一点感觉吗！！？

现代浏览器不断发展，却还跟10年前一页，要依赖庞大的框架，那浏览器规范、发展的的价值又在什么地方呢？

从实际工作讲，类似的情形还有很多。

作为技术分享者，必定要经常写demo. 由于选择器API以及事件兼容性，同时要兼顾页面不要太笨重，我是使用自己写的 zxx.js库。虽然小，但还是有问题，现代浏览器还是要额外加载JS文件，还是要请求，空间流量还是被消耗。显然，我需要更适合的东西。

我们都会参与一些周期较短的小项目。可能总共就几百行的JS代码。结果，超过97%的流量被用在了加载mini压缩后还80-90K的jQuery框架上。现代浏览器活脱脱躺着也中枪啊！

因此，我觉得 理想的情况应该是这样的：
撇开类似网盘这种富交互的项目，大多数的页面，淘宝页面这种程度的，现代浏览器不加载任何的JS框架，jQuery, Kissy通通扔到别人碗里去，至于IE6-IE8浏览器，按照现代浏览器的API来工作就好了！也就是，你只要关心在现代浏览器下如何使用，至于IE6-IE8，额外引入一个补丁JS，万事OK，歌舞升平，天下大吉！

这个引入的补丁JS就是这里的 ieBetter.js. 我将这种引入称之为JS的“ 趋同策略”。

换种更通俗的描述就是：
以前——用苹果手机的和用塞班手机的为了兼容统一，全部使用重新包装的红旗手机；
现在——塞班手机单独自己外面套层壳子，伪装成苹果手机，而这个壳子就是 ieBetter.js.

不知不觉中，我之前的疑问现在已经成了真实的实践！

二、Github项目、使用以及API文档

Github项目
该项目已放在Github上，地址是： https://github.com/zhangxinxu/ieBetter

在我写这篇文章的时候， ieBetter.js还是v1.0.0测试版本，其中必定有诸多可以完善的地方。欢迎一同建设！

//zxx: 项目名称应该是 ieBetter.js结果没注意， .js没加，有谁知道如何修改项目名称吗？

目前， ieBetter.js压缩后大小 30K. 大小基本上是jQuery的 1/3.

如何使用
IE9+以及Chrome, FireFox等浏览器直接出门左转欣赏浪漫的雾霾景色。IE6-IE8浏览器引入 ieBetter.js. 如何无干扰引入？

第一个想到的是IE的条件注释，如下：

<!--[if lte IE 8]>
<script src="ieBetter.js"></script>
<![endif]-->

但是，IE10+浏览器已经跟条件注释say googbye了！因此，例如我的IE11浏览器的IE7, IE8兼容模式下，条件注释直接被吊死，没气了！

于是，为了更广泛的适用性，可以试试下面这个方法：

if (!document.addEventListener) {
    // IE6~IE8
    document.write('<script src="ieBetter.js"><\/script>');	
}

或者您有什么更好的只让IE6~IE8加载 ieBetter.js的方法？

API文档
目前， ieBetter.js跟现代浏览器套近乎的API有：
• 选择器相关API
*.querySelector
*.querySelectorAll
*.getElementsByClassName

• 事件相关API
*.addEventListener
*.removeEventListener
*.dispatchEvent
document.createEvent
init[|Mouse|UI]Event
input
window.onhashchange

• DOM特性相关API
window.getComputedStyle

• ES5 JSON扩展
JSON.parse
JSON.stringify

• ES5 Object扩展
Object.create
Object.keys

• Date对象
Date.now

• ES5 Function扩展
Function.bind

• ES5 String扩展
String.trim

• ES5 数组方法扩展
Array.isArray
Array.forEach
Array.map
Array.filter
Array.some
Array.every
Array.indexOf
Array.lastIndexOf
Array.reduce
Array.reduceRight

个中使用可参见我专门制作的API文档页面： ieBetter.js中文API文档页面

欢迎反馈API文档页面的打开速度。分”慢”, “还行”, “快”三档。如果大家都反映速度不给力，我就要在自己的空间里也放一份。

由于IE9浏览器不支持 classList API, 我斟酌再三，没有对其支持。

三、ieBetter.js – 与JS的内心世界亲密接触

如果要给 ieBetter.js做广告的话，广告词我都已经想好了。就是“ieBetter.js – 与JS的内心世界亲密接触”。

我不清楚大家有没有这样的感觉，使用浏览器原生的API完成一些应用的时候，有一种直击心灵的感觉，有一种面对面对话的感觉，真实的，没有伪装的，与JS内心世界的亲密接触。

美好的感觉是会产生依赖的。虽然每天拿着望远镜偷窥女神的吃饭洗澡睡觉觉也是一种享受，但是，我想，直接跟女神一起吃饭洗澡睡觉觉应该更有一番滋味。难道你不这么认为吗？

虽然你可能没有多少与女神相处的经验，可能开始的时候你会碰壁，会经常犯错。但是，久了，纠正了，学习了，习惯了，你就强大了。因为，你连女神都能应付自如了，其他那些庸脂俗粉岂不根本就不在话下。

可见， ieBetter.js也是把妹技能提升了一条快速路径啊，众未来的“(const)富帅”们，还不赶快使用 ieBetter.js，来和女神进行心灵交织，肉体碰撞的接触吧！还等什么呢！

其他点什么
我个人觉得这个项目的价值和意义是蛮大的，所以非常欢迎大家fork，一同维护与建设。如果 star足够多，项目趋于稳定，我会试着贡献到 staticfile.org上，直接CDN访问。

我也知道，肯定也有其他同行和我有类似的想法（但我没有找到），欢迎共享你的一些心得。

欢迎交流。

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[ http://www.zhangxinxu.com]
本文地址： http://www.zhangxinxu.com/wordpress/?p=3835

（本篇完）

有话要说？点击这里发表评论。

Google 宣布推出由 HP 生产的 11 英寸 Chromebook，可用 micro-USB 充电，仅售 269 美元

Wed, 09 Oct 2013 00:08:44 CST

Google宣布推出由HP制作的新款Chromebook，这枚被称作Chromebook 11的笔记本显然是11英寸的，Google称其零售价格只有279美元，但其实在HP网站的标价还低10美元只有269美元，尽管比三星推出的仅售249美元的11英寸Chromebook和HP之前推出的14英寸Chromebook要贵，但别忘了Chromebook 11还默认配备除了昂贵的Chromebook Pixel以外别人没有的触摸屏幕。

新的Chromebook更加专注于轻薄和便携式设计，它只有2磅多一点重，更厉害的是居然可以跟手机和平板一样直接用micro-USB接口来充电，而不必配备单独的电源，这样你出门就又可以少带一样东西啦。

Chromebook 11使用三星Exynos 5250 ARM处理器，全尺寸键盘和触摸板，可选LTE网络，双USB 2.0接口，11.6英寸IPS屏幕分辨率为1366x768，内置16GB SSDK存储，2GB内存。赠送2年100GB Google Drive云端存储，赠送60天Google Play Music All Access服务，赠送12个session的GoGo飞机WiFi服务。

感觉除了CPU和内存，其它配置已经可以说是完美了，其实我宁愿去掉没用的噱头触摸屏幕，换来4GB内存——Chrome OS跟Chrome一样的狂吃内存。

继续观看官方宣传片（原始视频地址）：

Via 9to5google

© musiXboy 发表于谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ), 2013. | 没有评论 | 永久链接 | 关于谷奥 | 投稿/爆料
Post tags: Chrome, Chrome OS, Chromebook, Chromebook 11, hp

Evernote Web Clipper – 保存、标注和分享网页[Chrome]

Tue, 17 Sep 2013 20:04:15 CST

Evernote Web Clipper 是大象公司专门为 Evernote 保存、标注和分享网页用的 Chrome 扩展，可以直接在网页上像 Skitch 一样标记，支持快捷键，支持一键分享。@Appinn

Web Clipper Chrome 更像是 Evernote 几个产品的整合，使之用起来更加连贯。

目前几个功能是这样的：

网页正文：自动选取网页的正文部分，可以手动添加/缩小区域，然后将网页保存至印象笔记
隐藏广告：整合 Evernote Clearly 功能，自动过滤页面多余部分，去广告，专心阅读
整个页面：整个页面
网址：分享带有摘要和网址的信息
屏幕截图：整合 Skitch，可以对截图标记

来看一段官方宣称视频：

根据登陆的账号不同， Evernote 用户可以分享到 Facebook、Twitter、Linkenin 及邮件分享， 印象笔记用户则可以分享到新浪微博。

而印象笔记与 Evernote 的细微区别是分享链接权限不同，印象笔记需要访问者登陆后才可以浏览分享链接，而 Evernote 则向全世界开放公开链接。

另外其他浏览器的 Evernote Web Clipper 暂未更新。

http://evernote.com/intl/zh-cn/webclipper/

Chrome OS 将增加公众帐户和售货亭模式，方便商户使用

Wed, 07 Nov 2012 13:49:16 CST

先说公开帐户功能，它可以让用户在特定的一段时间里使用Chrome OS，不需要用邮件和密码登录，也不必担心被保存了浏览历史、搜索历史和cookies。使用公开帐户的时候，你可以进入到三种售货亭模式下：全屏模式、单应用模式和dashborad模式。

这样即可方便商户使用Chrome OS来展示自己的官方网站、登录到某个用户信息系统里或是进入到一个展示商户的网页应用里。

Via Chrome Story

Chrome for Android 也将具备 Opera Mobile 和 Amazon Silk 那种代理服务器压缩加速功能

Sun, 03 Mar 2013 07:08:20 CST

现在Google既有Android移动操作系统，又拥有Chrome for Android浏览器，那么二者结合来提供类似Opera Mobile 和 Amazon Silk 那种代理服务器压缩加速功能就是顺理成章的事情了，其实以前他们就有Google Web Accelerator，只不过后来被重组了。

François最新发现Chromium实验室里的SPDY描述文字有所变化，估计下一个版本的Chrome beta for Android里我们就可以在实验室里选择打开代理服务器压缩加速功能了，将允许Chrome使用Google的服务器来压缩网页，降低消耗的数据量。

Via GOS

© musiXboy 发表于谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ), 2013. | 2 条评论 | 永久链接 | 关于谷奥 | 投稿/爆料
Post tags: Android, Chrome, Chrome for Android, Google Web Accelerator

2012最佳应用Pocket: 稍后阅读的魔力

Mon, 21 Jan 2013 14:52:35 CST

当我们浏览网页看到很好的文章或者其他内容，恰好我们此时暂时专注于某件事或者没空细看，你会怎么做？在PC端使用浏览器的时候，我们肯定会习惯性地直接添加到收藏夹，等有空了再从浏览器打开书签慢慢回看，那在移动端，你还这么做吗？

如果有一个应用，可以让你把暂时还未有时间看的文章收藏起来，把你在优酷上暂时来不及看的视频存起来，把你喜欢的图片保存下来，之后有时间了，无需打开浏览器或者打开优酷，直接从这个应用中可查看所有的想要延后阅读的文字视频，是不是很方便？

Pocket就是这样一个应用，这个应用之前有个名字叫Read it Later，12年的四月份改名为Pocket。这个应用在 Google评选2012年 Google Play十佳应用中入选，之后还被豌豆荚评选为2012年度最佳应用。这个应用到底有着怎样的魔力，让各大市场趋之若鹜？

Pocket的界面设计非常简洁优雅，经过改版改名字之后，已经支持保存图片和视频。例如在移动设备上使用优酷观看视频，当想要收藏或者保存下来有空看的时候，可以在分享中添加到Pocket，操作过程与一般的分享没有差别。

当然，其老本行是支持从浏览器中保存文章到Pocket稍后阅读，同样地，安装了Pocket的设备，在 Chrome等浏览器可以直接分享到Pocket。

然后，之后在空闲的时间直接打开Pocket，就可以综合可浏览收藏到Pocket的网页新闻、视频等各种信息。Pocket的浏览器插件功能设置很丰富。

同时，Pocket有一个Bulk Edit模式，可以对保存的信息进行批量处理，例如可批量选择并进行更深一层的收藏或者删除等操作。另外，Pocket本身有一些非常体贴用户的设计。例如打开一篇长文之后，有一个滚动条功能。这个滚动条平常会隐藏在右边缘，若出现长网页，只有用户点击页面进行滑动的时候滚动条才会浮现，阅读的过程中则是隐藏的状态，因此使用Pocket阅读的时候没有任何的元素会影响用户的阅读。

Pocket改版设计之后，抓取图片和视频的功能非常强大。根据其公布的运营数据，YouTube和Vimeo已成为Pocket的首要内容来源。Pocket还提供了通过视频或者图片进行信息筛选的功能，目前的Pocket十分重视内容的组织、搜索，渐渐有向组织信息的方向发展。据报道，早在12年7月份，Pocket就已整合了包括 Flipboard、 Twitter、 Zite在内的逾350款iOS及Android应用，用户每天保存约100万条网络内容。

Pocket是一个慢产品，其已经诞生了三四年，随着移动互联网的发展反而越加更有魅力。抓着延后阅读这一个需求点，Pocket确实可以在移动互联网时代取代浏览器书签这样的老式做法，把各应用中需要收藏或者延后阅读的信息、图片和视频综合放入其中，这对于个人良好的信息管理十分有用，更不用说其本身良好的阅读和操作体验。

现在，Pocket正慢慢利用人们保存的信息进行数据分析，例如2012年底Pocket公布了全年收藏排行，视频冠军是《江南Style》，而文章则是《名利场》杂志的《奥巴马之路》。存储文章的前十名大多来自《纽约时报》等著名期刊或《The Verge》网络媒体。Pocket正在使用不同于以往任何模式的切入点进入媒体领域，推出了媒体合作，和多家付费媒体达成订阅协议。

Pocket一步步慢慢地走过来，但步伐走得越来越稳。

雷锋网相关报道：

Android版Pocket更新稍后阅读变稍后收听

内容存储公司Pocket融资500万美元随时随地保存想要的内容

Read It Later更名Pocket 实现图片和视频稍后看

（若无特别注明，雷锋网文章皆为原创，转载请注明出处)
原文链接: http://www.leiphone.com/0121-pocket.html

老缅 @雷锋网

#我只是比你们更能扯。# 雷锋网产品编辑，分享好应用，讨论如何做好移动互联网产品。个人博客：laomian.me，微博：weibo.com/alelody，邮箱：alelody@gmail.com

Google Slides 支持离线使用，创建、编辑、演示一个都不少

Thu, 24 Jan 2013 01:55:46 CST

Google Drive 的组件之一 Slide，也就是以前的 Presentation 从今天起开始支持离线使用了，用户可以在没有网络连接的情况下新建，编辑或者为别人播放演示文稿。所有新建立的文档以及变动都会在连接网络后自动更新到服务器上。如果你之前已经开启了 Docs 的离线功能，那么 Slide 的离线也是可以直接使用的，否则的话你需要按照这里的步骤开启。

需要注意的是，这个功能目前仅支持 Chrome 浏览器，当然 Chrome OS 也是没有问题的。所有用户将在未来几天内收到这个更新，至于最后一个核心组件 Sheets 的离线支持 Google 也已经在努力中了，估计很快也就会发布了。

via GoogleDrive

© gkp 发表于谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ), 2013. | 没有评论 | 永久链接 | 关于谷奥 | 投稿/爆料
Post tags: Chrome, Chrome OS, Google Drive, Slide

微软发布 modern.IE – 免费 Web 开发者测试工具资源

Fri, 01 Feb 2013 01:12:28 CST

今天微软发布了 modern.IE。modern.IE 是一系列免费的 Web 开发者测试工具和资源的网站，微软希望以此来帮助开发者更轻松地实现跨 Internet Explorer 和其他现代浏览器、跨设备的兼容性、其他还有代码检测工具、标准代码建议，以及 IE10 推介。

微软也和 BrowserStack 合作免费为开发者提供了 3 个月的免费远程渲染测试服务，可随时通过登录 Facebook 帐号来激活服务，最晚到明年 1 月 10 日。BrowserStack 也提供了 Chrome 或 Firefox 插件方便整合。

除了 BrowserStack 远程测试服务，微软也统一提供了本地测试用的虚拟机 VHD 文件，面向 Mac 和 Linux 虚拟机文件将之后提供。

Hyper-V on Windows Server 2008 R2 SP1	IE6 – WinXP	IE7 – Vista	IE8 – Win7	IE9 – Win7	IE10 – Win8
Hyper-V on Windows Server 2012 & Windows 8 Pro	IE6 – WinXP	IE7 – Vista	IE8 – Win7	IE9 – Win7	IE10 – Win8

访问 modern.IE。（via Exploring IE）


微软首页预览，Metro UI 的新尝试	传微软将收购 Limelight？	微软 .NET 平台新标志发布	微软 Web Platform Installer Beta 推出	微软已经获得 Office.com 域名
无觅

不用插件修改 Chrome 的 User Agent 字符串、模拟移动触屏设备

Fri, 18 Jan 2013 22:51:30 CST

今天发现了 Chrome 上一个修改 User Agent 字符串的新方法，甚至还能模拟触屏设备，手动改变你所在的位置(经纬度)。方法如下：

1、打开 Chrome 的”开发者工具”，也就是菜单——工具——开发者工具。
2、在打开的开发者工具(Developer Tools)界面的右下角，点击黑色齿轮图标。
3、然后在黑底界面中点击”Overrides”标签页就能看到了。

Chrome 28发布——hello Blink

Sat, 13 Jul 2013 23:55:34 CST

Chrome 28发布了，好久没有关注版本号看到这个数字还是吓了一跳！这个版本改动蛮大，我们一起来看看~~

1.内核更换

Chrome 28正式将内核更换为Blink了，可以通过在地址栏输入chrome://version来查看。

其中会有一条：

Blink 537.36 (@153022)

不过UA并没有变。Blink暂时只是Webkit的一个分支吗。。。

2.富媒体提示

这个很赞，比HTML5的Notification API要丰富很多。

只是目前该特性只支持Windows下的Chrome和Chrome OS，Mac和Linux后续支持，现在会将富媒体提示按照HTML5 Notification的标准显示，当然这样可能会有信息不能完全显示。

这里是 API documentation和google 托管在github上的一个demo。

这么牛B的东西还是希望Google能够推动HTML5 Notification API更新吧。

3.Android，HTML5 Fullscreen API支持

Chrome 28 for Android中，已经可以开启Fullscreen API支持了。呃，safari 6 for iPhone也早支持了，这是个很不错的功能。

4.@support支持

Chrome 28开始支持CSS3的@support属性，利用这个属性可以检测浏览器是否支持某个CSS3属性，比如：

@supports (text-shadow: 0 0 5px #000) {
	.blur-text {
		color: transparent;
		text-shadow: 0 0 5px #000;
	}
}

目前Firefox，Opera 12和Opera 15都已经支持该属性。Webkit也已加入支持，或许iOS7以及下个版本的Safari for Mac也将会支持。不确定IE 11是否会支持。

使用@support属性能够省去很多额外的工作。

总之，Chrome 28更新挺多的，还是比较遗憾放弃Webkit了。

REF:
What’s New in Chrome 28
Chrome 28 arrives with Blink…

您或许也会喜欢：

Chrome 远程调试协议分析与实战

Tue, 23 Dec 2014 20:37:55 CST

背景

某一天，A 君想获取 Chrome 页面中的性能数据，诸如时间、白屏和首屏等，因为需要和竞品进行对比分析，无法注入代码，该怎么办？

此时，你也许能想到开发者工具(DevTools)，也许知道Timeline(包含浏览器完整的行为数据)，该怎么自动获取到 Timeline 数据呢？

开发者工具

开发者工具(DevTools)是一个独立的 Web 应用程序(HTML+CSS+Javascript)，被集成在浏览器中，通过远程调试协议(remote debugging protocol)和浏览器内核进行交互，直接使用 Ctrl+Shift+I 呼出。

devtools

可以在当前的浏览器页面直接打开 DevTools 调试，也可以在浏览器之外进行调试，本文的实战内容基于 PC 平台浏览器之外的远程调试。

远程调试协议

远程调试协议基于 WebSocket，利用 WebSocket 建立连接 DevTools 和浏览器内核的快速数据通道。DevTools 中的源代码(Main.js:220)如下：

  var ws;
if ("ws" in WebInspector.queryParamsObject)
    ws = "ws://" + WebInspector.queryParamsObject.ws;
else if ("page" in WebInspector.queryParamsObject) {
    var page = WebInspector.queryParamsObject.page;
    var host = "host" in WebInspector.queryParamsObject ? WebInspector.queryParamsObject.host : window.location.host;
    ws = "ws://" + host + "/devtools/page/" + page;
}

该协议把操作划分为不同的域(domain)，比如 DOM、Debugger、Network、Console 和 Timeline 等，可以理解为 DevTools 中的不同功能模块。

每个域(domain)定义了它所支持的 command 和它所产生的 event。

每个 command 包含 request 和 response 两部分，request 部分指定所要进行的操作以及操作说要的参数，response 部分表明操作状态，成功或失败。

command 和 event 中可能涉及到非基本数据类型，在 domain 中被归为 Type，比如：'frameId': ，其中 FrameId 为非基本数据类型

至此，不难理解：

  domain = command + event + type

远程调试协议应用场景

针对移动端的远程调试，因为移动平台一般都不会提供足够大的区域来显示 DevTools，必须要在手机浏览器之外进行远程调试,具体配置请参看这篇文章

获取 JS 的 Runtime数据，常用的如 window.performance和 window.chrome.loadTimes() 等

获取 Network及 Timeline数据，进行自动性能分析

与强大的 phantomjs合体，phantomjs 暂时只支持基于 remote debugging protocol 的调试，希望能支持 Network 及 Timeline 数据的获取，phantomjs 的最新技术请点击进入

远程调试协议结构

以 Page domain 为例

command 结构如下：

  Page.navigate
request: {
    "id": <number>,
    "method": "Page.navigate",
    "params": {
        "url": <string>
    }
}
response: {
    "id": <number>,
    "error": <object>
}

执行 Page.navigate 操作，需要参数 url，id 可以随意指定，不过要确认全局的唯一性，因为需要通过 id 关联 request 和 response。

event 结构如下：

  Page.loadEventFired
{
    "method": "Page.loadEventFired",
    "params": {
    "timestamp": <number>
    }
}

Page domain 派发 loadEventFired 事件结构数据(通过 WebSocket 的 onmessage 获取)，并包含参数 timestamp

type 结构如下：

  Frame: object
    id ( string )
        Frame unique identifier.
    loaderId ( Network.LoaderId )
        Identifier of the loader associated with this frame.
    mimeType ( string )
        Frame document's mimeType as determined by the browser.
    name ( optional string )
        Frame's name as specified in the tag.
    parentId ( optional string )
        Parent frame identifier.
    securityOrigin ( string )
        Frame document's security origin.
    url ( string )
        Frame document's URL.

Frame type 为包含 id，loaderId，mimeType，name，parentId，securityOrigin 和 url 字段的 Object 数据类型，其中 loaderId 为另外一个定义在 Network domain 中的 type

更多协议内容请猛戳这里

远程调试协议实战

此协议用于 server 端和 client 端的通讯，所以需要先建立 server 端，然后 client 端通过协议连接到 server 端

开启 server 服务

打开浏览器的远程调试支持，并指定端口号：

  ./chrome --remote-debugging-port=9222

./chrome 为已安装的 Chrome 可执行程序

获取 server 地址

在浏览器中直接输入：

  http://localhost:9222/json

获取所有的 tabs 信息，数据格式如下：

  [
    {},
    {},
    {}
]

每个 {} 的内容如下：

  {
    description: "",
    devtoolsFrontendUrl: "/devtools/devtools.html?ws=localhost:9222/devtools/page/A12A4B08-E5AF-4A84-A86A-A1C86E731D7F",
    faviconUrl: "http://www.baidu.com/favicon.ico",
    id: "A12A4B08-E5AF-4A84-A86A-A1C86E731D7F",
    thumbnailUrl: "/thumb/A12A4B08-E5AF-4A84-A86A-A1C86E731D7F",
    title: "百度一下，你就知道",
    type: "page",
    url: "http://www.baidu.com/",
    webSocketDebuggerUrl: "ws://localhost:9222/devtools/page/A12A4B08-E5AF-4A84-A86A-A1C86E731D7F"
}

websocket server 端地址：

  webSocketDebuggerUrl: "ws://localhost:9222/devtools/page/A12A4B08-E5AF-4A84-A86A-A1C86E731D7F"

建立连接

在任意地址栏中输入 http://localhost:9222 + devtoolsFrontendUrl 值即可(等同于在当前页面直接打开 DevTools)：

  http://localhost:9222/devtools/devtools.html?ws=localhost:9222/devtools/page/A12A4B08-E5AF-4A84-A86A-A1C86E731D7F"

或直接使用 WebSocket 连接，使用 webSocketDebuggerUrl 值连接：

  var ws = new WebSocket('ws://localhost:9222/devtools/page/A12A4B08-E5AF-4A84-A86A-A1C86E731D7F"');

注意：每次只能进行一次 WebSocket 连接，之后的连接都会失败

调用 Command

WebSocket 通道建立完成之后，通过如下方式进行调用：

打开指定页面，并进行事件监听(以 Page.loadEventFired 为例)：

  ws.onmessage = function(event) {
    console.log(event.data);
};
ws.send('{"id": 1, "method": "Page.navigate", "params": {"url": "http://www.baidu.com"}}')

获取到的 loadEventFired 事件数据如下：

  {"method": "Page.loadEventFired", "params": {"timestamp": 1402317772.874949}}

更多连接方式

nodejs ws

非常轻量级的 WebSocket 库，支持 client 端和 server 端，使用方式基本同 HTML5 的标准 WebSocket 库

client 示例：

  var WebSocket = require('ws');
var ws = new WebSocket('ws://www.host.com/path');
ws.on('open', function() {
    ws.send('something');
});
ws.on('message', function(data, flags) {
    // flags.binary will be set if a binary data is received
    // flags.masked will be set if the data was masked
});
server 示例：

var WebSocketServer = require('ws').Server
      , wss = new WebSocketServer({port: 8080});
    wss.on('connection', function(ws) {
        ws.on('message', function(message) {
            console.log('received: %s', message);
        });
        ws.send('something');
    });

请移步：官方 ws 库

  **nodejs chrome-remote-interface**

一个实现了 remote debugging protocol 的 nodejs 库，其中 WebSocket 使用的是 ws 库，使用方便，推荐使用

示例代码：

  var Chrome = require('chrome-remote-interface');
Chrome(function (chrome) {
    with (chrome) {
        on('Page.loadEventFired', function(time) {
            send('Runtime.evaluate',{'expression': 'chrome.loadTimes()', returnByValue: true}, function(err, result) {
                //console.log(err, result );
            });
        });
        Page.enable();
        Page.navigate({'url': 'http://www.baidu.com'});
    }
});

请移步：官方 chrome-remote-interface

nodejs socket.io

功能强大，支持集成 WebSocket 服务器端和 Express3 框架与一身，使用简单，有兴趣者请移步：官方 socket.io

WebSocket

协议

它是 HTML5 一种新的协议，实现了浏览器与服务器全双工通信，只需要一个握手动作，浏览器和服务器之间就形成了一个快速通道，然后进行数据互传。

优点：

1、交互时的 header 只有约 2Bytes
2、服务端可以主动推送数据给客户端

header 格式（握手时）：

request:

  Cache-Control:no-cache
Connection:Upgrade
Host:localhost:9222
Origin:http://family.baidu.com
Pragma:no-cache
Sec-WebSocket-Extensions:permessage-deflate; client_max_window_bits, x-webkit-deflate-frame
Sec-WebSocket-Key:TKSQVug6zSIH4uzIyTYBcg==
Sec-WebSocket-Version:13
Upgrade:websocket
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1914.0 Safari/537.36

response:

  Connection:Upgrade
Sec-WebSocket-Accept:HyjfMUpyYgWgkYLn/vDDf6rZLuk=
Upgrade:WebSocket

header 格式（交互时）：

request:

  User-Agent: Fiddler
Content-Type: application/json; charset=utf-8
Host: fakewebsocket
Content-Length: 211

response:

  FiddlerTemplate: True
Date: Fri, 25 Jan 2013 16:49:29 GMT
Content-Length: 51

查看 WebSocket 连接

DevTools

直接使用 DevTools，在控制台建立 WebSocket 连接并交互，在 Network 面板中直接显示

fiddler

自定义 fiddler 的规则，根据 WebSocket 特征提取信息并伪造 WebSocket 结构数据

因为伪造时，host 为 fakewebsocket，无法识别，所以通过 AutoResponder 伪造 respose 数据

请移步： Debug / Inspect WebSocket traffic with Fiddler

HTML5 标准终定稿, 能否引领下一波技术热潮?

Thu, 06 Nov 2014 13:21:02 CST

印象里第一次接触到 HTML5 还是在 Steve Jobs 那里，他坚持在 iOS 上面放弃对 Flash 的支持，力推 HTML5。在当时 Adobe 的 Flash Player 统治浏览器播放器的年代，这种做法想必也就只有 Apple 有勇气做得出来。Apple 用 HTML5 想要打破 Flash 打造的一个封闭生态圈，到现在大家也都有目共睹，Adobe 在由 Apple 引领的这次移动浪潮之中被远远抛在后面；移动端的播放器不再是 Adobe 统治的天下，使用 HTML5 的 <audio> 和 <video> 标签更加方便了多媒体的开发。伴随着 Google 推出自家浏览器 chrome 以及开源版本的 chromium，HTML5 的特性一致在被有力的支持和推动下发展。而现在 HTML5 标准的定稿，势必会是互联网的一个里程碑。

2007 年 W3C 立项 HTML5，到 2014 年 10 月底正式定稿，时间长达 8 年。接下来 HTML5 将真正开始颠覆 Native 原生 App 世界这样的论断是否还是危言耸听呢？我们拭目以待。
接下来我们来聊一聊 HTML5 的诞生：

W3C 在 1999 年发布了 HTML4 之后， Web 世界迅猛发展。人们一度认为 HTML 标准不再需要升级了。直到 2007 年 W3C 从一家致力于 Web App 开发的组织 WHATWG 接手了相关工作，重新发展 HTML5. HTML5 的发展，有用户需求的推动，有技术开发者的需求推动，更有巨大商业了利益在推动。

随着硬件的发展以及网络带宽的大幅改善，人们已经不再满足于能否打开一个基本的页面浏览信息，更丰富，更流畅的多媒体体验需求变得日益强烈。以前开个电影、视频，需要买个盘回去用光驱看；以前玩个游戏得买个盘安装然后玩，随着网络的改善和已经的提升，打开网站就可以播放流畅的 vod 视频，打开网页就可以玩流畅的页游(网页游戏)。在这一段时间里，HTML 标准并没有跟得上时代的脚步，Flash 抓住了这个机会，开始在互联网上变成了准标准。视频播放器以及网页游戏，都依赖 Flash 进行开发，Flash 提供的体验是 HTML 当时的标准所提供不了的。整个互联网事实上变成了微软(PC端操作系统) + Flash(网页端)统治了。

这个时候 Google 和 Apple 坐不住了。PC操作系统端很难有突破，因此 Web 浏览器被寄予厚望。 Google 大力赞助 Mozilla 的 Firefox 但并没有对 IE 主导的地位产生影响；收购了 Youtube 后发现命脉掌握在 Adobe 手里，非常不高兴。而且 Google 还要给 IE 的搜索框以及 Adobe 的 FLV 缴纳价格不菲的费用。因此也催生了 Web 标准的下一代 HTML5。

关注 HTML5 的朋友，想必都还记得 Facebook 放弃 HTML5 选择 Native 原生 App 的事情。这里有两个事情不得不提，第一个 HTML5 只是一个标准，就如同 C++ 一样， VC++ 和 GCC++ 在一些标准的支持上面和实现上面就存在不少差异，不同的浏览器厂商对于标准的支持力度也不一样，力度最大的应该就是 Apple 的 Safari 和 Google 的 chrome 了。尽管如此，在 Android 上，默认采用的 Webview 并不如 Google 大力推进的 chrome/chromium 支持的更好，Apple 也在 App 开发端限制使用第三方浏览器内核仅开放有限的接口调用，同样阻碍了采用 HTML5 开发的 Web App 的体验。尽管如此，我们仍旧看到了 HTML5 的潜力：
1.离线存储解决断网情况下无法继续使用的问题
2.流媒体 audio video
3.游戏 webgl canvas
4.更丰富的表单，js线程，socket，以及css3

HTML5 新增的标签header、footer、article等优化了搜索引擎的搜索，并且在无障碍体验方面做了不少支持。HTML5 在流媒体和游戏方面成功遏制了 Flash 的发展。
在 HTML5 标准升级的过程中，Google 和 Apple 不仅大力支持和宣传 HTML5，并且在浏览器方面也做了不少工作。Apple 大力发展 Webkit，并且把 Safari 带到了 Windows 平台； Google 大力赞助 Mozilla，而后开发 V8 引擎，进而推出 chrome 浏览器。这个时候 Web 标准的发展步伐在显著提升。由于 chrome, Safari, Firefox 都在 Web 标准上给予非常多的支持，在 chrome 推出前，Web 开发者最爱的浏览器就是 Firefox 不单单是因为 Firebug 这个强大的辅助开发工具，更多的是因为 Firefox 更加标准，对标准的支持更好。而这个时候反观 IE 已经明显还没有反过神来, IE 7 8 9 10 一系列不完整支持标准又互不兼容的版本，彻底伤透了开发者的心。

由于 HTML5 标准，开发者开发的时候，完全可以不再需要单独一个 Flash 开发者，或兼职 Flash 开发，并且可以大大降低 Flash 引发的安全问题以及 Flash 插件的崩溃问题。这样一来开发者的开发体验更爽了，用户的浏览体验也上升了。

随着以 Apple 的 iOS 和 Google 的 Android 为首的新一代智能手机平台的到来，智能手机真的智能起来了。因为 iOS 和 Android 就是按照现代操作系统的理念来设计的，并不是按照嵌入式系统来设计的，这样一来就更加容易和 PC 上面的体验达成一致，而且功能和 PC 一样强大。由此催生的移动互联网的热潮，一波又一波功能强大的 App 丰富了平台的体验，Apple 的 AppStore 和 Google 的 GooglePlay 成为开发者最热衷的平台，在这里没多长时间就出现用户量千万甚至过亿的产品，这些在 PC 端需要积累十几年时间才能达到。

HTML5 的跨平台优势在移动互联网时代进一步显现。HTML5 是唯一一个通吃 PC, MAC, iPhone, iPad, Android, Windows Phone 等的跨平台语言。如果 HTML5 已经可以满足功能和性能的需求，那么一个懂 HTML5, CSS, Javascript 的开发者就可以很快推出不用跨平台编译的跨平台 App，而且版本迭代会更快。在当下这样的需求不能满足的情况下，一些跨平台的工具给了我们另一种选择的尝试。PhoneGap 就是其中非常知名的一个。Adobe 在看到了 PhoneGap 有可能让自己重振江湖的机会，就把 PhoneGap 收购了。但后来发现 PhoneGap 里面问题不少，而且开源的 PhoneGap 无法让 Adobe 的 Flash 那样获得商业利益，就把 PhoneGap 捐给了 Apache。

开放注定是互联网的未来。

即使如 Google 和 Apple 营造的 App 生态圈也一样，在庞大的互联网里面，TA 们只是一个小圈子。HTML5 就是这个开放的标准，打破巨头的垄断。 Facebook 为什么采用 HTML5 试水自己的 App 是不想被 Apple 和 Google 的生态圈所禁锢，不想被 iOS 和 Android 牵着鼻子走。话说回来，谁不是呢？
那么曾经的功能不健全的和巨头支持欠佳的 HTML5 现在定稿之后，是否真的会引发下一波技术浪潮呢？

首先从硬件方面来说，随着 Apple iPhone6 的发布，硬件性能的提升，已经抹平了 HTML5 的性能劣势。 Apple 和 Google 的策略也在发生变化，在 2013年底 Google 发布的 Android 4.4 内置的 Webview 已经不再是 Android Webkit 了，而是 chromium。2012 年的 iPhone5 上面的 HTML5 表现已经令人满意，Safari 独家的 Javascript 加速引擎 Nitro 已经不再那么重要。而且在 iOS8.0 发布后，Apple 还取消了第三方程序调用 Nitro 的限制，现在任意浏览器或应用调用 iOS 的 UIWebview 都可以利用 Nitro 加速。两大移动巨头有意或无意的改变，让 HTML5 再说手机平台上面的发展不再受限。

跨平台在多屏时代给开发者非常痛苦的体验，人们都期待当年 Java 的一次编译处处运行的理想情况。 HTML5 目前正在扮演一个开发者救星的角色。
并且采用开放标准的好处多多，比如入口更多、导入流量更容易，超级 App （微信朋友圈）、搜索引擎（可以直接搜索应用内部关键词，这个一直是 Native App 的弊端）、应用市场、浏览器，而原生 Native App 就只能是 AppStore。

好了以上就是写在 HTML5 定稿的一些感受和猜想，愿此文可以给大家一些启示或帮助。

浏览器新技术，让网站像 App 一样推送通知

Wed, 29 Oct 2014 17:04:01 CST

NBA 2014-15 赛季开始，第一天，火箭队以 108 比 90 大胜湖人。看不了直播，早点知道结果也能让心里踏实些。熬夜看球没什么，怕就怕自己期待的比赛在上班时间开始。不得不专注工作，但又想第一时间知道比赛结果。

这时，消息推送就显得非常重要。安心地查询工作相关的资料，认认真真码字、码代码。比赛结束时，会有一个小弹窗弹出，第一时间“告诉”你比赛结果。现在手机里的 App 可以做到的通知推送，过不了多久，浏览器也能做到。到时候，就不用担心会错过重要信息了。

MIT Technology Review 的一篇报道称，2015 年几乎所有的浏览器都将支持推送通知服务。用户可以根据自身需求在浏览器上设置是否希望收到推送信息、想收到哪个网站的新消息提醒，之后浏览器就会自动为用户推送通知。设置完成后，即使没有在浏览已设置的网站，该网站有新消息时，用户依然可以收到新消息推送。

举个例子：假如将 CNN 设置为“接收推送通知”，当有突发新闻时，不管这会儿是否是在看 CNN 的网站，你都能收到新消息提醒。这一点其实移动端早已实现，如果手机或平板电脑中装有 CNN 的 App，有新消息时，手机就会弹出推送信息。而在 PC 端，目前只是在浏览 CNN 网页时，才会收到新信息提醒。

其实，苹果去年发布的 OS X Mavericks 中更新的的 Safari 就已具有推送通知服务，它允许用户订阅网站的通知功能，即使 Safari 不运行用户也能收到推送通知。当时， NBA.com 和《纽约时报》网页版等网站，也已开始支持 Safari 的推送通知功能。

而现在，Google 和 Mozilla 也正打算将这一功能应用到 Chrome 和 Firefox 浏览器上，以让更多的PC 端用户能接收到推送通知。目前二者均未透露何时会正式上线网页版推送通知功能。

但是，问题来了。到处都是通知推送真的好吗？作为强迫症患者，每天要消除手机上的“红点”就已经够费力了，未来又得面对一堆网页版未读信息？MIT Technology Review 文章下有评论称：

这的确是个很 cool 的创新，但是估计一个月之后我们就会因受不了新消息的打扰而关闭该功能吧。

此外，也有一些人担心这种功能会像 RSS 那样逐渐消亡。RSS 的初期开发者 Dave Winer 认为，网页版的推送通知服务缺乏统一的标准，可能会出现苹果、Mozilla 和 Google 各自为阵的局面。

题图来自 cachefly

高晨

无折腾，不生活。

邮箱

#欢迎关注爱范儿认证微信公众号：AppSolution（微信号：appsolution），发现新酷精华应用。

爱范儿 · Beats of Bits | 原文链接 · 查看评论 · 新浪微博 · 微信订阅 · 加入爱范社区！

您可能也喜欢：
Android版Pocket更新稍后阅读变稍后收听	阅读类应用精选	本周最佳iOS应用	本周最佳Android应用	内容存储公司Pocket融资500万美元随时随地保存想要的内容
无觅

IT瘾chrome推荐

Octoman – 微博备份工具，可导出 HTML 文件[Chrome]

相关阅读

Chrome 开始启用深层链接技术

B站下载助手 – 地铁族必备，离线缓存 B 站视频 [Chrome]

相关阅读

异步脚本载入提高页面性能

DOM 渲染流程

脚本载入暂停DOM渲染

DOMContentLoaded 延迟

浏览器忙提示

异步加载脚本

最佳实践

AJAX + Eval

Load 事件

服务器工具

参考阅读

兼容所有浏览器的 DOM 载入事件

DOM API 提供的事件

DOMContentLoaded

load

document.readyState

jQuery 方法

参考阅读

Safari 和 Firefox 都抛弃了 Flash，Chrome 就剩你咯

细数谷歌浏览器的 10 大隐藏技能

同时登入多个账户

离线安装扩展程序程序

Chrome 进程管理

使用 Chrome 浏览器当记事本

语音搜索

远程控制

从地址栏搜索特定站点

在注册页面自动生成新密码

模拟移动设备访问当前网页

固定标签页

使用Chrome DevTools的Timeline分析页面性能

Timeline工具栏介绍

事件模式 (Event Mode)

帧模式 (Frame Mode)

总结

TimeLine中的事件汇总

Loading事件

Scripting事件

Rendering事件

Painting事件

参考文档

7个触控技巧让Chrome远端桌面从手机灵活控制电脑

相关文章

Google Stars到底是什么？Google要用它来替代书签管理器

基于Apache Cordova开发移动平台上的Chrome Apps

十款值得一用的Chrome插件及Apps

微软当心，Chromebook们要开始攻城略地了

Acer 发布 199 刀的 Haswell Chromebook

豪赌Web apps，谷歌Chrome开发工具直通Android

Chrome移动版取消双击放大，移动web大提速

Chrome与IE市场份额战火已经烧到PC之外？

ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性

一、发展与变化，疑问到实践

二、Github项目、使用以及API文档

三、ieBetter.js – 与JS的内心世界亲密接触

Google 宣布推出由 HP 生产的 11 英寸 Chromebook，可用 micro-USB 充电，仅售 269 美元

Evernote Web Clipper – 保存、标注和分享网页[Chrome]

Chrome OS 将增加公众帐户和售货亭模式，方便商户使用

Chrome for Android 也将具备 Opera Mobile 和 Amazon Silk 那种代理服务器压缩加速功能

2012最佳应用Pocket: 稍后阅读的魔力

Google Slides 支持离线使用，创建、编辑、演示一个都不少

微软发布 modern.IE – 免费 Web 开发者测试工具资源

不用插件修改 Chrome 的 User Agent 字符串、模拟移动触屏设备

Chrome 28发布——hello Blink

1.内核更换

2.富媒体提示

3.Android，HTML5 Fullscreen API支持

4.@support支持

您或许也会喜欢：

Chrome 远程调试协议分析与实战

背景

开发者工具

devtools

远程调试协议