木羽
上篇讲到，[权重值定位性能指标 FMP](https://juejin.im/post/5cac63075188251af76edb89)，至于怎么算权重讲的不是很清楚，此篇将就如何「相对准确」算出权重值以及怎样筛选出我们想要的 FMP 值。 以下内容「择重略轻」 ## 如何监控节点 ### 监控变化 **MutationObserver** 一句话解释 「MutationObserver 给予我们获取 DOM 渲染「切面」的能力」。 > 「MDN 解释」MutationObserver 接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品，该功能是 DOM3 Events 规范的一部分。 > > 更多使用细节详见...
 ## 前言 突然有一天，脑之里不知怎地蹦出一个词，「双飞翼」，这是很久以前的淘宝提出的一种三栏布局优化方案，然而，时间久了已经不记得（换句话说是不理解）为啥要提出这个布局了，昨天在 SF 上发起了一个提问，但良久未有人答复，幸得[@王能全是谁](https://segmentfault.com/u/javascriptgo) 提醒，终于回想起「双飞翼」的完整意义了。谨以此文同大家分享这段心路历程。 ## 圣杯 & 双飞翼 说到「双飞翼」就不得不提及「圣杯」，两者均为三栏布局的优化解决方案如下图  常规情况下，我们的布局框架使用以下写法，从上到下，从左到右。 ``` header left main right footer ``` 问题倒是没什么问题，然而，如果我们希望中部 main 部分优先显示的话，是可以做布局优化的。 因为浏览器渲染引擎在构建和渲染渲染树是异步的（谁先构建好谁先显示），那么将`main`部分提前即可优先渲染。 ``` header main left right...
 ## 前言 三月初，阿里巴巴开源的一套基于 Weex、React Native 的富交互解决方案 「BindingX」。提供了一种称之为 「Expression Binding」 的机制可以在 Weex、React Native 上让手势等复杂交互操作以60fps的帧率流畅执行，而不会导致卡顿，因而带来了更优秀的用户体验。 ## 背景 > 听上去「高大上」，那为啥要造这个轮子呢？ > > 这就得从源头说起，他到底解决了什么问题。 我们知道，Weex 和 React Native 同样都是三层结构，「 JS 层、 Native 层、...
# 前言 作为一个移动端初学者、爱好者，能使用前端技术开发原生游戏一直是一件渴望而不可及的事情，暂且不说游戏逻辑的复杂度，算法的健壮性，单单是场景、画布、布局就让我们无处下手。 几年前曾经参与 Appcan 技术的技术孵化和推广，尝试使用 Hybrid 技术写过一个小游戏，由于此游戏结构场景比较简单，所以未使用大型的游戏引擎，[Cocos2d-x游戏引擎](http://www.cocos.com/)，所有逻辑全部手工。同样也是可「三端同构」，但本质上还是一个 H5小游戏，只是可以安装在手机上，执行环境是一个 Webview，所以，H5可以做的，他都可以做，H5不能做到，他未必不能做，如摄像头、陀螺仪等。但缺点也很致命，执行效率完全受限于原生控件 Webview，要知道对于一个游戏来讲，流畅度是第一要义。 总的来讲，使用 Hybrid 技术开发游戏的方案虽然可行，但是，效果并不是我想要的。 自从 ReactNative 开源以来，一直想着要使用 ReactNative 开发游戏。个人原因，一直未付诸实践。直到上周有网友问我，「Weex是否能拿来做游戏开发」，试试就知道，那就先拿 Weex 开刀，来挑战下 game app 同构的能力，给还没上车的朋友带波节奏。 # 准备工作 如果你还未入门，没关系，就当看个热闹了，知道 Weex 能不能快速开发游戏就可以了。 如果你想先入门，以下几篇文章你可以当作是导读。...
【FE】性能监控
## 前言 近年移动业务喷井式爆发，伴随着互联网人口红利的萎缩，用户更加青睐效率高体验优的站点，页面「到达」快慢直接影响了用户的体验，「性能」变得越来越重要。google 大数据统计观察发现，移动端用户对页面加载慢的容忍度远低于 PC 端，投放页面首屏加载时间从 2s 钟延迟到 3s 会造成 9.4% 的 PV 下降，8.3% 的跳出率增加以及 3.5% 的转化率下降。性能优化具有的商业价值不言而喻，总不能眼看着市场同事辛苦「求」来的用户在我们手中流失吧？这是身为一个合格前 yíng 台 bīn 不能允许的！盘他！ ## 性能优化和监控的关系 有些公司同时想到的第一件事就是「优化」，网上搜一波性能优化的列表，把别人的「最佳实践」照搞一番，性能确实会有提升，但效率未必是最高的，反倒有些本末倒置，别人的问题未必就是自己的问题，「并行不代表因果」，要做性能优化，首先要做的是掌握详尽的性能指标信息，根据木桶原理，找到最拖后腿的指标「短板」，重点优化，将边际成本最小化。所以，首先我们要做的应该是性能指标的收集分析。 ### 三种数据收集方式 指标收集主要分有三种方式： #### 1、本地模拟「Lab」 以...
 ## 什么是 PWA Progressive Web App, 简称 PWA，是「渐进式」提升 Web App 体验的一种新方法，能给用户类似原生应用的体验。 「高可靠，高性能，优体验」是 PWA 惯用的形容词，他的另外一个优点就是「渐进式」，开发者可以对照 [PWA Checklist](https://developers.google.cn/web/progressive-web-apps/checklist) 逐步对自己站点进行 PWA 化升级。 ## PWA 的发展史 ### 2007 苹果前 CEO，Steve Jobs，2007 年 WWDC...
> 围绕前端的性能多如牛毛，涉及到方方面面，以我我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列 > 注意，是罗列不是展开，遇到不会不懂的点还请站外扩展 开车速度有点快，坐稳了。 > tips : 这么多前端优化点你都记得住吗？反正我是收藏起来备查的。 ## PC浏览器前端优化策略 PC端优化的策略很多，如 YSlow（YSlow 是 Yahoo 发布的一款 Firefox 插件，现 Chrome 也可安装，可以对网站的页面性能进行分析，提出对该页面性能优化的建议）原则，或者 Chrome 自带的 Audits 等，总结起来主要包括网络加载类、页面渲染类、CSS 优化类、JavaScript 执行类、缓存类、图片类、架构协议类等几类，下面逐一介绍。 ### 网络加载类 #### 1．减少...
# 前言 > 四不四经常有人在你面前念(zhūang)叨(bī)，「这是浏览器内核的问题！Safari[səˈfɑri]的内核不支持！」？ 今天咱们就来聊聊所谓的「内核」！ 要讲内核首先要讲浏览器基础，浏览器基础是前端知识网中的一个小分支，也是前端开发人员必须掌握的基础知识点。他贯穿着前端的整个网络体系，项目优化也是围绕着浏览器进行的。 # 一个网址引发的操作 开发人员在面试的时候或许会被问到： > 从你在浏览器输入一个网址到网页内容完全被展示的这段时间内，都发生了什么事情？ 确实是个老生常谈的问题，但问题的答案并不是唯一的，或许在三五年前，这个问题还会有一个「相对」标准的答案。 > 0. 浏览器在接收到这个指令时，会开启一个单独的线程来处理这个指令，首先要判断用户输入的是否为合法或合理的 URL 地址，是否为 HTTP 协议请求，如果是那就进入下一步 > 0. 浏览器的浏览器引擎将对此 URL 进行分析，如果存在缓存「cache-control」且未过期，则会从本地缓存提取文件（From Memory Cache，200返回码），如果缓存「cache-control」不存在或过期，浏览器将发起远程请求 > 0. 通过 DNS...
 > 自打出生的那一天起，Weex 就免不了被拿来同 React Native「一决高下」的命运。React Native 宣称「Learn Once, Write Anywhere」，而 Weex 宣称「Write Once, Run Everywhere」。在我看来，并没有谁更好，只有谁更合适。下面我将围绕 Weex 入门进行讲解。 （如果你尚不了解 React Native，并想简单入门，可以阅读[【整理】React Native 快速入门笔记](https://github.com/zwwill/blog/issues/9)） # 网易严选 App 感受 Weex 开发 什么都不说，先给你感受下...
 有基础的朋友可以直接跳过序言，直接看方案 # 序 > display有几种属性： inline是内联对象，比如```` 、 ````标签等，可以“堆在一起”显示，宽高由内容决定，不能设置； block是块对象，比如````、````标签等，要占一整行，但是宽高可以自定义； 为了弥补inline和block的不足，又扩充了inline-block属性； inline-blcok可以将对象呈递为内联对象，而内容作为块对象呈递。 通俗点讲就是 > **“可定宽高地堆在一起”**显示  # 为什么会有间隙 inline-blcok块之间的距离会被保持父层字体的1/3大小的空间 # 解决方案 知道了原因，方案就好找了，我把它分为以下几种  ```html item1 item2 item3 item4 item5 ```...