Web页面的性能 我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，新闻，邮件客户端，在线存储，甚至图形编辑，地理信息系统等等。虽然有着各种各样的不同，但是相同的是，他们背后的工作原理都是一样的：
用户输入网址 浏览器加载HTML/CSS/JS，图片资源等 浏览器将结果绘制成图形 用户通过鼠标，键盘等与页面交互 这些种类繁多的页面，在用户体验方面也有很大差异：有的响应很快，用户很容易就可以完成自己想要做的事情；有的则慢慢吞吞，让焦躁的用户在受挫之后拂袖而去。毫无疑问，性能是影响用户体验的一个非常重要的因素，而影响性能的因素非常非常多，从用户输入网址，到用户最终看到结果，需要有很多的参与方共同努力。这些参与方中任何一个环节的性能都会影响到用户体验。
宽带网速 DNS服务器的响应速度 服务器的处理能力 数据库性能 路由转发 浏览器处理能力 早在2006年，雅虎就发布了提升站点性能的指南，Google也发布了类似的指南。而且有很多工具可以和浏览器一起工作，对你的Web页面的加载速度进行评估：分析页面中资源的数量，传输是否采用了压缩，JS、CSS是否进行了精简，有没有合理的使用缓存等等。
如果你需要将这个过程与CI集成在一起，来对应用的性能进行监控，我去年写过一篇相关的博客。
本文打算从另一个角度来尝试加速页面的渲染：浏览器是如何工作的，要将一个页面渲染成用户可以看到的图形，浏览器都需要做什么，哪些过程比较耗时，以及如何避免这些过程（或者至少以更高效的方式）。
页面是如何被渲染的 说到性能优化，规则一就是：
If you can’t measure it, you can’t improve it. - Peter Drucker
根据浏览器的工作原理，我们可以分别对各个阶段进行度量。
图片来源：http://dietjs.com/tutorials/host#backend
像素渲染流水线 下载HTML文档 解析HTML文档，生成DOM 下载文档中引用的CSS、JS 解析CSS样式表，生成CSSOM 将JS代码交给JS引擎执行 合并DOM和CSSOM，生成Render Tree 根据Render Tree进行布局layout（为每个元素计算尺寸和位置信息） 绘制（Paint）每个层中的元素（绘制每个瓦片，瓦片这个词与GIS中的瓦片含义相同） 执行图层合并（Composite Layers） 使用Chrome的DevTools - Timing，可以很容易的获取一个页面的渲染情况，比如在Event Log页签上，我们可以看到每个阶段的耗时细节（清晰起见，我没有显示Loading和Scripting的耗时）：
上图中的Activity中，Recalculate Style就是上面的构建CSSOM的过程，其余Activity都分别于上述的过程匹配。
应该注意的是，浏览器可能会将Render Tree分成好几个层来分别绘制，最后再合并起来形成最终的结果，这个过程一般发生在GPU中。
Devtools中有一个选项：Rendering - Layers Borders，打开这个选项之后，你可以看到每个层，每个瓦片的边界。浏览器可能会启动多个线程来绘制不同的层/瓦片。
Chrome还提供一个Paint Profiler的高级功能，在Event Log中选择一个Paint，然后点击右侧的Paint Profiler就可以看到其中绘制的全过程：...
Web前端的现状 目前的Web前端的现状较之5-6年前，简直不能同日而语：从所使用的技术、工具、框架到开发一个产品所需要付出的工作量，从前端开发从业人员的数量到Web应用的数量，从企业对于Web前端的重要程度的认识到Web实际上为企业带来的回报，一切都有了翻天覆地的变化。
借助HTML5+CSS3的普及，加上一些开箱即用的CSS框架（如bootstrap，foundation等）支持，人们已经可以非常容易的从零开始搭建一个Web应用的前端。一个在UI方面非常业余的程序员也可以很快的做出一个像模像样的用户界面。而另一方面，基于操作系统原生API，要想设计并实现一个桌面应用，需要的付出则远远超过超过同水平的Web界面。
webkit浏览器内核 Webkit作为最受欢迎的浏览器内核，自然有非常多的port。比如GTK+对它的port – WebkitGTK，以及构建在WebkitGTK之上的Python的bind。使用WebkitGTK的Python版本，开发人员可以用HTML+CSS来开发应用，然后写一点Python脚本，最后将其运行在桌面上。
这里有个早期的例子来教你如何写一个所见即所得的编辑器。桌面应用开发中，对于用户界面的复杂性一直是一个难题，而这种方式可以减轻很多的用户界面开发的复杂性，将界面开发交给另外更加灵活，更加容易编写和调试方式：HTML+CSS。
这种模式下基本的开发流程是编写一个HTML页面（作为程序入口），然后在这个页面上引入额外的CSS（界面风格）和JavaScript（动作），然后将这些资源交给工业级浏览器内核Webkit来渲染 – 这个过程和在浏览器中访问该文件并无二致，但是有两个额外的好处：
页面运行在一个“桌面应用程序”中 没有地址栏，状态栏，菜单栏等，看起来更像是一个桌面应用 用户界面开发的复杂性被“外包”给一个更简单的环境 这就是传说中的混合（hybrid）开发模式，比如现在移动开发中的cordova就是采用这种模式，使得本来被视为天堑的原生的用户界面开发变为坦途。
node-webkit node-webkit是一个基于chromium和node.js的应用程序开发工具。它不但支持你使用传统的HTML5+CSS3+JS方式来开发你的应用程序，还支持无缝的与Node.js集成，也就是说，所有的Node支持的与操作系统交互的功能，如网络连接，文件系统，操作系统资源访问等，以及Node之上的第三方库都可以在node-webkit中进行使用。
更好的是，node-webkit是一个跨平台的工具，你可以使用它构建出运行在Mac OS，Linux以及Windows下的应用程序。应用程序通过Node.js来进行与系统相关的访问，而用HTML5+CSS3进行用户界面部分的设计。
node-webkit未必是未来桌面应用的唯一方式，但是却是一个非常好的选择，特别对于已经熟知Web前端开发技术栈的众多开发者来说，无需学习一门新的语言，一切都被很大程度的简化了。
第一个node-webkit应用程序 开发node-webkit应用程序非常简单。在这里下载系统对应的版本。并确保对应的二进制文件(nwnw.exe)在系统的PATH之中。
创建一个新的目录，然后在该目录中创建一个package.json文件和一个index.html文件：
$ mkdir -p hello-node-webkit $ cd hello-node-webkit $ touch package.json index.html package.json文件的内容如下：
{ "name": "hello-node-webkit", "version": "0.1.0", "main": "index.html" } index.html文件的内容如下：
<html> <head> <title>Hello node-webkit</title> </head> <body> <div> <h1>Hello node-webkit</h1> </div> </body> </html> 然后将这两个文件打在一个zip格式压缩包中：
$ zip -r hello-node-webkit.zip * 然后将这个文件重命名为hello-node-webkit.nw，最后使用node-webkit来启动这个应用程序。
$ ~/Tools/node-webkit.app/Contents/MacOS/node-webkit hello-node-webkit.nw 添加外部JS/CSS 接下来我们为这个页面添加一些外部的引用：CSS/JavaScript文件。首先创建两个目录style和script，然后分别创建文件如下：...