前端每周清单：大前端技术生命周期模型；WWDC 发布 Safari 11；面向生产环境的前端性能优化

内容简介：前端每周清单：大前端技术生命周期模型；WWDC 发布 Safari 11；面向生产环境的前端性能优化

▼点击下方收听音频

前端每周清单：大前端技术生命周期模型；WWDC 发布 Safari 11；面向生产环境的前端性能优化 来自百度VR

作者 |王下邀月熊

编辑 |尾尾

链接点不开？对不起，这个锅小编不背—— 重要的事情要特意提醒： 由于微信不支持 外链 （注意是外链），故在相关内容后的提供了短链接，方便大家复制。查看本文带链接版请点击阅读原文。

新闻热点

国内国外，前端最新动态

• 《大前端技术生命周期模型》：GMTC全球移动技术大会主编徐川推出了 InfoQ观察与总结大前端技术采用的生命周期，并表示大前端正处于密集创新阶段，未来将会有几项技术突破出来成为主流。（ ）

• 《WWDC中发布 Safari 11》：Safari 11带来了很多的新特性，包括开发者喜闻乐见的 WebRTC、网页快照、WebAssembly、iOS中的拖拽支持等等；同时在 Safari 11中我们还可以使用 Media Capture、WebCrypto、Resource Timing等多种新的 API。( )

• 《Google Chrome开发者 工具 更新》：在 Google I/O 2017大会上，Paul Irish发表了一段"2017开发者工具年度报告"，他展示了一些 Chrome开发者工具的新特性，其中包括能够帮助开发者简化代码和处理现代 JavaScript需求的一些新特性。

• 《V8 6.0发布》：V8 6.0发布，提供了对 SharedArrayBuffer的支持等新特性。

开发教程

步步为营，掌握基础技能

《WebAssembly初体验：重构简单游戏引擎》：WebAssembly为我们提供了构建高性能的前端应用的途径，而本文则从零开始介绍如何使用 C来覆写简单的 JavaScript游戏引擎并且将其编译为 WebAssembly。本文依次介绍了如何搭建基础的 Emscription工具链、使用 JavaScript引入 wasm模块、覆写并且优化某个小型游戏引擎、两个引擎的性能评测等等部分。( )

《使用 Vue与 NativeScript开发跨端应用》：目前标准的开发 NativeScript应用的方式是使用朴素的 JavaScript或者 Angular，而本文介绍了如何结合使用 Vue与 NativeScript来开发跨终端应用。本文首先阐述了 Vue.js相较于 React或者 Angular的优势，然后阐述了使用 Vue语法来开发基础 NativeScript应用的步骤。( )

《基于 Firebase与 Vue.js构建基于地理位置的聊天室》：本文介绍了基于 Firebase与 Vue.js构建某个基于地理位置搜索与配对的聊天室应用的过程，应用发布在这里，还是挺有意思的应用。本文除了介绍 Vue.js项目的基础构建与语法之外，还介绍了所谓 Geohash的知识与 Firebase相关接口的使用。

《Node.js 8中 util.promisify介绍》：Node.js 8为我们提供了新的工具函数 util.promisify，它能够将某个基于回调的函数封装为基于 Promise的函数。本文介绍了 util.promisify的基本使用，首先介绍了对于文件读取写入相关接口的封装使用，然后讨论了如何引入 async语法，最后还介绍了自定义 promisify函数的用法。（http://2ality.com/2017/05/util-promisify.html）

《你应该掌握的关于 Node.js子进程的知识》：Node.js最初以单进程单线程非阻塞方式提供了强大的性能表现，不过在目前多核时代下仅使用单进程已远远不能承载日益增长的应用压力。本文即介绍在 Node.js中如何使用 spawn、exec、execFile、fork等多进程相关模块的用法与各自的特点，依次介绍了使用 spawn来创建实现了 EventEmit接口的子进程、使用 exec执行子命令、使用 fork创建自带通信信道的子进程等。( )

工程实践

立足实践，提示实际水平

《Medium网站的技术栈》：Medium是一个在线发布平台，最初由 Twitter联合创始人Evan Williams开发。该平台于 2012年启动，现在每个月有 6000万独立访客。该网站部署在 AWS上，使用 NodeJS和 Go 作为应用程序和服务的开发语言，使用 DynamoDB作为数据存储，并使用 Amazon Redshift作为数据仓库。

《Figma利用 WebAssembly降低三倍加载速度》：自 WebAssembly推出之后，很多开发者都开始尝试在小型项目中实践 WebAssembly，不过尚缺大型真实案例比较。而 Figma因为其产品主要基于 C++实现，可以方便地编译到 WebAssembly中并且与原方案进行性能比较。本文中 Figma介绍了它们在 Firefox中使用 WebAssembly之后带来的加载性能提升以及下载尺寸的优化，同时还提及了目前 WebAssembly在实际项目使用中存在的一些问题与风险。( )

《利用 React Apollo减少 Redux代码量》：Redux为人诟病的一点就是需要大量的模板代码，而更多的代码往往也意味着更多的潜在错误与更高的维护代价。本文则介绍了如何利用 Apollo来接管应用中的数据加载与呈现逻辑，从而减少 Redux实现方案中加载数据生命周期中所需要的代码。( https://parg.co/bLA )

《CSS局部作用域变量详解》：CSS自定义属性或者所谓的 CSS变量，为我们带来了真正的、不同于 SASS等预处理框架中使用的类占位符的动态变量。本文介绍了 CSS变量的基本定义语法与使用，以及如何使用 JavaScript来动态修改 CSS变量值从而动态地进行界面重渲染，最后阐述了目前浏览器对于 CSS变量的支持情况以及可以使用的兼容方式。( )

《面向生产环境的前端性能优化清单》：在 Web前端开发中，产品经理更多的会关注于寻找优秀的设计与内容，而开发者同样需要关注于如何进行前端性能优化。作者在本文中则分享了多年经验累积的性能优化清单，包括常见的资源优化、CSS优化中常用的工具、常用的性能检测工具等等。( )

《渐进式图片渲染机制》：图片在网页中占据了重要的地位，合适的图片能够大幅提升用户体验，不过同样会占据大量的带宽；本文则着眼于如何综合利用懒加载与渐进式渲染等方式来优化带宽使用与用户体验。本文首先讨论了对于合适的图片格式的选择，然后介绍了常见的图片懒加载的技术，最后阐述了所谓渐进式编码与渐进式图片渲染的理念与实践。( )

深度阅读

深度思考，升华开发智慧

• 《Mobdux：整合 MobX与 Redux中优秀的部分》：MobX与 Redux为我们提供了截然相反地管理前端应用状态的方式，而本文则细致地分析对比了 Redux与 MobX的优缺点，并且从自己的实践经验角度出发提出了结合二者优点的 mobdux框架。( )

• 《不会做动画的前端不是好开发》：自从有了前端开发这个概念以来，这个岗位所做的事情都是围绕着人机交互来开展的，主要包括展示信息给用户看，然后获取用户的意图并做出响应。随着终端设备以及业务的快速发展，前端工程也越来越复杂，所以分工也进一步精细化，有侧重做工具化与模块化架构的，有侧重无线体验或者 Web与 Native融合方面的，也有侧重复杂的商家后台或者数据可视化的，甚至有部分公司把 HTML+CSS与 JS的工作也分开的，所以出现了不同前端工程师会有不一样的侧重点。而目前越来越多的业务线有越来越高的动画类需求，而在动画方面能紧跟技术趋势的优秀前端实在是比较难找，本文则希望让那些想在动画方面有些提升的朋友有所帮助。( )

• 《Flow与 TypeScript》：本文主要对比了 Flow与 TypeScript这两个常用的 JavaScript静态类型检测工具，首先介绍了在简单项目中如何使用 TypeScript与 Flow。然后对比了二者在类型覆盖率上的渐进对比，会发现使用 Flow之后因为其较为严格的类型要求会相对较快地实现高覆盖，而 TypeScript则相对较为松弛。( )

• 《JavaScript中类的私有域定义》：目前对于类中的私有域定义已经达到了 Stage 2，本文即是详细介绍 #private语法的使用以及设计理念。顾名思义，我们可以使用 #privateFieldName方式来定义类中的私有域，该私有域仅允许该类的方法访问（包括静态方法）。本文还介绍了使用这种 HashTag方式而不是其他语言中常见的 private关键字来定义的考量。

• 《CSS的现状》：毫无疑问我们正在见证着 JavaScript社区与生态的极速变化，而与此同时可能很多人没有关注到 CSS社区的进展，本文作者则是对于 CSS的现状进行了综述并且提出了个人的观点。本文作者主要提出了五个论点：我们可以使用 CSS Module来替代原有的 BEM等命名方案、使用 Flexbox来替代 float、使用 CSS Grid来替代第三方网格库、使用 CSS内置的变量、计算函数等特性来替代 SASS等预处理库，乃至于最终我们完全可以使用 CSS-in-JS来替代 CSS。本文具有极强的主观色彩，请批判性阅读。( )

开源项目

乐于分享，共推前端发展

• 《metro-bundler》：为了更好地社区支持，原 react-native-packager被独立为 Metro Bundler；其致力于打造具有亚秒级别的重载以及较好可扩展性的模块系统，同时它仍然是 React Naive内置的开箱即用的工具。( )

• 《preact-i18n》：轻量级的面向 preact的国际化库，支持基于层次化目录的命名空间定义、支持模板字符串与默认值等特性。( )

• 《billboard.js》：基于 D3 v4+的轻量级可重用的 JavaScript图表库，支持 IE 9以上浏览器。billboard.js为我们提供了常见的柱状图、时序图、饼图等等多种图表类型。( )

收藏指数满格！帮你打包前端之巅一整年好文！

前端之巅

「前端之巅」是 InfoQ旗下关注前端技术的垂直社群，加入前端之巅学习群请关注「前端之巅」公众号后回复“加群”。推荐分享或投稿请发邮件到 editors@cn.infoq.com，注明“前端之巅投稿”。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• 微前端自检清单
• 前端团队代码评审 CheckList 清单
• 年终回顾，为你汇总一份「前端技术清单」
• 前端每周清单第 15 期：Node.js v8.0发布，从React迁移到 Vue，前端开发的未来
• 前端每周清单第 15 期：Node.js v8.0发布，从React迁移到 Vue，前端开发的未来
• 前端每周清单第 16 期：JavaScript 模块化现状；Node V8 与V6 真实性能对比

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。