木羽will

上篇讲到，权重值定位性能指标 FMP，至于怎么算权重讲的不是很清楚，此篇将就如何「相对准确」算出权重值以及怎样筛选出我们想要的 FMP 值。 「MutationObserver 给予我们获取 DOM 渲染「切面」的能力」。 paintTag：对应 dom 的打点标记「_pi」，…

Progressive Web App, 简称 PWA，是「渐进式」提升 Web App 体验的一种新方法，能给用户类似原生应用的体验。 「高可靠，高性能，优体验」是 PWA 惯用的形容词，他的另外一个优点就是「渐进式」，开发者可以对照 PWA Checklist 逐步对自己站…

看上去近乎完美的PWA，出现时间要比小程序早上几年的PWA，为何不如小程序火热甚至在国内鲜为人知呢？

可能大家对「白屏时间」这个名词并不陌生，他是「刀耕火种」年代，我们收集的页面性能指标之一，随着前端工程的复杂化，白屏时间已经没有什么实质性的意义了，取而代之的就是 FMP。 先来介绍几个与之相关的名词。 FMP（First Meaning Paint）：首次有效绘制，标记主角元…

近年移动业务喷井式爆发，伴随着互联网人口红利的萎缩，用户更加青睐效率高体验优的站点，页面「到达」快慢直接影响了用户的体验，「性能」变得越来越重要。google 大数据统计观察发现，移动端用户对页面加载慢的容忍度远低于 PC 端，投放页面首屏加载时间从 2s 钟延迟到 3s 会造…

上周，Megalo@0.2.0 正式发布，优化了数据更新性能的同时，支持了百度智能小程序，着实激动了一把，这“可能”是目前社区里第一个同时支持三端小程序的 vue 小程序框架。下面我们就来试试他的效果。 官方文档的第一部分就是快速入门，顺藤摸瓜，构建一个 megalo 项目。 …

居中布局1、水平居中a)inline-block+text-aligntips：此方案兼容性较好，可兼容至IE8，对于IE567并不支持inline-block，需要使用csshack进行兼容b)ta

但是FlexBox布局虽然枪弹但并不能完全呈现以上布局，于是我们需要结合FlexBox作下小的改动即可实现。 其实很简单，我们只要在后面加入一些等宽但是占高为0等隐藏元素即可轻松实现。

灰度方案说白了就是，分配一定比例或者筛选有特殊身份的用户，让这部分用户提前试用产品的最新版本，以便尽早发现问题也可将问题的影响最小化。不同公司都有自己独特的灰度流程，此处仅仅讨论灰度方案中的其中一个小环节，用户分配。 综合来看，方案 b,c 基本可以解决我们的上述问题。 bet…