Chat idea:记一次 Firefox 下 Vue 带来的性能危机的解决

前两天遇到一个问题:我厂的一个产品在 Firefox 下,可能发生因为 CPU 占用过高而卡死的情况。这个问题在测试环境不复现,在 Chrome下基本上也不会复现。

因为我厂老板是这个产品的主要用户,这个 bug 让我倍感压力,但一直没有解决它的好办法。终于有一天,在某台生产机上调试另外一个 bug 的时候,我终于发现了稳定复现这个 bug 的方式。

接下来就是几个小时的 debug,然后发现问题所在,然后解决问题,然后发现解决方案不理想,于是寻求新的解决方案,然后找到新的 API,最终彻底的解决这个问题。

接下来我就分享这个过程,读完整篇文章当中你将学会:

  1. 使用开发者工具查找性能问题
  2. 不断切分,缩小问题范围
  3. 理解 Vue 响应式原理分析问题根源
  4. 修复问题并验证
  5. 新的解决方案 Intersection Observer
  6. 解决问题并上线

目标读者:

  1. 中级开发者
  2. 熟悉原生 JS

大家觉得这个 idea 如何?请留言告诉我。不出意外的话这将是我下个月的 gitchat 内容。

GitChat:从 jQuery 里学习设计模式

新 GitChat 已经开始招募读者:https://gitbook.cn/gitchat/activity/5ccedbcfe5bb505613f45186,现在加入,你将会在两周后看到我这篇悉心打造的长文。长文公布一周后进行答疑。之后长期在读者圈与各位互动。

欢迎大家光临指导。

今年会在 GitChat 平台上多发内容。也欢迎大家提出你们想看的内容。

继续阅读“GitChat:从 jQuery 里学习设计模式”

双11促销

今年 SF 官方没啥动静,我自己来。

今年 SF 官方没啥动静,我自己来。

SF 讲堂五折

讲堂名称链接
jQuery, Backbone, Vuehttps://segmentfault.com/l/1500000008694676
Promise 的 N 种用法https://segmentfault.com/l/1500000008757392
Web 永恒不变的主题:布局——Box,Flex,Gridhttps://segmentfault.com/l/1500000008879826
写 CSS 也要开脑洞:万能的 `:checked + label`https://segmentfault.com/l/1500000008950435
前端面试攻略:JavaScript 排序与搜索https://segmentfault.com/l/1500000009956817
前端必备技能:CSS 预处理工具 Stylus 详解https://segmentfault.com/l/1500000010125848
前端面试攻略:肉老师的面试题详解https://segmentfault.com/l/1500000010971105
前端面试攻略:避免求职中的“非战斗减员”https://segmentfault.com/l/1500000012807670
职场新人必修课(1) —— 实习社保个税等https://segmentfault.com/l/1500000014575853
职场新人必修课(2) —— 创业股票贷款买房晋升考评等https://segmentfault.com/l/1500000015205261
一起挣外快吧——环境搭建+万能的WP+前端如何玩转WPhttps://segmentfault.com/l/1500000015754431
系列讲堂:实战组件开发——手机日历https://segmentfault.com/ls/1650000014717120

B站视频

本来就是免费的……

https://space.bilibili.com/7409098/#/video

前端驱动的 WordPress 主题开发

这次分享主要面向懂前端,对后端了解有限的同学。如果你想用 WordPress 开发网站,尤其想挣点小钱的话,这个视频应该对你很有帮助。这段视频中我没有深入 WordPress 开发的细节,而是以前端技术为主,将我如何尽量使用前端技术完成企业网站搭建的新的和盘托出。

这次分享主要面向懂前端,对后端了解有限的同学。如果你想用 WordPress 开发网站,尤其想挣点小钱的话,这个视频应该对你很有帮助。这段视频中我没有深入 WordPress 开发的细节,而是以前端技术为主,将我如何尽量使用前端技术完成企业网站搭建的新的和盘托出。

同时这也是补全《一起挣外快吧——环境搭建+万能的WP+前端如何玩转WP》。

B 站链接:https://www.bilibili.com/video/av31991750/

肉山小课堂共建计划

简而言之,我的内容质量应该还是不错,但是品相不行,所以欢迎大家一起参与共同建设。有钱一起挣,将来有机会更进一步合作。

因为我自己各种忙,各种挖坑,但是十分希望能够多分享一些东西给大家,所以提出这个共建计划。我希望,我作为火种,引信,能够帮助更多的同学学到知识,取得进步。

经过过去两年高强度高密度的分享,我发现,“分享”这件事,并不容易。

首先,“你以为你以为的就是你以为的?”很多东西,我们放在自己的知识体系里,认为它就是全部的事实和事实的全部。但其实不然。这些东西,自己以为然当然没问题,拿出来分享,就不得不去收集更多信息以确保准确。

其次,未经包装的知识,很难被其他人吸收。总有人鄙视那些传道者分享者,觉得他们不配享有现在这般待遇。但实际上,分享和专精技术本来就是两码事,专精者未必擅长分享,“教学”本身也是件很难的事情,需要很多的学习和准备。

在当下的环境,做我想做的分享者,必然面临经济时间的两难。我做不到黑下心挣大钱,只好挤时间挣小钱。前面说了,分享需要大量的准备时间,又挣不到什么钱,面对金钱和时间的两难,就更难坚持。

所以我希望和大家共建一个学习环境。我拿出我的经验知识,以原石璞玉的方式授予大家,大家一边自己吸收,一边帮我打磨修饰,最后拿出宝器分享给更多的人;如果能卖出去挣到钱,就一起分成,共建共享。

总的目标

  1. 共同建设,共同受益
  2. 建设的多,回报的多
  3. 不设门槛,能干啥就干啥

共建计划

1. 视频剪辑整理

  1. 我提供视频,任何同学均可进行二次加工和处理
  2. 剪辑完成的视频,效果好的,给予人民币100 ~ 500的奖励(视长度和效果而定)
  3. 视频如果产生商业价值,比如上传至技术网站,四六分账,我占小头

2. 内容整理

  1. 视频、群内聊天,有价值的内容做成脱水版文章、slide、个人分享博客
  2. 分享周报、类库体验、CSS-trick 挑战等
  3. 优秀者送书奖励

3. 视频脱水/二次创作

我甚至欢迎大家整理 slide、文稿,修正错误部分,然后我来重录,或者整理人自己重录都可以(不过必须有我的来源说明)。之后也可以四六分,如果不需要我重录,二八分以可。


先想这三条,长期有效,欢迎有时间有兴趣的同学参与。

尬聊会:第13期

回顾本周群内分享内容,然后又聊了一些前端学习方面的内容。

兰卡威跳岛

回顾本周群内分享内容:

  1. 如何提问的技巧 張鑫旭
  2. Build an Excel add-in using Vue
  3. Did you know that style and script tags can be set to display: block?
  4. 使用 Pug 和 Stylus 开发小程序的 watch 脚本
  5. https://gradientjoy.com/ 这个网站很有意思,生成一个随机的渐变图,可以用来当背景或者 placeholder
  6. 纯 CSS 的 tab 页切换

然后又聊了一些前端学习方面的内容。

继续阅读“尬聊会:第13期”

尬聊会:第十二期

尬聊会第12期,讲解了一个纯CSS组件的实现。

视频在此:尬聊会第12期 控件实现/适应行业的发展

时间:2018-07-22 21:45
地点:我的斗鱼直播间 douyu.tv/meathill
回看视频:http://blog.meathill.com/share/galiao-12.html

0. pure css elastic toggle 实现讲解

  1. <label>for 属性和表单元素的 id 对应
  2. :checke + label
  3. transition
  4. overflow: hidden
  5. position: relative/absolute
  6. cubic-bezier

2. 再聊一下行业对我们的要求

  1. 工作6年 -> 普通工程师?
  2. 应该是高级工程师,或技术经理,甚至技术总监

广告时间

2018-08-08晚 8 点,给大家分享我的私活儿技巧:一起挣外快吧——环境搭建+万能的WP+前端如何玩转WP

地址:SegmentFault 讲堂 https://segmentfault.com/l/1500000015754431/

作为一名程序员,我们最常被亲朋好友问到的问题应该是:你会修电脑么?不对,是“你会做网站么?”

对于我们前端来说,写个页面不在话下;可是一个网站,光有前端是不够的,服务器和 API 怎么解决呢?找外援么?我想大家都更愿意自己来吧。

这次分享,我希望教会大家以下技能:

  1. 本地开发环境的配置(基于 Windows 10 Linux Subsystem)
  2. 云服务器的购买和配置
  3. LNMP 环境搭建,安装 WordPress
  4. WordPress 主题开发
  5. 利用 WordPress Ajax API 作为数据接口

基本上,学会这些之后,你就可以在外面接活儿做网站了。希望大家都能借此丰富技能树、挣到更多的钱。

其实,即使不考虑接私活儿挣钱,我也建议前端同学学习一下服务器配置和后端开发的相关知识,对我们理解整个技术体系、业务流程都有巨大帮助。毕竟一座高塔必须坚实而又宽广的底座才能建成。


早鸟政策

  1. 即日起至7月31日,5折
  2. 8月1日至8月5日,75折
  3. 8月6日至开播前,88折
  4. 之后恢复原价

实录地址:

2018-07-29 尬聊会 第12期实录


欢迎加入肉山小课堂一同学习,QQ 群:肉山小课堂答疑交流群 628056148,SF 圈子:肉山小课堂继续深造中心