Facebook开源JavaScript代码优化工具Prepack_Linux新闻_Linux公社-Linux系统门户网站
你好，游客
Facebook开源JavaScript代码优化工具Prepack
作者：刘振涛
5月4日，Facebook开源团队技术作者Joel Marcey在Hacker News社区发布一则《》，引起了。
官方宣称是一个优化JavaScript源代码的工具，实际上它是一个JavaScript的部分求值器（Partial Evaluator），可在编译时执行原本在运行时的计算过程，并通过重写JavaScript代码来提高其执行效率。Prepack用简单的赋值序列来等效替换JavaScript代码包中的全局代码，从而消除了中间计算过程以及对象分配的操作。对于重初始化的代码，Prepack可以有效缓存JavaScript解析的结果，优化效果最佳。
以下五个概念可以帮助你更好地理解Prepack的运行机制：
抽象语法树（AST） Prepack运行在AST级别，使用解析并生成JavaScript源代码。
具体执行（Concrete Execution） Prepack的核心是一个JavaScript解释器，它与ECMAScript 5几乎完全兼容，而且紧密地保持与的一致性，你可以将Prepack中的解释器视为完全参照JavaScript实现的。
解释器能够跟踪并撤销包括所有对象Mutation在内的结果，从而能够进行推测优化（Speculative Optimization）。
符号执行（Symbolic Execution） 除了对具体值进行计算外，Prepack的解释器还可以操作受环境相互作用影响的抽象值。例如Date.now可以返回一个抽象值，你可以通过helper辅助函数（如__abstract()）手动注入抽象值。Prepack会跟踪所有在抽象值上执行的操作，在遇到分支时，Prepack会执行并探索所有可能性。所以，Prepack实现了一套JavaScript的引擎。
抽象释义(Abstract Interpretation) 符号执行在遇到抽象值的分支时会分叉（fork），Prepack会在控制流合并点加入分歧执行（Diverged Execution）来实现的形式。连接变量和堆属性可能会得到条件抽象值，Prepack会跟踪有关抽象值和型域（Type Domain）的信息。
堆序列化（Heap Serialization） 当全局代码返回，初始化阶段结束时，Prepack捕获最终的堆并按顺序排列堆栈，生成直观的JavaScript新代码，创建并链接初始化堆中可访问的所有对象。堆中的一些值可能是抽象值的计算结果，对于这些值，Prepack将生成原始程序完成计算所执行的代码。
以下是官方提供的Prepack优化示例：
/* Hello World */
(function () {
function hello() { return 'hello'; }
function world() { return 'world'; }
global.s = hello() + ' ' + world();
(function () {
s = "hello world";
/* 消除抽象税 */
(function () {
var self =
['A', 'B', 42].forEach(function(x) {
var name = '_' + x.toString()[0].toLowerCase();
var y = parseInt(x);
self[name] = y ? y :
(function () {
/* 斐波那契 */
(function () {
function fibonacci(x) {
/* 模块初始化 */
(function () {
let moduleTable = {};
function define(id, f) { moduleTable[id] = }
function require(id) {
let x = moduleTable[id];
return x instanceof Function ? (moduleTable[id] = x()) :
global.require =
define("one", function() { return 1; });
define("two", function() { return require("one") + require("one"); });
define("three", function() { return require("two") + require("one"); });
define("four", function() { return require("three") + require("one"); });
three = require("three");
(function () {
function _2() {
return 3 + 1;
var _1 = {
function _0(id) {
let x = _1[id];
return x instanceof Function ? _1[id] = x() :
require = _0;
three = 3;
/* 环境相互作用与分支 */
(function(){
function fib(x) { return x
目前Prepack仍处于早期开发阶段，尚未准备好在生产环境中使用，官方建议仅尝试使用，并欢迎以帮助修复错误。
以下是Prepack团队对未来的规划：
稳定现有功能集，用于预优化(Prepack）React Native代码包
集成React Native工具链
根据React Native所用模块系统的假设来构建优化
进一步优化序列化（Serialization），包括
消除不暴露特性（identity）的对象
消除未使用的导出属性
预优化每个函数、基本代码块、语句、表达式
与ES6保持完全一致
支持广泛的模块系统
假设ES6支持某些功能，延迟完成或直接忽略应用
进一步实现Web和Node.js环境中的兼容性目标
深入集成JavaScript虚拟机，改进堆反序列化过程，包括
暴露&对象懒初始化&的概念 - 以一种JavaScript无感知的方式，在首次使用对象时对其进行初始化
通过专门的字节码提高普通对象创建的编码效率
将代码分为两个阶段：1) 非环境依赖阶段，虚拟机可以安全地捕获并恢复生成的堆；2)环境依赖阶段，通过从环境中获得的值执行所有剩余的计算过程来拼凑具体的堆
总结循环和递归
长期 - 利用Prepack作为一个平台
JavaScript Playground - 通过调整JavaScript引擎体验JavaScript特性，这些引擎由JavaScript所编写，托管在浏览器中；你可以把它想象成一个&Babel虚拟机&，实现了不能被编译的JavaScript新特性
捉Bug - 发现异常崩溃、执行问题&&
效果分析，例如检测模块工厂函数可能的副作用或强制纯净注释
信息流分析
调用图推理，允许内联和代码索引
自动测试生成，利用符号执行的特性与约束求解器（Constraint Solver）结合来计算执行不同执行路径的输入
智能模糊(Smart Fuzzing）
JavaScript沙盒 - 以不可观察的方式有效地测试JavaScript代码
本文永久更新链接地址：
相关资讯 & & &
　　　同意评论声明
　　　发表
尊重网上道德，遵守中华人民共和国的各项有关法律法规
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
本站管理人员有权保留或删除其管辖留言中的任意内容
本站有权在网站内转载或引用您的评论
参与本评论即表明您已经阅读并接受上述条款
匿名 发表于 厉害了，我的FacebookFacebook开发新图片浏览器 提高加载速度
腾讯科技讯（中涛）北京时间2月11日消息，据国外媒体报道，Facebook技术工程师斯特凡?帕克(Stefan Parker)周四宣布，鉴于当前版本Facebook图片浏览器(Photo Viewer)存在诸多不足，该公司正着手开发新款图片浏览器，以给用户带来新型图片浏览体验；新增及改进功能包括提高图片加载速度、方便用户观看文字评论等。
Facebook新版图片浏览器（腾讯科技配图）
帕克称，图片共享已成为Facebook核心业务之一，用户每天向Facebook上传的图片超过1亿张。但Facebook图片服务的部分系统代码已经过时，致使用户在使用Facebook图片浏览器工具时，通常会遇到以下问题：
- 图片加载速度过慢。一些用户需要不断刷新自己的浏览器，但图片仍处于不完全打开状态，此时用户无法正常查看图片和相关文字评论内容。
- 如果用户是通过消息投递途径来观看Facebook图片，则意味着需打开多个标签。如此一来，用户电脑桌面的空间面积将受到影响。帕克认为，对于精通计算机的用户而言，多标签浏览并不是大问题；但绝大多数Facebook用户仅为普通电脑使用者，此种浏览方式让他们感到不便。
- 查看图片评论内容很不方便。帕克认为，图片浏览的标准程序应该是：先观看图片，然后使用鼠标滚轮向下查看文字评论。再使用鼠标滚轮向上，即可重新查看图片。
- 使用JavaScript代码，致使图片和评论内容的加载、缓存任务非常繁重。
帕克表示，为解决现有Facebook图片浏览器存在的上述问题，新版图片浏览器需满足以下条件：
- 在每幅图片下部，至少留出100像素的空间。该空间用于显示图片文字说明及相关评论内容。换句话说，即使用户使用分辨率较低的显示器，新版Facebook图片浏览器已经将图片进行了压缩，从而使这些用户也能正常查看图片下部的文字评论内容。
- 图片本身应浮动在背景之上。如果用户觉得有必要，可通过鼠标滚轮来放大/缩小这些图片，但图片背景不应出现任何变化。
- 新版Facebook图片浏览器应该做到在不改变应用编程接口(API)前提下，可轻松增加一些新功能。
- 新版Facebook图片浏览器可能不再支持技术已经过时的微软IE6浏览器。
- 将JavaScript代码的使用减少到最低程度。
帕克最后表示，新版Facebook图片浏览器在给用户带来新体验的同时，图片加载速度和服务稳定性都将有所提高。
{{news.title}}网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
开发跨浏览器JavaScript时要注意的问题
1、&&&&&&&&& 向表中追加行定义table时使用tbody元素，以保证包括IE在内的所有浏览器可用例：定义如下一个空表&table id=”myTable”&&&&&& &tbody id=”myTableBody”&&/tbody&&/table&向这个表中增加行的正确做法是，把行增加到表体，而不是增加到表。Var cell = document.createElement(“td”).appendChild(document.createTextNode(“foo”));Var row = document.createElement(“tr”).appendChild(cell);Document.getElementById(“myTableBody”).appendChild(row); *IE中需要先创建行，再创建列，再创建内容2、&&&&&&&&& 设置元素的样式Var spanElement = document.getElementById(“mySpan”);//下面写法保证出IE外，所有浏览器可用spanElement.setAttribute(“style”,”font-weight:color:”);//下面的写法保证IE可用spanElement.style.cssText=”font-weight:color:”;3、&&&&&&&&& 设置元素的class属性Var element = document.getElementById(“myElement”);//下面的写法保证除IE外，所有浏览器可用Element.setAttribute(“class”,”styleClass”);//下面写法保证IE可用Element.setAttribute(“className”,”styleClass”);4、&&&&&&&&& 创建输入元素Var button = document.createElement(“input”);//单行文本框、复选框、单选框、单选钮、按钮需要此属性区别Button.setAttribute(“type”,”button”);Document.getElementById(“formElement”).appendChild(button);5、&&&&&&&&& 向输入元素增加事件处理程序Var formElement=document.getElementById(“formElement”);//所有浏览器可用formElement.onclick=function(){doFoo();};//除IE外，所有浏览器可用formElement.setAttribute(“onclick”,”doFoo();”);6、&&&&&&&&& 创建单选钮If(document.uniqueID){&&&&& //Internet Explorer&&&&& Var radioButton=document.createElement(“&input type=’radio’ name=’radioButton’ value=’checked’&”);}else{&&&&& //Standards Compliant&&&&& Var radioButton=document.createElement(“input”);&&&&& radioButton.setAttribute(“type”,”radio”);&&&&& radioButton.setAttribute(“name”,”radioButton”);&&&&& radioButton.setAttribute(“value”,”checked”);}7、&&&&&&&&& insertRow,insertCell,deleteRow在IE中，table.insertRow()如果没有指定参数，则在表格后面添加行，默认参数位-1；如果在Firefox中，则一定要加参数，如：insertRow(-1)。
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：