D2 Review

-– layout: post title: D2前端大会匠心回顾 category: 技术 tags: [学习,开发,前端,Node,React,React,D2,匠心] keywords: 学习,开发,前端,RxJS,React,React,D2,匠心 description: —

前言

今年有幸通过了D2的审核,听了几场感兴趣的议题,流水账就不写了,根据官方放出的PDF和PPT做一些回顾。

打造高可靠与高性能的React同构解决方案

系列文章

这个议题挺有意思,而且落地很靠谱。细节我也不讲,就提一些我感兴趣的点。

首先肯定是演示时用到的工具。

压测工具loadtest。当时会场在演示如果一步步进行优化,通过loadtest的直观压力测试演示,的确有很直观的效果。

而且通过再服务端写一个输出平均渲染时间的中间价,两者进行对比查看,可以很容易得到当前应用的应用状态。

为了本地测试一下。我去把北斗的整个下载下来进行测试。

imgn

其次是一些优化手段,万万没想到最后升级react16是优化最大的。。。说明升级依赖库的重要性。。。

通过之前的学习我们可以考虑在自己的项目中使用压测工具来帮助我们优化整个项目。

支付宝无线效率工具建设

整场挺下来就一个开源工具还是有研究价值的。

AnyProxy

AnyProxy是一个开放式的HTTP代理服务器。 基于Node.js,开放二次开发能力,允许自定义请求处理逻辑 支持Https的解析 提供GUI界面,用以观察请求

利用HTTP代理服务器可以做到:


调试线上页面,需要注入某个脚本,或是替换一些html数据。比如常用的移动端调试工具weinre就依赖这种方法
不改url,把请求发送到某台指定的服务器,移动端的dns结果有缓存,改host又效率太低
查看页面首次打开时的表现,需要阻止CDN提供304这样的响应
服务器不支持跨域头Access-Control-Allow-*,调试时却需要发送跨域请求。本地服务器调试app中嵌入的离线页面时常面对这种需求
替换cookie,快速实现多账户切换
模拟各类网速环境
接管某个API的响应,进行数据mock

但是经过本人测试下载,发现还是不好用0-0.

把前端监控做到极致

这个非常详细的讲解了如何在业务中落地一个前端监控,虽然没有开源的项目,但是可以通过这些思路自己自定义一个。

当然听完这场没用过前端监控服务的肯定是先去找一个第三方的试试。

  1. https://www.bugsnag.com/
  2. https://fundebug.com/
  3. https://betterjs.github.io/

结尾

文章里只写了自己的一些感受,更多细节建议去下载大会的PPT文档来整体理解。

大会相关的文档和PPT我都放在百度盘,感兴趣的可以去下载。

链接: https://pan.baidu.com/s/1eS1v9uy 密码: c1rn

Table of Contents