2020-03-19

2020

KFE 第49期

一周推荐

前端高级进阶：网站的缓存控制策略最佳实践及注意事项

缓存控制策略就是 http cache 的策略， http cache 只需要了解一个 Cache-Control 的头部，通过 Cache-Control 控制：带指纹资源: 永久缓存和非带指纹资源: 每次进行新鲜度校验

缓存控制

如何优雅地取消 JavaScript 异步任务？

WHATWG在 DOM 标准上引入了 AbortController。但不是语言层面的 ECMAScript 标准，因此 Node.js 平台并不支持 AbortController

AbortController

算法

土味来一波

如果你有10头猪，刮台风猪栏倒了，压死了6头猪，你会救剩下的4头猪吗？

救！？

你救（就）4（是）头猪

不救！？

你不救（就）4（是）头猪

如果你的邻居要跟你争这4头猪，你会跟他争吗

争！？

你争（真）4头猪

文章整理来自互联网，不作商业用途，如侵权，请联系删除

2020-03-18

2020

KFE 第48期

一周推荐

浏览器进程？线程？傻傻分不清楚！

进程（process）是操作系统分配资源的最小单位,是应用程序运行的载体

线程（thread）是程序执行的最小单位。

一个进程由一个或多个线程组成，线程是一个进程中代码的不同执行路线。

进程 线程 浏览器内核多线程

这一次，彻底弄懂 JavaScript 执行机制

浏览器内核中有多个进程在同步工作，主要是Browser进程和Render进程。

Browser进程主要负责页面管理以及管理其他进程的创建和销毁等，常驻的线程有GUI渲染线程、JS引擎线程、事件触发线程、定时器触发线程、HTTP请求线程

Render进程主要负责页面的渲染、JS执行以及事件的循环。

程序执行任务可以分为同步任务和异步任务，异步任务包括宏任务（script(全局任务)， setTimeout， setInterval， setImmediate， I/O， UI rendering）和微任务（process.nextTick， Promise.then()， Object.observe， MutationObserver）

同步任务 异步任务 宏任务 微任务

详解JavaScript中的Event Loop（事件循环）机制

Node事件循环机制有6个阶段：timer、I/O callbacks、idle prepare、poll、check、close callbacks。每个阶段都有一个任务队列，执行该阶段的任务队列，直到队列清空或执行的回调达到系统上限后，才会转入下一个阶段，进入下一个阶段之前，执行microtask队列的所有任务。顺序执行一次后就叫一个tick。

注：运行环境中的各种复杂的情况会导致在同步队列里两个方法的顺序随机决定

Node

算法

土味来一波

“先生你要点什么？”

“我想点开你的心。”

文章整理来自互联网，不作商业用途，如侵权，请联系删除

2020-03-16

2020

KFE 第47期

一周推荐

算法

字符串压缩

字符串压缩。利用字符重复出现的次数，编写一种方法，实现基本的字符串压缩功能。比如，字符串aabcccccaaa会变为a2b1c5a3。若“压缩”后的字符串没有变短，则返回原先的字符串。你可以假设字符串中只包含大小写英文字母（a至z）。

土味来一波

“你最近是不是又胖了？”

“没有啊，为什么这么说？”

“那为什么，在我心里的分量越来越重了？”

文章整理来自互联网，不作商业用途，如侵权，请联系删除

2020-03-06

2020

KFE 第46期

一周推荐

记好这 24 个 ES6 方法，用来解决实际开发的 JS 问题

都是很实用的方法，值得收藏

Javascript

前端响应式布局原理与实践

你是否会经常弄混响应式和自适应？

响应式布局就是一个网站能够兼容多个终端，可以根据屏幕的大小自动调整页面的的展示方式以及布局，我们不用为每一个终端做一个特定的版本。

自适应布局是指网页能够在不同大小的终端设备上自行适应显示，也就是让一个网站在不同大小的设备上显示同一样的页面，让同一个页面适应不同大小屏幕，根据屏幕的大小，自动缩放。

响应式 自适应

算法

土味来一波

我以前喜欢吃肉

但今天看到你我决定开始吃素

因为，你是我的菜

文章整理来自互联网，不作商业用途，如侵权，请联系删除

2020-03-05

2020

KFE 第45期

一周推荐

一周算法

一道腾讯面试题：厉害了我的杯

有一种玻璃杯质量确定但未知，需要检测。

有一栋100层的大楼，该种玻璃杯从某一层楼扔下，刚好会碎。

现给你两个杯子，问怎样检测出这个杯子的质量，即找到在哪一层楼刚好会碎？

土味来一波

我们来玩木头人不许动吧

好！我输了

为什么？

因为我心动了！

文章整理来自互联网，不作商业用途，如侵权，请联系删除

2017-11-27

2017

KFE 第44期

一周推荐

数据可视化概览

数据可视化让我们可以对一些复杂的数据有一个直观的认识，容易从数据中发现一些。

数据可视化

一周技能加油站

overscroll-behavior

overscroll-behavior是CSS的新属性，允许开发者覆盖默认的浏览器行为。例如多个滚动条引起的滚动链接又或者是浏览器默认的下来刷新。一系列的问题可能给开发者带来很大的不便。

overscroll-behavior 属性有 3 个值：

1.auto - 默认。元素的滚动会传播给祖先元素。

2.contain - 阻止滚动链接。滚动不会传播给祖先，但会显示元素内的原生效果。例如，Android 上的炫光效果或 iOS 上的回弹效果，当用户触摸滚动边界时会通知用户。注意：overscroll-behavior: contain 在 html 元素上使用可防止滚动导航操作。

3.none - 和 contain 一样，但它也可以防止节点本身的滚动效果（例如 Android 炫光或 iOS 回弹）。

https://github.com/dev-reading/fe/blob/master/articles/2017-11-15-overscroll-behavior.md

一周挑战

前端安全之XSS

XSS攻击全称跨站脚本攻击，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。

比如发布评论，提交含有Javascript的内容文本，如果服务器没有过滤掉这些脚本，作为发布内容发布到页面上，其它用户访问这个页面的时候就会执行这些脚本，从而有可能影响用户正常访问页面。

攻击举例：反射型XSS、持久型XSS、DOM-based XSS

[https://baike.baidu.com/item/XSS%E6%94%BB%E5%87%BB](https://baike.baidu.com/item/XSS%E6%94%BB%E5%87%BB)
[http://www.imooc.com/article/13553](http://www.imooc.com/article/13553)

一周段子

在逗逼室友的电脑里发现几个文件夹，黑丝高清，青春小妹……我抱着一丢丢好奇打开，发现全是要背的法律文献，问这货，这货居然说是为了诱惑自己打开

2017-10-30

2017

KFE 第43期

一周推荐

使用 Chrome DevTools 调试 JavaScript

Chrome DevTools还有特别多好用的调试功能

chrome devtools

RESTful API 设计最佳实践

以往API的设计都是按照需求名字命名，但是实际上也可以按照一定的准则来设计出更加直观、简介的API

RESTful API

一周技能加油站

sticky

position:sticky是一个新的css3属性，
它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

想想都觉得特别棒是不是！！！

使用非常简单：

.sticky { 
    position: -webkit-sticky; 
    position:sticky; 
    top: 15px;  
}

效果怎么样，谁用谁知道

一周挑战（每周提供一道面试题）

http的状态码一直以来都是前端的重要基础，但是往往又被忽略。

http状态码由三位数组成，第一位表示状态码的响应类型

1xx  表示请求已经接收了           
2xx  表示请求已经接收成功并处理掉了 
3xx  表示请求已经重定向 
4xx  表示客户端错误，可能请求有语法错误或者无法识别等  
5xx  表示服务器端的错误

常见状态码：
200   OK 请求成功了
400   客户端请求有语法错误
401   请求没有经过授权
403   服务端收到请求但是拒绝响应
404   请求的资源没有找到 
500   服务器发生不可预期的一个错误
503   服务器暂时发生错误，可能过一会就会好

喵星人帮你来记 HTTP 状态码

一周段子

一次出去逛街，碰到一扫马路的老汉在上坡路

上拉双轮车，我就跑过去帮他推，确实是特别

重，把我累的直喘气，上完坡老汉给我道谢。

我就客气的回了句：“这是我推过最累的车。”

老汉：“小伙子，你还没有结婚，这话说的有点早了。”

文章整理来自互联网，不作商业用途，如侵权，请联系删除

2017-09-11

2017

KFE 第42期

一周推荐

如何编写轻量级 CSS 框架

各种各样的CSS框架层出不穷，稍微大点的，功能不能完全用上，小的功能却有可能不能满足自己的需求，何不动手自己编写自己的一个轻量级CSS框架

CSS 轻量CSS框架

使用浏览器开发者工具检查CSS动画性能

仅使用CSS的Opacity，Transforms 和Filters用于动画效果，才可以做出比较顺滑的动画。

CSS CSS动画

ECMAScript规范中定义了null == undefined会返回true。undefined表示一个变量最原始的状态，而非人为的操作的结果。JavaScript 中的函数都有返回值，当没有 return 操作时，就默认返回一个原始的状态值，这个值就是 undefined，表明函数的返回值未被定义。
而null表示一个对象被人为的重置为空对象，而非一个变量最原始的状态。
所以，在实际使用过程中，为了保证变量所代表的语义，不要对一个变量显式的赋值 undefined，当需要释放一个对象时，直接赋值为 null 即可。

一周技能加油站

getBoundingClientRect介绍

getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。

该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；这里的top、left和css中的理解很相似，width、height是元素自身的宽高，但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。

应用场景：通过getBoundingClientRect判断元素是否在可视区域

function isElementInViewport (el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

参考：
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

https://div.io/topic/1400

一周挑战（每周提供一道面试题）

javascript中的浅拷贝和深拷贝？
简单的理解就是，浅拷贝和深拷贝只针对Object和Array这样复杂的对象，浅拷贝只复制一层对象的属性，而深拷贝则递归拷贝所有层级。

浅拷贝的实现
function shallowCopy(obj) {
    var newObj = {}
    for(var i in obj) {
        newObj[i] = obj[i]
    }
    
    return newObj
}
缺点是没有实现真正意义上的拷贝，如果源对象的子属性也是引用对象，所以实际上拷贝的是内存的一个引用地址，源对象的子属性发生修改也会作用到新的拷贝对象。

深拷贝的实现
function deepCopy(p, c) {
　var c = c || {};
　for (var i in p) {
　　if (typeof p[i] === 'object') {
　　　c[i] = (p[i].constructor === Array) ? [] : {};
　　　deepCopy(p[i], c[i]);
　　} else {
　　　c[i] = p[i];
　　}
　}
　return c;
}

一周段子

“妹，别哭啊，到底发生什么了？”
“唔唔，昨天我在你卧室睡觉，姐夫以为我是你，就把我给那个了。”
“妹，你为什么不叫呢？”
“太快了，还没来得及叫。”

文章整理来自互联网，不作商业用途，如侵权，请联系删除

2017-08-16

2017

KFE 第41期

一周推荐

JavaScript 包管理的前世今生

文章涉及了多知识点，不懂地方需要自己关注。

Yarn npm

Grab 前端技术指南(上)

Grab 前端技术指南(中)

Grab 前端技术指南(下)

内容虽然有点多，但是却可以更快帮助新员工熟悉Grab的开发技术栈。

前端指南

Chrome浏览器控制台（console）花式调试

console不止只有log这个方法，还有dir，time，assert等等调试的技巧

console

移动web资源整理

非常全的移动Web资源整理，简直造福程序员

移动web

一周技能加油站

相信很多前端er对cookie的印象，基本都是停留在set cookie的value以及expires,但是cookie其实远没有我们了解的这两个属性。今天回顾什么是cookie

什么是cookie?

Cookie 就是浏览器储存在用户电脑上的一小段文本文件
Cookie 是纯文本格式，不包含任何可执行的代码
Cookie 由键值对构成，由分号和空格隔开
Cookie 虽然是存储在浏览器，但是通常由服务器端进行设置
Cookie 的大小限制在 4kb 左右

expires

expires用来设置cookie的失效时间，且是GMT 格式的时间（可以通过 new Date().toGMTString() 或者 new Date().toUTCString() 来获得）。

cookie失效之后，document.cookie就访问不到这个cookie了，请求的时候也不会带上这个cookie。

max-age

max-age也是控制cookie的失效时刻。在新的 http/1.1 协议中 expires 已经由 max-age 选项代替。

*max-age 的值是一个以秒为单位时间段 (Cookie 失效时刻 = 创建时刻 + max-age)

优先级：同时设置了 max-age 和 expires，以 max-age 的时间为准

domain

domain 默认值为设置该 Cookie 的网页所在的域名
path

path 默认值为设置该 Cookie 的网页所在的目录。

name、path 和 domain 是唯一标识一个 Cookie
secure

secure选项用来设置 Cookie 只在确保安全的请求中才会发送。当请求是 HTTPS 或者其他安全协议时，包含 secure 选项的 Cookie 才能被保存到浏览器或者发送至服务器。
httpOnly

选项用来设置 Cookie 是否能通过 js 去访问。默认情况下，Cookie 不会带 httpOnly 选项(即为空)，客户端是可以通过 js 代码去访问（包括读取、修改、删除等）这个 Cookie 的。当 Cookie 带 httpOnly 选项时，客户端则无法通过 js 代码去访问（包括读取、修改、删除等）这个 Cookie。

这种类型的 Cookie 只能通过服务端来设置，发送请求的时候，我们看到请求头还是会带上这个设置了 httpOnly 的 Cookie

可以设置 Cookie 的下列选项：expires、domain、path，各个键值对之间都要用 ; 和空格隔开

1	document.cookie='name=value; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=sankuai.com; path=/';

secure

只有在 https 协议的网页中，客户端设置 secure 类型的 Cookie 才能成功
HttpOnly

客户端中无法设置 HttpOnly 选项

重要点

删除一个cookie，只要将一个cookie的max-age设置为0，就可以删除
Cookie 的作用域和作用路径

只要满足作用域和作用路径，请求就会带上 Cookie，即使端口号不一样。

子域会带上父域的cookie。

子路径也会带上父路径的cookie，但是父路径无法带上子路径内的cookie。

参考：
Cookie 在前端中的实践

一周挑战（每周提供一道面试题）

什么是函数节流？

由于在浏览器中，如果频繁的操作DOM，会相当消耗性能，通过函数节流的方式则可以大大减少对DOM的操作。

所谓函数节流，就是让一个函数无法在很短的时间间隔内连续调用，只有等到上一个函数执行后过了你规定的时间间隔，才能进行下一次调用。

具体实现：
// 方法一：JavaScript高级程序设计
var throttle = function(method, context){
    
    clearTimeout(method.id)
    method.id = setTimeout(function() {
        method.apply(context)
    }, 100)
}

// 调用
window.onresize = function() {
    throttle(myFunc)
}

// 方法二： impress
var throttle = function(fn, delay) {
    var timer = null
    return function() {
        var context = this, args = argument
        clearTimeout(timer)
        timer = setTimeout(function() {
            fn.apply(context, args)
        }, delay)
    }
}

window.onresize = throttle(myFunc, 100)

一周段子

去姐家蹭饭，蒸螃蟹，姐夫夹了一个给我。四岁的小外甥女：”爸爸你吃“。”爸爸不吃，留给小姨和宝宝吃“。小外甥女：”爸爸你不能这样，你要对自己好一点，你天天跟牛似的还不吃饭，你累死了，会有别的叔叔花你的钱，住你的房子，睡你的老婆，打你的宝宝的！吃！赶紧吃

文章整理来自互联网，不作商业用途，如侵权，请联系删除

2017-07-31

2017

KFE 第40期

一周推荐

精选！15 个必备的 VSCode 插件

最近开始用VSCode，总体感觉不错，虽然没有sublime Text各种快捷键，但是IDE的集成不错，尤其是终端的集成

VSCode

总结个人使用过的移动端布局方法

不同的移动布局方案适合不同的场景，正如作者总结的，现在移动站已经开始普遍使用rem，而有大量CSS3动画这适合设置viewport

移动布局

浏览器中唤起native app || 跳转到应用商城下载

近期刚好也有遇到这样的需求，mark

native app

纯 CSS 实现波浪效果！

奇技淫巧，有木有

CSS 波浪效果

你一定要知道的 Chrome DevTool 新功能

新的 Audits 面板基于 Lighthouse , 它提供了一套全面的测试来评估网页的质量。测试的类别分别是性能、可访问性、最佳实践和 PWA（Progressive Web Apps）。

Chrome DevTool

一周技能加油站

什么是 rem?

顾名思义就是以根元素(root)为参照物的 em 单位

根据 W3C 规范中对 1rem 的定义：

1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时，rem 单位以该属性的初始值作参照。

这就意味着 1rem 等于 html 元素的字体大小（大部分浏览器根元素的字体大小为16px）

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem

但是这种计算是十分麻烦的，于是就有了Snook 的62.5

因为 rem 单位与根元素相关联，Snook 改进后的方案变为了：

1
2
3

html { font-size: 62.5%; }  /* =10px */
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

http://www.zcfy.cc/article/understanding-and-using-rem-units-in-css-1411.html

一周挑战（每周提供一道面试题）

1 2	1像素边框问题？由于不同手机的像素密度不同，所以css中1px不等于移动设备的1px

一周段子

女秘帮老总设置计算机，询问老总想用什么词做为登陆系统的密码，老总坏笑地告诉女秘输入Penis，女秘一言不发，直接输入，结果电脑显示：Password rejected. Not long enough.

老总晕倒，女秘书笑翻。

文章整理来自互联网，不作商业用途，如侵权，请联系删除

一周推荐

算法

土味来一波

一周推荐

算法

土味来一波

一周推荐

算法

土味来一波

一周推荐

算法

土味来一波

一周推荐

一周算法

土味来一波

一周推荐

一周技能加油站

overscroll-behavior

一周挑战

一周段子

一周推荐

一周技能加油站

sticky

一周挑战（每周提供一道面试题）

一周段子

一周推荐

一周技能加油站

一周挑战（每周提供一道面试题）

一周段子

一周推荐

一周技能加油站

什么是cookie?

Cookie 的属性选项

客户端设置 Cookie

重要点

一周挑战（每周提供一道面试题）

一周段子

一周推荐

一周技能加油站

一周挑战（每周提供一道面试题）

一周段子