趁你还年轻

趁你还年轻 查看完整档案

杭州编辑杭州电子科技大学  |  通信工程 编辑微点(杭州)网络科技有限公司  |  前端开发工程师 编辑 blog.frankkai.cn 编辑
编辑

会写点前端

个人动态

趁你还年轻 发布了文章 · 10月15日

express中间件原理connect

express中间件原理connect

不知道用了express.js的你有没有这样的疑问:

  • app.use为什么可以添加一个又一个中间件?
  • connect是如何区分普通中间件和错误中间件的?
  • 中间件处理函数中的next指代的又是什么?

我简单看了一下connect源码,弄清楚了上面的这3个问题。

app.use为什么可以添加一个又一个中间件?

app.use(function middleware1(req, res, next) {
  // middleware 1
  next();
});
app.use(function middleware2(req, res, next) {
  // middleware 2
  next();
});

connect维护了一个中间件栈(middleware stack)

数据结构:栈(stack)

每次调用use,都会向这个应用(app)实例的栈(stack)推入一个带路径和处理函数的对象。

源码:

function createServer() {
  function app(req, res, next){ app.handle(req, res, next); }
  // ...
  app.stack = []; // 注意这里
  return app;
}
proto.use = function use(route, fn) {
  var handle = fn;
  var path = route;
  // ...
  // add the middleware
  this.stack.push({ route: path, handle: handle });

  return this;
};

connect是如何区分普通中间件和错误中间件的?

// regular middleware
app.use(function (req, res, next) {
  next(new Error('boom!'));
});

// error middleware
app.use(function onerror(err, req, res, next) {
  // an error occurred!
});

JavaScript的函数的长度属性:length。

这么说可能比较绕,看下面这个例子就懂了。

例如

function test1(foo,bar){ }
test.length // 2

function test2(foo,bar,baz){ }
test.length // 3

connect正是通过中间件处理函数的形参长度来区分出普通中间件和错误中间件的。

function call(handle, route, err, req, res, next) {
  var arity = handle.length;
  var error = err;
  var hasError = Boolean(err);

  try {
    if (hasError && arity === 4) {
      // error-handling middleware
      handle(err, req, res, next);
      return;
    } else if (!hasError && arity < 4) {
      // request-handling middleware
      handle(req, res, next);
      return;
    }
  } catch (e) {
    // replace the error
    error = e;
  }

  // continue
  next(error);
}

看了源码,官方文档对错误处理中间件描述skipping any error middleware above that middleware and any non-error middleware below的解释其实也懂了:

  • 跳过前面的所有错误中间件:index值是递增的,请求只走后面的错误中间件
  • 跳过后面的非异常处理中间件:异常中间件两个条件都满足请求会进入,非异常中间件由于hasError为true因此请求不会进入

只能有一个异常处理中间件吗?
可以有多个。(官方文档+亲测)

app.use(logErrors)
app.use(clientErrorHandler)
app.use(errorHandler)
// error middleware one
app.use(function onerror(err, req, res, next) {
  // an error occurred!
  next(err) // 注意要这么写,next()进入不到下一个异常处理中间件
});
// error middleware two
app.use(function onerror(err, req, res, next) {
  // an error occurred!
});

中间件处理函数中的next指代的又是什么?

指代的是栈中的下一个中间件。

proto.handle = function handle(req, res, out) {
  var index = 0;
  var stack = this.stack;
  // ...
  function next(err) {
    // next callback
    var layer = stack[index++];

    // call the layer handle
    call(layer.handle, route, err, req, res, next);
  }

  next();
};

通过上面代码可以看出,每次调用next()函数,会执行index++,layer为middleware stack中的下一个中间件。

其中layer.handle来自于this.stack.push({ route: path, handle: handle });

期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:

努力成为优秀前端工程师!
查看原文

赞 2 收藏 2 评论 0

趁你还年轻 提出了问题 · 9月4日

请教一下 Object.defineProperty 的应用场景

除了 vue 的双向数据绑定,这个 api 有更多的应用场景吗?

前端 SF 友们都来说说呗,不胜感激

关注 4 回答 2

趁你还年轻 回答了问题 · 8月28日

此图片来自微信公众平台未经允许不可引用该怎么办?

这是一个“Referrer防盗链”问题。

阿里云OSS上的资源也可以设置防盗链。
OSS 提供 HTTP Referer 白名单配置,用于防止他人盗用 OSS 数据,了解 设置防盗链使用指南

微信设置了HTTP Referrer白名单,用于放置他人盗取微信平台图片。

image.png

想要解决”此图片来自微信公众平台,未经允许不可引用“的问题。

head标签内加上下面这行标签即可。

<meta name="referrer" content="no-referrer">

为什么可以呢?

默认情况下,浏览器会在请求头上带上Referrer:location.origin,被访问网站在接到这样的一个请求访问时,可以根据Referrer请求头做出权限控制。

微信官方根据Referrer HTTP Request header做了权限控制,当访问网站不在自己的信任名单中时,会返回一张”此图片来自微信公众平台,未经允许不可引用“的图片。

引用策略剖析

  • HTTP有一个概念叫做引用策略(Referrer Policy),简单理解就是在Request头中是否发送Referrer头
  • 浏览器可以通过meta标签去设置引用策略,上面的name可以理解为策略key,content可以理解为策略value
  • 默认情况下的引用策略是Referrer Policy:no-referrer-when-downgrade,会在被访问网站安全的情况下在Request头中是否发送Referrer: location.origin
  • 当设置为name="referrer" content="no-referrer"时,Referrer Policy:no-referrer,请求头Request中不会带上Referrer头

形象理解

默认引用策略情况下:

General
Referrer Policy:no-referrer-when-downgrade

Request Headers
Referrer: http://foo.bar.baz.com(location.origin)

设置content="no-referrer"情况下:

General
Referrer Policy:no-referrer

Request Headers
Referrer(没有这个请求头)

参考:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name

关注 8 回答 7

趁你还年轻 赞了问题 · 8月28日

此图片来自微信公众平台未经允许不可引用该怎么办?

网站上有些文章的图片是复制的微信,现在失效了该怎么办呢?

关注 8 回答 7

趁你还年轻 赞了回答 · 8月28日

此图片来自微信公众平台未经允许不可引用该怎么办?

head标签里添加 <meta name="referrer" content="never">

关注 8 回答 7

趁你还年轻 发布了文章 · 6月17日

浅谈浏览器架构、单线程js、事件循环、消息队列、宏任务和微任务

浏览器原理.jpg

关键词:多进程、单线程、事件循环、消息队列、宏任务、微任务

看到这些词仿佛比较让人摸不着头脑,其实在我们的日常开发中,早就和他们打过交道了。

我来举几个常见的例子:

  • 我执行了一段js,页面就卡了挺久才有响应
  • 我触发了一个按钮的click事件,click事件处理器做出了响应
  • 我用setTimeout(callback, 1000)给代码加了1s的延时,1秒里发生了很多事情,然后功能正常了
  • 我用setInterval(callback, 100)给代码加了100ms的时间轮训,直到期待的那个变量出现再执行后续的代码,并且结合setTimeout删除这个定时器
  • 我用Promise,async/await顺序执行了异步代码
  • 我用EventEmitter、new Vue()做事件广播订阅
  • 我用MutationObserver监听了DOM更新
  • 我手写了一个Event类做事件的广播订阅
  • 我用CustomEvent创建了自定义事件
  • 我·······

其实上面举的这些click, setTimeout, setInterval, Promise,async/await, EventEmitter, MutationObserver, Event类, CustomEvent多进程、单线程、事件循环、消息队列、宏任务、微任务或多或少的都有所联系。

而且也与浏览器的运行原理有一些关系,作为每天在浏览器里辛勤耕耘的前端工程师们,浏览器的运行原理(多进程、单线程、事件循环、消息队列、宏任务、微任务)可以说是必须要掌握的内容了,不仅对面试有用,对手上负责的开发工作也有很大的帮助。

  • 浅谈浏览器架构

    • 浏览器可以是哪种架构?
    • 如何理解Chrome的多进程架构?
    • 前端最核心的渲染进程包含哪些线程?

      • 主线程(Main thread)(下载资源、执行js、计算样式、进行布局、绘制合成)
      • 光栅线程(Raster thread)
      • 合成线程(Compositor thread)
      • 工作线程(Worker thread)
  • 浅谈单线程js

    • js引擎图
    • 什么是单线程js?
    • 单线程js属于浏览器的哪个进程?
    • js为什么要设计成单线程的?
  • 事件循环与消息队列

    • 什么是事件循环?
    • 什么是消息队列?
    • 如何实现一个 EventEmitter(支持 on,once,off,emit)?
  • 宏任务和微任务

    • 哪些属于宏任务?
    • 哪些属于微任务?
    • 事件循环,消息队列与宏任务、微任务之间的关系是什么?
    • 微任务添加和执行流程示意图
  • 浏览器页面循环系统原理图

    • 消息队列和事件循环
    • setTimeout
    • XMLHttpRequest
    • 宏任务
  • 参考资料

浅谈Chrome架构

浏览器可以是哪种架构?

浏览器本质上也是一个软件,它运行于操作系统之上,一般来说会在特定的一个端口开启一个进程去运行这个软件,开启进程之后,计算机为这个进程分配CPU资源、运行时内存,磁盘空间以及网络资源等等,通常会为其指定一个PID来代表它。

先来看看我的机器上运行的微信和Chrome的进程详情

软件CPU(%)线程PID内存端口
微信0.146587555MB124301
Chrome7.948481603MB1487

如果自己设计一个浏览器,浏览器可以是那种架构呢?

  • 单进程架构(线程间通信)
  • 多进程架构(进程间IPC通信)

如果浏览器单进程架构的话,需要在一个进程内做到网络、调度、UI、存储、GPU、设备、渲染、插件等等任务,通常来说可以为每个任务开启一个线程,形成单进程多线程的浏览器架构。

但是由于这些功能的日益复杂,例如将网络,存储,UI放在一个线程中的话,执行效率和性能越来越地下,不能再向下拆分出类似“线程”的子空间

因此,为了逐渐强化浏览器的功能,于是产生了多进程架构的浏览器,可以将网络、调度、UI、存储、GPU、设备、渲染、插件等等任务分配给多个单独的进程,在每一个单独的进程内,又可以拆分出多个子线程,极大程度地强化了浏览器。

如何理解Chrome的多进程架构?

Chrome作为浏览器届里的一哥,他也是多进程IPC架构的。
image

Chrome多进程架构主要包括以下4个进程:

  • Browser进程(负责地址栏、书签栏、前进后退、网络请求、文件访问等)
  • Renderer进程(负责一个Tab内所有和网页渲染有关的所有事情,是最核心的进程
  • GPU进程(负责GPU相关的任务)
  • Plugin进程(负责Chrome插件相关的任务)

Chrome 多进程架构的优缺点
优点

  • 每一个Tab就是要给单独的进程
  • 由于每个Tab都有自己独立的Renderer进程,因此某一个Tab出问题不会影响其它Tab

缺点

  • Tab间内存不共享,不同进程内存包含相同内容

Chrome多进程架构实锤图
image

前端最核心的渲染(Renderer)进程包含哪些线程?

image

渲染进程主要包括4个线程:

  • 主线程(Main thread)(下载资源、执行js、计算样式、进行布局、绘制合成)
  • 光栅线程(Raster thread)
  • 合成线程(Compositor thread)
  • 工作线程(Worker thread)

渲染进程的主线程知识点:

  • 下载资源:主线程可以通过Browser进程的network线程下载图片,css,js等渲染DOM需要的资源文件
  • 执行JS:主线程在遇到<script>标签时,会下载并且执行js,执行js时,为了避免改变DOM的结构,解析HTML停滞,js执行完成后继续解析HTML。正是因为JS执行会阻塞UI渲染,而JS又是浏览器的一哥,因此浏览器常常被看做是单线程的。
  • 计算样式:主线程会基于CSS选择器或者浏览器默认样式去进行样式计算,最终生成Computed Style
  • 进行布局:主线程计算好样式以后,可以确定元素的位置信息以及盒模型信息,对元素进行布局
  • 进行绘制:主线程根据先后顺序以及层级关系对元素进行渲染,通常会生成多个图层
  • 最终合成:主线程将渲染后的多个frame(帧)合成,类似flash的帧动画和PS的图层

渲染进程的主线程细节可以查阅Chrome官方的博客:Inside look at modern web browser (part 3)Rendering Performance

渲染进程的合成线程知识点:

  • 浏览器滚动时,合成线程会创建一个新的合成帧发送给GPU
  • 合成线程工作与主线程无关,不用等待样式计算或者JS的执行,因此合成线程相关的动画比涉及到主线程重新计算样式和js的动画更加流畅

下面来看下主线程、合成线程和光栅线程一起作用的过程
1.主线程主要遍历布局树生成层树
image
2.栅格线程栅格化磁贴到GPU
image
3.合成线程将磁贴合成帧并通过IPC传递给Browser进程,显示在屏幕上
image

图片引自Chrome官方博客:Inside look at modern web browser (part 3)

浅谈单线程js

js引擎图

应用程序(实现)方言和最后版本ECMAScript版本
Google Chrome,V8引擎JavaScriptECMA-262,版本6
Mozilla Firefox,Gecko排版引擎,SpiderMonkey和RhinoJavaScript 1.8.5ECMA-262,版本6
Safari,Nitro引擎JavaScriptECMA-262,版本6
Microsoft Edge,Chakra引擎JavaScriptEMCA-262,版本6
Opera,Carakan引擎(改用V8之前)一些JavaScript 1.5特性及一些JScript扩展[12]ECMA-262,版本5.1
KHTML排版引擎,KDE项目的KonquerorJavaScript 1.5ECMA-262,版本3
Adobe AcrobatJavaScript 1.5ECMA-262,版本3
OpenLaszloJavaScript 1.4ECMA-262,版本3
Max/MSPJavaScript 1.5ECMA-262,版本3
ANT Galio 3JavaScript 1.5附带RMAI扩展ECMA-262,版本3

什么是单线程js?

如果仔细阅读过第一部分“谈谈浏览器架构”的话,这个答案其实已经非常显而易见了。
在”前端最核心的渲染进程包含哪些线程?“这里我们提到了主线程(Main thread)(下载资源、执行js、计算样式、进行布局、绘制合成,注意其中的执行js,这里其实已经明确告诉了我们Chrome中JavaScript运行的位置。

那么Chrome中JavaScript运行的位置在哪里呢?

渲染进程(Renderer Process)中的主线程(Main Thread)

单线程js属于浏览器的哪个进程?

单线程的js -> 主线程(Main Thread)-> 渲染进程(Renderer Process)

js为什么要设计成单线程的?

其实更为严谨的表述是:“浏览器中的js执行和UI渲染是在一个线程中顺序发生的。”

这是因为在渲染进程的主线程在解析HTML生成DOM树的过程中,如果此时执行JS,主线程会主动暂停解析HTML,先去执行JS,等JS解析完成后,再继续解析HTML。

那么为什么要“主线程会主动暂停解析HTML,先去执行JS,再继续解析HTML呢”?

这是主线程在解析HTML生成DOM树的过程中会执行style,layout,render以及composite的操作,而JS可以操作DOM,CSSOM,会影响到主线程在解析HTML的最终渲染结果,最终页面的渲染结果将变得不可预见。

如果主线程一边解析HTML进行渲染,JS同时在操作DOM或者CSSOM,结果会分为以下情况:

  • 以主线程解析HTML的渲染结果为准
  • 以JS同时在操作DOM或者CSSOM的渲染结果为准

考虑到最终页面的渲染效果的一致性,所以js在浏览器中的实现,被设计成为了JS执行阻塞UI渲染型。

事件循环

什么是事件循环?

事件循环英文名叫做Event Loop,是一个在前端届老生常谈的话题。
我也简单说一下我对事件循环的认识:

事件循环可以拆为“事件”+“循环”。
先来聊聊“事件”:

如果你有一定的前端开发经验,对于下面的“事件”一定不陌生:

  • click、mouseover等等交互事件
  • 事件冒泡、事件捕获、事件委托等等
  • addEventListener、removeEventListener()
  • CustomEvent(自定义事件实现自定义交互)
  • EventEmitter、EventBus(on,emit,once,off,这种东西经常出面试题)
  • 第三方库的事件系统

有事件,就有事件处理器:在事件处理器中,我们会应对这个事件做一些特殊操作。

那么浏览器怎么知道有事件发生了呢?怎么知道用户对某个button做了一次click呢?

如果我们的主线程只是静态的,没有循环的话,可以用js伪代码将其表述为:

function mainThread() {
     console.log("Hello World!");
     console.log("Hello JavaScript!");
}
mainThread();

执行完一次mainThread()之后,这段代码就无效了,mainThread并不是一种激活状态,对于I/O事件是没有办法捕获到的。

因此对事件加入了“循环”,将渲染进程的主线程变为激活状态,可以用js伪代码表述如下:

// click event
function clickTrigger() {
    return "我点击按钮了"
}
// 可以是while循环
function mainThread(){
    while(true){
        if(clickTrigger()) { console.log(“通知click事件监听器”) }
        clickTrigger = null;
     }
}
mainThread();

也可以是for循环

for(;;){
    if(clickTrigger()) { console.log(“通知click事件监听器”) }
    clickTrigger = null;
}

在事件监听器中做出响应:

button.addEventListener('click', ()=>{
    console.log("多亏了事件循环,我(浏览器)才能知道用户做了什么操作");
})

什么是消息队列?

消息队列可以拆为“消息”+“队列”。
消息可以理解为用户I/O;队列就是先进先出的数据结构。
而消息队列,则是用于连接用户I/O与事件循环的桥梁。

队列数据结构图

image

入队出队图

image

在js中,如何发现出队列FIFO的特性?

下面这个结构大家都熟悉,瞬间体现出队列FIFO的特性。

// 定义一个队列
let queue = [1,2,3];
// 入队
queue.push(4); // queue[1,2,3,4]
// 出队
queue.shift(); // 1 queue [2,3,4]

假设用户做出了"click button1","click button3","click button 2"的操作。
事件队列定义为:

const taskQueue = ["click button1","click button3","click button 2"];
while(taskQueue.length>0){
    taskQueue.shift(); // 任务依次出队
}

任务依次出队:
"click button1"
"click button3"
"click button 2"

此时由于mainThread有事件循环,它会被浏览器渲染进程的主线程事件循环系统捕获,并在对应的事件处理器做出响应。

button1.addEventListener('click', ()=>{
    console.log("click button1");
})
button2.addEventListener('click', ()=>{
    console.log("click button 2");
})
button3.addEventListener('click', ()=>{
   console.log("click button3")
})

依次打印:"click button1","click button3","click button 2"。

因此,可以将消息队列理解为连接用户I/O操作和浏览器事件循环系统的任务队列

如何实现一个 EventEmitter(支持 on,once,off,emit)?

/**
 * 说明:简单实现一个事件订阅机制,具有监听on和触发emit方法
 * 示例:
 * on(event, func){ ... }
 * emit(event, ...args){ ... }
 * once(event, func){ ... }
 * off(event, func){ ... }
 * const event = new EventEmitter();
 * event.on('someEvent', (...args) => {
 *     console.log('some_event triggered', ...args);
 * });
 * event.emit('someEvent', 'abc', '123');
 * event.once('someEvent', (...args) => {
 *     console.log('some_event triggered', ...args);
 * });
 * event.off('someEvent', callbackPointer); // callbackPointer为回调指针,不能是匿名函数
 */
class EventEmitter {
  constructor() {
    this.listeners = [];
  }
  on(event, func) {
    const callback = (listener) => listener.name === event;
    const idx = this.listeners.findIndex(callback);
    if (idx === -1) {
      this.listeners.push({
        name: event,
        callbacks: [func],
      });
    } else {
      this.listeners[idx].callbacks.push(func);
    }
  }
  emit(event, ...args) {
    if (this.listeners.length === 0) return;
    const callback = (listener) => listener.name === event;
    const idx = this.listeners.findIndex(callback);
    if (idx === -1) return;
    const listener = this.listeners[idx];

    if (listener.isOnce) {
      listener.callbacks[0](...args);
      this.listeners.splice(idx, 1);
    } else {
      listener.callbacks.forEach((cb) => {
        cb(...args);
      });
    }
  }
  once(event, func) {
    const callback = (listener) => listener.name === event;
    let idx = this.listeners.findIndex(callback);
    if (idx !== -1) return;
    this.listeners.push({
      name: event,
      callbacks: [func],
      isOnce: true,
    });
  }
  off(event, func) {
    if (this.listeners.length === 0) return;
    const callback = (listener) => listener.name === event;
    let idx = this.listeners.findIndex(callback);
    if (idx === -1) return;
    let callbacks = this.listeners[idx].callbacks;
    for (let i = 0; i < callbacks.length; i++) {
      if (callbacks[i] === func) {
        callbacks.splice(i, 1);
        break;
      }
    }
  }
}

// let event = new EventEmitter();
// let onceCallback = (...args) => {
//   console.log("once_event triggered", ...args);
// };
// let onceCallback1 = (...args) => {
//   console.log("once_event 1 triggered", ...args);
// };
// // once仅监听一次
// event.once("onceEvent", onceCallback);
// event.once("onceEvent", onceCallback1);
// event.emit("onceEvent", "abc", "123");
// event.emit("onceEvent", "abc", "456");

// let onCallback = (...args) => {
//   console.log("on_event triggered", ...args);
// };
// let onCallback1 = (...args) => {
//   console.log("on_event 1 triggered", ...args);
// };
// event.on("onEvent", onCallback);
// event.on("onEvent", onCallback1);
// event.emit("onEvent", "abc", "123");
// // off销毁指定回调
// event.off("onEvent", onCallback);
// event.emit("onEvent", "abc", "123");

宏任务和微任务

  • 哪些属于宏任务?
  • 哪些属于微任务?
  • 事件循环,消息队列与宏任务、微任务之间的关系是什么?
  • 微任务添加和执行流程示意图

哪些属于宏任务?

  • setTimeout
  • setInterval
  • setImmediate
  • requestAnimationFrame
  • I/O
  • UI渲染

哪些属于微任务?

  • Promise
  • MutationObserver
  • process.nextTick
  • queueMicrotask

事件循环,消息队列与宏任务、微任务之间的关系是什么?

  • 宏任务入队消息队列,可以将消息队列理解为宏任务队列
  • 每个宏任务内有一个微任务队列,执行过程中微任务入队当前宏任务的微任务队列
  • 宏任务微任务队列为空时才会执行下一个宏任务
  • 事件循环捕获队列出队的宏任务和微任务并执行

事件循环会不断地处理消息队列出队的任务,而宏任务指的就是入队到消息队列中的任务,每个宏任务都有一个微任务队列,宏任务在执行过程中,如果此时产生微任务,那么会将产生的微任务入队到当前的微任务队列中,在当前宏任务的主要任务完成后,会依次出队并执行微任务队列中的任务,直到当前微任务队列为空才会进行下一个宏任务。

微任务添加和执行流程示意图

假设在执行解析HTML这个宏任务的过程中,产生了Promise和MutationObserver这两个微任务。

// parse HTML···
Promise.resolve();
removeChild();

微任务队列会如何表现呢?

image

image

图片引自:极客时间的《浏览器工作原理与实践》

过程可以拆为以下几步:

  1. 主线程执行JS Promise.resolve(); removeChild();
  2. parseHTML宏任务暂停
  3. Promise和MutationObserver微任务入队到parseHTML宏任务的微任务队列
  4. 微任务1 Promise.resolve()执行
  5. 微任务2 removeChild();执行
  6. 微任务队列为空,parseHTML宏任务继续执行
  7. parseHTML宏任务完成,执行下一个宏任务

浏览器页面循环系统原理图

以下所有图均来自极客时间《《浏览器工作原理与实践》- 浏览器中的页面循环系统》,可以帮助理解消息队列,事件循环,宏任务和微任务。

  • 消息队列和事件循环
  • setTimeout
  • XMLHttpRequest
  • 宏任务

消息队列和事件循环

线程的一次执行
image
在线程中引入事件循环
image
渲染进程线程之间发送任务
image

image
线程模型:队列 + 循环
image
跨进程发送消息
image
单个任务执行时间过久
image

setTimeout

长任务导致定时器被延后执行
image
循环嵌套调用 setTimeout
image

XMLHttpRequest

消息循环系统调用栈记录
image
XMLHttpRequest 工作流程图
image
HTTPS 混合内容警告
image
使用 XMLHttpRequest 混合资源失效
image

宏任务

宏任务延时无法保证
image

参考资料

如果文中有不对的地方,欢迎指正和交流~

期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:

努力成为优秀前端工程师!
查看原文

赞 29 收藏 22 评论 0

趁你还年轻 赞了文章 · 6月16日

从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理

前言

见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正。

----------超长文+多图预警,需要花费不少时间。----------

如果看完本文后,还对进程线程傻傻分不清,不清楚浏览器多进程、浏览器内核多线程、JS单线程、JS运行机制的区别。那么请回复我,一定是我写的还不够清晰,我来改。。。

----------正文开始----------

最近发现有不少介绍JS单线程运行机制的文章,但是发现很多都仅仅是介绍某一部分的知识,而且各个地方的说法还不统一,容易造成困惑。
因此准备梳理这块知识点,结合已有的认知,基于网上的大量参考资料,
从浏览器多进程到JS单线程,将JS引擎的运行机制系统的梳理一遍。

展现形式:由于是属于系统梳理型,就没有由浅入深了,而是从头到尾的梳理知识体系,
重点是将关键节点的知识点串联起来,而不是仅仅剖析某一部分知识。

内容是:从浏览器进程,再到浏览器内核运行,再到JS引擎单线程,再到JS事件循环机制,从头到尾系统的梳理一遍,摆脱碎片化,形成一个知识体系

目标是:看完这篇文章后,对浏览器多进程,JS单线程,JS事件循环机制这些都能有一定理解,
有一个知识体系骨架,而不是似懂非懂的感觉。

另外,本文适合有一定经验的前端人员,新手请规避,避免受到过多的概念冲击。可以先存起来,有了一定理解后再看,也可以分成多批次观看,避免过度疲劳。

大纲

  • 区分进程和线程
  • 浏览器是多进程的

    • 浏览器都包含哪些进程?
    • 浏览器多进程的优势
    • 重点是浏览器内核(渲染进程)
    • Browser进程和浏览器内核(Renderer进程)的通信过程
  • 梳理浏览器内核中线程之间的关系

    • GUI渲染线程与JS引擎线程互斥
    • JS阻塞页面加载
    • WebWorker,JS的多线程?
    • WebWorker与SharedWorker
  • 简单梳理下浏览器渲染流程

    • load事件与DOMContentLoaded事件的先后
    • css加载是否会阻塞dom树渲染?
    • 普通图层和复合图层
  • 从Event Loop谈JS的运行机制

    • 事件循环机制进一步补充
    • 单独说说定时器
    • setTimeout而不是setInterval
  • 事件循环进阶:macrotask与microtask
  • 写在最后的话

区分进程和线程

线程和进程区分不清,是很多新手都会犯的错误,没有关系。这很正常。先看看下面这个形象的比喻:

- 进程是一个工厂,工厂有它的独立资源

- 工厂之间相互独立

- 线程是工厂中的工人,多个工人协作完成任务

- 工厂内有一个或多个工人

- 工人之间共享空间

再完善完善概念:

- 工厂的资源 -> 系统分配的内存(独立的一块内存)

- 工厂之间的相互独立 -> 进程之间相互独立

- 多个工人协作完成任务 -> 多个线程在进程中协作完成任务

- 工厂内有一个或多个工人 -> 一个进程由一个或多个线程组成

- 工人之间共享空间 -> 同一进程下的各个线程之间共享程序的内存空间(包括代码段、数据集、堆等)

然后再巩固下:

如果是windows电脑中,可以打开任务管理器,可以看到有一个后台进程列表。对,那里就是查看进程的地方,而且可以看到每个进程的内存资源信息以及cpu占有率。

所以,应该更容易理解了:进程是cpu资源分配的最小单位(系统会给它分配内存)

最后,再用较为官方的术语描述一遍:

  • 进程是cpu资源分配的最小单位(是能拥有资源和独立运行的最小单位)
  • 线程是cpu调度的最小单位(线程是建立在进程的基础上的一次程序运行单位,一个进程中可以有多个线程)

tips

  • 不同进程之间也可以通信,不过代价较大
  • 现在,一般通用的叫法:单线程与多线程,都是指在一个进程内的单和多。(所以核心还是得属于一个进程才行)

浏览器是多进程的

理解了进程与线程了区别后,接下来对浏览器进行一定程度上的认识:(先看下简化理解)

  • 浏览器是多进程的
  • 浏览器之所以能够运行,是因为系统给它的进程分配了资源(cpu、内存)
  • 简单点理解,每打开一个Tab页,就相当于创建了一个独立的浏览器进程。

关于以上几点的验证,请再第一张图

图中打开了Chrome浏览器的多个标签页,然后可以在Chrome的任务管理器中看到有多个进程(分别是每一个Tab页面有一个独立的进程,以及一个主进程)。
感兴趣的可以自行尝试下,如果再多打开一个Tab页,进程正常会+1以上

注意:在这里浏览器应该也有自己的优化机制,有时候打开多个tab页后,可以在Chrome任务管理器中看到,有些进程被合并了
(所以每一个Tab标签对应一个进程并不一定是绝对的)

浏览器都包含哪些进程?

知道了浏览器是多进程后,再来看看它到底包含哪些进程:(为了简化理解,仅列举主要进程)

  1. Browser进程:浏览器的主进程(负责协调、主控),只有一个。作用有

    • 负责浏览器界面显示,与用户交互。如前进,后退等
    • 负责各个页面的管理,创建和销毁其他进程
    • 将Renderer进程得到的内存中的Bitmap,绘制到用户界面上
    • 网络资源的管理,下载等
  2. 第三方插件进程:每种类型的插件对应一个进程,仅当使用该插件时才创建
  3. GPU进程:最多一个,用于3D绘制等
  4. 浏览器渲染进程(浏览器内核)(Renderer进程,内部是多线程的):默认每个Tab页面一个进程,互不影响。主要作用为

    • 页面渲染,脚本执行,事件处理等

强化记忆:在浏览器中打开一个网页相当于新起了一个进程(进程内有自己的多线程)

当然,浏览器有时会将多个进程合并(譬如打开多个空白标签页后,会发现多个空白标签页被合并成了一个进程),如图

另外,可以通过Chrome的更多工具 -> 任务管理器自行验证

浏览器多进程的优势

相比于单进程浏览器,多进程有如下优点:

  • 避免单个page crash影响整个浏览器
  • 避免第三方插件crash影响整个浏览器
  • 多进程充分利用多核优势
  • 方便使用沙盒模型隔离插件等进程,提高浏览器稳定性

简单点理解:如果浏览器是单进程,那么某个Tab页崩溃了,就影响了整个浏览器,体验有多差;同理如果是单进程,插件崩溃了也会影响整个浏览器;而且多进程还有其它的诸多优势。。。

当然,内存等资源消耗也会更大,有点空间换时间的意思。

重点是浏览器内核(渲染进程)

重点来了,我们可以看到,上面提到了这么多的进程,那么,对于普通的前端操作来说,最终要的是什么呢?答案是渲染进程

可以这样理解,页面的渲染,JS的执行,事件的循环,都在这个进程内进行。接下来重点分析这个进程

请牢记,浏览器的渲染进程是多线程的(这点如果不理解,请回头看进程和线程的区分

终于到了线程这个概念了?,好亲切。那么接下来看看它都包含了哪些线程(列举一些主要常驻线程):

  1. GUI渲染线程

    • 负责渲染浏览器界面,解析HTML,CSS,构建DOM树和RenderObject树,布局和绘制等。
    • 当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行
    • 注意,GUI渲染线程与JS引擎线程是互斥的,当JS引擎执行时GUI线程会被挂起(相当于被冻结了),GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
  2. JS引擎线程

    • 也称为JS内核,负责处理Javascript脚本程序。(例如V8引擎)
    • JS引擎线程负责解析Javascript脚本,运行代码。
    • JS引擎一直等待着任务队列中任务的到来,然后加以处理,一个Tab页(renderer进程)中无论什么时候都只有一个JS线程在运行JS程序
    • 同样注意,GUI渲染线程与JS引擎线程是互斥的,所以如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞。
  3. 事件触发线程

    • 归属于浏览器而不是JS引擎,用来控制事件循环(可以理解,JS引擎自己都忙不过来,需要浏览器另开线程协助)
    • 当JS引擎执行代码块如setTimeOut时(也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等),会将对应任务添加到事件线程中
    • 当对应的事件符合触发条件被触发时,该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理
    • 注意,由于JS的单线程关系,所以这些待处理队列中的事件都得排队等待JS引擎处理(当JS引擎空闲时才会去执行)

  4. 定时触发器线程

    • 传说中的setIntervalsetTimeout所在线程
    • 浏览器定时计数器并不是由JavaScript引擎计数的,(因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确)
    • 因此通过单独线程来计时并触发定时(计时完毕后,添加到事件队列中,等待JS引擎空闲后执行)
    • 注意,W3C在HTML标准中规定,规定要求setTimeout中低于4ms的时间间隔算为4ms。
  5. 异步http请求线程

    • 在XMLHttpRequest在连接后是通过浏览器新开一个线程请求
    • 将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件,将这个回调再放入事件队列中。再由JavaScript引擎执行。

看到这里,如果觉得累了,可以先休息下,这些概念需要被消化,毕竟后续将提到的事件循环机制就是基于事件触发线程的,所以如果仅仅是看某个碎片化知识,
可能会有一种似懂非懂的感觉。要完成的梳理一遍才能快速沉淀,不易遗忘。放张图巩固下吧:

再说一点,为什么JS引擎是单线程的?额,这个问题其实应该没有标准答案,譬如,可能仅仅是因为由于多线程的复杂性,譬如多线程操作一般要加锁,因此最初设计时选择了单线程。。。

Browser进程和浏览器内核(Renderer进程)的通信过程

看到这里,首先,应该对浏览器内的进程和线程都有一定理解了,那么接下来,再谈谈浏览器的Browser进程(控制进程)是如何和内核通信的,
这点也理解后,就可以将这部分的知识串联起来,从头到尾有一个完整的概念。

如果自己打开任务管理器,然后打开一个浏览器,就可以看到:任务管理器中出现了两个进程(一个是主控进程,一个则是打开Tab页的渲染进程)
然后在这前提下,看下整个的过程:(简化了很多)

  • Browser进程收到用户请求,首先需要获取页面内容(譬如通过网络下载资源),随后将该任务通过RendererHost接口传递给Render进程
  • Renderer进程的Renderer接口收到消息,简单解释后,交给渲染线程,然后开始渲染

    • 渲染线程接收请求,加载网页并渲染网页,这其中可能需要Browser进程获取资源和需要GPU进程来帮助渲染
    • 当然可能会有JS线程操作DOM(这样可能会造成回流并重绘)
    • 最后Render进程将结果传递给Browser进程
  • Browser进程接收到结果并将结果绘制出来

这里绘一张简单的图:(很简化)

看完这一整套流程,应该对浏览器的运作有了一定理解了,这样有了知识架构的基础后,后续就方便往上填充内容。

这块再往深处讲的话就涉及到浏览器内核源码解析了,不属于本文范围。

如果这一块要深挖,建议去读一些浏览器内核源码解析文章,或者可以先看看参考下来源中的第一篇文章,写的不错

梳理浏览器内核中线程之间的关系

到了这里,已经对浏览器的运行有了一个整体的概念,接下来,先简单梳理一些概念

GUI渲染线程与JS引擎线程互斥

由于JavaScript是可操纵DOM的,如果在修改这些元素属性同时渲染界面(即JS线程和UI线程同时运行),那么渲染线程前后获得的元素数据就可能不一致了。

因此为了防止渲染出现不可预期的结果,浏览器设置GUI渲染线程与JS引擎为互斥的关系,当JS引擎执行时GUI线程会被挂起,
GUI更新则会被保存在一个队列中等到JS引擎线程空闲时立即被执行。

JS阻塞页面加载

从上述的互斥关系,可以推导出,JS如果执行时间过长就会阻塞页面。

譬如,假设JS引擎正在进行巨量的计算,此时就算GUI有更新,也会被保存到队列中,等待JS引擎空闲后执行。
然后,由于巨量计算,所以JS引擎很可能很久很久后才能空闲,自然会感觉到巨卡无比。

所以,要尽量避免JS执行时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。

WebWorker,JS的多线程?

前文中有提到JS引擎是单线程的,而且JS执行时间过长会阻塞页面,那么JS就真的对cpu密集型计算无能为力么?

所以,后来HTML5中支持了Web Worker

MDN的官方解释是:

Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面

一个worker是使用一个构造函数创建的一个对象(e.g. Worker()) 运行一个命名的JavaScript文件 

这个文件包含将在工作线程中运行的代码; workers 运行在另一个全局上下文中,不同于当前的window

因此,使用 window快捷方式获取当前全局的范围 (而不是self) 在一个 Worker 内将返回错误

这样理解下:

  • 创建Worker时,JS引擎向浏览器申请开一个子线程(子线程是浏览器开的,完全受主线程控制,而且不能操作DOM)
  • JS引擎线程与worker线程间通过特定的方式通信(postMessage API,需要通过序列化对象来与线程交互特定的数据)

所以,如果有非常耗时的工作,请单独开一个Worker线程,这样里面不管如何翻天覆地都不会影响JS引擎主线程,
只待计算出结果后,将结果通信给主线程即可,perfect!

而且注意下,JS引擎是单线程的,这一点的本质仍然未改变,Worker可以理解是浏览器给JS引擎开的外挂,专门用来解决那些大量计算问题。

其它,关于Worker的详解就不是本文的范畴了,因此不再赘述。

WebWorker与SharedWorker

既然都到了这里,就再提一下SharedWorker(避免后续将这两个概念搞混)

  • WebWorker只属于某个页面,不会和其他页面的Render进程(浏览器内核进程)共享

    • 所以Chrome在Render进程中(每一个Tab页就是一个render进程)创建一个新的线程来运行Worker中的JavaScript程序。
  • SharedWorker是浏览器所有页面共享的,不能采用与Worker同样的方式实现,因为它不隶属于某个Render进程,可以为多个Render进程共享使用

    • 所以Chrome浏览器为SharedWorker单独创建一个进程来运行JavaScript程序,在浏览器中每个相同的JavaScript只存在一个SharedWorker进程,不管它被创建多少次。

看到这里,应该就很容易明白了,本质上就是进程和线程的区别。SharedWorker由独立的进程管理,WebWorker只是属于render进程下的一个线程

简单梳理下浏览器渲染流程

本来是直接计划开始谈JS运行机制的,但想了想,既然上述都一直在谈浏览器,直接跳到JS可能再突兀,因此,中间再补充下浏览器的渲染流程(简单版本)

为了简化理解,前期工作直接省略成:(要展开的或完全可以写另一篇超长文)

- 浏览器输入url,浏览器主进程接管,开一个下载线程,
然后进行 http请求(略去DNS查询,IP寻址等等操作),然后等待响应,获取内容,
随后将内容通过RendererHost接口转交给Renderer进程

- 浏览器渲染流程开始

浏览器器内核拿到内容后,渲染大概可以划分成以下几个步骤:

  1. 解析html建立dom树
  2. 解析css构建render树(将CSS代码解析成树形的数据结构,然后结合DOM合并成render树)
  3. 布局render树(Layout/reflow),负责各元素尺寸、位置的计算
  4. 绘制render树(paint),绘制页面像素信息
  5. 浏览器会将各层的信息发送给GPU,GPU会将各层合成(composite),显示在屏幕上。

所有详细步骤都已经略去,渲染完毕后就是load事件了,之后就是自己的JS逻辑处理了

既然略去了一些详细的步骤,那么就提一些可能需要注意的细节把。

这里重绘参考来源中的一张图:(参考来源第一篇)

load事件与DOMContentLoaded事件的先后

上面提到,渲染完毕后会触发load事件,那么你能分清楚load事件与DOMContentLoaded事件的先后么?

很简单,知道它们的定义就可以了:

  • 当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片。

(譬如如果有async加载的脚本就不一定完成)

  • 当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片都已经加载完成了。

(渲染完毕了)

所以,顺序是:DOMContentLoaded -> load

css加载是否会阻塞dom树渲染?

这里说的是头部引入css的情况

首先,我们都知道:css是由单独的下载线程异步下载的。

然后再说下几个现象:

  • css加载不会阻塞DOM树解析(异步加载时DOM照常构建)
  • 但会阻塞render树渲染(渲染时需等css加载完毕,因为render树需要css信息)

这可能也是浏览器的一种优化机制。

因为你加载css的时候,可能会修改下面DOM节点的样式,
如果css加载不阻塞render树渲染的话,那么当css加载完之后,
render树可能又得重新重绘或者回流了,这就造成了一些没有必要的损耗。
所以干脆就先把DOM树的结构先解析完,把可以做的工作做完,然后等你css加载完之后,
在根据最终的样式来渲染render树,这种做法性能方面确实会比较好一点。

普通图层和复合图层

渲染步骤中就提到了composite概念。

可以简单的这样理解,浏览器渲染的图层一般包含两大类:普通图层以及复合图层

首先,普通文档流内可以理解为一个复合图层(这里称为默认复合层,里面不管添加多少元素,其实都是在同一个复合图层中)

其次,absolute布局(fixed也一样),虽然可以脱离普通文档流,但它仍然属于默认复合层

然后,可以通过硬件加速的方式,声明一个新的复合图层,它会单独分配资源
(当然也会脱离普通文档流,这样一来,不管这个复合图层中怎么变化,也不会影响默认复合层里的回流重绘)

可以简单理解下:GPU中,各个复合图层是单独绘制的,所以互不影响,这也是为什么某些场景硬件加速效果一级棒

可以Chrome源码调试 -> More Tools -> Rendering -> Layer borders中看到,黄色的就是复合图层信息

如下图。可以验证上述的说法

如何变成复合图层(硬件加速)

将该元素变成一个复合图层,就是传说中的硬件加速技术

  • 最常用的方式:translate3dtranslateZ
  • opacity属性/过渡动画(需要动画执行的过程中才会创建合成层,动画没有开始或结束后元素还会回到之前的状态)
  • will-chang属性(这个比较偏僻),一般配合opacity与translate使用(而且经测试,除了上述可以引发硬件加速的属性外,其它属性并不会变成复合层),

作用是提前告诉浏览器要变化,这样浏览器会开始做一些优化工作(这个最好用完后就释放)

  • <video><iframe><canvas><webgl>等元素
  • 其它,譬如以前的flash插件

absolute和硬件加速的区别

可以看到,absolute虽然可以脱离普通文档流,但是无法脱离默认复合层。
所以,就算absolute中信息改变时不会改变普通文档流中render树,
但是,浏览器最终绘制时,是整个复合层绘制的,所以absolute中信息的改变,仍然会影响整个复合层的绘制。
(浏览器会重绘它,如果复合层中内容多,absolute带来的绘制信息变化过大,资源消耗是非常严重的)

而硬件加速直接就是在另一个复合层了(另起炉灶),所以它的信息改变不会影响默认复合层
(当然了,内部肯定会影响属于自己的复合层),仅仅是引发最后的合成(输出视图)

复合图层的作用?

一般一个元素开启硬件加速后会变成复合图层,可以独立于普通文档流中,改动后可以避免整个页面重绘,提升性能

但是尽量不要大量使用复合图层,否则由于资源消耗过度,页面反而会变的更卡

硬件加速时请使用index

使用硬件加速时,尽可能的使用index,防止浏览器默认给后续的元素创建复合层渲染

具体的原理时这样的:
**webkit CSS3中,如果这个元素添加了硬件加速,并且index层级比较低,
那么在这个元素的后面其它元素(层级比这个元素高的,或者相同的,并且releative或absolute属性相同的),
会默认变为复合层渲染,如果处理不当会极大的影响性能**

简单点理解,其实可以认为是一个隐式合成的概念:如果a是一个复合图层,而且b在a上面,那么b也会被隐式转为一个复合图层,这点需要特别注意

另外,这个问题可以在这个地址看到重现(原作者分析的挺到位的,直接上链接):

http://web.jobbole.com/83575/

从Event Loop谈JS的运行机制

到此时,已经是属于浏览器页面初次渲染完毕后的事情,JS引擎的一些运行机制分析。

注意,这里不谈可执行上下文VOscop chain等概念(这些完全可以整理成另一篇文章了),这里主要是结合Event Loop来谈JS代码是如何执行的。

读这部分的前提是已经知道了JS引擎是单线程,而且这里会用到上文中的几个概念:(如果不是很理解,可以回头温习)

  • JS引擎线程
  • 事件触发线程
  • 定时触发器线程

然后再理解一个概念:

  • JS分为同步任务和异步任务
  • 同步任务都在主线程上执行,形成一个执行栈
  • 主线程之外,事件触发线程管理着一个任务队列,只要异步任务有了运行结果,就在任务队列之中放置一个事件。
  • 一旦执行栈中的所有同步任务执行完毕(此时JS引擎空闲),系统就会读取任务队列,将可运行的异步任务添加到可执行栈中,开始执行。

看图:

看到这里,应该就可以理解了:为什么有时候setTimeout推入的事件不能准时执行?因为可能在它推入到事件列表时,主线程还不空闲,正在执行其它代码,
所以自然有误差。

事件循环机制进一步补充

这里就直接引用一张图片来协助理解:(参考自Philip Roberts的演讲《Help, I'm stuck in an event-loop》)

上图大致描述就是:

  • 主线程运行时会产生执行栈,

栈中的代码调用某些api时,它们会在事件队列中添加各种事件(当满足触发条件后,如ajax请求完毕)

  • 而栈中的代码执行完毕,就会读取事件队列中的事件,去执行那些回调
  • 如此循环
  • 注意,总是要等待栈中的代码执行完毕后才会去读取事件队列中的事件

单独说说定时器

上述事件循环机制的核心是:JS引擎线程和事件触发线程

但事件上,里面还有一些隐藏细节,譬如调用setTimeout后,是如何等待特定时间后才添加到事件队列中的?

是JS引擎检测的么?当然不是了。它是由定时器线程控制(因为JS引擎自己都忙不过来,根本无暇分身)

为什么要单独的定时器线程?因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确,因此很有必要单独开一个线程用来计时。

什么时候会用到定时器线程?当使用setTimeoutsetInterval,它需要定时器线程计时,计时完成后就会将特定的事件推入事件队列中。

譬如:

setTimeout(function(){
    console.log('hello!');
}, 1000);

这段代码的作用是当1000毫秒计时完毕后(由定时器线程计时),将回调函数推入事件队列中,等待主线程执行

setTimeout(function(){
    console.log('hello!');
}, 0);

console.log('begin');

这段代码的效果是最快的时间内将回调函数推入事件队列中,等待主线程执行

注意:

  • 执行结果是:先beginhello!
  • 虽然代码的本意是0毫秒后就推入事件队列,但是W3C在HTML标准中规定,规定要求setTimeout中低于4ms的时间间隔算为4ms。

(不过也有一说是不同浏览器有不同的最小时间设定)

  • 就算不等待4ms,就算假设0毫秒就推入事件队列,也会先执行begin(因为只有可执行栈内空了后才会主动读取事件队列)

setTimeout而不是setInterval

用setTimeout模拟定期计时和直接用setInterval是有区别的。

因为每次setTimeout计时到后就会去执行,然后执行一段时间后才会继续setTimeout,中间就多了误差
(误差多少与代码执行时间有关)

而setInterval则是每次都精确的隔一段时间推入一个事件
(但是,事件的实际执行时间不一定就准确,还有可能是这个事件还没执行完毕,下一个事件就来了)

而且setInterval有一些比较致命的问题就是:

  • 累计效应(上面提到的),如果setInterval代码在(setInterval)再次添加到队列之前还没有完成执行,

就会导致定时器代码连续运行好几次,而之间没有间隔。
就算正常间隔执行,多个setInterval的代码执行时间可能会比预期小(因为代码执行需要一定时间)

  • 譬如像iOS的webview,或者Safari等浏览器中都有一个特点,在滚动的时候是不执行JS的,如果使用了setInterval,会发现在滚动结束后会执行多次由于滚动不执行JS积攒回调,如果回调执行时间过长,就会非常容器造成卡顿问题和一些不可知的错误(这一块后续有补充,setInterval自带的优化,不会重复添加回调)
  • 而且把浏览器最小化显示等操作时,setInterval并不是不执行程序,

它会把setInterval的回调函数放在队列中,等浏览器窗口再次打开时,一瞬间全部执行时

所以,鉴于这么多但问题,目前一般认为的最佳方案是:用setTimeout模拟setInterval,或者特殊场合直接用requestAnimationFrame

补充:JS高程中有提到,JS引擎会对setInterval进行优化,如果当前事件队列中有setInterval的回调,不会重复添加。不过,仍然是有很多问题。。。

事件循环进阶:macrotask与microtask

这段参考了参考来源中的第2篇文章(英文版的),(加了下自己的理解重新描述了下),
强烈推荐有英文基础的同学直接观看原文,作者描述的很清晰,示例也很不错,如下:

https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

上文中将JS事件循环机制梳理了一遍,在ES5的情况是够用了,但是在ES6盛行的现在,仍然会遇到一些问题,譬如下面这题:

console.log('script start');

setTimeout(function() {
    console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
    console.log('promise1');
}).then(function() {
    console.log('promise2');
});

console.log('script end');

嗯哼,它的正确执行顺序是这样子的:

script start
script end
promise1
promise2
setTimeout

为什么呢?因为Promise里有了一个一个新的概念:microtask

或者,进一步,JS中分为两种任务类型:macrotaskmicrotask,在ECMAScript中,microtask称为jobs,macrotask可称为task

它们的定义?区别?简单点可以按如下理解:

  • macrotask(又称之为宏任务),可以理解是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)

    • 每一个task会从头到尾将这个任务执行完毕,不会执行其它
    • 浏览器为了能够使得JS内部task与DOM任务能够有序的执行,会在一个task执行结束后,在下一个 task 执行开始前,对页面进行重新渲染
(`task->渲染->task->...`)
  • microtask(又称为微任务),可以理解是在当前 task 执行结束后立即执行的任务

    • 也就是说,在当前task任务后,下一个task之前,在渲染之前
    • 所以它的响应速度相比setTimeout(setTimeout是task)会更快,因为无需等渲染
    • 也就是说,在某一个macrotask执行完后,就会将在它执行期间产生的所有microtask都执行完毕(在渲染前)

分别很么样的场景会形成macrotask和microtask呢?

  • macrotask:主代码块,setTimeout,setInterval等(可以看到,事件队列中的每一个事件都是一个macrotask)
  • microtask:Promise,process.nextTick等

__补充:在node环境下,process.nextTick的优先级高于Promise__,也就是可以简单理解为:在宏任务结束后会先执行微任务队列中的nextTickQueue部分,然后才会执行微任务中的Promise部分。

参考:https://segmentfault.com/q/1010000011914016

再根据线程来理解下:

  • macrotask中的事件都是放在一个事件队列中的,而这个队列由事件触发线程维护
  • microtask中的所有微任务都是添加到微任务队列(Job Queues)中,等待当前macrotask执行完毕后执行,而这个队列由JS引擎线程维护

(这点由自己理解+推测得出,因为它是在主线程下无缝执行的)

所以,总结下运行机制:

  • 执行一个宏任务(栈中没有就从事件队列中获取)
  • 执行过程中如果遇到微任务,就将它添加到微任务的任务队列中
  • 宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)
  • 当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染
  • 渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取)

如图:

另外,请注意下Promisepolyfill与官方版本的区别:

  • 官方版本中,是标准的microtask形式
  • polyfill,一般都是通过setTimeout模拟的,所以是macrotask形式
  • 请特别注意这两点区别

注意,有一些浏览器执行结果不一样(因为它们可能把microtask当成macrotask来执行了),
但是为了简单,这里不描述一些不标准的浏览器下的场景(但记住,有些浏览器可能并不标准)

20180126补充:使用MutationObserver实现microtask

MutationObserver可以用来实现microtask
(它属于microtask,优先级小于Promise,
一般是Promise不支持时才会这样做)

它是HTML5中的新特性,作用是:监听一个DOM变动,
当DOM对象树发生任何变动时,Mutation Observer会得到通知

像以前的Vue源码中就是利用它来模拟nextTick的,
具体原理是,创建一个TextNode并监听内容变化,
然后要nextTick的时候去改一下这个节点的文本内容,
如下:(Vue的源码,未修改)

var counter = 1
var observer = new MutationObserver(nextTickHandler)
var textNode = document.createTextNode(String(counter))

observer.observe(textNode, {
    characterData: true
})
timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
}

对应Vue源码链接

不过,现在的Vue(2.5+)的nextTick实现移除了MutationObserver的方式(据说是兼容性原因),
取而代之的是使用MessageChannel
(当然,默认情况仍然是Promise,不支持才兼容的)。

MessageChannel属于宏任务,优先级是:MessageChannel->setTimeout
所以Vue(2.5+)内部的nextTick与2.4及之前的实现是不一样的,需要注意下。

这里不展开,可以看下https://juejin.im/post/5a1af88f5188254a701ec230

写在最后的话

看到这里,不知道对JS的运行机制是不是更加理解了,从头到尾梳理,而不是就某一个碎片化知识应该是会更清晰的吧?

同时,也应该注意到了JS根本就没有想象的那么简单,前端的知识也是无穷无尽,层出不穷的概念、N多易忘的知识点、各式各样的框架、
底层原理方面也是可以无限的往下深挖,然后你就会发现,你知道的太少了。。。

另外,本文也打算先告一段落,其它的,如JS词法解析,可执行上下文以及VO等概念就不继续在本文中写了,后续可以考虑另开新的文章。

最后,喜欢的话,就请给个赞吧!

附录

博客

初次发布2018.01.21于我个人博客上面

http://www.dailichun.com/2018/01/21/js_singlethread_eventloop.html

招聘软广

阿里巴巴钉钉商业化团队大量hc,高薪股权。机会好,技术成长空间足,业务也有很大的发挥空间!

还在犹豫什么,来吧!!!

社招(P6~P7)

职责和挑战

  1. 负责钉钉工作台。工作台是帮助企业实现数字化管理和协同的门户,是拥有亿级用户量的产品。如何保障安全、稳定、性能和体验是对我们的一大挑战。
  2. 负责开放能力建设。针对纷繁的业务场景,提供合理的开放方案,既要做到深入用户场景理解并支撑业务发展,满足企业千人千面、千行千面的诉求,又要在技术上保障用户的安全、稳定和体验。需要既要有技术抽象能力、平台架构能力,又要有业务的理解和分析能力。
  3. 开放平台基础建设。保障链路的安全和稳定。同时对如何保障用户体验有持续精进的热情和追求。

职位要求

  1. 精通HTML5、CSS3、JS(ES5/ES6)等前端开发技术
  2. 掌握主流的JS库和开发框架,并深入理解其设计原理,例如React,Vue等
  3. 熟悉模块化、前端编译和构建工具,例如webpack、babel等
  4. (加分项)了解服务端或native移动应用开发,例如nodejs、Java等
  5. 对技术有强追求,有良好的沟通能力和团队协同能力,有优秀的分析问题和解决问题的能力。

前端实习

面向2021毕业的同学

  1. 本科及以上学历,计算机相关专业
  2. 熟练掌握HTML5/CSS3/Javascript等web前端技术
  3. 熟悉至少一种常用框架,例如React、vue等
  4. 关注新事物、新技术,有较强的学习能力,有强烈求知欲和进取心
  5. 有半年以上实际项目经验,大厂加分

image.png

image.png

内推邮箱

lichun.dlc@alibaba-inc.com

简历发我邮箱,必有回应,符合要求直接走内推!!!

一对一服务,有问必答!

也可加我微信了解更多:a546684355

参考资料

查看原文

赞 787 收藏 924 评论 99

趁你还年轻 发布了文章 · 6月5日

发现算法之美-排序

  • 什么是排序?

    • 初识
    • 算法图
  • JavaScript中的排序

    • 普通排序
    • 复杂排序
    • 复杂排序函数封装
    • lodash(v4.17.15)排序函数
    • 从V8源码看sort()
  • 必会经典排序算法

    • 冒泡排序(最大值置尾排序)
    • 选择排序(最小值置头排序)
    • 插入排序(寻找位置排序)
    • 归并排序(二分递归排序)
    • 快速排序(基分递归排序)
  • leetcode 排序 解法题目

    • 35.搜索插入位置(easy)
    • 88.合并两个有序数组(easy)
    • 191.位1的个数(easy)
    • 581.最短无序连续子数组(easy)
    • 1331.数组序号转换(easy)
    • 56.合并区间(medium)
    • 215.数组中的第K个最大元素(medium)
  • 参考资料

什么是排序?

初识

生活中也有很多排序,比如考试以后按总分进行降序排列:
第一名700分、第二名699分、第三名698分等等等等
值得注意的是,虽然分数是倒序,但是名次却是正序1,2,3···

排序在生活中的例子实在太多了,就不一一赘述了。

  • 排序的英文名为sort
  • 排序是一个将无序(乱)的一组数据变为有序的过程
  • 有序通常分为两种:升序(asc)和降序(desc)
  • 排序在软件开发中非常常见:前端数据排序、后端数据库查表升序(asc)、降序(desc)
  • 很多算法依赖于排序算法:栈式算法、二分查找法等等

算法图

无序

image

降序

image

升序

image

JavaScript中的排序

在js中,Array.prototype上的sort()函数可以很方便的达到我们对升序和降序的要求。

  • sort()可以升序也可以降序
  • sort()排序后,数组本身发生变化,不产生新数组

普通排序

假设要给[2,4,3,1,5]进行排序:

const arr = [2,4,3,1,5]
// 升序
arr.sort((a,b)=>a-b)
// 降序
arr.sort((a,b)=>b-a)

复杂排序

对于复杂情况的话,例如需要对对象数组根据对象中的某个key排序。

// items按照value排序
const items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic', value: 13 },
  { name: 'Zeros', value: 37 }
];
items.sort((a, b) => a.value - b.value);

复杂排序函数封装

// key 需要排序的key
// 升序还是降序
function sortBy(arr, key, type = 'asc'){
   if(!arr || !key) return;
   let callback = (a, b) => a[key]- b[key] : 
   if( type === 'desc'){
       callback = (a, b) => b[key]- a[key] ;
   }
   arr.sort(callback);
}

lodash(v4.17.15)排序函数

  • _.sortedIndex(array, value)
  • _.sortedIndexBy(array, value, [iteratee=_.identity])
  • _.sortedIndexOf(array, value)
  • _.sortedUniq(array)
  • _.sortedUniqBy(array, [iteratee])

_.sortBy(collection, [iteratees=[_.identity]])

插入位置
_.sortedIndex([30, 50], 40); // => 1
复杂插入位置
var objects = [{ 'x': 4 }, { 'x': 5 }];
 
_.sortedIndexBy(objects, { 'x': 4 }, function(o) { return o.x; });
// => 0
 
// The `_.property` iteratee shorthand.
_.sortedIndexBy(objects, { 'x': 4 }, 'x');
// => 0
查询第一个索引
_.sortedIndexOf([4, 5, 5, 5, 6], 5); // => 1
去重并排序
_.sortedUniq([1, 1, 2]); // => [1, 2]
复杂去重并排序
_.sortedUniqBy([1.1, 1.2, 2.3, 2.4], Math.floor);// => [1.1, 2.3]
根据某个key排序
var users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 36 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 34 }
];
 
_.sortBy(users, [function(o) { return o.user; }]);
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]
 
_.sortBy(users, ['user', 'age']);
// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]

从V8源码看sort()

  • V8源码内部的排序函数叫做InnerArraySort
  • InnerArraySort排序算法不仅仅是一种经过多种优化的排序算法
  • InnerArraySort排序算法综合运用到了快速排序和插入排序

    • 对于数组长度小于22的数组,运用插入排序
    • 对于数组长度大于等于22的数组,运用快速排序
function InnerArraySort(array, length, comparefn) {
  // In-place QuickSort algorithm.
  // For short (length <= 22) arrays, insertion sort is used for efficiency.
  var InsertionSort = function InsertionSort(a, from, to) {
    for (var i = from + 1; i < to; i++) {
      var element = a[i];
      for (var j = i - 1; j >= from; j--) {
        var tmp = a[j];
        var order = comparefn(tmp, element);
        if (order > 0) {
          a[j + 1] = tmp;
        } else {
          break;
        }
      }
      a[j + 1] = element;
    }
  };

  var QuickSort = function QuickSort(a, from, to) {
    var third_index = 0;
    while (true) {
      // Insertion sort is faster for short arrays.
      if (to - from <= 10) {
        InsertionSort(a, from, to);
        return;
      }
      if (to - from > 1000) {
        third_index = GetThirdIndex(a, from, to);
      } else {
        third_index = from + ((to - from) >> 1);
      }
      // Find a pivot as the median of first, last and middle element.
      var v0 = a[from];
      var v1 = a[to - 1];
      var v2 = a[third_index];
      var c01 = comparefn(v0, v1);
      if (c01 > 0) {
        // v1 < v0, so swap them.
        var tmp = v0;
        v0 = v1;
        v1 = tmp;
      } // v0 <= v1.
      var c02 = comparefn(v0, v2);
      if (c02 >= 0) {
        // v2 <= v0 <= v1.
        var tmp = v0;
        v0 = v2;
        v2 = v1;
        v1 = tmp;
      } else {
        // v0 <= v1 && v0 < v2
        var c12 = comparefn(v1, v2);
        if (c12 > 0) {
          // v0 <= v2 < v1
          var tmp = v1;
          v1 = v2;
          v2 = tmp;
        }
      }
      // v0 <= v1 <= v2
      a[from] = v0;
      a[to - 1] = v2;
      var pivot = v1;
      var low_end = from + 1;   // Upper bound of elements lower than pivot.
      var high_start = to - 1;  // Lower bound of elements greater than pivot.
      a[third_index] = a[low_end];
      a[low_end] = pivot;

      // From low_end to i are elements equal to pivot.
      // From i to high_start are elements that haven't been compared yet.
      partition: for (var i = low_end + 1; i < high_start; i++) {
        var element = a[i];
        var order = comparefn(element, pivot);
        if (order < 0) {
          a[i] = a[low_end];
          a[low_end] = element;
          low_end++;
        } else if (order > 0) {
          do {
            high_start--;
            if (high_start == i) break partition;
            var top_elem = a[high_start];
            order = comparefn(top_elem, pivot);
          } while (order > 0);
          a[i] = a[high_start];
          a[high_start] = element;
          if (order < 0) {
            element = a[i];
            a[i] = a[low_end];
            a[low_end] = element;
            low_end++;
          }
        }
      }
      if (to - high_start < low_end - from) {
        QuickSort(a, high_start, to);
        to = low_end;
      } else {
        QuickSort(a, from, low_end);
        from = high_start;
      }
    }
  };

  if (length < 2) return array;
  QuickSort(array, 0, num_non_undefined);
  return array;
}

必会经典排序算法

image

经典排序算法有十(几)种,由于当前的能力有限,我将先介绍冒泡、选择、插入、归并和快排这五种排序算法。

看了sort()函数的V8源码以后,是不是一筹莫展觉得“哇 好难”,除了心存敬畏,其实明白算法是会经过不断的优化的,sort()函数处理了根据JavaScript语言特性做了很多性能上的优化。
通常来说我们去开心使用这样性能又好使用又便捷的sort()函数即可,但其实有一些经典的排序算法,还是非常值得去探索一下的。
即使数据结构课上学过,但其实时间一久,砖搬得过多,还是容易忘记的,就算没有忘记,工作几年以后再回过头来看算法,可能会对过去的算法做一个优化。

LeetCode的912题是一个很好的oj环境,适合对自己的排序算法做验证,推荐给大家。

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

  • 冒泡排序(最大值置尾排序)
  • 选择排序(最小值置头排序)
  • 插入排序(寻找位置排序)
  • 归并排序(二分递归排序)
  • 快速排序(基分递归排序)

冒泡排序(最大值置尾排序)

  /**
   * 解法:冒泡排序
   * 思路:外层每次循环都是不断将最大值置于尾部,最小值像气泡一样向前冒出
   * 性能:4704ms 39.4MB
   * 时间复杂度:O(n^2)
   */
var sortArray = function (nums) {
  for (let i = 0; i < nums.length; i++) {
    for (let j = 0; j < nums.length - 1 - i; j++) {
      if (nums[j] > nums[j + 1]) {
        const temp = nums[j];
        nums[j] = nums[j + 1];
        nums[j + 1] = temp;
      }
    }
  }
  return nums;
}

选择排序(最小值置头排序)

  /**
   * 解法:选择排序
   * 思路:已排序区间和未排序区间。在未排序区间中找到最小数,与未排序区间的第一项(已排序区间的下一项)交换,将已排序区间从[]构造成[...],最终完成排序。若是降序的话,则找最大的数。
   * 性能:2104ms 41.5MB
   * 时间复杂度:O(n^2)
   */
var sortArray = function (nums) {
  for (let i = 0; i < nums.length; i++) {
    let min = nums[i];
    let idx = i;
    for (let j = i + 1; j < nums.length; j++) {
      if (nums[j] < min) {
        min = nums[j];
        idx = j;
      }
      if (j === nums.length - 1) {
        let temp = nums[i];
        nums[i] = nums[idx];
        nums[idx] = temp;
      }
    }
  }
  return nums;
}

插入排序(寻找位置排序)

  /**
   * 解法:插入排序
   * 思路:已排序区间和未排序区间。取出未排序区间的第一项,在已排序区间上找到自己的位置,一般来说是找foo<x<bar,将x插入foo和bar之间,或者是x<bar插入头部。
   * 关键点:插入到指定位置后立即停止在已排序数组中查找
   * 性能:2008ms 43.9MB
   * 时间复杂度:O(n^2)
   * */
var sortArray = function (nums) {
  const sorted = [nums[0]];
  for (let i = 1; i < nums.length; i++) {
    // j = i - 1; 也行
    for (let j = sorted.length - 1; j >= 0; j--) {
      if (nums[i] < sorted[j]) {
        if (j === 0) {
          sorted.splice(j, 0, nums[i]);
        }
      } else if (nums[i] >= sorted[j]) {
        sorted.splice(j + 1, 0, nums[i]);
        j = -1; // 这里很关键,插入到指定位置后立即停止在已排序数组中查找
      }
    }
  }
  return sorted;
}
  /**
   * 优化版:插入排序(不借助辅助数组)
   * 思路:插入splice(j/j+1, 0), 删除splice(i, 1)[0]
   * 需要注意的是: splice()返回的是一个数组,例如[1]
   * 性能:2372ms 42.5MB
   * 时间复杂度:O(n^2)
   */
var sortArray = function (nums) {
  for (let i = 1; i < nums.length; i++) {
    for (let j = i - 1; j >= 0; j--) {
      if (nums[i] < nums[j]) {
        if (j === 0) {
          nums.splice(j, 0, nums.splice(i, 1)[0]);
        }
      } else if (nums[i] >= nums[j]) {
        nums.splice(j + 1, 0, nums.splice(i, 1)[0]);
        j = -1;
      }
    }
  }
  return nums;
}

归并排序(二分递归排序)

  /**
   * 解法:归并排序
   * 思路:将长度为n的数组拆为n/2长度的数组,分别对各自进行排序。再将n/2长度的数组使用归并排序,直到最终的排序的数组长度为2,最后将最终排序的数组依次向上合并
   * 核心:二分和递归。类似二分排序,自顶向下二分拆解排序,自底向上合并排序结果。
   * 注意:终止递归的条件为if (length <= 1) { return nums; }
   * 性能:260ms 47.9MB
   * 时间复杂度: O(nlogn)
   */
var sortArray = function (nums) {
  const merge = (left, right) => {
    const result = [];
    while (left.length && right.length) {
      if (left[0] >= right[0]) {
        result.push(right.shift());
      } else {
        result.push(left.shift());
      }
    }
    while (left.length) {
      result.push(left.shift());
    }
    while (right.length) {
      result.push(right.shift());
    }
    return result;
  };
  let length = nums.length;
  if (length <= 1) {
    return nums;
  }
  let middle = Math.floor(length / 2);
  let left = nums.splice(0, middle);
  let right = nums;
  return merge(sortArray(left), sortArray(right));
}

快速排序(基分递归排序)

  /**解法:快速排序
   * 思路:
   * 1.选中一个分割点split
   * 2.定义左右双指针,一次遍历将分割值小的置于左侧,比分割值大的置于右侧
   * 2.1 左右指针不相遇时 swap(left, right)
   * 2.2 左右指针相遇时,swap(start, left)并且返回left
   * 3.分治递归式为左右两侧序列***
   * 性能:128ms 40.8MB
   * 时间复杂度:O(nlogn)
   */
var sortArray = function (nums) {
  quickSort(nums, 0, nums.length - 1);
  return nums;
  // 定义一个***函数
  function quickSort(arr, left, right) {
    if (left < right) {
      let splitIndex = findSplitIndex(nums, left, right);
      quickSort(nums, left, splitIndex - 1);
      quickSort(nums, splitIndex + 1, right);
    }
  }
  // 查找分割值索引
  function findSplitIndex(arr, left, right) {
    const start = left;
    const splitValue = arr[start];
    while (left !== right) {
      while (left < right && arr[right] > splitValue) {
        right--;
      }
      while (left < right && arr[left] <= splitValue) {
        left++;
      }
      if (left < right) {
        swap(arr, left, right);
      }
    }
    swap(arr, start, left);
    return left;
  }
  // 交换位置:左右交换、分割点与left交换
  function swap(arr, i, j) {
    const temp = arr[j];
    arr[j] = arr[i];
    arr[i] = temp;
  }
};

算法过程图(来自程序员小灰的文章:漫画:什么是快速排序?(完整版)

image

image

image
image

image

image

image
image
image

leetcode 排序 解法题目

  • 35.搜索插入位置(easy)
  • 88.合并两个有序数组(easy)
  • 191.位1的个数(easy)
  • 581.最短无序连续子数组(easy)
  • 1331.数组序号转换(easy)
  • 56.合并区间(medium)
  • 215.数组中的第K个最大元素(medium)

35. 搜索插入位置

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

var searchInsert = function(nums, target) {
 /**
   * 解法2:推入数组重排序法 96ms better than 6.35%
   */
  nums.push(target);
  var resortedNums = nums.sort((x,y)=>x-y);
  return resortedNums.indexOf(target);
};

88.合并两个有序数组(easy)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

var merge = function(nums1, m, nums2, n) {
  /**
   * 特别需要注意的点:这道题会检查nums1数组内存空间最后的存储情况
   */
  // splice截断数组
  nums1.splice(m);
  nums2.splice(n);
  // 未使用concat的原因:concat返回一个新数组,而题目需要直接在nums1的空间进行存储
  nums2.forEach(num2 => {
    nums1.push(num2);
  });
  // sort排序当前数组
  var ascArr = nums1.sort((a, b) => a - b);
  return ascArr;
};

191. 位1的个数(easy)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

/**
 * @param {number} n - a positive integer
 * @return {number}
 */
var hammingWeight = function (n) {
  /**解法4:排序优化count
   * 性能:88ms 35.7MB
   */
  let strArr = n.toString(2).split("");
  strArr.sort((a, b) => parseInt(b) - parseInt(a));
  let count = 0;
  for (let i = 0; i < strArr.length; i++) {
    if (strArr[i] === "1") count++;
  }
  return count;
};

581.最短无序连续子数组(easy)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

/**
 * @param {number[]} nums
 * @return {number}
 */
var findUnsortedSubarray = function (nums) {
  /**
   * 解法
   * - 克隆数组并排序
   * - 找起始元素的索引值
   *     - startIdx 从头到尾 找到第一个发生变化的元素索引
   *     - endIdx 从尾到头 找到第一个发生变化的元素索引
   */
  // 使用[...nums]克隆一个新数组,是因为sort改变的是自身,不会返回一个新数组
  var sortedNums = [...nums].sort((a, b) => a - b);
  var startIdx = 0;
  for (var i = 0; i < nums.length; i++) {
    if (nums[i] !== sortedNums[i]) {
      startIdx = i;
      break;
    }
  }
  var endIdx = 0;

  for (var j = nums.length - 1; j >= 0; j--) {
    if (nums[j] !== sortedNums[j]) {
      endIdx = j;
      break;
    }
  }
  var length = endIdx - startIdx > 0 ? endIdx - startIdx + 1 : 0;
  return length;
};

1331. 数组序号转换(easy)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

/**
 * @param {number[]} arr
 * @return {number[]}
 */
var arrayRankTransform = function(arr) {
  if (arr.length > Math.pow(10, 5)) return;
  /**
   * 生成唯一排序Map
   */
  var uniqArr = Array.from(new Set(arr));
  var sortArr = uniqArr.sort((a, b) => a - b);
  // 构造出一个二维数组作为Map构造器入参
  var twoDimArr = sortArr.map((num, idx) => [num, idx + 1]);
  var idxMap = new Map(twoDimArr);
  /**
   * Map中查找数字序号
   */
  var serialNums = [];
  for (var i = 0; i < arr.length; i++) {
    serialNums.push(idxMap.get(arr[i]));
  }
  return serialNums;
};

56.合并区间(medium)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

/**
 * @param {number[][]} intervals
 * @return {number[][]}
 */
var merge = function (intervals) {
  /**
   * 解法1:排序 + 栈
   * 性能:88ms 36.3MB
   * 思路:
   * 推入区间 空栈 或者 arr[0]大于栈最后一个区间闭
   * 覆盖重叠 arr[0]小于栈最后一个区间闭
   *  */
  intervals.sort((a, b) => a[0] - b[0]);
  let stack = [];
  for (let i = 0; i < intervals.length; i++) {
    let currrentInterval = intervals[i];
    let stackLastItem = stack[stack.length - 1];
    if (stack.length === 0 || currrentInterval[0] > stackLastItem[1]) {
      stack.push(currrentInterval);
    } else if (currrentInterval[0] <= stackLastItem[1]) {
      stackLastItem[1] = Math.max(stackLastItem[1], currrentInterval[1]);
    }
  }
  return stack;
};

215. 数组中的第K个最大元素(medium)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

var findKthLargest = function (nums, k) {
  /**
   * 解法1:倒序排序输出
   */
  nums.sort((a, b) => b - a);
  return nums[k - 1];
};

参考资料

期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:

努力成为优秀前端工程师!
查看原文

赞 23 收藏 19 评论 4

趁你还年轻 发布了文章 · 6月5日

发现算法之美-双指针之对撞指针

对撞指针.png

  • 什么是对撞指针?

    • 初识
    • 算法图
    • 对撞过程图
  • JavaScript中的Array与对撞指针

    • 在js中,如何定义对撞指针?
    • 实现一个最简对撞指针
  • leetcode 对撞指针 解法题目

    • 7.整数反转(easy)
    • 9.回文数(easy)
    • 27.移除元素(easy)
    • 125.验证回文串(easy)
    • 167.两数之II-输入有序数组(easy)
    • 190.颠倒二进制位(easy)
    • 344.反转字符串(easy)
    • 345.反转字符串中的元音字母(easy)
    • 11.盛水最多的容器(medium)

什么是对撞指针?

初识

  • 对撞指针是双指针算法之一。
  • 对撞指针从两端向中间迭代数组。一个指针从始端开始,另一个从末端开始。
  • 对撞指针的终止条件是两个指针相遇。
  • 对撞指针常用于排序数组。

算法图

image

对撞过程图

167.两数之II-输入有序数组(easy)的对撞过程图。
蓝色指针:头指针 红色指针:尾指针 终止条件:头尾指针对撞

JavaScript中的Array与对撞指针

在js中,如何定义对撞指针?

命名

头尾指针的命名可以为:

  • i, j
  • head, tail
  • start, end
初始值
  • 头指针:0
  • 尾指针:数组长度减一
let arr = [1, 7, 5, 2];
let head = 0;
let tail = arr.length -1;

实现一个最简对撞指针

image

var arr = new Array(10).fill(0).map((num,i)=>num+i);
var i =0;
var j = arr.length - 1;
while(i<j){
  i++;
  j--;
}
var collision = [i - 1, j + 1]
var tip = `Array's head and tail had a collision between ${collision[0]} and ${collision[1]}`;
console.log(tip); // Array's head and tail had a collision between 4 and 5

leetcode 对撞指针 解法题目

  • 7.整数反转(easy)
  • 9.回文数(easy)
  • 27.移除元素(easy)
  • 125.验证回文串(easy)
  • 167.两数之II-输入有序数组(easy)
  • 190.颠倒二进制位(easy)
  • 344.反转字符串(easy)
  • 345.反转字符串中的元音字母(easy)
  • 11.盛水最多的容器(medium)

7.整数反转(easy)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

var reverse = function (x) {
  /**
   * 解法2.指针对撞法
   * 性能:96 ms 35.38% 35.9 MB 77.35%
   */
  var sign = Math.sign(x);
  var arr = x.toString().split("");
  //
  if (sign === -1) {
    arr.shift();
  }
  // 指针对撞开始
  var i = 0;
  var j = arr.length - 1;
  while (i < j) {
    swap(arr, i, j);
    i++;
    j--;
  }
  function swap(arr, i, j) {
    var temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
  }
  // 指针对撞结束
  var rX = parseInt(arr.join(""));
  var result = sign * rX;
  var min = -Math.pow(2, 31);
  var max = Math.pow(2, 31) - 1;
  if (rX < min || rX > max) return 0;
  return result;
};

9.回文数(easy)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

var isPalindrome = function (x) {
  /**
   * 解法3:对撞指针法
   * 性能:244ms 45.5MB
   */
  var strArr = `${x}`.split("");
  var i = 0;
  var j = strArr.length - 1;
  while (i < j) {
    if (strArr[i] !== strArr[j]) {
      return false;
    }
    i++;
    j--;
  }
  return true;
};

27.移除元素(easy)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

var removeElement = function (nums, val) {
  /**
   * 解法2:对撞指针
   * 性能:64ms 33.9MB
   */
  var i = 0;
  var j = nums.length - 1;
  while (i <= j) {
    if (nums[i] === val) {
      nums.splice(i, 1);
      j--;
    } else if (nums[j] === val) {
      nums.splice(j, 1);
      j--;
    } else {
      i++;
    }
  }
  return nums.length;
};

125.验证回文串(easy)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

var isPalindrome = function (s) {
  /**
   * 解法1:正则 + 对撞指针
   * 性能:76ms 89.76% 37.5MB 70.83%
   */
  var parlinDrome = s.replace(/[^\w]/g, "").replace(/_/g, "").toLowerCase();
  var strArr = parlinDrome.split("");
  var i = 0;
  var j = strArr.length - 1;
  while (i < j) {
    if (strArr[i] !== strArr[j]) {
      return false;
    }
    i++;
    j--;
  }
  return true;
};

167.两数之II-输入有序数组(easy)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

var twoSum = function (numbers, target) {
  /**
   * 解法2:对撞指针
   * 性能:68ms 71.18% 35.2MB 76.60%
   * 时间复杂度:O(n^2)
   */
  var left = 0;
  var right = numbers.length - 1;
  while (left < right) {
    if (numbers[left] + numbers[right] === target) {
      return [left + 1, right + 1];
    } else if (numbers[left] + numbers[right] > target) {
      right--;
    } else {
      left++;
    }
  }
};

190.颠倒二进制位(easy)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

/**
 * @param {number} n - a positive integer
 * @return {number} - a positive integer
 */
var reverseBits = function (n) {
  /**
   * 解法1:转数组后对撞交换位置
   * 性能:76ms 35.8MB
   * 思路:
   * 十进制转二进制:toString(2)
   * 32位空位补0:padStart(32,0)
   * 反转算法:对撞指针法
   * 二进制转十进制:parseInt(,2)
   */
  let arr = n.toString(2).padStart(32, 0).split("");
  let head = 0;
  let tail = arr.length - 1;
  while (head < tail) {
    swap(arr, head, tail);
    head++;
    tail--;
  }
  function swap(arr, i, j) {
    let temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
  }
  let result = parseInt(arr.join(""), 2);
  return result;
};

344.反转字符串(easy)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

var reverseString = function (s) {
  /**
   * 解法2:对撞指针
   */
  var headIdx = 0;
  var tailIdx = s.length - 1;
  while (headIdx < tailIdx) {
    swap(s, headIdx, tailIdx);
    headIdx++;
    tailIdx--;
  }
  function swap(arr, i, j) {
    var temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
  }
  return s;
};

345.反转字符串中的元音字母(easy)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

/**
 * @param {string} s
 * @return {string}
 */
var reverseVowels = function (s) {
  /**
   * 解法1:对撞指针
   * 性能:108 ms 31.59% 38.4 MB 66.67%
   */
  var univocalic = ["a", "e", "i", "o", "u", "A", "E", "I", "O", "U"];
  var sArr = s.split("");
  var head = 0;
  var tail = sArr.length - 1;
  while (head < tail) {
    if (univocalic.includes(sArr[head]) && univocalic.includes(sArr[tail])) {
      swap(sArr, head, tail);
      head++;
      tail--;
    } else if (!univocalic.includes(sArr[head])) {
      head++;
    } else if (!univocalic.includes(sArr[tail])) {
      tail--;
    }
  }
  function swap(arr, i, j) {
    var temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
  }
  return sArr.join("");
};

11.盛水最多的容器(medium)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

var maxArea = function (height) {
  /**
   * 解法1:对撞指针法
   * 性能:64ms 35.6MB
   * */
  var head = 0;
  var tail = height.length - 1;
  var maxCapacity = 0;
  while (head < tail) {
      maxCapacity = Math.max(Math.min(height[head], height[tail]) * (tail - head), maxCapacity)
      if (height[head] < height[tail]) {
          head++
      } else {
          tail--;
      }
  }
  return maxCapacity;
};

期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:

努力成为优秀前端工程师!
查看原文

赞 3 收藏 3 评论 0

趁你还年轻 发布了文章 · 6月4日

发现数据结构之美-栈

发现数据结构之美-栈.png

在代码的世界中,无论是什么语言,栈其实都是一种非常重要的数据结构。
全球闻名的代码提问社区stack overflow就以栈(stack)溢出作为网站名的一个部分。
在写代码或者是debug的过程中,相信你已经感受到了在函数调用栈的世界蹦蹦跳跳的快乐了。
在学校里刷oj,刷LeetCode,进入社会参加笔试面试的过程中,相信你也感受到了栈的强大和易用。

这篇博文非常适合数据结构基础非常薄弱的同学食用,也欢迎基础扎实的同学指正和交流。
如果从未感受过stack的美妙和强大,这篇博文将非常适合你~

  • 什么是栈?

    • 数据结构图
    • 入栈出栈图
  • JavaScript中的栈

    • 在js中,如何发现出栈LIFO的特性?
    • 如何实现一个最小栈?
    • 图解函数调用栈
  • leetcode 栈 解法题目

    • 20.有效的括号(easy)
    • 67.二进制求和(easy)
    • 905.按奇偶排序数组(easy)
    • 56.合并区间(medium)
    • 75.颜色分类(medium)
    • 228.汇总区间(medium)
    • 739.每日温度(medium)
  • 面试题 栈 解法题目

    • 实现一个BigInt

什么是栈?

  • 栈是一种后入先出(LIFO)的数据结构
  • 栈通常使用DFS(Depth First Search)遍历
  • 通常可以通过top/bottom来代表栈的顶部和底部

数据结构图

image

入栈出栈图

image

JavaScript中的栈

在js中,如何发现出栈LIFO的特性?

下面这个结构大家都熟悉,瞬间体现出栈LIFO的特性。

// 定义一个栈
let stack = [1,2,3];
// 入栈
stack.push(4); // stack [1,2,3,4]
// 出栈
stack.pop(); // 4 stack [1,2,3]

如何实现一个最小栈?

设计一个支持 push ,pop ,top 操作,并能在常数时间内检索到最小元素的栈。

push(x) —— 将元素 x 推入栈中。
pop() —— 删除栈顶的元素。
top() —— 获取栈顶元素。
getMin() —— 检索栈中的最小元素。
var MinStack = function() {
  this.stack = [];
};
MinStack.prototype.push = function(x) {
  this.stack.push(x);
};
MinStack.prototype.pop = function() {
  return this.stack.pop();
};
MinStack.prototype.top = function() {
  return this.stack[this.stack.length - 1];
};
MinStack.prototype.getMin = function() {
  return Math.min(...this.stack);
};

题目:https://leetcode-cn.com/probl...
解法:https://github.com/FrankKai/l...

图解函数调用栈

image
从frames stack中调用函数。

function foo(){
    let a = 10;
    return a + b + 11
}
function bar(x){
    let y = 3;
    return foo(x*y);
}
console.log(bar(7)); // 返回42

过程拆解:

  • 调用bar时,包含bar的arguments和本地变量的第一个frame创建了
  • 当bar调用foo时,包含了foo的arguments和本地变量的第二个frame创建成功,并且将其推入顶部
  • 当foo返回时,顶部的frame element会从stack中pop出来(留下bar在栈中)
  • 当bar返回时,stack清空

可视化拆解:

image

image

image

leetcode 栈 解法题目

  • 20.有效的括号(easy)
  • 67.二进制求和(easy)
  • 905.按奇偶排序数组(easy)
  • 56.合并区间(medium)
  • 75.颜色分类(medium)
  • 228.汇总区间(medium)
  • 739.每日温度(medium)

20.有效的括号(easy)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

/**
   * 解法2:栈
   * 1.构建一个栈
   * 2.依次入栈所有开括号
   * 3.遇到闭括号时与栈顶的开括号匹配
   *   3.1若匹配上,出栈并继续
   *   3.2匹配不上,return false
   * 4.遍历结束后的栈应该为空,否则为无效括号
   */
var isValid = function(s) {
  var bracketsMap = {
    "(": ")",
    "{": "}",
    "[": "]"
  };
  var openBrackets = Object.keys(bracketsMap);
  var closeBrackets = Object.values(bracketsMap);
  var stack = [];
  var sArr = s.split("");
  for (var i = 0; i < sArr.length; i++) {
    if (openBrackets.indexOf(sArr[i]) !== -1) {
      stack.push(sArr[i]);
    } else if (closeBrackets.indexOf(sArr[i]) !== -1) {
      var top = stack[stack.length - 1];
      if (sArr[i] === bracketsMap[top]) {
        stack.pop();
      } else {
        return false;
      }
    }
  }
  return stack.length === 0;
}

67.二进制求和(easy)

/**
 * @param {string} a
 * @param {string} b
 * @return {string}
 */
var addBinary = function (a, b) {
    /**
     * 解法2:栈
     * 时间复杂度:O(n)
     * 性能:56ms, 35.5MB
     */
    let aArr = a.split("");
    let bArr = b.split("");
    let stack = [];
    let count = 0;
    while (aArr.length !== 0 || bArr.length !== 0) {
        let aPop = aArr.pop() || 0;
        let bPop = bArr.pop() || 0;
        let stackBottom = 0;
        if (stack.length > count) {
            stackBottom = stack.shift() || 0;
        }
        let sum = parseInt(aPop) + parseInt(bPop) + parseInt(stackBottom)
        if (sum <= 1) {
            stack.unshift(sum);
        } else {
            stack.unshift(sum - 2);
            stack.unshift(1);
        }
        count++;
    }
    return stack.join("");
};

905.按奇偶排序数组(easy)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

/**
 * @param {number[]} A
 * @return {number[]}
 */
var sortArrayByParity = function (A) {
  /**
   * 栈头栈尾解法即可
   * 偶数栈底推入unshift
   * 奇数栈顶推入push
   */
  var stack = [];
  for (var i = 0; i < A.length; i++) {
    if (A[i] % 2 === 0) {
      stack.unshift(A[i]);
    } else {
      stack.push(A[i]);
    }
  }
  return stack;
};

56.合并区间(medium)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

/**
 * @param {number[][]} intervals
 * @return {number[][]}
 */
var merge = function (intervals) {
  /**
   * 解法1:排序 + 栈
   * 性能:88ms 36.3MB
   * 思路:
   * 推入区间 空栈 或者 arr[0]大于栈最后一个区间闭
   * 覆盖重叠 arr[0]小于栈最后一个区间闭
   *  */
  intervals.sort((a, b) => a[0] - b[0]);
  let stack = [];
  for (let i = 0; i < intervals.length; i++) {
    let currrentInterval = intervals[i];
    let stackLastItem = stack[stack.length - 1];
    if (stack.length === 0 || currrentInterval[0] > stackLastItem[1]) {
      stack.push(currrentInterval);
    } else if (currrentInterval[0] <= stackLastItem[1]) {
      stackLastItem[1] = Math.max(stackLastItem[1], currrentInterval[1]);
    }
  }
  return stack;
};

75. 颜色分类(medium)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

var sortColors = function (nums) {
  /**
   * 解法1:递归 栈
   * 性能:64ms 35.1MB
   */
  var length = nums.length;
  var countHead = arguments[1] || 0;
  var countTail = arguments[2] || 0;
  for (var i = countHead || 0; i < length - countTail; i++) {
    if (nums[i] === 0) {
      countHead++;
      nums.unshift(nums.splice(i, 1)); // 增加if(i!==0)会降低10ms性能
      return sortColors(nums, countHead, countTail);
    } else if (nums[i] === 2) {
      countTail++;
      nums.push(nums.splice(i, 1));
      return sortColors(nums, countHead, countTail);
    }
  }
  return nums;
}

228.汇总区间(medium)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

/**
 * @param {number[]} nums
 * @return {string[]}
 */
var summaryRanges = function (nums) {
  /**
   * 解法1:排序 + 栈
   * 性能:52ms 33.7MB
   */
  nums.sort((a, b) => a - b);
  let stack = [];
  let result = [];
  for (let i = 0; i < nums.length; i++) {
    if (stack.length === 0 || nums[i] - stack[stack.length - 1] === 1) {
      stack.push(nums[i]);
    } else {
      stackToResult();
      stack = [];
      stack.push(nums[i]);
    }
    if (i === nums.length - 1) {
      stackToResult();
    }
  }
  function stackToResult() {
    if (stack.length > 1) {
      result.push(`${stack[0]}->${stack[stack.length - 1]}`);
    } else {
      result.push(`${stack[0]}`);
    }
  }
  return result;
};

739.每日温度(medium)

题目:https://leetcode-cn.com/probl...
题解:https://github.com/FrankKai/l...

  /**
   * 解法2:栈 + 递归 1132ms 19.96% 59.2MB 11.76%
   * 思路:
   * 1.通过shift取出栈底元素
   * 2.遍历剩余温度栈内温度
   *     若温度出现比栈底温度大者
   *         存储i+1
   *         递归进行下一次入栈
   *     若温度小于等于栈底温度
   *         若遍历到最后一个都没有出现更大的
   *              存储 0
   *              进行下一次入栈
   * 3.最后一个温度无论如何都肯定是0
   */
var dailyTemperatures = function(T) {
  if (T.length < 1 || T.length > 30000) return false;
  var result = arguments[1] || [];
  var bottom = T.shift();
  for (var i = 0; i < T.length; i++) {
    var t = T[i];
    if (t > bottom) {
      result.push(i + 1);
      return dailyTemperatures(T, result);
    } else {
      if (i === T.length - 1) {
        result.push(0);
        return dailyTemperatures(T, result);
      }
    }
  }
  result.push(0);
  return result;
}

面试题 栈 解法题目

实现一个BigInt

实现大整数相加,大于 Number.MAX_VALUE,不能直接使用 BigInt。

/**
* 请通过代码实现大整数(可能比Number.MAX_VALUE大)相加运算
// your code goes here
var bigint1 = new BigInt('1231230');
var bigint2 = new BigInt('12323123999999999999999999999999999999999999999999999991');
console.log(bigint1.plus(bigint2))
*/
function BigInt(value) {
  this.value = value;
}

BigInt.prototype.plus = function (bigint) {
  let aArr = this.value.split("");
  let bArr = bigint.value.split("");
  let stack = [];
  let count = 0;
  while (aArr.length !== 0 || bArr.length !== 0) {
    let aPop = aArr.pop() || 0;
    let bPop = bArr.pop() || 0;
    let stackBottom = 0;
    if (stack.length > count) {
      stackBottom = stack.shift();
    }
    let sum = parseInt(aPop) + parseInt(bPop) + parseInt(stackBottom);
    if (sum < 10) {
      stack.unshift(sum);
    } else if (sum >= 10) {
      stack.unshift(sum - 10);
      stack.unshift(1);
    }
    count++;
  }
  return stack.join("");
};

期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:

努力成为优秀前端工程师!
查看原文

赞 7 收藏 7 评论 0

趁你还年轻 收藏了文章 · 5月29日

canvas实现稍复杂的财务报表



<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*#oCan{
                width: 1000px;
                height: 650px;
            }*/
        </style>
    </head>
    <body style="background-color:#fff">
        <canvas id="oCan" width="1600" height="650">            ~~~~</canvas>
        <script>
            var canvas = document.getElementById('oCan');
            let dateArr = [];
            let years = 2016;
            let month = 0;
            var startX = 100;
            var startY = 600;
            var ctx = canvas.getContext('2d');
            const salary = ['0','50k','100k','150k'];
            const data = [89815.85,65441.37,68983.43,80520.7,71360.8,71308.09,97843.1,74963.94,72430.98,81891.22,126140.22,57712.01,85631.15,
            68464.57,73150.3,91573.05,81404.2,76903.97,71145.33,81884.51,90759.47,80811.97,76918.84,99999.56];
            for(let i = 0 ; i<24;i++){
                ++month;
                month = transFromMonthType(month);
                dateArr.push(years + '-' + month);
                if(month === 12){
                    years++;
                    month = 0;
                }
            }
            function transFromMonthType (date) {
                if(date < 10){
                return "0" + date + ''
                }
                return date
            }
            console.log(dateArr);
            //建立坐标系
            function create(){
                ctx.beginPath();
                //轴线
                ctx.moveTo(startX,startY);
                ctx.lineTo(startX,0);
                ctx.moveTo(startX,startY);
                ctx.lineTo(1600,startY);
                ctx.strokeStyle="#ccc";
                ctx.stroke();
                ctx.closePath();
                
                ctx.beginPath();
                //横线
                ctx.moveTo(startX,400);
                ctx.lineTo(1600,400);
                ctx.moveTo(startX,200);
                ctx.lineTo(1600,200);
                ctx.moveTo(startX,0);
                ctx.lineTo(1600,0);
                ctx.strokeStyle="#ccc";
                ctx.stroke();
                ctx.closePath();
                
            }
            //填充横纵坐标
            function insert(){
                var x = 100;
                var y = 600;
                var offsetY = 600 * (1-(data[0]/150000));
                //绘制横坐标
                ctx.moveTo(125,offsetY);
                ctx.fillText(data[0],110,offsetY-5);
                for(var i= 0; i <dateArr.length;i++){
                    ctx.textAlign="start";
                    ctx.fillText(dateArr[i],x,y+20);    
                    x += 50;
                    if(i > 0){
                        offsetY = 600 * (1-(data[i]/150000));
                        ctx.textAlign="right";
                        ctx.fillText(data[i],x,offsetY-5);
                        buildLineChart(x,offsetY);
                    }
                    
                }
                x = 100;
                y = 600;
                //绘制纵坐标
                for(let j = 0 ;j < salary.length;j++){
                    ctx.textAlign = 'center';
                    ctx.fillText(salary[j],x-40,y);
                    y -= 197;//偏差问题,如果设置200那么salary[3]的文本‘15k’就会被隐藏~~~~
                }
                
            }
            //建立折线图
            function buildLineChart(x,y){
                let yet1 = y;
                ctx.lineTo(x-25,yet1);
                ctx.strokeStyle = "#3FA7DC";
                ctx.stroke();
            }
            
            
            insert();
            create();
            
        </script>
    </body>
</html>
整体思路:
1.设计y轴价格和x轴日期区间。注意:此demo的价格区间只限于0<=price<150000;超出的部分会被省略
2.日期区间主要通过for循环将字符串日期推送到特定数组中,并调用特定函数来实现个位数加0操作。
3.create方法主要用来创建x和y轴,以及特定数量的横线。利用
ctx.beginPath();
ctx.closePath();~~~~
实现开辟以及结束一个工作区,在工作区给线条改颜色。
4.调用insert()来设置和填充横纵坐标,以及通过moveTo()开始一条路径buildLineChart()方法用来绘制折线图,具体通过lineTo方法连接这些线,然后就呈现成折线。

5.此文章难点还是在于lineTo的y轴坐标问题,要让他和金额以及距离canvas对象原点y轴比例的问题。即纵坐标offsetY = 600 * (1-(data[i]/150000));

查看原文

趁你还年轻 赞了回答 · 5月26日

成为一个优秀的前端还需要掌握哪些技术?

结合我的经验,这个时候属于业务驱动走到头了,除非公司发生变化,比如:

  1. 业务出现变化
  2. 业务量出现变化
  3. 团队结构、团队规模出现变化

自己主动谋求变化很困难。一般来说,完全自主的学习不太容易,大多数人,大多数时候,业务驱动要靠谱得多。所以解决方案也是顺其道而行之:

  1. 换工作
  2. 主动拓展新技术架构
  3. 改进团队协作流程和工具

关注 8 回答 7

趁你还年轻 回答了问题 · 5月26日

成为一个优秀的前端还需要掌握哪些技术?

我也是三年经验的前端,深刻体会到在一个领域潜心钻研下去的重要性。

不管几年经验,前端通用型技能的是要掌握的,比如说:

  • JS: Object/Array.prototye.*,Map,Set,in,of,Promise,async/await,解构,let,const,箭头函数
  • DOM:自定义事件,data-*,MutationObserver,IntersectionObserver,ResizeObserver
  • CSS:传统布局,flex布局,rem,em,vh,vw,过渡transition,动画animation,CSS自定义变量,CSSOM
  • 框架:Vue技术栈/React技术栈 对用到的框架深入实践和学习
  • 存储:localStorage,sessionStorage,blob url,window.reload,IndexedDB
  • 工程:webpack及其plugin,loader以及构建升级和优化,npm/yarn,git git-flow,nginx
  • 通信:hosts,域名,cdn,http(s),跨域,强缓存协商缓存,cookie,mqtt
  • 工作流:vscode,chrome devtools,linux,vim,ss
  • 常用库:axios ,moment,lodash,echarts,fabricjs,cropperjs
  • 数据结构和算法:栈,队列,双指针(快慢、对撞),排序,递归,二分,leetcode,面试题
  • 巨人:mdn,github,stackoverflow,google,segmentFault,百度
  • 各种第三方sdk:七牛云存储,阿里云OSS,高德地图,阿里云语音识别等等

还有,别给自己设界限,偶尔学习一下服务端的东西,会反哺对前端的理解。

另外再告诉你一个秘密,996模式的话学得更快,毕竟 迭代需求实践 出真知。

还有,注意身体。

曾经有人质疑我前端为什么要会一些linux和刷leetcode?

linux和git的话,基础的要掌握吧。 cat、vim、mkdir、rm、ls、cd、ifconfig这种基础的命令。

git的话,rebase,cherry-pick,reset,add commit push等等这种基础的。

leetcode的话,一直for for不像回事吧。 常用的得会吧。 基础的数组类的,字符串类的。 排序、快慢指针、对撞指针、递归、二分。

还有很多前端的精细领域,说实话我也有点迷茫在不断探索

  • 前端组件库
  • 数据可视化(canvas、webgl牵扯出的图形学无底洞)
  • 前端工程化
  • native移动端
  • H5移动端
  • 音视频处理
  • webVR
  • 无障碍访问
  • IOT
  • Node.js中台

技术服务于业务,高效稳定的实现需求,认真负责的不断维护和升级,你就是No.1。

关注 8 回答 7

趁你还年轻 发布了文章 · 5月20日

一次webpack3升级为webpack4的实践

image

这次webpack升级提升了不少构建速度:生产打包提升了30%;开发构建提升40%,开发热更新提升70%

之前尝试过一些在webpack3的基础上做的构建优化,例如引入HappyPack优化构建速度,开启loader缓存和优化包查找路径等等,详情可以查看前端webpack构建优化

但是随着时间的推移,这种优化产生的效果越来越弱化,手上的项目体积越来越大,对本地开发热更新速度和生产打包发布速度都有了很大的影响。

webpack3升级到webpack4迫在眉睫,这篇博文将记录一些我在升级过程中遇到的坑。

当你遇到这些坑时,通过搜索引擎找到我这篇文章,如果能够解决了手上的webpack配置问题,然后发自内心的感到 ”Save my day!“,”It helps me!“,”Solved my problem!“,”Works for me!“ ,我会感觉自己的这篇博文很有意义。

  • 升级到 webpack 4
  • 移除 CommonsChunkPlugin,默认使用 SplitChunksPlugin 分割代码
  • 升级 html-webpack-plugin
  • 移除 extract-text-webpack-plugin,引入 mini-css-extract-plugin 并配置 css-loader
  • 配置 mode 属性
  • 升级 vue-loader 到 v14.2.2
  • 更新 HtmlWebpackPlugin 的 chunkSortMode
  • 修复大小限制的报错
  • 重命名 app.js,生成 vendors.js
  • mini-css-extract-plugin 的配置放在 webpack.base.conf.js
  • 调试开发环境可用
  • 引入analyzer分析分析包大小
  • webpack3与webpack4打包对比
  • 文件可以更小一些吗?构建速度可以更快一些吗?
  • 升级vue-loader到v15并且替换happyPack为thread-loader
  • webpack3与webpack4开发依赖对比
  • 总结

升级 webpack 到 4

"webpack": "^3.6.0" -> "webpack": "^4.43.0"

yarn add -D webpack@4.43.0

移除 CommonsChunkPlugin

plugins: [
  // // split vendor js into its own file
  // new webpack.optimize.CommonsChunkPlugin({
  //   name: 'vendor',
  // }),
  // // extract webpack runtime and module manifest to its own file in order to
  // // prevent vendor hash from being updated whenever app bundle is updated
  // new webpack.optimize.CommonsChunkPlugin({
  //   name: 'manifest',
  //   minChunks: Infinity,
  // }),
  // // This instance extracts shared chunks from code splitted chunks and bundles them
  // // in a separate chunk, similar to the vendor chunk
  // // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
  // new webpack.optimize.CommonsChunkPlugin({
  //   name: 'app',
  //   async: 'vendor-async',
  //   children: true,
  //   minChunks: 3,
  // }),
];

升级 html-webpack-plugin

"html-webpack-plugin": "^2.30.1" -> "html-webpack-plugin": "^4.3.0"

// https://stackoverflow.com/questions/49942558/deprecationwarning-tapable-plugin-is-deprecated-use-new-api-on-hooks-instea
// error
Tapable.apply is deprecated. Call apply on the plugin directly instead
yarn add -D html-webpack-plugin@latest

移除 extract-text-webpack-plugin,引入 mini-css-extract-plugin 并配置 css-loader

// const ExtractTextPlugin = require('extract-text-webpack-plugin');
// plugins:[
// extract css into its own file
// new ExtractTextPlugin({
//   filename: utils.assetsPath('css/[name].[contenthash].css'),
//   // Setting the following option to `false` will not extract CSS from codesplit chunks.
//   // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by
//   // webpack. It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit
//   // bundle as well when it's `false`, increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
//   allChunks: true,
// }),
// ]

// extract: true
// if (options.extract) {
//   return ExtractTextPlugin.extract({
//     use: loaders,
//     fallback: 'vue-style-loader',
//   });
// }
yarn add -D mini-css-extract-plugin
// webpack.prod.conf.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins: [
    new MiniCssExtractPlugin(filename: utils.assetsPath('css/[name].[contenthash].css'))
];
// webpack.base.conf.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === "development",
            },
          },
          "css-loader",
          "postcss-loader",
          "sass-loader",
        ],
      },
    ],
  },
};

配置 mode 属性

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
mode: "production";

升级 vue-loader

"vue-loader": "^13.3.0" -> "vue-loader": "14.2.2"

TypeError: Cannot read property 'vueOptions' of undefined
yarn add -D vue-loader@latest
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config
// https://github.com/symfony/webpack-encore/issues/311
You probably use vue-loader v15 which was released yesterday and introduces a lot of changes compared to v14. One of these changes is that you have to use an extra plugin: VueLoaderPlugin (that's not handled yet by Encore).

In the meantime could you try removing your version of the vue-loader/VueLoaderPlugin and adding vue-loader@^14.2.2 instead?
yarn add -D vue-loader@14.2.2
(1:1) Unknown word

> 1 | // extracted by mini-css-extract-plugin

移除 postcss-loader。

// postcss: generateLoaders()

更新 HtmlWebpackPlugin 的 chunkSortMode

// https://www.cnblogs.com/wyliunan/p/10238717.html
Unhandled rejection Error: "dependency" is not a valid chunk sort mode

设置为 HtmlWebpackPlugin 的 chunkSortMode 为"auto": https://github.com/jantimon/h...

修复大小限制的报错

AssetsOverSizeLimitWarning: asset size limit: The following asset(s) exceed the recommended size limit (244 KiB 250000Byte).
This can impact web performance.
// webpack.config.js
module.exports = {
  performance: {
    hints: "warning",
    maxEntrypointSize: 5000 * 1024,
    maxAssetSize: 5000 * 1024,
  },
};

生成 manifest.js,生成 vendors.js

// https://webpack.js.org/configuration/optimization/#optimizationsplitchunks
// 生成manifest.js
optimization: {
    runtimeChunk: {
        name:'manifest'
    }
},
// https://webpack.js.org/plugins/split-chunks-plugin/#split-chunks-example-1
// 生成 vendors.js
optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
      },
    },
  },
}
  output: {
-   chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
+   chunkFilename: utils.assetsPath('js/[name].[chunkhash].js'),
  },

调试开发环境可用

Error: Cannot find module 'webpack/bin/config-yargs'

https://github.com/mzgoddard/jest-webpack/issues/27
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4"
mode: 'development',
// webpack Error: Callback was already called.
// https://github.com/webpack-contrib/mini-css-extract-plugin/issues/493
// webpack.dev.js
plugins:[
    new MiniCssExtractPlugin(),
]
// https://segmentfault.com/q/1010000012054980
// BaseClient.js:12 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

安装transform-es2015-modules-commonjs并且在.babelrc中配置。

yarn add -D transform-es2015-modules-commonjs
// .babelrc
"plugins": [
    "transform-es2015-modules-commonjs"
]

引入analyzer分析分析包大小

// package.json
scripts:{
  "build:analyse": "NODE_ENV=production source_map=false npm_config_report=true node build/build.js"
}
// webpack.prod.conf.js
if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}

webpack3与webpack4打包对比

版本文件大小(Parsed)文件大小(Gzipped)chunk数生产构建时间开发构建时间开发热更新体感
webpack3.6.06.09MB1.76MB7352196ms70103ms慢(12079ms)
webpack4.43.07.07MB1.98MB8840727ms45448ms快(3394ms)

机器参数:
MacBook Pro (15-inch, 2019)
处理器 2.3 GHz Intel Core i9
内存 16 GB 2400 MHz DDR4

文件可以更小一些吗?构建速度可以更快一些吗?

  • 未使用TerserPlugin而是用UglifyjsPlugin
  • OptimizeCSSPlugin位置放错
  • 如果手动配置splitChunks的话,一定要把没有配置的参数也配置上
  • devtool由最慢的“source-map”改为false

引入TerserPlugin的话,需要首先升级node到v10.17.0+。

sudo n v10.17.0
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      // Compress extracted CSS. We are using this plugin so that possible
      // duplicated CSS from different presentation can be deduped.
      new OptimizeCSSPlugin({
        cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true },
      }),
      new TerserPlugin({
        cache: true,
        parallel: true,
        sourceMap: Boolean(config.build.productionSourceMap),
      }),
    ],
  }
}

增加下面的配置:

optimization: {
  splitChunks: {
    chunks: 'async',
    minSize: 30000,
    maxSize: 0,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    automaticNameMaxLength: 30,
  }
}

现在的webpack3和webpack4打包分析:

版本文件大小(Parsed)文件大小(Gzipped)chunk数生产构建时间开发构建时间开发热更新体感
webpack3.6.06.09MB1.76MB7352196ms70103ms慢(12079ms)
webpack4.43.0(优化前)7.07MB1.98MB8840727ms45448ms快(3394ms)
webpack4.43.0(优化后)7.02MB1.98MB8834585ms45448ms快(3394ms)

通过对比发现,提升了大概5秒的打包速度。

升级vue-loader到v15并且引入thread-loader加速vue-loader

warning No parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred

为什么引入thread-loader加速vue-loader?
因为HappyPack无法加速vue-loader15。
https://github.com/vuejs/vue-...

yyx990803:vue-loader 15 does not support HappyPack. Use thread-loader instead.

顺便升级eslint-loader到4。
"eslint-loader": "^1.7.1"->"eslint-loader": "^4.0.2"

  // plugins: [
  //   new HappyPack({
  //     id: 'happy-eslint-loader',
  //     threadPool: happyThreadPool,
  //     loaders: ['eslint-loader?cacheDirectory=true'],
  //   }),
  //   new HappyPack({
  //     id: 'happy-vue-loader',
  //     threadPool: happyThreadPool,
  //     loaders: ['vue-loader?cacheDirectory=true'],
  //   }),
  //   new HappyPack({
  //     id: 'happy-babel-loader',
  //     threadPool: happyThreadPool,
  //     loaders: ['babel-loader?cacheDirectory=true'],
  //   }),
  // ]
rules: [
  {
    test: /\.(js|vue)$/,
    use: [
      { loader: 'thread-loader' },
      {
        loader: 'eslint-loader',
        options: {
          formatter: require('eslint-friendly-formatter'),
          emitWarning: !config.dev.showEslintErrorsInOverlay,
        },
      },
    ],
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
  },
  {
    test: /\.vue$/,
    use: ['thread-loader', 'vue-loader'],
    exclude: (file) => /node_modules/.test(file) && !/\.vue\.js/.test(file),
  },
  {
    test: /\.js$/,
    use: ['thread-loader', 'babel-loader'],
    include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
  },
  {
    test: /\.(sa|sc|c)ss$/,
    use: [
      {
        loader: process.env.NODE_ENV === 'development' ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
        options: {
          hmr: process.env.NODE_ENV === 'development',
        },
      },
      'css-loader',
      'postcss-loader',
      'sass-loader',
    ],
  },
]
error:despite it was not able to fulfill desired ordering with these modules:
new MiniCssExtractPlugin({
  ignoreOrder: true,
}),

现在的webpack3和webpack4打包分析:

版本文件大小(Parsed)文件大小(Gzipped)chunk数生产构建时间开发构建时间开发热更新体感
webpack3.6.06.09MB1.76MB7352196ms70103ms慢(12079ms)
webpack4.43.0(优化前)7.07MB1.98MB8840727ms45448ms快(3394ms)
webpack4.43.0(第一次优化)7.02MB1.98MB8834585ms45448ms快(3394ms)
webpack4.43.0(第二次优化)6.7MB1.91MB8834585ms41657ms快(3394ms)

webpack3与webpack4开发依赖对比

// webpack3
"webpack": "^3.6.0"
"webpack-dev-server": "^2.9.1"
"eslint-loader": "^1.7.1"
"vue-loader": "^13.3.0"
"happypack": "^5.0.0"
"html-webpack-plugin": "^2.30.1"
"extract-text-webpack-plugin": "^3.0.0"
"uglifyjs-webpack-plugin": "^1.1.1"
// webpack4
"webpack": "^4.43.0"
"webpack-cli": "^3.3.11"
"webpack-dev-server": "^3.7.2"
"thread-loader": "^2.1.3"
"eslint-loader": "^4.0.2"
"vue-loader": "^15.9.2"
"html-webpack-plugin": "^4.3.0"
"mini-css-extract-plugin": "^0.9.0"
"terser-webpack-plugin": "^3.0.1"
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2"

总结

webpack3到webpack4的升级,主要做了以下这些事情

  • 升级依赖:升级webpack major version为webpack4,升级vue-loader,升级html-webpack-plugin等等
  • 代码分割:移除了CommonsChunkPlugin;引入SplitChunksPlugin,设置mode属性为production,optimization拆分出webpack3中的manifest和vendors
  • 压缩css:移除extract-text-webpack-plugin;引入mini-css-extract-plugin,使用mini-css-extract-plugin的loader重新配置sass-loader,postcss-loader和css-loader,它会为每个包含css的js文件单独构建一个js文件
  • 代码热更新:升级webpack-cli和webpack-dev-server,并且设置mode为development
  • 构建加速:替换happypack为thread-loader,多线程式本地构建和生产构建

反思

  • 执行力是第一生产力
  • 这次webpack升级提升了不少构建速度:生产打包提升了30%;开发构建提升40%,开发热更新提升70%
  • 这次webpack升级没有减小包大小,有尝试使用tree shaking,但是没有成功,有待在tree shaking上继续做实践

期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:

努力成为优秀前端工程师!
查看原文

赞 6 收藏 3 评论 4

趁你还年轻 赞了回答 · 5月18日

解决报错!Cannot assign to read only property 'exports' of object

需要引入插件 babel-plugin-transform-es2015-modules-commonjs
然后在 .babelrc中配置 { "plugins": ["transform-es2015-modules-commonjs"] }

我的简书[https://www.jianshu.com/p/837...]

关注 3 回答 2

趁你还年轻 发布了文章 · 5月11日

HTTP之强缓存和协商缓存

HTTP缓存.png

关于强缓存和协商缓存的理论知识和express.js下的实践,政采云前端团队的这篇文章已经非常详尽了:图解 HTTP 缓存

强缓存和协商缓存流程图

图来自图解 HTTP 缓存

刚好我最近也在对这一块的内容做补充和总结,受到这篇优质博文的启发,于是有了这篇博文。

那么在这篇博文中会看到什么呢?

  • 强缓存和协商缓存需要注意的细节
  • HTTP 强缓存和协商缓存之 Koa 实战

    • Expires,Cache-Control, Pragma
    • If-Modified-Since&&Last-Modified
    • If-None-Match&&ETag

强缓存和协商缓存需要注意的细节

报文头类型

报文头请求头响应头
Expires
Pragma
Cache-Control
If-Match/If-None-Match
ETag
If-Modified-Since
Last-Modified

报文头优先级

强缓存:Pragma > Cache-Control > Expires

协商缓存:If-None-Match/ETag > If-Modified-Since/Last Modified

如果强缓存是新鲜的,优先强缓存。

如果强缓存是不新鲜的,判断有无协商缓存:

若上一次请求中有ETag,在If-None-Match带上ETag value;

若上一次请求中没有ETag,判断上一次请求响应中是否有Last-Modified,在If-Modified-Since中带上Last-Modified value;

若资源没有更新,状态码为304走浏览器缓存;若为200,走协商缓存,返回更新后的资源。

HTTP 强缓存和协商缓存之 Koa 实战

Expires

代码:

const Koa = require("koa");
const app = new Koa();

app.use((ctx) => {
  ctx.body = "HTTP强缓存之Expires";
  ctx.set("Expires", "Mon, May 11 2020 22:10:14 GMT");
});

app.listen(3000);
console.log("应用运行在localhost:3000");

首次请求:

第二次请求来自强缓存:

Cache-Control

代码:

const Koa = require("koa");
const app = new Koa();

app.use((ctx) => {
  ctx.body = "HTTP强缓存之Cache-Control";
  ctx.set("Cache-Control", "public,max-age=60");
});

app.listen(3000);
console.log("应用运行在localhost:3000");

首次请求:

第二次请求来自强缓存:

Pragma

代码:

const Koa = require("koa");
const app = new Koa();

app.use((ctx) => {
  ctx.body = "HTTP强缓存之Pragma";
  ctx.set("Pragma", "no-cache");
});

app.listen(3000);
console.log("应用运行在localhost:3000");

首次请求:
Pragma
image
第二次请求:

If-Modified-Since&&Last-Modified

代码:

const Koa = require("koa");
const app = new Koa();

app.use((ctx) => {
  ctx.body = "HTTP协商缓存之If-Modified-Since&&Last-Modified";
  ctx.set({
    "Last-Modified": "Mon, May 11 2020 22:20:14 GMT",
  });
});

app.listen(3000);
console.log("应用运行在localhost:3000");

第一次请求:

第二次请求:

If-None-Match&&ETag

代码:

const conditional = require("koa-conditional-get");
const etag = require("koa-etag");
const Koa = require("koa");
const app = new Koa();

app.use(conditional());
app.use(etag());

app.use((ctx) => {
  ctx.body = "HTTP协商缓存之If-None-Match&&ETag";
});

app.listen(3000);
console.log("应用运行在localhost:3000");

首次请求:

第二次请求来自协商缓存:

期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:

努力成为优秀前端工程师!
查看原文

赞 11 收藏 8 评论 0

趁你还年轻 关注了问题 · 5月10日

webpack 怎么压缩 index.html 里面引入的css文件

react 项目 目录结构如下


public 
    |-index.html
    |-theme.css

index.html 中引入了 theme.css
现在想在 webpack 打包的时候 自动压缩css 能实现吗?

关注 4 回答 2

趁你还年轻 回答了问题 · 5月10日

canvas可以绘制highcharts一样的3d饼状图嘛

echarts 3d 饼图 https://gallery.echartsjs.com...

自己用canvas写的话,要是能写出,对技术提升帮助很大,不过花的时间就多了

关注 3 回答 2

趁你还年轻 赞了文章 · 5月8日

SegmentFault 思否 - 7 年如一日做好开发者社区这件事,成为中文开发者领域最被信赖的创领者

7 年如一日,做好开发者社区这件事

sfteam.jpg
2012 年 10 月,莲花街第一个办公室那个时候都还是青春少年...

2012 年的 6 月份,我与祁宁 @Joyqi 以及董锋 @Fen 一起辞职来到杭州驻扎在莲花街的一个民居全职开始做 SegmentFault 社区,没想到已经过去了 7 年的时间,很多场景犹如昨日历历在目。我与祁宁和董锋我们之间的相识就是因为祁宁在大学里做的开源项目 Typecho,祁宁和董锋是 Typecho 的项目成员,那时我是 Typecho 的用户,我的博客皮肤就是董锋的作品,后面一来二去在 Twitter 上交流慢慢熟悉了起来。我们能 7 年如一日的坚持把开发者社区这件事情做好,源自于我们对这个行业的热爱和参与。我们坚信开发者必将引领科技行业的未来,我们希望通过 SF 的存在能给行业和开发者带来一些好的变化和影响,做一些微薄的贡献。

SegmentFault 团队近况

在 2019 年 10 月 24 日这个属于中国开发者自己节日的日子里,我也想跟关心我们的社区开发者和同行同步一下我们的近况。

  1. 时隔 7 年,今年 3 月份我回到了北京,与我们新加入的运营合伙人 Nadia 组建了北京办公室,SF 的运营团队未来重心全部迁往北京,我们的产品和研发团队依然在杭州,继续保持了我们双城的联动协调的优势。
  2. SF 社区注册用户也早已突破 300 万,一直没有对外发布。
  3. 5 月份,我们全新梳理了我们公司的企业使命、愿景、价值观。
  4. 6 月份,在社区业务的基础上正式启动我们的技术媒体业务,让优质的技术行业动态得到关注。
  5. 7 月份,组建了 SF 对外业务支撑团队,帮助科技厂商通过全维度的方案与开发者连接。
  6. 8 月份,我们与 Arm 中国战略合作,并发布专注为人工智能、物联网、芯片领域的开发者社区 - 极术社区。
  7. 9 月份,我们与来也科技成功完成了第一期 RPA 机器人流程自动化 工程师就业班。
  8. 10 月份,SF 在线教育板块业务正式命名为思否编程并分拆独立发展,近期一些不错的进展我们会在后续发布。
  9. 10 月份,我们助力@招商银行 1024 程序员节 - 技术创招未来,行内领导现场手动为程序员点赞!
  10. 10 月份,我们全方位助力新网银行第一届金融科技挑战赛,得到共青团中央的高度关注和支持。

幻灯片08.jpg

幻灯片05.jpg

幻灯片06.jpg

幻灯片07.jpg

幻灯片26.jpg

成为科技企业和开发者沟通的桥梁,帮助开发者成功

我们一直非常注重社区的产品体验,我们也在一步一步迭代我们的产品,大家应该也看到了我们最近上线的新的编辑器,接下来我们还会对现有的产品继续做新的产品升级,也请大家多关注。

初心不变,我们希望能通过我们的产品和服务改变并提升开发者获取知识的方式和效率,帮助开发者获得成功。成为中文开发者领域最被信赖的引领者,成为科技企业和开发者沟通的桥梁,成为最有影响力的中文开发者社区。

随着越来越多的科技公司重视开发者以及开发者关系,据不完全统计,已有超百家企业和开源组织在 SegmentFault 建立企业专栏,包括但不限于阿里云云栖社区、蚂蚁金服科技、腾讯开源、腾讯动漫前端团队、京东云技术团队、美团技术团队、有赞技术、个推技术团队、PingCap、滴滴开源 CMLJS 官方社区、知道创宇前端团队、Swoole 开源项目、Flutter 中文社区等!更多了解可以查看文章《企业该如何提升自身技术品牌影响力?看看腾讯、美团、有赞是怎么做的

大家的认可是对我们最大的鼓励

TalkingData研发副总裁 阎志涛 :个人有幸参与过几次SegmentFault的技术分享会并结识了不少技术同道,TalkingData的技术团队也在积极通过SegmentFault学习、分享知识与经验。做为一个从业二十多年的老工程师,祝SegmentFault七周年生日快乐。七岁正是少年时,祝愿SegmentFault在未来的七年、十七年、七十年能够坚持社区共建、求真求实的本真,不管前路走多远,归来仍旧是少年。

涛思数据创始人&CEO 陶建辉:我谨代表涛思数据(TDengine)祝思否社区七周岁生日快乐!TDengine作为一款专为物联网而生的大数据平台,在思否社区收获了很多志同道合的伙伴,感谢思否社区为开发者提供了一个优秀、专业、活跃的交流平台。不忘初心,继续前行,希望未来TDengine能和思否共同成长进步,迎接更好的明天!

Nebula Graph 技术总监 吴敏:谨代表开源的分布式图数据 Nebula Graph 祝 SegmetFault 思否七周年快乐,感谢你们给开发者提供了一个高质量的技术交流平台,陪伴开发者们走过近三千个日子,度过七年,进入到下一个十年,一起为开发者成长加油、助力!

融云创始人兼CEO 韩迎:祝贺 SegmentFault 七周年生日快乐! SegmentFault 是国内最优秀的开发者技术交流社区,体现了互联网开放、平等、协作、快速、分享的精神,相信未来的 SegmentFault 将会给开发者带来更高质量的服务。

融云联合创始人兼CTO 杨攀:在 SegmentFault 分享,在 SegmentFault 学习,我很享受这个过程,也在这个过程中认识了很多开发者朋友。祝 SegmentFault 七周岁快乐~

Kyligence 首席架构师 & Apache Kylin PMC 史少锋:思否社区为国内的开发人员提供了优质的学习交流平台。在思否社区的7岁生日之际,祝思否社区越办越好,帮助更多开发人成长 。

又拍云创始人、董事长 刘亮为:SegmentFault 为国内开发者们搭建了一个高质量、活跃的技术交流平台。七年时间,又拍云与 SegmentFault 一同走来,作为亲密的合作伙伴,见证了 SegmentFault 的成长,愿 SegmentFault 能够创造一个属于开发者的时代!又拍云祝贺 SegmentFault 七周岁生日快乐!

ThoughtWorks全球技术咨询委员会成员 刘尚奇:同行7年,祝SegmentFault越来越好,继续在中文社区为开发者提供优秀的写作与问答平台。

腾讯 TARS 开源项目负责人 单致豪:SegmentFault 见证了腾讯开源的历程,见证了 TARS 从开源到成长的时光,见证了 TarsJava 、 TarsGo 、 TarsJs 、 TarsPHP 的多语言版本发布的时刻,见证了 TARS 成为Linux基金会开源项目的瞬间,感谢 SegmentFault 为我们的贡献者以及业界的开发者提供高质量的交流学习平台,祝 SegmentFault 社区七周年生日快乐!

Contentos内容公链负责人、前猎豹移动资深技术专家 杨鹏博:SegmentFault作为优秀的中文开发者社区,陪伴了我整整七年的技术研发道路。我在这里汲取知识,分享心得,获得成长。如今带领区块链项目Contentos,再度归来,用一颗“反哺”的心态积极为社区内容添砖加瓦。感谢SegmentFault提供的高质量交流学习平台,给Contentos开源项目展示的舞台!

网易云市场总监 徐丹 :SegmentFault 7周年,见证中国开发者的成长,为中文开发者提供了一个真实、纯粹、开放、充满活力的互联网技术交流平台,祝SegmentFault保持这份纯粹的热情,越办越好。

声网Agora 合伙人 & 市场运营VP Louisa :Segmentfault是一家非常有调性的开发者社区,他们的坚持,体现了中国开发者群体思考范式的变化,更见证了开发者理想主义的思想变革。可以说,他们是开发者精神内核的折射。声网Agora,作为全球第一家定位为开发者服务的RTC PaaS平台,很高兴能与Segmentfault共同成长,用技术促进社区开发者更好的沟通。7周年生日快乐~

平安云 GitHub 高级业务拓展总监 王祺荣:作为国内最早专注于做开发者社区的思否,一直致力于为开发者提供一个高质量的技术交流的平台,让开发者可以更高效地互动协作,并获取开发效率及价值的提升。SegmentFault与平安云GitHub一直保持着紧密的合作,更好地基于开源和GitHub企业版、教育版为开发者提供服务的同时,及时获取到开源社区的反馈。正值思否7周年,祝愿SegmentFault的开发者力量更上一个台阶。

SegmentFault 社区七周年丨社区用户与 SF 的故事

社区用户猿人谷:路虽远,行则必至,思否有你更精彩。事虽难,做则必成,有思否更灿烂。思否伴你成长,你陪思否强大。升职加薪,从加入思否开始!

社区用户民工哥:10多年的IT从业经验,这也造就了我一直热爱“玩”各类技术平台,而且很多平台都是资深老粉丝,虽然注册思否社区不久,但今天发现原来已经成立7年了,技术型社区平台创立与维护真的很不易,外人看来很简单,但这里面耗费了社区创始人及维护各条线上的小伙们大量的时间、精力与一颗热爱的心。友好,开源是对我思否平台目前的认识,而且能聚集这么多的技术人一同来维护,这也说明了思否平台的魅力所在。

社区用户我好菜啊:2017年刚注册就喜欢上了这个社区,我一般都是潜水看干货,很少发言。社区里大佬很多,个个都是人才,说话又好听,超喜欢在这里的。最好还是希望SegmentFault越做越好!

社区用户林奈木:14年注册的老萌新,中级潜水员,还参加过线下活动。技术一年年更新,大佬们总是孜孜不倦地输出,SegmentFault 也在一年年地变好~这里的氛围真是团结又友好~希望 SegmentFault 越来越好~

社区用户小谷xg:15年注册,陪伴四年多,提问问题,解决问题,看文章,发表文章,共同进步共同成长,希望sf社区越来越强大!

社区用户404P:独立思考,敢于否定。感谢思否七年来的坚持,造福一众码农。

社区用户alterem:天下难事,必作于易;天下大事,必做于细。接触编程差不多快要五个年头,一直喜欢各种折腾,导致自己各方面都比较优秀(其实是各方面都不如别人优秀),经过openWrite才正在接触到思否社区,虽然注册社区不久,但是今天居然发现思否已经有七年了,一个社区能维护七年并且保证社区的质量这么好,可见维护者已经是非常优秀了,丰富的资源,优质的专栏,优秀的作者,让我对思否的印象也是越来越好,保护色的颜色看起来很亲切,虽然我没有其它大佬有话语权但是这是也我作为一个萌新的内心活动,希望大佬们不要嫌弃哈,勿忘初心,方得始终。毕竟,没有人能一口气吃成个胖子,路要一步步走,事要一件件做。再难的事,也是从简单开始的,再大的事也有小的方面。最后愿思否越做越好,优质的作者也越来越多。

社区用户程序猿DD:16年注册的思否,当时就觉得,这是一股技术圈清流。最近在做 openwrite.cn ,思否是第一个支持我们的技术社区,也因此认识了思否的各位大佬和小姐姐们。我觉得做技术社区,调性很重要,而思否跟我们有着一样的核心价值观:尊重和维护每一位内容创作者的努力!即使面对很多很多一线品牌的侵权行为,思否也不退缩,为用户说话,这是我喜欢和支持思否的根本原因!

社区用户linkstar:刚刚看了下我的注册时间, 2013年10月24日,不知不觉5年了。当初觉得这个社区界面很清新,问答交流的氛围很好,于是就加入了。当时觉得SegmentFault这个名字很难记,不过我还是记住了,因为要常来嘛。后来知道有个短网址叫sf.gg,这样每次输入就更方便了。现在有个中文名叫思否社区,一说大家都知道。在这里我看到了很多优秀的同行,他们都热爱分享,乐于助人,比方说@某熊猫桑就是一个很有趣的大神。我之前提过好几个问题他都过来回答了,受益匪浅。作为一名前端弱鸡,虽然很多问题也答不上来,但我提了很多问题,收到答案的同时也间接帮助了更多有同样疑问的人。到目前为止,我已经积累了4枚金徽章、48枚银徽章、139 枚铜徽章,满满的成就感。思否7周年,祝愿SegmentFault社区越办越好,SF小姐姐越来越漂亮~


结束语

最近总有朋友会跟我提起他们的状态,对现状不满但是又无力改变,对未来发展方向忧心忡忡。

在问我意见的时候,我总会说:去做喜欢的事情,放开了折腾认真的玩儿。

我自认为也是一个努力、喜欢折腾的人。很多朋友都见证了 SegmentFault 思否社区这七年来的成长与蜕变,回顾这个过程,多半是源于我们对自己所做事情的热爱与坚持,来自于社区用户对我们的信任与鼓励,然后日积月累一点一点积攒下来的。

不忘初心,能坚持做自己喜欢的事,真的很爽,也很酷。

下一个七年,让我们一起搞点儿事!

clipboard.png

查看原文

赞 51 收藏 5 评论 32

趁你还年轻 关注了问题 · 5月4日

小程序 这种固定的在商品左上角的是叫什么?

1588578991993.jpg

关注 3 回答 2