浏览器层合成与页面渲染优化

作者:黄浩群

一个 CSS 属性引发的血案

Web 页面性能是前端开发特别需要关注的重点,评判前端 Web 页面性能的指标有很多,页面的流畅度是其中的一种,如何让页面变得 “柔顺丝滑”,要讨论起来可就是个相当有料的话题了。之前开发移动端 H5 页面的时候,就遇到过一个有趣的性能问题 —— 某个卖场页面在 IOS 手机上出现了严重的卡顿,但在安卓机型下却表现得十分流畅。归纳一下在 iPhoneX 上测试的具体表现:

  • 页面加载时存在明显的延迟,但通过代理抓到的网络请求耗时并不比 Android 的高;

  • 页面滚动时会出现短暂的局部白屏,即丢帧。

Electron 实践笔记

作者:周全

社交魔方平台是京东的 SNS 活动搭建平台,其内置了很多模板,每一个模板都有一个模板 JSON 用于生成表单,运营同学、商家配置了这个表单后就可以生成活动页面了。
模板 JSON 是标准的结构化数据,包含名称、类型、控件类型、校验器、默认值等等字段。以往都是采用手写 JSON 的方式,这是非常低效的,而且容易出错。针对其结构化数据的特点可以用 GUI 的方式去编辑,我们基于 Electron 参考 Github Desktop 客户端 的架构编写了一个 编辑器,通过填写表单的方式生成 JSON。所以在这里记录下这个 Electron 编辑器开发过程中可以记录的点和从 Github Desktop 客户端代码中值得学习的点。

Vue.js 3.0编译器compiler-core源码解析

作者:深山蚂蚁

Vue.js 3.0的源代码正在国庆假期就这么突然放出来了,假期还没结束,陆陆续续看到努力的码农就在各种分析了。

目前还是 pre Alpha,乐观估计还有 Alpha,Beta版本,最后才是正式版。

话不多说,看 Pre-Alpha。 瞧 compiler-core

热门的 reactivity 被大佬翻来覆去再研究了,我就和大伙一起来解读一下 ”冷门“ 的 compiler 吧!😄😄😄😄

换种方式读源码:如何实现一个简易版的Mocha

作者:黄浩群

前言

Mocha 是目前最流行的 JavaScript 测试框架,理解 Mocha 的内部实现原理有助于我们更深入地了解和学习自动化测试。然而阅读源码一直是个让人望而生畏的过程,大量的高级写法经常是晦涩难懂,大量的边缘情况的处理也十分影响对核心代码的理解,以至于写一篇源码解析过后往往是连自己都看不懂。所以,这次我们不生啃 Mocha 源码,换个方式,从零开始一步步实现一个简易版的 Mocha。

我们将实现什么?

  • 实现 Mocha 框架的 BDD 风格测试,能通过 describe/it 函数定义一组或单个的测试用例;
  • 实现 Mocha 框架的 Hook 机制,包括 before、after、beforeEach、afterEach;
  • 实现简单格式的测试报告输出。

TypeScript安利指南

作者:李逸君

骚年,你感受过debug一年找不到问题,最后发现是变量名写错时的绝望吗?
骚年,你感受过生产线上代码出现Uncaught TypeError时的恐惧吗?
骚年,你感受过写代码找一万个文件还找不到方法定义时委屈吗?

拿起键盘,让我们对谋害生命的代码拖进垃圾箱!(划掉)

前言

据了解,目前有相当一部分同学不想去学习ts,毕竟没(xue)时(bu)间(dong)。很不幸两个月前我也是其中的一员。在看到尤大大都用ts写vue3了,蠢蠢欲动的我小心翼翼的踏入了这个深坑。在经历了长达一天的摸爬滚打之后,领悟到了真谛

记一次Node.js直出服务的性能优化

作者:肖睦群、李刚松

一.问题背景

MPM(Market Page Maker)是京东社交电商部的组件化的页面可视化搭建平台,于2016年9月份上线,平均每周150+个页面,目前已经成为社交电商部的一个核心系统。系统使用Vue.js作为组件化的基础框架,并于2017年5月份上线了Node.js直出服务。MPM的页面会被运营同学拿到各种渠道投放,整体流量很不稳定,对于流量的暴涨情况要能够及时处理,这对于开发同学来说是一个比较烦的工作。

前几天突然收到告警信息,由于运营同学将某个MPM活动页面投放了外部广告,直出服务流量大涨,服务器CPU使用率达到了80%以上,于是立马申请扩容,问题虽解决,但是留给了我们一个问题:直出服务能否优化,这次量级的流量进来之后,是否可以稳定支撑而不需要扩容?

前端资源治理(一)

作者:李刚松

0.也谈前端工程化

随着前端技术的飞速发展,前端需要一种更加工程化的方式解决前端开发日益复杂的问题。前端工程化本质也是软件工程的一种,由于软件工程并无严格的定义(或者说缺乏统一的定义),因此前端工程化的内涵其实相当宽泛,一般来说,前端工程化重点关注的是研发和维护效率,所有最终目的是这个的,都可以算作前端工程化的范畴。
前端工程化近几年也是技术热点,基本上大型前端技术交流会议都有此专题,从规范、组件、编译及构建、工作流、持续集成、监控等多个维度都有涉及,笔者尝试从前端资源治理的角度谈一下前端工程化,本文是系列文章的第一篇,主要讲问题及解决的思路,不涉及具体的实现细节。

你还在用图片做引导蒙层?

作者:深山蚂蚁

引导蒙层通常在新业务上线、或者业务有变更时的给新用户的一个操作指引。下图页面即是一个蒙层,会在某个局部位置高亮我们需要重点突出的内容:

【译】Web内容如何影响电池的使用

原文地址:https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/
原文作者:Benjamin Poulain & Simon Fraser
译者:刘辉 校验:李刚松

现在用户上网大多使用移动设备或者笔记本电脑。对这两者来说,电池寿命都很重要。在这篇文章里,我们将讨论影响电池寿命的因素,以及作为一个web开发者,我们如何让网页耗电更少,以便用户有更多时间来关注我们的内容。

是什么在耗电?

移动设备的电力消耗有以下几个因素:

  • CPU (核心处理器)
  • GPU (图形处理)
  • 网络 (wifi或者蜂窝移动网络)
  • 屏幕

屏幕功耗相对稳定,并且主要由用户控制(通过屏幕使用时间和亮度),但是对于其他组件,例如CPU,GPU,网络模块,功耗是动态变化的,而且变化范围很大。

手把手教你写webpack loader

作者:黄浩群

一、什么是 loader

loader 和 plugins 是 webpack 系统的两大重要组成元素。依靠对 loader、plugins 的不同组合搭配,我们可以灵活定制出高度适配自身业务的打包构建流程。

loader 是 webpack 容纳各类资源的一个重要手段,它用于对模块的源代码进行转换,允许你在 import 或加载模块时预处理文件,利用 loader,我们可以将各种类型的资源转换成 webpack 本质接受的资源类型,如 javascript。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×