BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

前端每周清单第 31 期: iOS 11 Viewport 解析,Preact PWA 性能优化案例,JS 内存泄露分析

| 作者 王下邀月熊 关注 33 他的粉丝 发布于 2017年9月19日. 估计阅读时间: 13 分钟 | ArchSummit北京2018 共同探讨机器学习、信息安全、微服务治理的关键点

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID:frontshow),及时获取前端每周清单。

新闻热点

国内国外,前端最新动态

  • Mastodon 1.6 发布:Mastodon 是免费、开源的去中心化的社会网络联盟,其已经覆盖了超过 2000 个节点,拥有超过 800000 名用户。Mastodon 1.6 版本是首个完全实践 ActivityPub 协议的版本;ActivityPub 是由 W3C 提出的新的联邦式通信协议,允许多个节点之间平等通信,交换数据。

  • Node.js 8.5.0 发布:今日发布的 Node.js 8.5.0 版本中引入了一系列的新特性与错误修复,其中值得注意的是 V8 重新支持 Snapshots、引入了 console.group()、新增了 fs.copyFile 与 fs.copyFileSync 以更高效地复制文件等特性;详细的特性变更列表请查看原文。

  • Vue 登陆 OpenCollective 接受捐赠:随着 Vue.js 社区的不断增长,越来越多的贡献者也参与到了项目的开发与维护工作中;Evan 也决定正式在 OpenCollective 上开始面向 Vue.js 的社区募捐,以更好地维护社区的日常工作。不同于面向个人的 Patreon,OpenCollective 会更加透明,欢迎积极支持 Vue.js。

  • Apollo Client 2.0 新特性介绍:Apollo Client 2.0 版本在保障 API 的兼容性的同时带来了更加高效、灵活地使用体验;该版本添加了可修改的请求链、允许自定义生产环境下默认数据的存储等特性,详细地特性与接口变更可以查看原文。

开发教程

步步为营,掌握基础技能

  • 基于 Vue.js 构建电影主页:很多人都习惯使用 Netflix 这样的在线流服务来观看视频或者电影,而本文即循序渐进地介绍如何利用 Vue.js 2.0 来实现简单的美观大方的电影主页。本文依次介绍了相关的数据结构定义与模拟数据创建、构建基于指令的组件、路由划分、数据绑定与状态管理等内容;更多 Vue.js 相关资料参考这里

  • 实战中学习 Flexbox:本文是针对 Flexbox 的实战提高,不过对于那些即使对 Flexbox 一无所知的开发者,本文也提供了一系列的学习教程。本文依次介绍了如何使用 Flexbox 构建画廊、卡片、网格、常见的网页布局、富媒体呈现、表单、移动应用布局等内容;更多 CSS/SCSS 相关资料参考这里

  • 深入浅出 CSS Transforms:通过 transform 属性,我们能够移动、渲染、缩放或者提升任何页面元素;本文即是从最基础的 transform 语法开始讲起,介绍生动的案例来让读者体验 CSS Transforms 各种不凡的用法。本文首先介绍了 translate、scale、rotate、skew 等常见的变换函数的用法,然后介绍了如何综合利用这些属性来实现复杂的动画,最后还介绍了 CSS 中 animation 的用法;更多 CSS/SCSS 相关资料参考这里

  • Angular 4 中使用 Redux 进行状态管理:SPA 非常适合于构建复杂的现代 Web 应用,而状态管理往往是开发中常见的痛点之一。像 Angular 这样基于组件的应用划分与开发方式能够更好地架构项目,提升代码的可复用性;而本文即是介绍如何综合使用 Angular 4 与 Redux 来开发现代应用。本文首先介绍了 Redux 中 Store、Actions、Reducers 这些基本的概念组成,然后用 Angular CLI 创建简单的 Angular 项目,并且引入 Redux;接下来本文详细地介绍了如何使用 TypeScript 编写 Redux 中的各个组件,从 Store 到 Action Types 等,最后将这些与组件结合为完整的 TodoList 应用。更多 Angular 相关资料参考这里

  • 快速构建基于 React 的 CMS 系统:CMS 内容管理系统是现代常见的 Web 应用形式之一,本文则是介绍利用 Firebase 与 React 快速开发简单的 CMS 系统;Firebase 是云端的实时 NoSQL 数据库,其提供了方便的数据操作接口,免去了开发者自行搭建服务器的烦恼。本文首先介绍了 CMS 中界面组件的划分与纯组件的实现,然后介绍了 CMS 中需要的接口逻辑以及如何用 Firebase 实现这些接口;更多 React 相关资料参考这里

工程实践

立足实践,提示实际水平

  • 来自 Treebo 的 React 与 Preact PWA 性能分析:本文是 Addy Osmani 大神参与编写的,印度 Treebo 公司使用的 Preact PWA 性能优化案例;相较于旧版本的网站,新版本在首屏渲染上提高了 70%,初始交互等待时间减少了 31%,大部分的访客在 3G 环境下只需要 4s 即可以浏览完整内容。本文以 React 单页应用为例,讨论了服务端渲染带来的首屏渲染的性能提升;然后讨论了基于路由的代码分割与懒加载,接下来还讨论了 PRPL 模式、HTML Streaming、关键路径 CSS、离线静态资源缓存、从 React 切换到 Preact 等内容。更多 PWA 相关资料参考这里

  • Electron:那些令人烦恼的部分:绝大部分的跨平台编程语言或者框架都有其优势与缺陷,可能更多的开发者了解到的是 Electron 优秀的方面,本文则换个思路来聊聊 Electron 中那些令人烦恼的部分。本文依次讨论了应用安装、持续集成与多平台构建、应用体积、局部更新、安全性、代码混淆与保护等内容;

  • 小米直达服务探秘:如何保证移动 Web 体验?:小米直达服务是小米推出的 App 混合开发框架,它可以实现秒开,同时可以在浏览器、短信、微信等地方打开。本文即是小米直达服务 Web 体验保障方面的实践分享,讨论了目前移动 Web 体验的瓶颈、小米直达服务的机制与核心关键等内容。更多 Web 性能优化相关资料参考这里

  • 理解 iOS 11 中 WebView 的 Viewport:iOS 11 为我们带来了新的状态栏,其刘海造型可能对于像 Apache Cordova 或者 Ionic 这样的混合式开发者造成一定的影响;特别是对于那些使用了 fixed 来布局顶部栏的 Web 应用,本文即是对于 iOS 11 自带的 WebView 的 Viewport 属性进行详细解析。本文首先讨论了 iOS 11 ,包括 iPhone X 带来的改变,然后介绍了如何利用 constant 或者 calc 函数来优化顶部栏的显示效果。

深度阅读

深度思考,升华开发智慧

  • 全栈 Web 学习路径:本文是针对全栈 JavaScript 开发学习与进阶的指南,涵盖了从基础语法到 React、Node.js 等多方面的学习路径与资料推荐。本文涵盖了课程、项目、书籍等多种资源形式,介绍了语法基础、React 应用开发、Node.js 服务端应用程序开发等多个领域的内容;更多 Web 开发相关资料参考这里

  • 现代 JavaScript 指南:本书覆盖了从语法基础到 OOP 等复杂概念的各方面的 JavaScript 相关的知识教程,包括了简介、语法基础、代码质量保障、Object、数据类型、函数与函数式编程、类与集成、异常处理、浏览器对象等多方面的内容;更多 JavaScript 相关参考这里

  • JavaScript 工作原理:内存管理与常见内存泄露分析:本系列文章皆着眼于深度解析 JavaScript 内部运行原理,而本文则重点讨论编程语言中常见的内存管理问题;并且还提出了对于处理常见的内存泄露的建议。本文首先介绍了变量内存的生命周期、内存的定义、如何分配内存、垃圾回收的机制、内存泄露的定义以及常见的四种内存泄露的形式与应对手段;更多 V8 相关资料参考这里

  • 对于 CSS-in-JS 的缺陷分析:本文作者从自己的角度阐述了对于 CSS-in-JS 的看法,将其形容为:就像用坏掉的螺丝刀替换你最爱的工具;阅读的时候也可以看下评论区的回复,辨证地来看待作者的观点。随着 React 等现代 Web 框架的兴起,CSS-in-JS 也受到了很多的关注,人们期望用它来解决传统 CSS 中全局作用域、代码难以管理的问题。不过本文作者确认为 CSS-in-JS 本身就是反模式,他从代码的组织结构、耦合方式,CSS-in-JS 带来的界面一致性地破坏、代码可复用性地降低等角度来阐述自己的观点,最后提出了还是应该使用 OOCSS 这样标准的 CSS 工程实践来解决 CSS 自身的问题。更多 CSS/SCSS 相关资料参考这里

开源项目

乐于分享,共推前端发展

  • src2png:src2png 能够将源代码转化为语法高亮、 阅读性高的图片;其会首先启动包含热加载、Webpack、Babel 等多重特性的 POI 开发服务器,然后加载 Puppeteer 并在 Headless Chrome 中将代码渲染截图。

  • best-resume-ever:best-resume-ever 是基于 Vue.js 开发的,简单、易用、美观的个人简历制作模板,其使用 LESS 来定义样式,并且允许导出为 pdf 等格式。

  • Nulis:Nuils 是受到 Gingko 启发,非常有意思的开源树状结构编辑器,其允许开发者将任何的想法表示为树状结构:从最抽象的想法开始,逐步添加包含更多细节的嵌套描述卡片。这种格式会非常有助于编写故事、文章、大纲、GTD 等等。

  • hiproxy: hiproxy 是一个基于 Node.js 开发的轻量级网络代理工具,主要目的是为了解决多个开发者在开发过程中遇到的 hosts 管理和反向代理的问题。使得在开发时,不再需要修改系统 hosts 和启动一个 Nginx 服务。hiproxy 扩展了 hosts 的语法,支持端口号。此外,hiproxy 还支持通过类似于 nginx 配置文件的语法来配置代理。

巅峰人生

  • 从新手村到史诗英雄,程序员的打怪升级之路:本文是 EGO 会员,饿了么北京研发中心总经理史海峰对于程序员成长之路的分享总结。文字依次讨论了大厂职级职等背后的神秘规律、新手村后的快速成长、如何看待跳槽,面试、专职怎么选等内容。

前端之巅

「前端之巅」是 InfoQ 旗下关注前端技术的垂直社群,加入前端之巅学习群请关注「前端之巅」公众号后回复“加群”。投稿请发邮件到e ditors@cn.infoq.com,注明“前端之巅投稿”;或者可以阅读往期文章


感谢徐川对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT