hello~亲爱的观众老爷们大家好，有段时间没写文章了，最近主要忙于工作交接，实在没腾出时间进行总结。这次为大家带来 es6 中 Promise 的简单实现。

事实说类似的文章已经不少，不少大神对此都有精彩的实现。然而自己消化了才是最好的，在看文章中其实还是遇到不少坑，如 this 的指向，回调的到底是哪个 Promise 等。本文尽量解释清楚上述问题，力求让大家更好地掌握 Promise。

hello~亲爱的观众老爷们大家好！惯例先说说为何写这个主题，缘起于其次后端同事的一次抓包分享。当然咯，当时对于网络编程的术语各种不明觉厉，只能尴尬地笑着。对于最基础的 OSI模型，只知道由七层组成，但每一层是什么，有什么用途，有什么协议完全是不清楚的。因而知耻而后，通过看书与查资料补充了相关的知识，也就有了这篇文章。

可能有观众老爷会问，前端知道这个有什么用，平时基本用不上不是么？这个倒是事实，我们平时一般只接触应用层的HTTP协议， 底层的协议我们可以毫不关心。但有些场景还是需要一些底层知识的。比如前端一般优化有一条原则是，尽量少发请求，那么为何少发请求就能优化加载，它的开销到底是什么？又比如最近产品希望uv打点同一计算机唯一，但很可能用户会采用不同客户端使用该产品，研发该如何啪啪啪打产品脸。仔细思考一下，其实不少情景也需要一点底层知识，因而不要书到用时方恨少啊~

本文会介绍七层模型中每层相关的协议，也会通过快递公司的比喻形容每层的作用。希望大家有所收获。

Hello~亲爱的观众老爷们大家好！国庆中秋长假快放完了，是时候收拾心（ti）情（zhong）好好学习与工作啦。这次为大家带来的是两个好用 API 的介绍，其实也是偷懒神器。

根据 MDN的描述，Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。

而Element.scrollIntoViewIfNeeded（）方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。此方法是标准的Element.scrollIntoView()方法的专有变体。

因而再有什么回到顶部、去到置顶位置和键盘弹出挡住输入框之类的需求，都可以简单解决了。

hello~各位亲爱的看官老爷们大家好。估计大家都听过，尽量将CSS放头部，JS放底部，这样可以提高页面的性能。然而，为什么呢？大家有考虑过么？很长一段时间，我都是知其然而不知其所以然，强行背下来应付考核当然可以，但实际应用中必然一塌糊涂。因此洗（wang）心（yang）革（bu）面（lao），小结一下最近玩出来的成果。

友情提示，本文也是小白向为主，如果直接想看结论可以拉到最下面看的~

亲爱的观众老爷们大家好～我发现我写文章都是因为工作碰到问题才写，什么探索最前沿的最讨厌了（其实是力有所不及）！言归正传，最近碰到的问题是这个：准备开发一个平台，随手写导航栏组件之时，发现层级错乱，无论如何调z-index都无法达到预想的效果，大致代码如下：

<nav>
    //背景遮盖，绝对定位
    <section class="mask"></section>
    <ul>
        <li>
            balabala..
            //次级列表,绝对定位
            <ul class="menu">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </li>
    </ul>
</nav>

大致想要的效果就和这平台的导航差不多。CSS代码就不贴了，我写的时候碰到的问题就是无法将mask绝对定位后的层级置于li文本之下，又在使用了最对定位的menu之上。当时为了赶需求，征询了产品的意见，改了实现的方式。但本着碰到问题不回避的态度，通过两天闲时废（shi）寝（mian）忘（duo）食（meng）地查阅资料与疯狂写demo后，小结了点知识，在此分享给大家，希望对大家有所帮助。

本文主要是关于层叠上下文和层叠顺序的相关知识，如果看官大人已经通晓，可能这篇文章帮不了你什么，但你能帮我看下写得有木有问题（手动滑稽）。

（友情提示，我写这篇文章时，为了让看官们更好地理解，写得挺罗嗦的，如果直接想看结论，可以跳到最后～）

亲爱的观众老婆们好～最近在团队里组织了一次内容关于React的分享，然而后端有同学反映未能理解为何前端需要使用框架，框架究竟解决了什么问题。

回想刚入坑前端的时候，也接触了一些PHP，当了解到其实PHP可以生成HTML模板之后，对前端的信仰几乎崩溃。既然后端就可以渲染前端的话，前端价值到底在哪？感觉页面就是随便切一下就行，根本没必要用框架，当时着实迷茫了很久。

后来对前端领域接触深了，再经过大神的指点，总算是理解为何前端需要使用框架。根据自己的理解，再结合分享时后端同学的疑问，于是有了这篇文章。本文相对小白向，只是通过虚拟一个项目说明问题，还望各位大神不吝赐教。

亲爱的观众老婆们大家好，欢迎大家欢迎来到一可的昆特牌馆小白的地盘（看在我为你宣传的份上，跪求别告我侵权台词啊T.T）。作为某浏览器的小前端，最近接到一个需求：某境外视频网站在我们浏览器打开后是白屏，希望帮忙定位原因并提出解决方案。

经过Fiddler各种抓包替换文件后，定位出问题是自家浏览器严格模式上的bug。然而浏览器发版太久，依靠商务推动对方修改代码也不是一时半刻就能解决问题，于是皮球又踢回给可怜的小前端。既然浏览器是自家的，那可不可以通过在对方页面中使用注入功能解决这问题呢？

亲爱的观众老婆们大家好，欢迎大家欢迎来到一可的昆特牌馆小白的地盘（看在我为你宣传的份上，跪求别告我侵权台词啊T.T）。相信大家都直面过被人要求手写排序算法的恐惧，尤其对于转行的小前端来说，简直就是噩梦。网上其实有蛮多资料的，虽然为了面试背下来也未尝不可，但作为志愿刷遍LeetCode Easy难度的男人而言，知其然不知其所以然是绝对不行，接下来，我会用最小白的方式解释快速排序算法到底是怎么一回事。

注意：以下教程全是小白的，老鸟基本可以跳过，但如果你愿意鞭笞我，那也是极好的（手动滑稽）。

前几天去面试，面试官提出了这么一个问题：有A和B两个类，a和b分别继承前者，如何让b也继承A。

那时候我可是一脸懵逼，想了下回答了b = Object.create(A.prototype)，面试官不置可否，当时我心里窃喜，以为蒙对了。回家之后越想越不对，于是有了这篇文章。

原文链接：https://developers.google.com/web/updates/2017/01/scrolling-intervention

我们都知道，对于移动端的网页而言，滚动是十分重要的交互，然而 touch 系列事件触发（滚动后）经常会引发严重的性能问题。为了解决这问题，Chrome （通过允许往addEventListener()中传入{passive: true}）让touch系列事件的事件监听器变为“被动”（译者注：其实就是touch之后，不再是执行完事件函数后再滚动）,同时 pointer
事件相关的API（也支持相关参数）。这些都是很有用的特性，能使处理（ touch 系列）事件的过程中，不会妨碍页面的正常滚动，然而开发者们有时候会觉得它们难以理解，更不会去使用。