20180826_ARTS_week09

第9周 ARTS,算法题 Palindrome Number,看了一篇介绍 ES6 箭头函数的文章,介绍一个移动端使用 passive 来提高滚动性能的小技巧,分享了阅读《暗时间》的一些些感想。

Algorithm

/**
 * 
 * Palindrome Number
 * https://leetcode.com/problems/palindrome-number/description/
 * 
 * @param {number} x
 * @return {boolean}
 */

var isPalindrome = function (x) {
    return x == x.toString().split("").reverse().join("");
};

console.log(isPalindrome(121))
console.log(isPalindrome(-121))
console.log(isPalindrome(10))

第一种方法,把数字转成字符串,再变成数组,倒转,然后再变回字符串。 很明显,这个方法效率不高。

之前在 20180811_ARTS_week07 中的算法题已经做过了倒转数字的,在这里可以直接用上。

var isPalindrome = function (x) {
    if (x < 0 || (x !== 0 && x % 10 === 0)) { return false; }

    let rev = 0;
    let tmpX = x;
    while (tmpX !== 0) {
        rev = rev * 10 + tmpX % 10;
        tmpX = Math.trunc(tmpX / 10);
    }

    return rev === x;
};

console.log(isPalindrome(121))
console.log(isPalindrome(-121))
console.log(isPalindrome(10))

复杂度 O(n) very good。

Review

A Beginner’s Guide to Arrow Functions in ES6: Part 1

A Beginner’s Guide to Arrow Functions in ES6: Part 1

介绍 ES6 箭头函数的文章。

其实 ES6 箭头函数最重要的特性就是箭头函数中的 this 是词法作用域,由上下文确定。

比如:

var foo = {
    money: 100,
    boo: function () {
        var fn = function () {
            return this.money;       
        };
        return fn();
    }
};

这里 this 指向 window,并没有 money 属性。

而改成箭头函数

var foo = {
    money: 100,
    boo: function () {
        var fn = () => {
            this.money;       
        };
        return fn();
    }
};

这里 this 就指向 foo 对象。

Tip

介绍一个移动端提高滚动性能的小 tip。

16年 Google 推出了 passive 这个特性。如果你的 touch 事件不需要通过 preventDefault 来阻止事件的默认行为,那就可以添加 passive 参数,来提高滚动性能。

target.addEventListener(type, listener, { passive: true });

其原理是,原来的事件执行器不知道你会不会禁用默认行为,要等绑定的事件执行完了,浏览器才知道你是否禁用了默认行为。举个例子,当你点击 a 标签的时候,要等你绑定的事件执行完之后,浏览器才能决定是否跳转。 而加了 passive 之后,创建事件执行器的时候,就告诉了浏览器,我不会调用 preventDefault 来阻止事件。

对此,Chrome 还做了统计:

For instance, in Chrome for Android 80% of the touch events that block scrolling never actually prevent it. 10% of these events add more than 100ms of delay to the start of scrolling, and a catastrophic delay of at least 500ms occurs in 1% of scrolls.

大概意思是,在 Android 版 Chrome 浏览器的 touch 事件中,80% 的页面都不会调用 preventDefault 函数。在滑动上,有 10% 的页面因此增加了至少 100ms 的延迟,1% 的页面增加 500ms 以上的延迟。

现在 Chrome 56 之后,会默认开启 passive,如果你在事件处理中使用了 preventDefault 而又没有指定 passive:false,就会有报错:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive

最后,送上一个 polyfill:

// Test via a getter in the options object to see 
// if the passive property is accessed
var supportsPassive = false;
try {
  var opts = Object.defineProperty({}, 'passive', {
    get: function() {
      supportsPassive = true;
    }
  });
  window.addEventListener("test", null, opts);
} catch (e) {}

// Use our detect's results. 
// passive applied if supported, capture will be false either way.
elem.addEventListener(
  'touchstart',
  fn,
  supportsPassive ? { passive: true } : false
); 

Share

周末开始看刘未鹏大大的《暗时间》,有几段话印象深刻,与你分享下。

如果你有一台计算机,你装了一个系统之后,就整天把它搁置在那里,你觉得这台计算机被实际使用了吗?没有。因为 CPU 整天运行的就是空闲进程。运行空闲进程也是一天,运行大数据量计算的程序也是一天,对于 CPU 来说同样的一天,价值却是完全不一样的。 大脑也是如此。

这让我想到著名的『10000 小时定律』,总说某个事情做一万小时能达到精通,一万小时的空转或者低效率运转又怎么可能达到精通呢。

这里又牵涉书中说的另一个概念:

"投入时间"这个说法本身就是荒唐的,实际投入的是时间和效率的乘积。

就像上周耗子哥在群里分享的一张图,学习其实是有效率之分的,听讲和阅读学习内容的平均留存率是 5%~10%,而讨论实践和教授个他人的平均留存率能达到 50%~90%。

这点挺有体会的,开始写博客写公众号之后,学点新东西,以为记录一下,写写很简单,却发现写的过程中可能这个点做 demo 的时候没想清楚,那又要去查相关的知识,实际上花的时间比预想的要多很多。

所以不要以为平时看了书就算学了,有没有实践,有没有和他人分享,甚至以『跟别人讲清楚』的方式来写文章沉淀,效率都会高很多。

虽然我和庞加莱是没法比的,但是常常也在路上想出答案,这真是一种愉悦的体验。

这段和《程序员思维修炼》一书中 R 型大脑讲的异曲同工。《程序员思维修炼》中把大脑分为 L 型和 R 型,并不是字面上的左右脑,L 型是主动性的,集中注意力时,L 型就在工作;而 R 型则不同,你不能主动使用它,只能邀请它。有意思的是,特意回去翻了翻《程序员思维修炼》,书中在讲这部分的时候,同样说到了庞加莱。

我试过洗澡的时候突然想到某个疑难问题的可能解决方案,洗完之后跑去试了试,果然可以,你要问我怎么想到的,我还真说不出来,这真的是一种愉悦的体验。

有时候,看过的书互相印证,互相交织,也是一种愉悦的体验。


碎碎念

记录一些所思所想,写写科技与人文,写写生活状态,写写读书心得,主要是扯淡和感悟。 欢迎关注,交流。

微信公众号:程序员的诗和远方

公众号ID : MonkeyCoder-Life

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 不一样的动图-APNG

    动图 说到动图,首先我们想到的 GIF 格式,GIF 在网络上流行已久,各种动态表情包都是 GIF 图做的。 但是 GIF 的缺点也很明显,透明背景的 GIF ...

    Bob.Chen
  • 20180722_ARTS_week04

    这题寻找两个已经排好序的数组的中值,一开始思路比较简单,两个数组合一起,然后排个序就很容易找到中值了。

    Bob.Chen
  • 20180902_ARTS_week10

    这周因为有些事情忙,挑了条 easy 难度的题。整个思路比较简单,算面积嘛,然后左右两边分别有两个游标,哪个低了哪个就往中间移动一格。复杂度 O(n)。

    Bob.Chen
  • java程序 如何优雅地读取xml文件

    Meet相识
  • 回顾SDN/NFV部署关键年:全面落地 亟需克服多重困难

    随着云计算技术的发展以及“互联网+”计划的提出,运营商网络面临巨大压力,如何变革网络以适应未来业务发展需求,成为业界关注焦点。而SDN/NFV可以把原来经典网络...

    SDNLAB
  • MySQL性能优化(一)-- 存储引擎和三范式

    存储引擎说白了就是如何存储数据、如何为存储的数据建立索引和如何更新、查询数据等技术的实现方法。因为在关系数据库中数据的存储是以表的形式存储的,所以存储引擎也可以...

    码农小胖哥
  • 灵感分享|10个优秀网站设计实例赏析及原型分享

    网页设计师们经常会浏览高质量的网页设计作品分享网站,来解决灵感枯竭的问题。因为在这些优秀的网站设计实例中可以看到某些趋势,诸如:扁平化设计、视差滚动、响应式设计...

    奔跑的小鹿
  • 使用Python快速制作可视化报表

    pyecharts是一个用于生成Echarts图标的类库。实际就是Echarts与Python的对接。

    py3study
  • 万能的python-画图

    pyecharts是一个用于生成Echarts图标的类库。实际就是Echarts与Python的对接。

    py3study
  • 实战|流式代码封装及ViewBadger角标的应用(附源码)

    本来这章只是想讲一个Android中的角标ViewBadger的使用,在写的过程中想起来前面文章中Glide的开源库加载网络图片用一行代码就可以直接实现了,这种...

    Vaccae

扫码关注云+社区

领取腾讯云代金券