Ran Luo
Ran Luo
 大家好，我今天分享的主题是：「一种自动化生成骨架屏的方案」。 在分享之前，先自我介绍下，我叫罗冉，GitHub 账号是 @jocs。第一份工作是在欧莱雅做化妆品研发，2015年转行，目前是饿了么的一名前端工程师，主要工作是研究前端加载性能及运行时性能优化。在工作之余，开发一款叫做@marktext 的 Markdown 编辑器。 今天的分享主要分为三个部分： - *首屏加载状态演进* - *如何构建骨架屏* - *将骨架屏打包的项目中* ## 首屏加载的演进 我们先来看一些权威机构所做的研究报告。 一份是 [Akamai](http://www.akamai.com/html/about/press/releases/2009/press_091409.html) 的研究报告，当时总共采访了大约 1048 名网上购物者，得出了这样的结论： - 大约有 47% 的用户期望他们的页面在两秒之内加载完成。 - 如果页面加载时间超过 3s，大约有...
> 本文是知乎的一篇回答 身边有很多非科班出身的程序员，比如 sofish、粽神。当然我也是，所以决定结合自身经历强答一波。 ### 关于我 我本科学习的是「生物科学」，大学四年无非就是拿着 eppendorf 的实验枪，在超净台旁养着各种知名或不知名的微生物，有广为人知的「海拉细胞」有很多人没有听过的「毕赤酵母」，每逢寒暑假可能还会去山里或者某个海滨城市实习，在鸟巢旁边装一个微型摄像头，记录下喂食雏鸟的频率，去海边抓一些招潮蟹或者海月水母，也算乐在其中。我很享受大学这段时光，因为毕竟是我儿时的梦想，成为一个生物学家。 毕业后，进入了北京水产科学研究所，主要工作是「养鱼」，每天固定时间给「小西伯利亚鲟」喂点吃的，给鱼缸换水。很不幸…，在一次换水的过程中水龙头我忘关了，结果水沿着鱼缸溢了出来，小鲟鱼也在想「外面的世界那么大，我想去看看」，都顺着鱼缸溢出的水推力，游到了鱼缸外面，等我发现时，这些小生命都散落在鱼缸周围，也不跳了。主任没有批评我把一缸鱼都养死了，但是也再让我去喂鱼了，给了我一份新的差事，通过毕赤酵母来表达出促性腺激素，促进鲟鱼快速性成熟。实验做了大概一年，有一些成果，毕竟在一年中成功过一次。后来觉得愧对这份工作，就跟主任请辞了，主任就介绍了上海的一份工作给我，去欧莱雅研发中心做实验。现在想想主任真是难得的人生导师。 在欧莱雅工作了三年，每天也是重复相同的工作，工作内容只是从以前的养各种微生物变成了养「人造皮肤」，然后再把化妆品涂在人造皮肤上，看看化妆品对皮肤的效果，其实和大学拿老鼠、兔子做实验没什么区别，只是欧洲那边不让在活体上做化妆品实验。在欧莱雅的三年，慢慢消磨了我对「生物科学」的热情，重复的工作让我麻痹了我的思想。我决定做一些改变，那是2014年，我已经27了。 ### 学习编程的动机 还得从 13 年年底说起，在欧莱雅工作期间，命运多舛，出了一次车祸，右胫腓骨粉碎骨折，当时还是女朋友的老婆放弃了东京的工作回国来照顾我，在床上躺了三四个月，老婆回上海后也找了一份广告公司的工作，做 SEM。到了14年，腿伤基本恢复，我重新回到欧莱雅工作，经历了人生变故（车祸），住院期间把这一生中的生离死别都看完了，开始思考起人生，更加热爱生命。 老婆是做 SEM 工作的，其中很大一部分工作是做 SEO，也就是搜索引擎优化，文科出生的她（日语系）自然对 HTML标记语言、JS代码感到陌生，学习起来也有些吃苦，在区分 CSS 属性 color 和 background 也会疑惑。出于对她回国照顾我的感恩，以及责任。我从图书馆借了一本书「15天掌握HTML\CSS\JS」，开始学习起前端来，那时候我还不知道有前端这个职业，也不是为了转行做前端，仅仅是想自己学会了，然后帮她解决问题。 也许看了这本书，让我对当时欧莱雅的工作有了更深入的思考，在欧莱雅，我每天工作内容相同，做实验、处理实验数据，写 report。实验之余看看...
饿了么 App 中新零售项目主要是以图片展示为主，引导用户点击轮播广告栏或者店铺列表进入指定的商品页面，因此页面中包含了大量图片，如搜索框下面的轮播广告栏、中部的促销栏以及底部的店铺列表，这些区域中都有大量的展示图片。因此图片的加载速率直接影响页面的加载速度。下面将从图片加载存在的问题和原因、解决方案两个方面来阐述如何优化新零售图片的加载。 ### 图片加载存在的问题和原因 **问题一**：启动页面时加载过多图片  **图1**： 新零售图片请求瀑布图 **问题原因分析**： 如上图所示，页面启动时加载了大约 49 张图片（具体图片数量会根据后端返回数据而变化），而这些图片请求几乎是并发的，在 Chrome 浏览器，对于同一个域名，最多支持 6 个请求的并发，其他的请求将会推入到队列中等待或者停滞不前，直到六个请求之一完成后，队列中新的请求才会发出。上面的瀑布图中，在绿色的标记框中，我们看到不同长度的白色横柱，这些都是请求的图片资源排队等待时间。 **问题二**：部分图片体积过大  图2. 顶部轮播图中的一张图片加载图 **问题原因分析**：如图 1，红框中是搜索框下部的轮播广告中的一张图片，通过图 2 可以看到，该图片主要耗时在 `Conent Download` 阶段。在下载阶段耗时 13.50s。而该请求的总共时间也就 13.78s。产生该问题的原因从图...
我一直在思考，看完一本书后，为什么要写读后感，写读后感的作用？也许就是为了给别人、给将来的自己，介绍你看过的这本书，让他们对这本书产生兴趣，进而去阅读。这也是分享的本质，阅读的乐趣之一了。 我看了《赋能》加深了我对组织架构、团队建设的思考，以至于我本能的想把这本书分享给大家，上次有这想法的时候是阅读曾文正著的《曾国藩家书》。本篇读后感的思路将会和《赋能》的组织段落相似，分为以下三个部分： 1. 在错综复杂的环境下，现在的团队遇到了什么问题？ 2. 我们怎样去调整组织架构，创建调整适应能力强的团队？ 3. 在新的团队架构中，管理者的职责应该怎样转变？ ### 一、在错综复杂的环境下，现在的团队遇到了什么问提 本书的作者之一是一位美军军官，他在伊拉克反恐的过程中，遭遇到了前所未有的一些困难，甚至在面对伊拉克”基地“组织的恐怖袭击时，节节受挫，虽然美军对许多”基地“集聚地进行了打击，击毙或者抓获了多名”基地“组织的高层和中层成员，但是伊拉克”基地“组织的恐怖袭击，特别是”汽车炸弹“并没有因此而衰减，反而愈演愈烈，爆炸袭击变得愈发频繁。美军拥有先进的侦查系统及武器设备，以及实时的通信系统，可以将战况即使的反馈到指挥部，指挥部再对战况进行分析，进而做出进一步指示。而”基地“组织没有这么好的系统，通信经常被中断，炸弹也都是手工制作，那么为什么先进的美军却无法战胜落后的”基地“组织呢？ 究其原因，”基地组织“的组织架构，并不是传统意义上的自上而下的组织架构，而是一张网状的结构，即使美军抓获了他们某一个高层，但是并不能破坏整张网，因为网状结构中的成员，并不像自上而下的组织架构那样，只能从上层领导那儿获取信息，他可以从其他成员那儿获取到信息，这也就是为什么美军抓获了一个高层，对整个基地组织没有太大的影响，因为这样的网状架构，其”自生“能力，很快就会有另外一个人补缺，这也是美军在最初和伊拉克”基地“组织战斗中节节败退的原因所在。 ### 二、我们怎样去调整组织架构，创建调整适应能力强的团队 在和伊拉克”基地“组织的战斗中，书作者也在不断学习”基地“组织的组织结构。正如作者所说 > 如同伊拉克基地组织一开始观察我们，像我们学习一样，我们也不得不收齐我们的骄傲，开始像他们学习，要想击败网状组织，我们需要另外一张网。 #### 2.1 建立团队成员之间的互信 在还原论（一种之上而下的管理体系）的体系下，管理者分派任务，下面的工人按标准和流程来完成任务，工人间不需要有过多的交流，交流反而会影响效率，管理者反而会反感甚至反对”工会“这样的组织，因为这些组织将工人联系起来，组成了一个整体，增加了工人间的交流，工会的存在，就会有因为工资太低而导致罢工的存在。 还原论的管理体系在20世纪早期是行得通的，那个时候世界环境并不像现在一样复杂，那个时候电话不像现在这样盛行，也没有互联网，很多人都局限在一个很小的圈子里，工作上也不需要太多的合作，工人们只要按照标准以及规则，就能够生产出符合标准的零件。但是随着科技的发展，世界变得错综复杂，简单的还原论管理体系已经无法满足如今的组织管理需求，成员之间如果不进行沟通以及相互信任，是无法完成团队的目标了，就像一个球队，队员们都各自踢自己的球，队员之间也没有交流和信任，那么就不可能完成一场满意的比赛，因此建立团队成员之间的互信是打造新型团队的基础。 书作者在打造互信团队上有自己的一套方法，”水下爆破训练“，这必须是两个人一起才能完成的训练，训练中，成员间一人拿着表，一人拿着指南针，通过手势相互沟通，向着目标地行进，这个训练没有很高的难度，但是两个人必须相互信任、手势沟通、倾力协作下才能完成，而最终完成的标准是两个人都需要到达终点，而不是某个人到达终点。在这个训练中，锻炼了成员间的相互信任。通过”水下爆破训练“，在战场上，成员间也愿意信任对方，并且能够很好的沟通，一个手势，一个眼神，就知道队友下一步将要做什么，甚至能够预测到对自己带来什么样的结果。 书作者这样描述”水下爆破训练“ > 海豹突击队水下爆破训练为了在队友之间建立信任感，一开始甚至有些蛮横的要求队员们一起吃饭，而那些最终挺过整个训练过程的人，也愿意将自己的生命交给海豹突击队的队友。 #### 2.2 目标统一、锻炼团队的自发智慧 在团队成员之间建立起了互信使得团队具有重新布局的能力，并且重新布局后去做”正确的事“，团队成员也必须明确知道什么是”正确的事“。团队成员必须都向同一个目标努力，而在一个易变、错综复杂的环境里，目标可能会发生变化。...
这个月主要看了吴军博士《见识》一书，全书共分为共分为九章，其中有几点给我留下了比较深刻的印象，所以把它们提出来，谈谈自己的理解和感悟，分别是**人生需要做减法**、**阅读的意义**、**大家的智慧**、**拒绝伪工作者**。 ### 人生需要做减法 本章开篇，吴军就举了一个例子，中国人和印度人都比较聪明、用功，起点也差不多。最近这些年由于中国经济的发展，中国人的起点甚至会略高一筹，然而到目前为止，印度移民在美国大公司当首席执行官的相当多，而中国人在这个级别的还真没有，在往下一级，即担任世界500强公司副总裁的印度人也比中国人多很多，这是为什么呢？文中给了很多种解释，比如印度人踏出国门更早、先天的语言优势、再其次，在意识形态上，资本主义国家对中国还是有一些防范意识，然而印度就没有。最后芝加哥大学商学院教授从幸福学角度给出了一种颇为合理的解释，**印度人缺乏选择的状态**，印度是一个阶级比较固化的国家，跨越阶级是比较困难的，因此他们选择的余地就会比较少，当他们有了某个工作机会后，他们就会拼了命的往上爬，这也帮助了印度的精英们在公司取得成功。 但是相对于印度人，在美国的中国人今天的选择太多了，尤其是在大公司就职的中国人，这要感谢祖国的发展，很多人从美国名校毕业，在一个大公司工作几年，如果表现比较好的话，会被提升一两次，他们原本应该继续努力，但是很多人会被发展更快的中国公司挖走，以至于很多人不想通过努力在美国大公司中获得晋升，而是想通过在美国大公司的工作经历来包装自己，来在中国获取一份高薪的工作。 选择多了，反而会分散我们的注意力，让我们没法讲精神能量集中到一点，举一个例子，小孩上幼儿园前的托班，我们总是在不同的托班中作比较，选择，A 机构师资力量更加雄厚，B 机构离家更近，但是我们却忽略了一点，孩子正真需要什么？也许仅仅是需要父母的陪伴和给予安全感，这样他们就可以去发现和大人们不一样的世界了。反而会发现上什么托班变得不重要，高效陪伴才是我们更应该思考的事。 **西瓜与芝麻**，这个故事我不止在一本书中听到吴军讲过，西瓜和芝麻的重量相差好几个数量级，即使我们再勤奋的捡芝麻，也捡不出西瓜的重量，所以我们一定要分清楚，什么是芝麻？什么是西瓜？不要在捡芝麻的事情上浪费过多时间。吴军列举了下面一些捡芝麻的例子： - 为了那免费的东西而打破头。 - 为了省下 1 元的出租车钱，在路上多走 10 分钟。 - 为了抢几元的红包，每隔三五分钟就看看微信。 - 为了挣几百元的外快，上班偷偷干私活。 这些捡芝麻的事会使得我们利用时间非常没有效率，更糟糕的是，会使得我们的追求会越来越低，人的心志一旦变得非常低，就很难在提升自己，让自己走到越来越高的层次了。 所以在西瓜与芝麻的故事上，我们应该做减法，放弃芝麻小事，而应该把心志集中到“西瓜”的大事上，这样我们才能实现更高的人生追求。 ### 阅读的意义 故事是这样的，吴军在图书馆遇到了以为老奶奶，他在看《哈利波特》，吴军就好奇的问，“你也喜欢这种书？还是给您的孙子借？”她告诉我，是她自己想读一下，应为她发现她和她的孙子已经到了“无话可说”的尴尬境地了，因此她决定和她的孙子看同一本书，来增加彼此的话题。 这个故事也让我重新审视了一下我看书的目的，之前我看书带有很强的功利性，一本书只有对我目前的工作和生活有帮助我才会去读它，比如在过去几年，我看的大部分书籍都是计算机科学相关的，因为我觉得这些书籍对我工作能力的提升大有裨益，这也就导致了我很少去花时间看一些文学、历史方面的优秀书籍，以至于我错过了大部分优秀的作品，因为我的功利性，我把它们都排除到了我的阅读列表之外。这样长此以往，导致了我技术上有所长进，但是在其他方面却止步不前了。 那么也读的意义何在呢？文中的故事已经提到了一点，增进和家人的共同语言，减少和孩子的代购，可以想想一下，在和孩子读同一本书的时候，相信你们都会有不同的感悟和理解，把自己的感悟分享给对方，这也是阅读的乐趣所在。 苏格拉底临死前说，未经审视的人生不止的度过，在如今的互联网时代，有太多获取知识和咨询的渠道，这些知识和咨询良莠不齐，甚至有很高的噪点，刷抖音、看知乎、逛微博并不能够帮我们审视人生，它们只会占用我们的闲暇时间，让我们更加没有办法利用闲暇来思考，读书则不同，手里捧着一本书，它能很容易的让我们进入“心流”状态，因此好的书能够帮助我们审视人生。 一本好书帮助我们重新认识自己，认清世界，弄清心头百思不得其解的疑惑，并最终成为一个更好的人。...
最近在看吴军博士的《态度》一书，虽然书名是《态度》，我倒觉得叫"吴军家书"更为贴切，因为整书包含了吴军对他的女儿们写的总共 40 封家书，这 40 封家书涉及到不同方面的人生哲理，包括人生哲学、世界观、如何对待金钱、怎样处理好人际关系、如何高效的学习、以及做人做事的道理，整本书看完，很容易就和另外一本书联想起来，《曾国藩家书》，也是说的曾国藩对长辈、兄弟、子女的家书整理而成的。 在本篇读后感中，我希望以对吴军博士《态度》一书的理解，从高效学习、对待金钱、人际关系、做人做事四个方面说说自己的理解，同时也希望在《曾国藩家书》中，找到一些佐证。 ### 高效学习 在第 27 封家书“上帝喜欢笨人”中，吴军博士说了一个道理，上帝喜欢笨人，原因很简单，上帝不喜欢比自己聪明的人，也其实也反映了一个人对自己能力和本领有一个正确的认知，不好高骛远，进而脚踏实地的去做事。而往往有些自以为是，自认为自己很聪明的人，他们往往高估了自己的能力，在学习、做事上去取巧，偷奸耍滑，这样反而取不到 一个好的结果。 上帝喜欢笨人，还有另外一个原因，笨人不懂得打擦边球，不懂得投机取巧，因此凡是都会留很大的余量，付出百分之三百的努力，当发生一些意外的时候，留有的余量，付出更多的努力就会起作用了，这样笨人总会把事做好，学习也是同样的道理。 在曾国藩家书中也有相应的佐证，在这个世界上，普通人总是占大多数。“**凡人做一事，便须全副精神，注在此一事，首尾不懈。不可见异思迁，做这样想那样，做这山望那山。人而无恒，终身一无所成**”。曾文正所要阐述上帝喜欢笨人的另外一个原因，因为知道自己笨，所以我们没有精力去做所有的事，所以不可见异思迁，这山望着那山高，同时既然决定做一件事了，那么就需要全副精神，坚持不懈，这也就是做事要专一且需恒心的道理。 ### 对待金钱 在书中，吴军博士知道他的两个女儿，对待金钱的不同态度，小女儿梦馨因为从出生家境已经很富有，所以从小就是富养，所以对金钱没有什么概念。而大女儿相对来说很节俭。因此吴军在书信中给出了不同的建议。 对于大女儿梦华，吴军博士担心起过于节俭，因此对其建议“不乱花钱，也不乱省钱”。希望她不要过于节省，以至于不能让钱发挥它应有的作用，希望她不为钱所惑，能够从大处着眼，对于大女儿，他更多的谈到如何去花钱，“从大处着眼”。他希望，当人实现了财富自由，应该利用财富做一点其他人没有做过或者做不到的事，谷歌最早的工程师总裁韦恩罗辛一直对天文望远镜感兴趣，后来他有钱之后，建立了一个全球联网的天文台，这个天文台有两个重大的发现，证实了引力波，发现可持续爆炸的超新星。把财富运用到别人做不到或者没人做的地方更有意义。 对于小女儿梦馨，他的更多的是如何去赚钱，也许是想让小女儿知道赚钱的艰辛。金钱主要有两个用途，一是用来作为媒介，让他发挥更大的作用，比如投资赚取更多的钱，或者用他们来支持一项事业，改变我的的世界。二是用来享受生活，这方便的一些花销是必要的，但不能无节制，不能无度，这个度，最关键就是量入为出。你如果想得到什么就需要先挣钱，再花钱，这个顺序不能够颠倒，想要获得，先学会给予。在如今社会，各种信用卡、蚂蚁花呗、京东白条，商人们绞尽脑汁得让大家养成先花钱后挣钱的习惯，这往往会使得我们挣不到钱，因为钱都用来还信用卡、花呗了。 曾文正对待金钱的态度显得更加恬淡，在一个乱世之中，曾文正认为，“处此乱世，越穷越好”,做官且不可以敛财为目的，因此他的钱往往有两个用途，一是用来还债，二是用来接济亲友。同时在还债和馈赠亲友的态度上，他这样对其祖父说，“家中之债，今虽不还，后尚可还；赠人之举，今若不为，后必悔之！”。因为当时的俸禄毕竟有限，还债和馈赠亲友不可同时，曾文正选择了先接济亲友，后还债，这也是很容易理解的，在此乱世，能给借钱给别人的，家境往往还算富裕，而更多的人是吃了上顿没下顿的。 曾文正，事事节俭，同时也会存一些银两，以备不时之需。 ### 人际关系 ”交友时，不要怕吃小亏，交友时一定要真诚、大方和宽容。不要怕自己吃小亏，对别人的一些小毛病要容忍，毕竟人无完人，不要因为别人的一些确定而否定整个人”，吴军博士这些话，道出了交友的真谛。 同时在对梦华的书信中，他谈到了锻炼领导力，认为有两个方面最重要，第一个是组织工作的能力，一件事交给你，你能否将它分解，组织大家完成。第二是团结大多数人，让每个人各尽其才，发挥作用。他说道，美国的大学生有些“洁癖”，对那些夸夸其谈不愿意做事的人不齿，对那些只愿意一个人做事，不愿意合作的人反感，其实我们更应该包容各种各样的人，能够和这样的人和平相处，并且善用每人各的长处。 曾文正认为，交友和治学其实有相同之处，贵在专一，“凡事皆贵专。求师不专，则受益也不入；求友不专，而博爱而不亲。心有所专宗，而博观他途，以扩其识，亦无不可。无所专宗，而见异思迁，此炫彼夺，而大不可。”曾国藩认为，专一是打动人心最有效的方法，同时，曾文正在告诫弟弟上，告诫他们应该交什么样的朋友。“益者三友”，友直，友谅，友多闻。直就是指正直；谅是指诚实；多闻就是指见闻广博。 曾文正在写给他弟弟的信中也提到，“切勿占人便宜”，我认为这其实和吴军博士的“交友时，不要怕吃小亏”一个道理。“凡是不可占人半点便宜，不可轻取人财，情愿人占我的便宜，断不肯我占别人的便宜”。 ### 做人做事 “今天的人，为了生存，常常不得不根据薪水的多少、名望的高低来决定自己该做什么事，很多人决定是否继续读书的理由，是能否找到更好的工作，或者能够提前两年赚钱，只有很少的人每天做的事情都是他们喜欢的工作”。...
> 至此本系列的四篇文章翻译完结，查看完整系列请移步[blogs](https://github.com/Jocs/jocs.github.io/issues) > > 由于个人能力知识有限，翻译过程中难免有纰漏和错误，望不吝指正[issue](https://github.com/Jocs/jocs.github.io/issues/12) ES6 Generators: 完整系列 1. [The Basics Of ES6 Generators](https://davidwalsh.name/es6-generators) 2. [Diving Deeper With ES6 Generators](https://davidwalsh.name/es6-generators-dive) 3. [Going Async With ES6 Generators](https://davidwalsh.name/async-generators) 4. [Getting Concurrent With...
> 本文翻译自 [Going Async With ES6 Generators](https://davidwalsh.name/async-generators) > > 由于个人能力知识有限，翻译过程中难免有纰漏和错误，还望指正 #### ES6 Generators：完整系列 1. [The Basics Of ES6 Generators](https://davidwalsh.name/es6-generators) 2. [Diving Deeper With ES6 Generators](https://davidwalsh.name/es6-generators-dive) 3. [Going Async With ES6...
> 本文翻译自：[Diving Deeper With ES6 Generators](https://davidwalsh.name/es6-generators-dive) > > 由于个人能力有限，翻译中难免有纰漏和错误，望不吝指正[issue](https://github.com/Jocs/jocs.github.io/issues/9) #### ES6 Generators:完整系列 1. [The Basics Of ES6 Generators](https://davidwalsh.name/es6-generators) 2. [Diving Deeper With ES6 Generators](https://davidwalsh.name/es6-generators-dive) 3. [Going Async With ES6 Generators](https://davidwalsh.name/async-generators)...
### ES6 Generator 基础指南 > 本文翻译自：[The Basics Of ES6 Generators](https://davidwalsh.name/es6-generators) JavaScript ES6(译者注：ECMAScript 2015)中最令人兴奋的特性之一莫过于**Generator**函数，它是一种全新的函数类型。它的名字有些奇怪，初见其功能时甚至更会有些陌生。本篇文章旨在解释其基本工作原理，并帮助你理解为什么Generator将在未来JS中发挥强大作用。 #### Generator从运行到完成的工作方式 当我们谈论Generator函数时，我们首先应该注意到的是，从“运行到完成”其和普通的函数表现有什么不同之处。 不论你是否已经意识到，你已经潜意识得认为函数具有一些非常基础的特性：函数一旦开始执行，那么在其结束之前，不会执行其他JavaScript代码。 例如: ```javascript setTimeout(function(){ console.log("Hello World"); },1); function foo() { // NOTE: don't ever...