如何评价阿里开源的企业级 Node.js 框架 egg_百度知道
如何评价阿里开源的企业级 Node.js 框架 egg
我有更好的答案
gg的核心思路大致是application继承Koa 1.x，然后重载了Koa1.x 的createContext方法，同时用了一套类似的Load方法将controller/middleware/config挂载到app或者app的相应属性下（service有些不同，这里仅在访问时才会生成实例），所以能在中间件/路由处理函数中直接使用this.controller，this.service，this.app.config等访问到对应的数据;service&#47
采纳率：92%
来自团队：
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。1,501被浏览138,368分享邀请回答github.com/eggjs/eggeggjs feed 动态： ------## 1. Node.js 在阿里阿里是业界最早的一批使用 Node.js 来做线上大流量应用的公司，早在 2011 年的就已经开始在生产环境中使用。众所周知，在阿里的技术栈中， Java 是最最核心的，那 Node.js 扮演怎么样的一个角色呢？基础设施大部分采用 Java 实现，变化较少，有事务要求的 Business Services 通常使用 Java。而 Node.js 则替代过去 PHP/Java Web 的场景，用在需要快速迭代，需求变化非常快的用户侧。很多内部的工程化支撑系统也逐渐基于 Node.js 了。据不完全统计，目前阿里 Node.js 的开发者几百号人，线上的应用也非常之多，仅次于 Java 应用，光对外服务的进程数就超过 1w+。## 2. 我们面对的挑战与机遇Node.js 的使用是越来越多了，但整个基建和生态却跟不上：Node.js 开发者越来越多，但是真正涉足基础技术的人员还是那么少，那么分散。出现非常多的重复性技术问题和重复建设，每个团队一套轮子。非常多不合理地使用 Node.js 进行 Web 开发，也没有一套统一的规范可以参考。越来越多的 Node.js 应用出现，需要保证高可用。面对上述的挑战，阿里的 Node.js 先驱者们，做了非常多的探索和努力，如：的 alinode 就是一套运行时和服务平台，帮助开发者分析性能问题，快速定位疑难杂症。的 cnpm / tnpm 提供 npm 国内镜像加速服务，以及阿里内部私有库服务。等很多同学贡献的几百块个 Node.js 基础类库，还有各种服务的 Node.js 版 sdk。还有包括整个工作流程上的内部系统和工具支撑，阿里的 Node.js 基建真的很不错。Node 的 Collaborator 有 5 个国人, 其中 4 个在我们这边，并且有国内唯一一个 CTC 成员。 也正是因为他们一代代的努力，Node.js 在阿里才能落地生根，才有今天这繁荣。对这块有兴趣的同学，可以开个问题邀请
等人讲讲他们当年在阿里的开荒史。
## 3. egg 在阿里的定位egg 也是这一时代洪流中的新生一员，它面向的领域是：『企业级的 web 基础框架』。2013 年蚂蚁的 chair 框架，可以视为 egg 的前身。2015 年 11 月，在苏千的召集下，阿里各 BU 的前端骨干齐聚黄龙，闭门共建。2016 年初，各 BU 的基础 web 框架完成升级，在同一套规范的基础上进行差异化定制。2016 年中，广泛使用在绝大部分阿里的前端 Node.js 应用。2016 年 09 月，在 JSConf China 2016 上亮相并宣布开源。2017 年初，官网文档
亮相，并将在本月发布 egg@1.0 版本。egg 是阿里 Node.js 应用的核心基础设施，担心是 KPI 产物的同学，可以放宽心了。GitHub 地址：有哪些人参与到 egg 的开发和维护中？核心开发者中，
(popomore，小 substack)，
(Python发烧友，fengmk2)， (dead-horse) 等人，是开源社区的资深人士，每个人维护的 npm 模块都有几百个，同时也是 cnpm 和 koa 的核心开发者。
我们甚至还有 2 位前端安全方向的专家，负责 egg-security 等类库。阿里各 BU 的前端活跃开发者，光框架和插件的维护者就超过 40 位。外部开发者也不少，甚至还有几位硅谷华人开发者在帮我们翻译成英文文档。同学们也不用担心 egg 只适合阿里或电商类应用：蚂蚁金服，天猫，UCWeb，村淘，神马等 BU 的业务场景千差万别，但他们的基础框架都是在 egg 之上扩展的，遵循的是同一套规范。egg 的设计机制，在遵循同一套规范的同时，完美的达成生态共建和差异化定制的平衡点。egg 里面只有我们对企业级应用的最佳实践，而并没有耦合任何阿里的具体业务逻辑。## 4. egg 的设计理念Think about future, Design with flexibility, But only implement for production.### 4.1 约定优于配置『一个大规模团队的基础框架，最重要的是需要遵循一定的约束和约定。』没有约定的团队，沟通成本是非常高的，比如有人会按目录分栈而其他人按目录分功能，开发者认知不一致很容易犯错。通过约定可以减少开发人员的学习成本，开发人员不再是钉子，可以流动起来。egg 最核心的东西，其实就是一套约定和规范，这个规范不仅仅是开发目录的约定，还包括了开发过程中，从提案讨论，编码风格，code review 等等方方面面的规范化。其实大家的基础框架用不用 egg 真的无所谓，最重要是有一套适合团队的约定。egg 给社区最有价值的回馈是：源于我们在大规模企业级应用中的经验沉淀，它们的产出物就是各种约定和插件。我们的文档，包含了非常多的框架设计思路，即使你不用 egg，也可以看看，如：然后就是类似 egg 团队这种基于 gitlab/github 的硬盘式协作模式，以及在 issue 中的各种讨论，后来的开发者可以轻而易举的了解某个设计思路的前因后果。
与后续值得关注的 issue 均会不定期收录到： 的 eggjs-feed在 top100的分享 PPT - 当然，我们推荐基于 egg 来定制上层框架：egg 采用微核 + 插件体系，本身大部分功能由插件提供，高度灵活，功能强大。egg 提供了完善的加载机制实现 - ，也是整个框架的灵魂，支持非常多的扩展方式。约定不等于扩展性差，相反 egg 有很高的扩展性。对于团队架构师或技术负责人，它足够的 optional，只需简单的做加法，组装插件即可封装成适合自己团队的上层框架。对于团队开发人员，它又足够的强约束，保证不会出现千人千面的代码风格和设计。某种意义上来讲，egg 也是渐进式的框架，参见。### 4.2 插件机制插件机制是 egg 的一大特色，它不但可以保证框架核心的足够精简、稳定、高效，还可以促进业务逻辑的复用，生态圈的形成。典型案例如 egg-security，就集合了阿里集团的多年安全经验积累，具体参见 。同时，差异化定制不意味着没有约定，它只是下层插件实现的差异化，而上层开发体验是一致的：如 egg-view-nunjucks / egg-view-react 这类插件，遵循
的同时，又不限制具体模板引擎选项。仅需安装不同的 view 插件， 上层开发体验是一致的。如
中提到的 mysql 等的实例化方式，只要是开发中共性的模式，都会被不断的总结和沉淀下来成为约定。egg-tracer / egg-userrole 这些约定，等等，无处不在。### 4.3 框架机制上面提到的插件机制，很灵活，但是对于企业级应用来说，却还不够。如果你的团队遇到过：维护很多个项目，每个项目都需要复制拷贝诸如
webpack.config.js 之类的文件。每个项目都需要使用一些相同的类库，相同的配置。在新项目中对上面的配置做了一个优化后，如何同步到其他项目？如果你的团队需要：统一的技术选型，比如数据库、模板、前端框架及各种中间件设施都需要选型，而框架封装后保证应用使用一套架构。统一的默认配置，开源社区的配置可能不适用于公司，而又不希望应用去配置。统一的部署方案，通过框架和平台的双向控制，应用只需要关注自己的代码。统一的代码风格，框架不仅仅解决代码重用问题，还可以对应用做一定约束，作为企业框架是很必要的。egg 在 koa 基础上做了很多约定，框架可以使用
自己定义代码规则。为此，egg 为团队架构师和技术负责人提供
框架定制 的能力，框架是一层抽象，可以基于 egg 去封装上层框架，并且 egg 支持多层继承。这样，整个团队就可以遵循统一的方案，并且在项目中可以根据业务场景自行使用插件做差异化，当后者验证为最佳实践后，就能下沉到框架中，其他项目仅需简单的升级下框架的版本即可享受到。### 4.4 质量保障和技术支撑egg 所有的核心代码和插件，都有 93+% 的覆盖率的单元测试。参见 。规范的 github pull request 协作模式，每一次提交都会经过自动化集成测试，以及 2+ 个核心开发者的 review。严格遵循
发布规则，可以放心的使用 `^` 引入我们的模块。提供了 egg-bin，npminstall 等等开发期的辅助功能，让开发者更愉悦的进行开发。内网版的 egg 是继承于社区版的，大部分问题，我们能第一时间感知到并及时修复。技术支撑方面，在前面第三节里面也提到了，我们有非常多且活跃的开发者，以及内部的广泛使用，并不会没人维护。Node 的 Collaborator 有 5 个国人, 其中 4 个在我们这边，其中一个还是国内唯一进入Node CTC 核心技术委员会的。### 4.5 其他#### 与其他框架的对比其实不是一个层面的，不能直接对比，egg 是底层框架。通过 egg + 对应的插件封装成上层框架，才可以跟 sails , hapi 等社区的优秀框架，进行对比。#### egg 与 koa 的关系koa 是一个非常优秀的框架，然而对于企业级应用来说，它还比较基础，而 egg 选择了 koa 作为其基础框架，在它的模型基础上，进一步对它进行了一些增强。egg 升级到 koa2 的成本?egg 的核心开发者中好几位都是 koa 的核心开发者，因为我们能很好的跟进变更。升级成本非常之低, 具体参见我们的。具体可以阅读下我们的文档： 。## 5. 我个人在参与 egg 开发过程中的收获回顾这几年，我个人感觉是非常幸运的，13 年的时候，跟着
做前端工程化，15 年则是参与到 egg 的整个开发过程中。 在这段旅途中，我熟悉了堪称教科书式的基于 Git Pull Request 的异步硬盘式协作模式；我学习到不少大规模应用中的经验总结；这一段经历让我受益良多，永远无法忘怀，在无数个大半夜，一帮人还在 issue 上讨论的热火朝天。很幸运自己能参与到阿里的 Node.js 发展中搬一两块砖，这里的基建和生态真的非常完善：私有库有苏千的 tnpm性能分析有朴老师的 alinode （egg 开源前还用它发现了 node set header，key 全小写比大小写混合，能提升 10x 速度的一个坑，对这个有兴趣的，开问题邀请朴老师回答吧~） 各种后端服务都有死马他们维护的对应的 SDK 接入还有非常多的数据上报，监控等等工作流上的辅助工具和系统。还有
团队的三年规划，佩服到五体投地。 有好奇心的同学，在杭州的，不妨亲自进去看看，不信，你问问叔叔
。而在广州的同学，也可以过来 UC 这边体验下，我们的内部交流通道非常顺畅。最后，回过头来看，我个人是挺感慨的，这么短时间，完全没有政治命令，大家主动拥抱共建，对于阿里这样如此大规模的多部门的公司，真可谓奇迹。国内的开发者真的不用妄自菲薄，这几年，越来越多的国内框架如 ant design，element，weex，macaca 等等，正走出国门，拥抱世界。以上。--PS： 知乎的编辑器体验还是比不过 github markdown。同步更新到 github：59488 条评论分享收藏感谢收起egg - 为企业级框架和应用而生
Released under the MIT License前端每周清单第6期：Angular
4.0学习资源，Egg.js 1.0发布，六问CTO程序员如何成长a year ago7收藏分享举报文章被以下专栏收录关注前端之巅微信公众号 及时学习一线前端实践{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\u002Fpay.zhihu.com\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&InfoQ前端垂直专栏：紧跟前端发展，共享一线技术，万名淀粉互助，共登前端之巅！&,&permission&:&COLUMN_PUBLIC&,&memberId&:,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&关注前端之巅微信公众号 及时学习一线前端实践&,&urlToken&:&qianduanzhidian&,&id&:25632,&imagePath&:&v2-1822f4ecad3a38a19a0dea0e5da74f5d.jpg&,&slug&:&qianduanzhidian&,&applyReason&:&0&,&name&:&前端之巅&,&title&:&前端之巅&,&url&:&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fqianduanzhidian&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:6163,&avatar&:{&id&:&v2-1822f4ecad3a38a19a0dea0e5da74f5d&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-1822f4ecad3a38a19a0dea0e5da74f5d_l.jpg&,&articlesCount&:72},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-b55d0a87c3e7ac433ee1c7e9_r.jpg&,&lastUpdated&:,&imagePath&:&v2-b55d0a87c3e7ac433ee1c7e9.jpg&,&permission&:&ARTICLE_PUBLIC&,&topics&:[225,7912],&summary&:&前端每周清单专注前端领域内容，分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号（ID：frontshow），及时获取前端之巅优质文章。作者：\u003Ca href=\&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002FwxyyxcFpins\u002Fposts\& class=\&\& data-editable=\&true\& data-title=\&王下邀月熊\&\u003E王下邀月熊\u003C\u002Fa\u003E编辑：\u003Ca href=\&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fwei-wei-24-86-36\& class=\&\& data-editable=\&true\& data-title=\&尾尾\&\u003E尾尾\u003C\u002Fa\u003E新闻热点国内国外，前端最新动态\u003Ca href=\&https:\u002F\u002Fparg.co\u002Fbsw\& data-editable=\&true\& data-title=\&《Angular 4.0.0 发布》\&\u003E《Angular 4…\u003C\u002Fa\u003E&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T17:23:59+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:2597898,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&前端每周清单第6期：Angular
4.0学习资源，Egg.js 1.0发布，六问CTO程序员如何成长&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:25632,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-b55d0a87c3e7ac433ee1c7e9_r.jpg&,&author&:{&bio&:&敲敲代码敲敲字，看看风景做做饭~&,&isFollowing&:false,&hash&:&c955e1fae77bab21cb2a36bc&,&uid&:980600,&isOrg&:false,&slug&:&wei-wei-24-86-36&,&isFollowed&:false,&description&:&前InfoQ技术编辑，前端之巅运营；现百度搜索编辑+运营。&,&name&:&尾尾&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fwei-wei-24-86-36&,&avatar&:{&id&:&e9a40c2d69bfd8cc5cf0&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:593199}],&title&:&前端每周清单第6期：Angular
4.0学习资源，Egg.js 1.0发布，六问CTO程序员如何成长&,&author&:&wei-wei-24-86-36&,&content&:&\u003Cp\u003E前端每周清单专注前端领域内容，分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号（ID：frontshow），及时获取前端之巅优质文章。\u003C\u002Fp\u003E\u003Cp\u003E作者：\u003Ca href=\&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002FwxyyxcFpins\u002Fposts\& class=\&internal\&\u003E王下邀月熊\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E编辑：\u003Ca href=\&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fwei-wei-24-86-36\& class=\&internal\&\u003E尾尾\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Ch2\u003E新闻热点\u003C\u002Fh2\u003E\u003Cp\u003E国内国外，前端最新动态\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002Fbsw\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Angular 4.0.0 发布》\u003C\u002Fa\u003E：今日 Angular 团队宣布发布 4.0.0 版本，该版本能够向后兼容绝大部分 2.x.x 应用。在 4.0.0 中，带来的主要改变包括应用更小并且速度更快、更新了视图引擎，减少了将近 60% 的生成代码、并且引入了动画库作为预置的核心库的一部分等 。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003E《Egg.js 1.0.0 正式发布》\u003C\u002Fa\u003E：Egg.js 是企业级 Node.js 框架沉淀自阿里各行各业不同领域最佳实践的插件，涵盖了常见的业务开发场景，稳定支撑了 15 和 16 年天猫双 11 大促，顶级流量压力 。其秉持渐进式理念，极具伸缩性，既适合个人小项目快速开发，也适合企业级的团队开发协作。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbQU\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《WebStorm 2017.1 增加对 Vue.js 的支持》\u003C\u002Fa\u003E：近日，JetBrains 发布了其最受欢迎的 WebStorm IDE 的 2017.1 版本，毫不例外地增加了对 Vue.js 的支持。WebStorm 现在会识别 .vue 文件并在模板中增加代码补全功能。当引用其他视图组件时，WebStorm 也将能够自动补全代码并自动增加 import 声明。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch2\u003E开发教程\u003C\u002Fh2\u003E\u003Cp\u003E步步为营，掌握基础技能 * \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbQ0\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Angular 4 学习资源》\u003C\u002Fa\u003E：随着 Angular 4 的正式发布，本文收集了部分学习 Angular 4 的资源，包括特性总结、服务端渲染、响应式编程、样式指南等等多个部分。\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fsii.im\u002Fplayground\u002Fcss-grid\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《CSS Grid 典型案例》\u003C\u002Fa\u003E：该网站提供了一系列基于 React 编写的 CSS Grid 布局的测试样例，是个不错的从实例中学习 CSS Grid 语法与使用的教程。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbsL\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Webpack 实践教程》\u003C\u002Fa\u003E：本系列教程着眼于介绍真实应用中 Webpack 的使用，包含了三个部分：构建基础前端项目与添加编译支持、减少包体体积与缓存、加速构建与提升开发工作流。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbsF\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《面向“远古” Web 开发者的现代 JavaScript 教程》\u003C\u002Fa\u003E：本文主要是面向那些从 PHP、JSP、Rails 占据统治地位时开始进行 Web 技术的开发者进行常见的现代 JavaScript 基础概念的介绍。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbQl\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《你应该知道的关于 Node.js 中模块导入的知识》\u003C\u002Fa\u003E：在 Node.js 开发中我们时刻都在于其模块机制打交道，而本文作者则深入浅出地介绍了 Node.js 中负责处理模块依赖的两个核心模块：require 与 module；并且介绍了不同的导入对象在 Node.js 中实际的递归处理流程以及最终在 module 中形成的元数据描述。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch2\u003E工程实践\u003C\u002Fh2\u003E\u003Cp\u003E立足实践，提示实际水平\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002Fbs5\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Dropbox：使用同域 Cookie 避免跨站攻击》\u003C\u002Fa\u003E：跨站请求伪造（CSRF）是常见的网络渗透攻击手段之一，攻击者会误导用户在攻击站点上对目标站点发起非法请求。本文是 Dropbox 工程师分享他们在实践中常用的防御经验分享，包括使用动态表单令牌、同域 Cookie 等等。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002Fbsi\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《跨浏览器插件模板》\u003C\u002Fa\u003E：随着 Firefox 也开始支持 WebExtensions，我们可以更加方便地编写跨浏览器插件，尽可能地复用代码。本仓库则提供了基础的插件模板，实现了一次编写，多处运行、热加载等多个便捷功能的预置。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002Fbsk\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《VS Code 使用贴士与技巧》\u003C\u002Fa\u003E: VSCode 是非常轻量易用的软件开发工具，其丰富的插件系统能够极大地满足开发需求。本文则是作者总结的一系列 VS Code 使用技巧的总结与介绍，譬如常用命令操作、文件管理、Git 集成、调试与任务运行等等。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002Fbsz\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《解密 JavaScript 异步编程》\u003C\u002Fa\u003E：JavaScript 中异步编程历经了多个大的迭代，从回调到 Promise 到生成器以及现在的 Async\u002FAwait；本文作者则是高屋建瓴地介绍了 JavaScript 异步编程的变迁历史以及简要的内部实现原理。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbQb\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Webpack CommonsChunkPlugin 与多入口公共代码提取》\u003C\u002Fa\u003E：在构建基于 Webpack 的前端工作流时，CommonsChunkPlugin 是常用的公共代码提取插件。而本文则是 Webpack 开发团队对于社区反馈的CommonsChunkPlugin 使用过程中的一些误区与同步\u002F异步公共代码块提取的实践进行总结与分析。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbQm\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《构建可维护的大型 Angular 2 应用》\u003C\u002Fa\u003E：本文是来自 Versett 的工程师介绍其团队在基于 Angular 2 构建大型应用时的实践与总结。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbQS\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《开发 React Native 与 Redux 应用一年来的错误总结》\u003C\u002Fa\u003E：本文作者总结了他在过去一年中 React Native 与 Redux 开发中遇到的错误的复盘与总结，譬如布局文件分割、Redux Store 设计、项目目录结构、表单验证等多个方面。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch2\u003E深度阅读\u003C\u002Fh2\u003E\u003Cp\u003E深度思考，升华开发智慧\u003C\u002Fp\u003E\u003Cp\u003E- \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002Fbsv\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《浅析 WebAssembly 缘何优于 Asm.js》\u003C\u002Fa\u003E：WebAssembly 是新的 Web 中可执行格式，逐现代浏览器纷纷地提供了对于 WebAssembly 的原生支持；本文则是对于 WebAssembly 相较于 asm.js 带来的性能提升背后的原理进行简要介绍。\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbsW\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《ES7 Async\u002FAwait 常见误区》\u003C\u002Fa\u003E：ECMAScript 6 引入的 Promise 大大简化了 JavaScript 中异步编程语法，而 ES7 引入的 Async 则使其更为优雅；本文作者对于实践中常见的对于 Async\u002FAwait 的语法误用案例进行了解析。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002Fbsg\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《React Conf 2017 盘点》\u003C\u002Fa\u003E：本文作者对于近日举办的 React Conf 2017 中的精彩演讲进行了盘点，包括 Redux 与 MobX 在状态管理领域的对比、ReactVR 等一系列优秀的基于 React 的扩展项目、代码格式化与样式组件、服务端渲染等等。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbQH\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《百度 SSP 单页式应用性能优化实践》\u003C\u002Fa\u003E：针对首页和部分页面打开速度慢的问题，百度SSP前端团队对单页式应用性能进行了优化。本文介绍其中一个方案：基于 HTTP Chunk 的首屏数据渐进式预加载方案，该方案总体减少了单页应用 1.2s 的首屏呈现时间。同时对比其与同构渲染方案的异同。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbQY\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Composing Software》\u003C\u002Fa\u003E：本系列文章由 Eric Elliott 大神发布，着眼于介绍 JavaScript 函数式编程与大型软件项目中的可组织性技术的介绍，包括了函数式编程导论、高阶函数、Reduce、Functors & Categories 等几个部分，还在持续更新中。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Freactjs\u002Fredux\u002Fissues\u002F2295\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Redux 实践大讨论》\u003C\u002Fa\u003E：此篇是 Markerikson 在 Redux Issue 中发起的讨论，主要涉及 Redux 模板冗余、过度抽象、学习曲线过于曲折、太多的 Opinioned 最佳实践等问题。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch2\u003E开源项目\u003C\u002Fh2\u003E\u003Cp\u003E乐于分享，共推前端发展\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fwix\u002Freact-native-interactable\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《react-native-interactable》\u003C\u002Fa\u003E：react-native-interactable 是由 wix 发布的用于创建高性能用户交互效果的声明式接口。典型的用户场景包括滑动式卡片、抽屉菜单、伸缩式应用头、聊天头等。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fopendigg\u002Fawesome-github-vue\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《awesome-github-vue》\u003C\u002Fa\u003E：awesome-github-vue 是由 OpenDigg 整理并维护的 Vue 相关开源项目库集合。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fberzniz\u002Freact-overdrive\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《react-overdrive》\u003C\u002Fa\u003E：非常简单易用的 React 应用转场动画实现库，能够在不同的页面间指定相同 ID 的元素，Overdrive 会自动为这两个元素之间添加转场动画。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fzulko\u002Feagle.js\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Eagle.js》\u003C\u002Fa\u003E：Eagle.js 是基于 Vue.js 构建的创建 Web 中幻灯片的库，支持动画、主题、交互插件等常用功能。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Faweary\u002Freact-perimeter\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《react-perimeter》\u003C\u002Fa\u003E：react-perimeter 能够为目标元素创建隐藏的栅栏，当用户的鼠标移动到目标元素的指定范围内时会触发预设时间，譬如可以执行组件预加载等操作。\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch2\u003E巅峰人生\u003C\u002Fh2\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbQp\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《六问CTO，程序员的个人、职业成长如何抉择？》\u003C\u002Fa\u003E：本文是声网 Agora.io CTO 陶思明对于程序员的自我成长、KPI 考核机制、技术管理与创业选择等相关问题进行的回答与分享。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch2\u003E前端之巅\u003C\u002Fh2\u003E\u003Cp\u003E「前端之巅」是InfoQ旗下关注前端技术的垂直社群，加入前端之巅学习群请关注「前端之巅」公众号后回复“加群”。投稿请发邮件到editors@cn.infoq.com，注明“前端之巅投稿”。\u003C\u002Fp\u003E&,&updated&:new Date(&T09:23:59.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:4,&collapsedCount&:0,&likeCount&:7,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-b55d0a87c3e7ac433ee1c7e9_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端工程师&}],&adminClosedComment&:false,&titleImageSize&:{&width&:1280,&height&:853},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&qianduanzhidian&,&name&:&前端之巅&},&tipjarState&:&inactivated&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:4,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T17:23:59+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&&,&isFollowing&:false,&hash&:&fd6ca1cf21ef&,&uid&:56,&isOrg&:false,&slug&:&bigbyto&,&isFollowed&:false,&description&:&有开发app需求的可以联系&,&name&:&简单点&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fbigbyto&,&avatar&:{&id&:&v2-7e28b8b9b&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:null,&isFollowing&:false,&hash&:&3b61b0aa5e9be38c886e4eb&,&uid&:64,&isOrg&:false,&slug&:&cokeknight-kin&,&isFollowed&:false,&description&:&&,&name&:&cokeknight kin&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fcokeknight-kin&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&零岁产品人，关注商业，影音爱好者，极客范！&,&isFollowing&:false,&hash&:&aa49c3bab6cc53a264b9df8a81751a23&,&uid&:64,&isOrg&:false,&slug&:&xu-jin-61-91&,&isFollowed&:false,&description&:&出生于上世界九十年代中期。整个世界都是我的学校。学自己之所想所爱。自由的身心定能使我成为一位一直超前行走的行者。&,&name&:&Winar&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fxu-jin-61-91&,&avatar&:{&id&:&6c1fbb50baf35&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&前端开发工程师&,&isFollowing&:false,&hash&:&8d5b70fefe258be459dc0272088bedc9&,&uid&:08,&isOrg&:false,&slug&:&codedreamfy&,&isFollowed&:false,&description&:&&,&name&:&夜夜沉沦&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fcodedreamfy&,&avatar&:{&id&:&v2-11deaf65ce&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&软件工程师&,&isFollowing&:false,&hash&:&17c9abdacfbbd0e4b424ae2&,&uid&:40,&isOrg&:false,&slug&:&zeng-zhi-an&,&isFollowed&:false,&description&:&&,&name&:&godzza&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fzeng-zhi-an&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&前端每周清单专注前端领域内容，分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号（ID：frontshow），及时获取前端之巅优质文章。作者：\u003Ca href=\&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002FwxyyxcFpins\u002Fposts\& class=\&\& data-editable=\&true\& data-title=\&王下邀月熊\&\u003E王下邀月熊\u003C\u002Fa\u003E编辑：\u003Ca href=\&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fwei-wei-24-86-36\& class=\&\& data-editable=\&true\& data-title=\&尾尾\&\u003E尾尾\u003C\u002Fa\u003E新闻热点国内国外，前端最新动态\u003Ca href=\&https:\u002F\u002Fparg.co\u002Fbsw\& data-editable=\&true\& data-title=\&《Angular 4.0.0 发布》\&\u003E《Angular 4…\u003C\u002Fa\u003E&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:true,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002F50\u002Fv2-f35457fd3cdabdb749da393_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&JavaScript&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&敲敲代码敲敲字，看看风景做做饭~&,&isFollowing&:false,&hash&:&c955e1fae77bab21cb2a36bc&,&uid&:980600,&isOrg&:false,&slug&:&wei-wei-24-86-36&,&isFollowed&:false,&description&:&前InfoQ技术编辑，前端之巅运营；现百度搜索编辑+运营。&,&name&:&尾尾&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fwei-wei-24-86-36&,&avatar&:{&id&:&e9a40c2d69bfd8cc5cf0&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&qianduanzhidian&,&name&:&前端之巅&},&content&:&\u003Cp\u003E本文首发地址：\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fmp.weixin.qq.com\u002Fs%3F__biz%3DMzIwNjQwMzUwMQ%3D%3D%26mid%3D%26idx%3D1%26sn%3Dbf%26chksm%3Ded65cef4a4dafe41acb0fcb7edb315b622a%23rd\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EWebStorm 2017.1增加对Vue.js的支持\u003C\u002Fa\u003E\u003C\u002Fp\u003E作者｜David Iffland\u003Cp\u003E\u003Cbr\u003E译者｜张健欣\u003C\u002Fp\u003E\u003Cp\u003E近日，JetBrains发布了其最受欢迎的WebStorm IDE的2017.1版本。在快速发展的JavaScript领域，WebStorm 2017.1通过新功能来保持其身为开发工具竞争力。\u003C\u002Fp\u003E\u003Cp\u003E数年来，JetBrains都保持让WebStorm跟上Javascript的最新的和最重要的改进。就更新的速度来说，这是一个不小的壮举。\u003Cstrong\u003E今年也毫不例外地增加了对Vue.js的支持\u003C\u002Fstrong\u003E。\u003C\u002Fp\u003E\u003Cp\u003EWebStorm现在会识别.vue文件并在模板中增加代码补全功能。当引用其他视图组件时，WebStorm也将能够自动补全代码并自动增加import声明。Vue.js的发起人尤雨溪告诉InfoQ，这是一个“重大的消息”：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cem\u003E我知道，很多Vue的使用者都正在使用或考虑使用WebStorm作为他们的首要的编辑器，都期待WebStorm对Vue的更好支持。\u003C\u002Fem\u003E\u003C\u002Fp\u003E\u003Cp\u003EWebStorm 2017.1对React的支持包括自动补全功能和自动增加组件的import声明以及自动增加对React本身的import声明。WebStorm 2017.1还支持在React社区非常火的Jest测试框架。\u003C\u002Fp\u003E\u003Cp\u003EAngular开发者可以在WebStorm 2017.1中使用Angular Language Service。这项服务由Angular团队开发，提供在Angular模板中的错误检查和类型建议功能。\u003C\u002Fp\u003E\u003Cp\u003EVictor Savkin突出强调了这个功能以及为什么它是对WebStorm本身功能的一个重大改进：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cem\u003EWebStorm做的非常好，但是也不过如此，当它试图自动补全“this”时也会不知所措。\u003C\u002Fem\u003E\u003C\u002Fp\u003E\u003Cp\u003ESavkin说，通过Angular Langulage Service，WebStorm不需要再做任何猜测。通过@angular\u002Flanguage-service的帮助，WebStorm可以清楚知道在模板中什么是可用的。\u003C\u002Fp\u003E\u003Cp\u003EStandardJS代码风格最近获得许多关注。WebStorm现在增加了对原生StandardJS和其他代码风格变种的支持。\u003C\u002Fp\u003E\u003Cp\u003E开发者可以免费试用WebStorm 2017.1版本30天。试用期结束后每年的订阅费，独立开发者为59美元，企业为129美元。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E查看英文原文\u003C\u002Fstrong\u003E：WebStorm 2017.1 Adds Vue.js Support（\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fwww.infoq.com\u002Fnews\u002F\u002Fwebstorm-2017-vue-support\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EWebStorm 2017.1 Adds Vue.js Support \u003C\u002Fa\u003E ）\u003C\u002Fp\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T11:05:17+08:00&,&url&:&\u002Fp\u002F&,&title&:&WebStorm 2017.1增加对Vue.js的支持&,&summary&:&本文首发地址：\u003Ca href=\&https:\u002F\u002Fmp.weixin.qq.com\u002Fs?__biz=MzIwNjQwMzUwMQ==&mid=&idx=1&sn=bf&chksm=ed65cef4a4dafe41acb0fcb7edb315b622a#rd\& data-editable=\&true\& data-title=\&WebStorm 2017.1增加对Vue.js的支持\& class=\&\&\u003EWebStorm 2017.1增加对Vue.js的支持\u003C\u002Fa\u003E作者｜David Iffland 译者｜张健欣近日，JetBrains发布了其最受欢迎的WebStorm IDE的2017.1版本。在快速发展的JavaScript领域，WebStorm 2017.1通过新功能来保持其身为开发工具竞争力。数年来，JetBrains都…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:15,&likesCount&:50},&next&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic1.zhimg.com\u002F50\u002Fv2-d92e012c9cb1abb7891fd_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&敲敲代码敲敲字，看看风景做做饭~&,&isFollowing&:false,&hash&:&c955e1fae77bab21cb2a36bc&,&uid&:980600,&isOrg&:false,&slug&:&wei-wei-24-86-36&,&isFollowed&:false,&description&:&前InfoQ技术编辑，前端之巅运营；现百度搜索编辑+运营。&,&name&:&尾尾&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fwei-wei-24-86-36&,&avatar&:{&id&:&e9a40c2d69bfd8cc5cf0&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&qianduanzhidian&,&name&:&前端之巅&},&content&:&\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.infoq.com\u002Fcn\u002FFE-Weekly\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E前端每周清单\u003C\u002Fa\u003E专注前端领域内容，分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单。\u003C\u002Fp\u003E\u003Cp\u003E作者：\u003Ca href=\&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002FwxyyxcFpins\u002Fposts\& class=\&internal\&\u003E王下邀月熊\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E编辑：\u003Ca href=\&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fwei-wei-24-86-36\& class=\&internal\&\u003E尾尾\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E新闻热点\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E国内国外，前端最新动态\u003Cbr\u003E- \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbC2\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Safari 10.1 发布，新增众多重要 Web 特性》\u003C\u002Fa\u003E：近日随着 iOS 10.3 与 macOS Sierra 10.12.4 的版本发布，系统内置的Safari 10.1 增加了许多重要的 Web 特性支持与性能提升，包括 CSS Grid 布局、fetch、IndexDB 2.0、Custom Elements、Form Validation、Media Capture 等等。( \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbC2\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ENew Web Features in Safari 10.1\u003C\u002Fa\u003E )\u003Cbr\u003E- \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fzeit.co\u002Fblog\u002Fnext2\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Next.js 2.0 发布》\u003C\u002Fa\u003E：近日 Next 2.0 正式发布，它为我们提供了便捷的快速开发 React 服务端渲染的工具，使得开发者能够专注于业务开发。在 2.0 版本中它提供了自定义路由、自定义服务端渲染代码、组件内 CSS、Prefetching 等等多个新特性。（ \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fzeit.co\u002Fblog\u002Fnext2\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EZEIT - Next.js 2.0\u003C\u002Fa\u003E ）\u003Cbr\u003E- \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002Fbhh\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《echarts v3.5 发布：新增日历坐标系、坐标轴指示器；同时统计扩展 v1.0 发布》\u003C\u002Fa\u003E：在 echarts 新发布的 3.5 版本中，新增了日历坐标系，增强了坐标轴指示器。同时，echarts 统计扩展 1.0 版本发布了。日历坐标系用于在日历中绘制图表，坐标轴指示器方便用户观察数据内容，统计扩展是一个专门用来进行数据分析的工具。（ \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002Fbhh\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Eecharts v3.5 发布：新增日历坐标系、坐标轴指示器；同时统计扩展 v1.0 发布\u003C\u002Fa\u003E ）\u003Cbr\u003E- \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Ftwitter.com\u002Fleeb\u002Fstatus\u002F745088\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Relay 1.0.0 发布》\u003C\u002Fa\u003E：近日 Relay 1.0.0-alpha 发布，提供了许多新的特性。作为 Facebook 发布的全特性 GraphQL 客户端，其能够在低配的移动设备上构建高性能、复杂可扩展的应用。( \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Ftwitter.com\u002Fleeb\u002Fstatus\u002F745088\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttps:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\u003Etwitter.com\u002Fleeb\u002Fstatus\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u002F3C\u002Fspan\u003E\u003Cspan class=\&ellipsis\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003E )\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E开发教程\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E步步为营，掌握基础技能\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbQ3\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《使用 Vue.js 与 Electron 构建桌面问卷应用》\u003C\u002Fa\u003E：本文介绍了如何利用 Vue.js 与 Electron 来构建简单的桌面问卷应用，作者首先介绍了如何使用 vue-cli 创建简单的 Web 项目，然后讨论了如何将项目运行在 Electron 中，最后阐述了如何将应用整体打包发布。( \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbQ3\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ECreate a Desktop Quiz Application Using Vue.js and Electron\u003C\u002Fa\u003E )\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fjulian.is\u002Farticle\u002Fprogressive-web-apps\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Progressive Web Apps：响应式 Web 设计的延伸》\u003C\u002Fa\u003E：本文是对于 Progressive Web Apps 概念、设计理念与简单实践的介绍，作者介绍了 PWA 应用应该具备的基本特性、性能与体验上的要求以及如何将现有站点转化为 PWA 的简单实践。( \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fjulian.is\u002Farticle\u002Fprogressive-web-apps\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EProgressive Web Apps — The Next Step in Responsive Web Design\u003C\u002Fa\u003E )\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbCx\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《2017 简明 React 入门指南》\u003C\u002Fa\u003E：本文是针对那些熟悉 jQuery 与传统 JavaScript 开发的前端工程师准备的现代 React 开发入门指南，其包括了环境配置、create-react-app 使用、学习资料、应用编写与发布等等章节。( \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbCx\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttps:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\u003Eparg.co\u002FbCx\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003E )\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002Fbhl\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《8 个可能你没考虑过关于 CSS 的知识》\u003C\u002Fa\u003E：不同的技术学习曲线可能相差甚远，而 CSS 的初学者则会觉得相当容易入手，但是深入之后可能发现连居中都不甚容易。本文作者是个深度 CSS 热爱者，他从自己多年的经验介绍了 CSS 中的垂直居中、100% 属性、float、z-index 等等多个细节知识点。（ \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002Fbhl\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttps:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\u003Eparg.co\u002Fbhl\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003E ）\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fvasanthk\u002Freact-bits\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《React Bits》\u003C\u002Fa\u003E：一本关于 React 设计模式、技术与技巧的书，涵盖了常见的 React 应用开发中的设计模式、需要规避的反模式、处理 UX 变种、性能调试与样式处理等等。（ \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fvasanthk\u002Freact-bits\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Evasanthk\u002Freact-bits\u003C\u002Fa\u003E ）\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbhN\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《实例讲解 CSS 盒模型》\u003C\u002Fa\u003E：有经验的前端开发者都知道 HTML 中的布局就是盒套盒，而本文则是以某个街区的例子深入浅出地讲解 CSS 中的盒模型。（ \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbhN\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttps:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\u003Eparg.co\u002FbhN\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003E ）\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch2\u003E\u003Cb\u003E工程实践\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E立足实践，提示实际水平\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbhH\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《12 个精妙的 JavaScript 代码片》\u003C\u002Fa\u003E：本文作者分享了十二个非常不错的 JavaScript代码片，这些代码片能够帮你优化现有代码，让代码更加地赏心悦目。（ \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbhH\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttps:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\u003Eparg.co\u002FbhH\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003E ）\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002Fbhb\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Node.js 应用监控实践指南》\u003C\u002Fa\u003E：本文介绍生产环境下 Node.js 应用监控实践指南，包括了监控的意义、监控的对象、目前开源的监控解决方案以及一些 SaaS 解决方案等。( \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002Fbhb\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EThe Definitive Guide for Monitoring Node.js Applications | @RisingStack\u003C\u002Fa\u003E )\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbhU\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《使用 Faker.js 为 Node.js 应用创建模拟数据》\u003C\u002Fa\u003E：在应用开发中我们往往会头疼于如何构建大量的随机数据，特别是那些符合某些固定模式的数据，我们可能会要用这些数据仿制 RESTful 接口、进行单元测试等等。而 Faker.js 则为我们提供了这样的随机数据生成器。( \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbhU\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttps:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\u003Eparg.co\u002FbhU\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003E )\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbhC\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Vue.js 2.2 完整 API 清单》\u003C\u002Fa\u003E：本文是 Vue.js 2.2 中完整的 API 介绍，可以作为手册随时查阅 。（ \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbhC\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttps:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\u003Eparg.co\u002FbhC\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003E ）\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbhR\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《JavaScript 中构建响应式引擎》\u003C\u002Fa\u003E：本系列文章介绍了如何在 JavaScript 中构建高性能的响应式引擎，对于有兴趣了解 MobX 底层原理的同学来说也是个不错的教程，目前包含了对于可观测对象的构造解释、属性推导与依赖追踪等内容（ \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbhR\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EHow to build a reactive engine in JavaScript\u003C\u002Fa\u003E ）\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch2\u003E\u003Cb\u003E深度阅读\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E深度思考，升华开发智慧\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbCw\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《深入浅出构建简单的 Chess AI》\u003C\u002Fa\u003E：本文作者介绍了如何基于 JavaScript 构建一个国际象棋的 AI，虽然不属于前端开发范畴，不过还是蛮有意思的一篇文章。本文主要包括移动生成、棋盘可视化、位置评估、基于 Minimax 算法的搜索树、Alpha-beta 修剪等等。( \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbCw\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttps:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\u003Eparg.co\u002FbCw\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003E )\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbCz\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《构建高性能扩展与折叠动画》\u003C\u002Fa\u003E：本文以菜单伸缩动画为例，介绍如何构建高性能扩展与折叠动画。较简单但是性能有缺陷的方式譬如修改元素宽高或者使用 clip 变换属性；而本文主要是由 CSS3 的 scale 变换来实现菜单的扩展与折叠，其为了保证菜单按钮的视觉效果与整体的平滑缩放还使用了所谓的对冲缩放技巧。( \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbCz\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttps:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\u003Eparg.co\u002FbCz\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003E )\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Feng.uber.com\u002Fubereats-react-native\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《基于 ReactNaive 与 Uber 工程基础构建 UberEATS》\u003C\u002Fa\u003E：本文是 UberEATS 的工程师团队介绍的他们基于 Uber 原工程架构与 ReactNative 实现应用的工程实践；包括了构建迁移路径、应用架构定义、自动更新、测试与静态类型检测等等。（ \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Feng.uber.com\u002Fubereats-react-native\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EPowering UberEATS with React Native and Uber Engineering\u003C\u002Fa\u003E )\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbhQ\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《利用机器学习优化网站性能》\u003C\u002Fa\u003E：本文是从浅显机器学习的角度来考虑如何优化网站性能，可能从专业服务端机器学习的角度来看并不复杂，但是从前端网站构建的角度来看也是蛮有意思的。本文包括了记录网站点击与提交信息、利用 AWS S3 进行模型训练、利用 UI 进行可视化展示等等。（ \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbhQ\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttps:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\u003Eparg.co\u002FbhQ\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003E ）\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbhM\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Chrome 中 Preload、Prefetch 以及 优先级介绍》\u003C\u002Fa\u003E：本文是 Google Chrome 团队的 Addy Osmani 对 Chrome 中的 Preload、Prefetch 以及抓取优先级的介绍，并且介绍了在网站性能优化中对于 Preload 与 Prefetch 的使用技巧和 HTTP\u002F2 带来的服务端推送如何协同使用等内容。( \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbhM\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttps:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\u003Eparg.co\u002FbhM\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003E )\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch2\u003E\u003Cb\u003E开源项目\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E乐于分享，共推前端发展\u003Cbr\u003E- \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fdanielstjules\u002Fjsinspect\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《jsinspect》\u003C\u002Fa\u003E：jsinspect 提供了方便的命令行工具或者构建插件来检测代码库中的复制粘贴或者结构相似的代码片，以方便开发者在优化过程中完成代码的重构。( \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fdanielstjules\u002Fjsinspect\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Edanielstjules\u002Fjsinspect\u003C\u002Fa\u003E )\u003Cbr\u003E- \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Freactide\u002Freactide\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Reactide》\u003C\u002Fa\u003E：Reactide 是首个面向 React Web 应用开发 IDE，其基于 Electron 提供了跨平台的特性。Reactide 允许我们像传统开发那样打开单个文件就可以完成预览，并且提供了便捷的组件导入、格式化等功能。该项目仍处于积极的开发中，可以拭目以待。 ( \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Freactide\u002Freactide\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ereactide\u002Freactide\u003C\u002Fa\u003E )\u003Cbr\u003E- \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fnolanlawson\u002Fmarky\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《marky》\u003C\u002Fa\u003E：marky 是基于 performance.mark\u002Fmeasure 封装的高性能 JavaScript 计时器，其相较于console.time()以及console.timeEnd()具有更好地性能表现，相较于简单的Date.now()具有更好地准确度。( \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fnolanlawson\u002Fmarky\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Enolanlawson\u002Fmarky\u003C\u002Fa\u003E )\u003Cbr\u003E- \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbCD\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Service Worker Mock》\u003C\u002Fa\u003E：在 PWA 应用的开发中对于 Service Worker 的测试一直比较麻烦，每个文件都可能通过self.addEventListener产生副作用，并且 Service Worker 的运行环境也迥异于正常的 Web 或者 Node 环境。而本包则是通过注入伪造的 Service Worker 环境来方便测试。( \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbCD\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Epinterest\u002Fservice-workers\u003C\u002Fa\u003E )\u003Cbr\u003E- \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Ftoddmotto\u002Fpublic-apis\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Public JSON APIs》\u003C\u002Fa\u003E：本仓库列举了许多 Web 开发中用到的公开的 JSON 接口，包括信息检索、机器学习、工具使用等等多个方面。( \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Ftoddmotto\u002Fpublic-apis\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Etoddmotto\u002Fpublic-apis\u003C\u002Fa\u003E )\u003Cbr\u003E- \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fangular-starter-kit\u002Fgenerator-ngx-app\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《generator-ngx-app》\u003C\u002Fa\u003E：Angular 4 商业级应用项目生成器，其包括了 angular-cli 提供的现代工具与工作流，以及来自于社区的最佳实践、可扩展的基础模板以及较好地学习曲线。（ \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fangular-starter-kit\u002Fgenerator-ngx-app\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Eangular-starter-kit\u002Fgenerator-ngx-app\u003C\u002Fa\u003E ）\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E巅峰人生\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002Fbhv\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《WWW之父Tim Berners-Lee获图灵奖》\u003C\u002Fa\u003E：美国计算机学会（ACM）宣布将2016年的图灵奖授予万维网（WWW）的发明者Tim Berners-Lee。他将获得由Google赞助的一百万美元奖金。ACM提到他的获奖理由是，“inventing the World Wide Web, the first web browser, and the fundamental protocols and algorithms allowing the web to scale.” 。( \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002Fbhv\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EWWW之父Tim Berners-Lee获图灵奖\u003C\u002Fa\u003E)\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Ch2\u003E\u003Cb\u003E前端之巅\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E「前端之巅」是InfoQ旗下关注前端技术的垂直社群，加入前端之巅学习群请关注「前端之巅」公众号后回复“加群”。投稿请发邮件到editors@cn.infoq.com，注明“前端之巅投稿”。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-d6c23497e4cebff2a960b6_b.jpg\& data-rawwidth=\&900\& data-rawheight=\&366\& class=\&origin_image zh-lightbox-thumb\& width=\&900\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-d6c23497e4cebff2a960b6_r.jpg\&\u003E\u003C\u002Ffigure\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T17:57:26+08:00&,&url&:&\u002Fp\u002F&,&title&:&前端每周清单第 7 期：Vue.js 2.2 完整API 手册，Next.js 2.0 发布，Safari 10.1 新增系列重要特性&,&summary&:&\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fwww.infoq.com\u002Fcn\u002FFE-Weekly\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E前端每周清单\u003C\u002Fa\u003E专注前端领域内容，分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单。作者：\u003Ca href=\&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002FwxyyxcFpins\u002Fposts\& class=\&internal\&\u003E王下邀月熊\u003C\u002Fa\u003E编辑：\u003Ca href=\&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fwei-wei-24-86-36\& class=\&internal\&\u003E尾尾\u003C\u002Fa\u003E\u003Cb\u003E新闻热点\u003C\u002Fb\u003E国内国外，前端最新动态 - \u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fparg.co\u002FbC2\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E《Safari 10.…\u003C\u002Fa\u003E&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:4,&likesCount&:18}},&annotationDetail&:null,&commentsCount&:4,&likesCount&:7,&FULLINFO&:true}},&User&:{&wei-wei-24-86-36&:{&isFollowed&:false,&name&:&尾尾&,&headline&:&前InfoQ技术编辑，前端之巅运营；现百度搜索编辑+运营。&,&avatarUrl&:&https:\u002F\u002Fpic1.zhimg.com\u002Fe9a40c2d69bfd8cc5cf0_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&wei-wei-24-86-36&,&bio&:&敲敲代码敲敲字，看看风景做做饭~&,&hash&:&c955e1fae77bab21cb2a36bc&,&uid&:980600,&isOrg&:false,&description&:&前InfoQ技术编辑，前端之巅运营；现百度搜索编辑+运营。&,&badge&:{&identity&:null,&bestAnswerer&:null},&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fwei-wei-24-86-36&,&avatar&:{&id&:&e9a40c2d69bfd8cc5cf0&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}},&Comment&:{},&favlists&:{}},&me&:{},&global&:{&experimentFeatures&:{&ge3&:&ge3_9&,&ge2&:&ge2_1&,&navi&:&1&,&growthSearch&:&s2&,&nwebQAGrowth&:&experiment&,&qawebRelatedReadingsContentControl&:&close&,&liveStore&:&ls_a2_b2_c1_f2&,&nwebSearch&:&nweb_search_heifetz&,&vdlc&:&e&,&rt&:&y&,&isOffice&:&false&,&enableTtsPlay&:&post&,&newLiveFeedMediacard&:&new&,&newMobileAppHeader&:&true&,&androidPassThroughPush&:&all&,&hybridZhmoreVideo&:&yes&,&nwebGrowthPeople&:&default&,&nwebSearchSuggest&:&default&,&qrcodeLogin&:&qrcode&,&enableVoteDownReasonMenu&:&enable&,&isShowUnicomFreeEntry&:&unicom_free_entry_off&,&newMobileColumnAppheader&:&new_header&,&androidDbRecommendAction&:&open&,&biu&:&1&,&info&:&1&,&androidDbFeedHashTagStyle&:&button&,&appStoreRateDialog&:&close&,&default&:&None&,&isNewNotiPanel&:&no&,&biua&:&1&,&zcmLighting&:&zcm&,&adR&:&b&,&wechatShareModal&:&wechat_share_modal_show&,&growthBanner&:&default&,&androidProfilePanel&:&panel_b&}},&columns&:{&next&:{},&qianduanzhidian&:{&following&:false,&canManage&:false,&href&:&\u002Fapi\u002Fcolumns\u002Fqianduanzhidian&,&name&:&前端之巅&,&creator&:{&slug&:&wei-wei-24-86-36&},&url&:&\u002Fqianduanzhidian&,&slug&:&qianduanzhidian&,&avatar&:{&id&:&v2-1822f4ecad3a38a19a0dea0e5da74f5d&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&}}},&columnPosts&:{},&columnSettings&:{&colomnAuthor&:[],&uploadAvatarDetails&:&&,&contributeRequests&:[],&contributeRequestsTotalCount&:0,&inviteAuthor&:&&},&postComments&:{},&postReviewComments&:{&comments&:[],&newComments&:[],&hasMore&:true},&favlistsByUser&:{},&favlistRelations&:{},&promotions&:{},&switches&:{&couldSetPoster&:false},&draft&:{&titleImage&:&&,&titleImageSize&:{},&isTitleImageFullScreen&:false,&canTitleImageFullScreen&:false,&title&:&&,&titleImageUploading&:false,&error&:&&,&content&:&&,&draftLoading&:false,&globalLoading&:false,&pendingVideo&:{&resource&:null,&error&:null}},&drafts&:{&draftsList&:[],&next&:{}},&config&:{&userNotBindPhoneTipString&:{}},&recommendPosts&:{&articleRecommendations&:[],&columnRecommendations&:[]},&env&:{&edition&:{&baidu&:false,&yidianzixun&:false,&qqnews&:false},&isAppView&:false,&appViewConfig&:{&content_padding_top&:128,&content_padding_bottom&:56,&content_padding_left&:16,&content_padding_right&:16,&title_font_size&:22,&body_font_size&:16,&is_dark_theme&:false,&can_auto_load_image&:true,&app_info&:&OS=iOS&},&isApp&:false,&userAgent&:{&ua&:&Mozilla\u002F5.0 (compatible, MSIE 11, Windows NT 6.3; Trident\u002F7.0; rv:11.0) like Gecko&,&browser&:{&name&:&IE&,&version&:&11&,&major&:&11&},&engine&:{&version&:&7.0&,&name&:&Trident&},&os&:{&name&:&Windows&,&version&:&8.1&},&device&:{},&cpu&:{}}},&message&:{&newCount&:0},&pushNotification&:{&newCount&:0}}