基于 phantomjs 的全页面静态化技术原理

定义

• 在服务端完成 html，css，甚至 js 的加载工作，渲染成纯 html 文件后直接以静态资源的方式部署到 CDN 上；
• 不改动任何服务端代码，通过全页面静态化的手段，把已经渲染好的，布满数据的 html 页面，直接以 html 文件的形式部署到 CDN 上；
• 全页面静态化的技术和网页爬虫非常的像，网页爬虫不知道引用的 js 文件或 css 文件，只知道最后爬出来的文件是一个可以在浏览器中渲染的文件；

phantomjs

• phantomjs 是一个无头浏览器，可以借助其模拟 webkit js 的执行；
• 有头浏览器就是一般说的浏览器，当在浏览器中访问 getitem.html 的时候，浏览器会加载 html，css，js，并执行 jQuery(document).ready(function(){...}) 方法，发送 ajax 请求，获取完数据，然后 reload dom；
• 无头浏览器，其实不是个浏览器，但是可以模拟浏览器的一些功能，借助其模拟 webkit 的包完成 js 的执行；

phontomjs 实战

• 执行这个文件，bin/phantomjs js/spiderbaidu.js：
• 2000 ms 之后的定时任务是等 jQuery(document).ready(function(){...}) 方法执行完成，把渲染好的页面以图片的格式输出；

var page = require('webpage').create();
page.open('http://www.baidu.com', function() {
    setTimeout(function() {
        page.render('baidu.png');
        phantom.exit();
    }, 2000)
});