2022.05.17

一轮： 1.dom react 原理 2.css 布局 3.js 原型链继承 4.fetch 取消 5.eventloop 6.instanceof 7.promise 封装 setstate 8.redux 基本组成和设计单向数据流 9.https 协议的过程 10.https 获取加密密钥的过程 11.http 的方法有哪几种,每种方法的有用途 12.类式继承的方案 13.prototype 继承的实现 14.数字千分位处理，正则和非正则都要实现 15.借用构造继承，几种组合继承方式 16.看编程代码说出运行结果：Process.nextTick，setImmediate 和 promise.then 的优先级 Process.nextTick，pronise,setImmediate 的优先级 17.实现一个 bind 函数 18.千位加逗号 19.三个继承方式的优缺点 优化列出代码 20.nodejs 的事件循环 21.bfc 22.css 实现正方形 div 水平垂直居中 23.koa1 的原理,继承 24.最后是一个写代码处理有依赖的异步任务加重试 25. diff 的原理 26. es6 箭头函数 27. import 和 require 的区别 28. symbol 29. 函数实现正面模板 30. 正方形实现，三角形实现 31. CSS 考了伪类 32. 实现布局 header,content,footer，上中下布局；当 content 超出窗口可视区，不显示 footer；当 content 没超出可视区时，固定 footer 在最下面 33. 算法:背包问题、闭包问题、函数柯里化 34. 宽是高的一半的垂直居中，里面有字体也要垂直居中类数组 35. promise async set time out 先后次序 36. event 类 on once 灯方法 37. ==的隐式转化 38. 自己实现 bind 函数 39. 什么是闭包 40. 最长子序列 41. 二叉树中序遍历 5http 握手原理 42. 6react 新版本的特性 43. 多空格字符串格式化为数组 44、bind 函数运行结果 45、点击 table 的 td 显示 td 内容 46、数字千分位处理 47、固定日期与当前时间格式化处理 48、上中下三栏布局 49、实现一个子类实例可以继承父类的所有方法 50. 节流函数 51. Koa 中间件机制及代码实现 52. React Fiber 原理以及为什么 componentWillRecievedProps 会废弃 53.给定一个数组，一个期望值，找到数组中两个相加等于期望值 54. 1. html meta 标签有啥作用 55. cookie 结构有什么字段 56. bfc 块级格式化上下文 57. css 为什么要放在头部 58. react 生命周期 59. react diff 算法 60. react 合成事件原理

  1. http 请求都包含哪些字段

  2. http 请求幂等性

  3. versions 是一个项目的版本号列表，因多人维护，不规则 var versions=['1.45.0','1.5','6','3.3.3.3.3.3.3'] 要求从小到大排序，注意'1.45'比'1.5'大 sorted=['1.5','1.45.0','3.3.3.3.3.3','6']

  4. css 如何实现元素 a 距离屏幕 10px，高度无论宽度怎么改变都是其.5

  5. 隐式转换，会问为什么这样

  6. 同步异步输出的顺序

  7. argument 是数组吗，如果不是怎么变为数组

  8. 如何实现 for 循环内定时器依次输出 123

  9. bind 实现

  10. 函数节流

  11. 动态规划算法

  12. function request(urls, maxNumber, callback)要求编写函数实现，根据 urls 数组内的 url 地址进行并发网络请求，最大并发数 maxNumber,当所有请求完毕后调用 callback 函数(已知请求网络的方法可以使用 fetch api)

  13. throttle 函数实现 74.requestAnimationFrame 和 setTime、setInterval 的区别，requestAnimationFrame 可以做什么

定时器循环刷新 canvas （动画，游戏推荐）, requestAnimationFrame 相对于 setinterval 处理动画有以下几个优势：

  1. 经过浏览器优化，动画更流畅

  2. 窗口没激活时，动画将停止，省计算资源

  3. 更省电，尤其是对移动终端

    75.二叉树路径总和（leetcode 112） 76.给定一个不含重复数字的数组 arr,指定个数 n,目标和 sum,判断是否含有由 n 个不同数字相加得到 sum 的情况（leetcode 40 变种，数字不得重复使用） 77. 冒泡算法 78.前端安全，DOS 79.前端缓存、回话机制 80.跨域 81.计算机网络知识 TCP UDP 82.测试单测、集成测试 83.自动化集成 84. Docker 应用 85. Nodejs express koa 87. 给自己的技术栈排名 88.项目技术难题/解决方案 89.执行顺序问题：考察宏任务和微任务 setTimeout/Promise 等 90.实现 bind 方法 91.算法：给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串，判断字符串是否有效。 92.设计一个多人协作的记事本程序 93. ['a','b'],['A','B'],['1','0']，输出['aA1','aA0','aB1','aB0','bA1','bA0','bB1','bB0']，算法的排列组合问题 94. vue-router 路由监听的原理 95. webpack 打包的原理，webpack 有没有针对打包过程做一些优化提升打包速度 96.请实现如下的函数，可以批量请求数据，所有的 URL 地址在 urls 参数中，同时可以通过 max 参数，控制请求的并发度，实现 max 个请求执行完之后再执行下 max 个请求，当所有请求结束之后，需要执行 callback 回调函数。发请求的函数可以直接 使用 fetch 即可 97. vue 双向绑定的原理 98. 写一个 eventBus，元素水平垂直居中，vuex mobox，小程序架构优化 日志系统 二轮: 1.主要是围绕你的项目经历和技术，有一定的深度，主要还是要对项目全面熟悉；还有一个就是函数柯理化的编码实现 2. 函数柯里化、Web 安全、react 性能优化、react 算法原理 3.上来直接让写一个 autocomplete 组件，可能是想考察业务思考点； 4. 后续的问题主要会接着业务场景问扣实际场景不问知识理论； 5. http 网络协议； 6. tcp 为什么是可靠的； 7. js 设计模式； 8. solid 原则； 9. 柯里化； 10. curry 函数实现 11.https 原理 12.webpack 打包原理 13.babel 原理 14.node 相关基础问题 15. css 单行和多行截断 16.给一个由域名组成的字符串进行按子域名分组的反转，比如 news.toutiao.com 反转成 com.toutiao.news 需要 in place 做 17.其他技术问题都是穿插在我的业务项目里面的，有点针对实际情景给解决 18、实现一个 Promise.all 19、手写代码：给定一个数组，形如 [1, 1, 2 , 3, 3, 3, 3, 4, 6, 6]，给定一个数 n，例如 3，找出给定的数 n 在数组内出现的次数，要求时间复杂度小于 O(n)

三轮： 1.自己做得最有成就的项目 2.自己主动承担并是核心的项目 3.项目深度:比如现场实现 vue 的数据代理等 4.技术广度:什么是微前端等 5.职业发展 6. 小程序架构优化， 7. 二叉树 8. diff 算法， 9. 页面渲染原理 10. 图像算法 11. 事件循环 12. 长列表渲染 13. 前端安全

HTML

  1. 针对移动浏览器端开发页面，不期望用户放大屏幕，且要求“视口（viewport）”宽度等于屏幕宽度，视口高度等于设备高度，如何设置？ 移动 web 前端 viewport 详解

meta使用详细总结 2.data-xxx 属性的作用是什么？ HTML5 data-属性: 定义和用法data- 属性用于存储页面或应用程序的私有自定义数据。data-属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。 存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。data- 属性包括两部分： 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符 属性值可以是任意字符串 注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。 这里的data-前缀就被称为data属性，其可以通过脚本进行定义，也可以应用CSS属性选择器进行样式设置。数量不受限制，在控制和渲染数据的时候提供了非常强大的控制。 html:

css: .mm{width:256px; height:200px;}.mm[data-name='张含韵']{background:url(http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg) no-repeat;}.mm[data-name='undefined']{background:url(http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg) no-repeat;} js: expense = document.getElementById('day2-meal-expense').dataset; 3.请描述一下cookies，sessionStorage和localStorage的区别？

之前总结过:http://www.jianshu.com/p/da227e50df43 HTTP cookies 详解 微软的 IE6 SP1 在 cookie 中引入了一个新的选项：HTTP-only，HTTP-Only 背后的意思是告之浏览器该 cookie 绝不能通过 JavaScript 的 document.cookie 属性访问。设计该特征意在提供一个安全措施来帮助阻止通过 JavaScript 发起的跨站脚本攻击 (XSS) 窃取 cookie 的行为

4.什么是浏览器的标准模式（standards mode）和怪异模式（quirks mode） 目前浏览器的排版引擎有三种模式：怪异模式（Quirks mode）、接近标准模式（Almost standards mode）、以及标准模式（Standards mode）。在怪异模式下，排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。为了支持在网络标准被广泛采用前，就已经建好的网站，这么做是必要的。在标准模式下，行为即（但愿如此）由 HTML 与 CSS 的规范描述的行为。在接近标准模式下，只有少数的怪异行为被实现。 那么所谓标准模式，就一定都“标准”吗？答案当然是否定的，因为各个浏览器厂商实现标准的阶段不同，所以各个浏览器的“标准模式”之间也会有很大的不同。 Firefox、Safari、Chrome、Opera (自 7.5 以后)、 IE8 和 IE9 都有一个准标准模式。那么既然标准模式都不那么标准，准标准的模式肯定就更不标准了。 • 浏览器如何决定用哪个模式？ 对 HTML 文件来说，浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。为了确保你的页面使用标准模式，请确认你的页面如同本范例一样拥有 DOCTYPE：

Hello World! • 范例中的DOCTYPE，，是所有可用的DOCTYPE之中最简单的，而且是HTML5 所推荐的。HTML的早期变种也属于推荐标准，不过今日的浏览器都会对这个 DOCTYPE 使用标准模式，就算是已过时的 Internet Explorer 6 也一样。目前并没有正当的理由，去使用其他更复杂的 DOCTYPE。如果你使用其他的 DOCTYPE，你可能会冒着触发接近标准模式或者怪异模式的风险。 • 使用 请确定你把 DOCTYPE 正确地放在 HTML 文件的顶端。任何放在 DOCTYPE 前面的东西，比如批注或 XML 声明，会令 Internet Explorer 9 或更早期的浏览器触发怪异模式。 在 HTML5中，DOCTYPE 唯一的作用是启用标准模式。更早期的 HTML 标准会附加其他意义，但没有任何浏览器会将 DOCTYPE 用于怪异模式和标准模式之间互换以外的用途。 • • 浏览器的标准模式与怪异模式的设置与区分方法 由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。 火狐一直工作在标准模式下，但IE（6，7，8）标准模式与怪异模式差别很大，主要体现在对盒子模型的解释上，这个很重要，下面就重点说这个。那么浏览器究竟该采用哪种模式渲染呢？这就引出的DTD，既是网页的头部声明，浏览器会通过识别DTD而采用相对应的渲染模式： 浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。 对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype。 对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析。 在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。 可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。 在ie6中，如果在doctype声明前有一个xml声明(比如:)，则采用quirks mode解析。这条规则在ie7中已经移除了。 如何判定现在是标准模式还是怪异模式： 方法一：执行以下代码 alert(window.top.document.compatMode) ;//BackCompat 表示怪异模式//CSS1Compat 表示标准模式 方法二：jquery为我们提供的方法，如下： alert($.boxModel)alert($.support.boxModel) CSS

  1. 解释一下盒模型宽高值的计算方式，边界塌陷，负值作用，box-sizing概念。 盒模型 a. ie678怪异模式（不添加 doctype）使用 ie 型，宽度=边框+padding+内容宽度 b. chrome， ie9+, ie678(添加 doctype) 使用标准盒模型，宽度= 内容宽度 box-sizing content-box（默认） 布局所占宽度Width： Width = width + padding-left + padding-right + border-left + border-right 布局所占高度Height: Height = height + padding-top + padding-bottom + border-top + border-bottom border-box 布局所占宽度Width： Width = width(包含padding-left + padding-right + border-left + border-right) 布局所占高度Height: Height = height(包含padding-top + padding-bottom + border-top + border-bottom) • 边界塌陷 • 负值作用 display:inline-block是什么呢？相信大家对这个属性并不陌生，根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。 在margin属性中一共有两类参考线，top和left的参考线属于一类，right和bottom的参考线属于另一类。top和left是以外元素为参考，right和bottom是以元素本身为参考。 margin:-10px 20px -30px 40px; 这时候 margin 的解析逻辑是怎样的呢？首先我们要搞清 div 的和周边元素的关系，div 没有相连元素，而此时 div 的 containing block 是 body 产生的 block box。则根据上面介绍的参考线原理，div 的左外边距以 containing block 的 content 左边为参考线，及此时以 body 的 content 左边为参考线进行水平向右位移，位移的大小为 40px，同理，上边距以 body 的 content 上边为参考线进行垂直向上位移 10px（负值和正值的方向相反），下边距依照现在 div 的 borer 下边（此时的 div 已经经过上边距位移过了）垂直向上位移 30px（此时，margin 不会改变 box 的 border 内的物理大小，但会改变 box 的逻辑大小，即：以此 box 的 margin 的下边为参考的元素，不是从 box 的物理位置开始的，而是从逻辑位置开始），右边距依照现在 div 的 borer 右边（此时的 div 已经经过左边距位移过了）水平向右位移 20px。或许有朋友问你分析的顺序怎么和 margin 表达式中出现的顺序不一样？如果按照 margin 表达式中出现的顺序来分析，结果是一样的，只是为了更好的方便大家的理解而没有按照表达式的顺序来分析。 应用 左右固定，中间自适应（双飞翼）那些年，奇妙的圣杯与双飞翼，还有负边距

main contentleftright*{ margin:0; padding: 0 }.main{ float: left; width: 100%; } .main .main-content{ margin: 0 210px; background-color: rgba(33, 114, 214, 0.8); height: 500px } .left{ width: 200px; float: left; background-color: rgba(255, 82, 0, 0.8); margin-left: -100%; height: 200px } .right{ width: 200px; height: 200px; margin-left: -200px; float: left; background-color: rgba(90, 243, 151, 0.8); } 负边距+定位：水平垂直居中 还有其他。。 [margin,padding]任一方向的百分数都是相对于包含块的宽度(width)的。 一般left和right(用于absolute/fixed)在一个样式是只能使用其一，不能left和right都设置，要么使用left就不使用right，要么使用right就不使用left，如果left和right均使用将会出现兼容问题，一个对象设置了靠左left多少距离，自然右边距离自然就有了所以无需设置左边。 相同道理，top和bottom对一个对象只能使用其一，不然会出现逻辑兼容问题。譬如一个人让你往左走，一个人让你往右走，同时发出往左往右走这个时候你也不好判断往那边走。 BFC(Block Formatting Context)是什么？有哪些应用？ Block Formatting Context，中文直译为块级格式上下文。BFC就是一种布局方式，在这种布局方式下，盒子们自所在的containing block顶部一个接一个垂直排列，水平方向上撑满整个宽度（除非内部盒子自己建立了新的BFC）。两个相邻的BFC之间的距离由margin决定。在同一个BFC内部，两个垂直方向相邻的块级元素的margin会发生“塌陷”。 通俗一点，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。 如何创建BFC float属性不为none overflow不为visible(可以是hidden、scroll、auto) position为absolute或fixed display为inline-block、table-cell、table-caption BFC的作用 • 1.清除内部浮动我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。 • 2.垂直margin合并在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。折叠的结果： 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 两个外边距一正一负时，折叠结果是两者的相加的和。这个同样可以利用BFC解决。关于原理在前文已经讲过了。 • 3.创建自适应两栏布局在很多网站中，我们常看到这样的一种结构，左图片+右文字的两栏结构。 显然，这是文字受到了图片浮动的影响。当然，如果你想做文本绕排的效果，浮动是不二之选。不过在这里，这显然不是我们想要的。此时我们可以为P元素的内容建立一个BFC，让其内容消除对外界浮动元素的影响。给文字加上overflow:hidden 如何要求容器在宽度自由很缩的情况下，A/B/C的宽度始终是1:1:1，如何实现，写出两种方法。 flex: .div1 { width: 100%; height: 400px; border: 1px solid #888; flex-direction: row; /**主要代码*/ display: flex; /* align-items: center; */ /* justify-content: center; */ } .div { /* position:absolute; */ /* width:500px; */ flex-grow: 1; border: 1px solid #888; } 百分数布局:inline-block元素间间隙产生及去除详解:div2div3div4

.div1 { width: 100%; height: 400px; background-color: red; } .div2{ margin-left: 5%; } .div { width:30%; display:inline-block; background-color:#888; } JavaScript 函数中的 arguments 是什么？是数组吗？若不是，如何将它转化为真正的数组？ arguments 不是真正的数组。没有数组的方法 function a(){ console.log(arguments); var args = Array.prototype.slice.call(arguments); console.log(args); /arguments.forEach(function(){ })/ } a(1,2,3) 列举 JavaScript 中 typeof 操作符的可能结果，如何区分：{}和[]类型？ Function 中的 call、apply、bind 的区别是什么？请针对每一个写出一个代码示例。 使用 jQuery，找到 id 位 selector 的 select 标签中有用 data-target 属性为 isme 的 option 的值？ var se = $("#selector option[data-target=isme]"); console.log(se.val()); 优化代码 for(var i = 0; i < document.getElementsByTagName('a').length; i++) { document.getElementsByTagName'a'.onmouseover = function(){ this.style.color = 'red'; }; document.getElementsByTagName'a'.onmouseout = function(){ this.style.color = ''; }; 回流与重绘：CSS 性能让 JavaScript 变慢？ 翻译计划-重绘重排重渲染 通过类修改样式 有时候我们需要通过 JavaScript 给元素增加样式，比如如下代码： element.style.fontWeight = 'bold';element.style.backgroundImage = 'url(back.gif)';element.style.backgroundColor = 'white';element.style.color = 'white';//... 这样效率很低，每次修改 style 属性后都会触发元素的重绘，如果修改了的属性涉及大小和位置，将会导致回流。所以我们应当尽量避免多次为一个元素设置 style 属性，应当通过给其添加新的 CSS 类，来修改其 CSS 当一个元素的外观的可见性 visibility 发生改变的时候，重绘(repaint)也随之发生，但是不影响布局。类似的例子包括：outline, visibility, or background color。根据 Opera 浏览器，重绘的代价是高昂的，因为浏览器必须验证 DOM 树上其他节点元素的可见性。而回流更是性能的关键因为其变化涉及到部分页面（或是整个页面）的布局。一个元素的回流导致了其所有子元素以及 DOM 中紧随其后的祖先元素的随后的回流。 如何避免回流或将它们对性能的影响降到最低？ • 如果想设定元素的样式，通过改变元素的 class 名 (尽可能在 DOM 树的最末端)（Change classes on the element you wish to style (as low in the dom tree as possible)） • 避免设置多项内联样式（Avoid setting multiple inline styles） • 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值（Apply animations to elements that are position fixed or absolute） • 权衡平滑和速度（Trade smoothness for speed） • 避免使用 table 布局（Avoid tables for layout） • 避免使用 CSS 的 JavaScript 表达式 (仅 IE 浏览器)（Avoid JavaScript expressions in the CSS (IE only)） “离线”的批量改变和表现 DOM。“离线”意味着不在当前的 DOM 树中做修改。你可以：通过 documentFragment 来保留临时变动。 • 复制你即将更新的节点，在副本上工作，然后将之前的节点和新节点交换。 • 通过 display:none 属性隐藏元素（只有一次重排重绘），添加足够多的变更后，通过 display 属性显示（另一次重排重绘）。通过这种方式即使大量变更也只触发两次重排。 • 不要频繁计算样式。如果你有一个样式需要计算，只取一次，将它缓存在一个变量中并且在这个变量上工作。 • 通常情况下，考虑一下渲染树和变更后需要重新验证的消耗。举个例子，使用绝对定位会使得该元素单独成为渲染树中 body 的一个子元素，所以当你对其添加动画时，它不会对其它节点造成太多影响。当你在这些节点上放置这个元素时，一些其它在这个区域内的节点可能需要重绘，但是不需要重排。 事件绑定 当使用 addEventListener()为一个元素注册事件的时候，句柄里的 this 值是该元素的引用。其与传递给句柄的 event 参数的 currentTarget 属性的值一样。 document.addEventListener("mouseover", function(e){ var target = e.target; if(target.nodeName.toLowerCase() === 'a'){ target.style.color = 'red'; } }, false)document.addEventListener("mouseout", function(e){ var target = e.target; if(target.nodeName.toLowerCase() === 'a'){ target.style.color = ''; } }, false) 请设计一个算法。将两个有序数组合并为一个数组。请不要使用 concat 以及 sort 方法。 Javascript 排序算法之合并排序（归并排序）的 2 个例子 function merge(left, right) { var result = [], il = 0, ir = 0;

while (il < left.length && ir < right.length) { if (left[il] < right[ir]) { result.push(left[il++]); } else { result.push(right[ir++]); } } result.push(left[il] ? left[il] : right[ir]); return result; }var left = [1, 4, 7];var right = [2, 5]; console.log(merge(left, right)) 这个方法有个缺陷，left 更大的时候，后面的元素没了 改下： function merge(left, right) { var result = [], il = 0, ir = 0;

while (il < left.length && ir < right.length) { if (left[il] < right[ir]) { result.push(left[il++]); } else { result.push(right[ir++]); } } //这里注意 result = result.concat(left[il] ? left.slice(il) : right.slice(ir)); return result; }var left = [1, 4, 7, 8, 9, 10];var right = [2, 5]; console.log(merge(left, right))

1.块级元素和行内元素有什么区别，举例常用的块级和行内元素，行内元素有 padding／margin 吗？ 2.call,apply,bind 的区别，并举例使用的场景 3.画出一个正方形，并且自适应，列出的方法越多越好 这个题，注意 padding：30%， 这里问到很多题

首先问a，p宽高 然后给img加了绝对定位，a，p的宽高 然后给p加relative，img加margin-top：30%，margin-left：30%， 变成top：30%，left：30% 这个题真是能问的多种多样，多方向的考你css基础知识，a标签还有img我感觉还能考关于基线的问题。 ……这个题之后面试结束了。 • 当时到这个题的时候12点多了，然后面试官带我去吃饭，说这个是他们公司的习惯，都会带候选人来吃顿食堂的饭，有红烧肉，吃的好爽，期间，面试官吐槽了下百度。。。。。。。问了我下想换工作原因，公司的情况，和我实际的工作经验等等等。 4.父级元素下面无固定宽高的块元素，实现水平垂直居中 使用flex，问了一会flex。面试官要是想问应该还能问很多，感觉知识很充分啊 5.argument是数组吗？不是的话，怎么变成数组 不是，类数组对象， var a=[].slice.call(argments) 5.写出下面会输出的值 if([]==false){console.log(1)};if({}==false){console.log(2)};if([]){console.log(3)}if([1]==[1]){console.log(4)} // 只输出1,3 这个是隐式转换，if([])直接调用blooean()方法，==号的转换套路要知道 6.修改错误，可以使用es6 for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000 * i); } // 使得其输出为0，1，2，3，4 这个把var变成let就可以，也可以使用一个闭包，不过要彻底理解这个题，很有可能还能问出来js事件循环，这个之前很火的一个面试题 7.写出节流函数,并说明在什么场景下使用 这个题，我当时随手写了一个防抖，结果被问了很多 防抖的话更多运用在输入框搜索，每次keyup事件走一个接口 //其实是防抖var debounce = function(delay, fn){ var last return function(){ var ctx = this, args = arguments clearTimeout(last) last = setTimeout(function(){ fn.apply(ctx, args) }, delay) } } 由于写了防抖，于是面试官给我讲解了下节流，大约是每一个delay时间段内走一次fn，感觉如果答出来继续会问如果是滚动条，想第一开始触发就走fn。underscore.js里面关于节流写的挺完美的，可以参照。 8.从一个无序，不相等的数组中，选取N个数，使其和为M实现算法 这个其实是一个01背包的简单版，然而我并不会，乱七八糟说了一个思路，然后面试官直接说，如果数组里面有负数，一上来面试就直奔算法题，紧张。 面试官会引导你的思路，也没有为难，感觉我不会，就把问题简单话。 如：选取4个数和，可以先把可以组成的四个数的情况全部列出来，然后筛选和可以为M的。 面试官很棒有没有，我说用穷举法。好了，怎么穷举，我当时满脑子已经是这是笛卡尔啊笛卡尔乘积啊啊啊啊。 然后面试官继续引导我，说可以使用归纳法先思考，如组成2个数为M的和 答：两个for循环嵌套呗，多个呢？递归啊，写出来试试。。。。。。。然后没有然后，绵绵飒飒我当时觉着自己要恶补算法了。 整个面试过程更像是一次学习，面试过程中遇到不会的会引导你的思路，最后没有写出来也会告诉你应该怎么写，也会等很久等你思考，非常的有耐心，也没有架子。 问了下别人，一面过了，二面会问关于设计模式，bind的实现方法，还会看下你的github

学习的技术栈 我就扯了扯，html，css，JavaScript，jquery，react，webpack，react-native,node。。。 金额转换的问题 说实话，刚开始看到算法题的时候就很慌….自己算法本来就差…想了一个思路结果被面试官说我这个思路不行… function toS(num){ let reg = /(?=(\B\d{3})+$)/g; ///B 表示匹配非单词边界的元字符，而/b 表示匹配单词边界 console.log(num.match(reg)); console.log(num.replace(reg,",")) } toS(1000000000+"");//1,000,000,000 数组去重的问题 面试官看到我第一个算法题做的不够理想，于是就问了我第二个问题。这个我直接回答的是：利用 set 集合做…面试官说不要这样，用原生的试试。我就老老实实的说，那就遍历这个数组吧。每遍历一次，就去掉重复的数据，依次往后遍历。面试官又说这个时间复杂度太高了….好吧，我还是没有想法。 后来听同学说可以用排序算法做，在排序比较的时候去除重复的元素…最快可以是 nlogn。后悔当时怎么没想到… 大数相加问题 好吧，前面算法题都不够理想。又来了一道大数相加的问题。我勒个擦，以前好像看过这一个题目忘了具体怎么做的了。脑子里想的是对齐两个数的位数，然后相加进位这样子…面试官好像不太满意。又 gg。到这里我就觉得这个面试怕是要凉了。 JS 的数据类型 面试官可能看到我算法太差了，就转过头来问了问 JS 的基本数据类型。嘿，这个我会：number,boolean,string,undefined,null,object,symbol。 JS 中基本数据类型和引用类型在内存上有什么区别？ 这个…这个…，我弱弱的说 JS 中我不太清楚，但是 Java 中引用类型一般是存在堆区的….好吧面试官就直接说，JS 和 Java 是不太一样的…妹的，又不会。 tostring 和 valueof 有什么区别 后来面试官问我，undefined==null 吗？我说是的 true，又问为什么。我说，==导致了两边对象进行了隐式数据类型转换，都变成了 number 类型的，这里两边都变成了 0，所以返回 true。 然后面试官就往深层次问了：[0]==0? what???我知道[]==0 是 true，但是[0]==0??，我想[0]是数组对象，强制转换的时候会调用它的 valueof 方法，这里应该是返回 0，两边应该相等吧…结果我并没有相信自己…就弱弱的说了句返回 false 吧。。。面试官后来都提示我了 valueof 返回的是什么？噗…. 我说如果是对象的话会调用 tostring 然后转换成 number 进行比较，而数组对象则是 valueof。。。 于是就问了我 tostring 和 valueof 的区别，很显然我答不上来。又 gg 一波。 position 的值 看来面试官心里有个底了，于是就开始问我 css 中 position 的取值有哪些。 嘿，这个我还是能回答的。 “relative,static,absolute,sticky,fixed,initial,inherit,unset”。。。 面试官问我了，说 absolute 是相对哪个元素定位的？我依稀记得是相对不为 static 的元素定位的，但是不太确定。就说了相对父级元素中最近的 relative 定位。面试官好像不太满意我的回答… 然后又问了我 unset 有什么作用，OS:我没用过啊…，回答不知道。 unset 是 initial 和 inherit 的组合值…哪个属性有值就是哪个 谈一谈你对浮动的理解 ok，这个我还是会一点的。就说了浮动时高度塌陷，为了避免这个问题可以使用伪元素清除浮动，或者使用 BFC 容器。 好吧一提到清除浮动，面试官就问我了解过.clearfix 这个类吗？ 我说用过。 看过源码吗？ .clearfix:before,.clearfix:after { display: table; content: " " } .clearfix:after { clear: both } 浏览器这块，了解过 GC 吗？ 了解过一点，像 JS 的话就是利用标记清除法来回收内存的。然后就说了什么情况下添加标记，什么时候去除标记。 “你谈谈如何给对象添加标记” 最近 webpack 的新版本有什么新特性 这个问题我直接就直接说课程太多，没了解过…面试官表示理解。 谈谈 HTTPS 我说了它的默认端口号为 443，能够建立可靠的安全的信息通道，能够更加快速的传递数据…面试官好像不太满意. 谈谈 CDN 加速 我说，这个是选择最近的节点返回资源… 面试官说怎么选择？有什么算法？ 除了高程外还看过什么书吗？ 好的，你有什么问题问我的吗？

一面 一面问的问题非常基础，反正就是很多面试基本会问的东西。 • 常用的块级元素和行内元素有哪些 • 块级元素的特点 • img 是什么类型的元素 • 说一下你了解的浮动 • 为什么要清除浮动？举个实际场景 // TODO

• 说一下你了解的盒模型 // TODO

• css3 用过什么 • box-sizing 的各个属性有什么区别 • float 和 position 一起用是什么效果 • rem 用过吗？做不同手机的适配怎么做？ • 写个二分查找 • 箭头函数特点？ var a = {b: ()=> {console.log(this);},c: function() {console.log(this);} } a.b(); // ??? a.c(); // ??? •

•	vue的双向绑定和依赖收集
•	vuex是做什么的？缺点？
•	cookie和session区别？
•	后端怎么存储session？
•	讲一下登录验证全过程（涉及session）
•	进程和线程的区别？
•	webpack3升级到4为什么会提升速度？
•	webpack优化有哪些？
•	大概就这么多了，总体来说比较简单都是常见的问题，我之前写二分查找的时候面试官还给我挖坑，问我乱序数组怎么二分查找？我说二分查找的前提条件就是数组有序。面试官也没说什么了。然后hr就通知二面
二面
二面比一面难一点，但是也是挺常见的问题，分为三种方向：前端方向、网络方向、算法方向。
•	script的async有什么用



•	手写懒加载（考虑防抖和重复加载问题）
•	手写bind
•	给页面注入50万个li怎么做提升性能？
•	fileReader用过吗？base64编码原理？
•	setTimeout一定会按时执行吗？
•	讲一讲event loop（微任务、宏任务等）
•	https的过程？
•	http请求的报文头部是什么？
•	http有哪些方法？option是做什么的？
•	你一般用的MIME类型有哪些？
•	http缓存？
•	手写快排
•	分治算法
•	只记住这么多了，其他的印象不深刻，反正不会很难。
三面
•	经历了前两轮面试本来我是很自信的，然而三面面完只剩下懵逼...面试官不问基础，一上来就让我做题
•	实现一个简单的打桌球游戏，构建一个小球类、球杆类、球桌类，在游戏主类中实现核心算法。
•	题还没完成就说不用写了，我大概了解你的思路了。然后就问我下面几个问题
•	github那些项目怎么做的，为什么想做这些？
•	你在阿里实习做过最难的最深入的东西是什么？
•	webpack的css-loader原理讲一下
•	然后面试就结束了，负责通知的hr给我说两周内出结果让我耐心等待。本来以为自己凉了因为没有hr面，结果在头条的师兄说这次是技术面，过段时间hr再统一面试.......那再等等吧，希望大家秋招都能拿到满意的offer~




一、实现Bind函数
其实本来不是考查这个的，仅仅是考查bind的用法。后来题目做出来面试官又继续问如何实现bind。下面是参考MDN的polyfill写出来的代码：
if(!Function.prototype.bind){
  Function.prototype.bind = function(context){
    // 首先判断this是不是function
    if(typeof this !== 'function'){
      // 抛出错误
    }
    var _this = this,
          fNOP = function(){},    // 用于后面维护原型关系
          args = Array.prototype.slice.call(arguments, 1),    // 取出bind收到的参数，除去第一个作为上下文的参数并保存
          fBound = function(){
            _this.call(context, args.concat(Array.prototype.slice.call(arguments)))   // 将bind接收的的参数和实际接收到的参数相连接
          };
    // 维护原型关系
    if(this.prototype){
        fNOP.prototype = this.prototype;
        fBound.prototype = new fNOP;
    }
    return fBound;
  }
}
二、实现节流函数
有一个高频操作会让函数迅速执行很多次，需要按照下面的时间线图来实现一个节流函数。
var throttle = function(fn){
  var timer = null;
  return function(){
    var args = arguments, context = this;
    clearTimeout(timer);
    timer = setTimeout(function(){
      fn.call(context, args)
    }, 100)
  }
}
这跟javascript高级程序设计中的实现方式差不多，其实严格来说这种实现方式并不叫节流函数，而是防抖函数：短时间内多次调用同一函数，只执行最后一次调用。
下面是改进：var throttle = function(fn){
  var timer = null;
  return function(){
    var args = arguments, context = this;
    if(!timer){
      timer = setTimeout(function(){
        timer = null;
        fn.call(context, args)
      }, 100);
    }
  }
}
如此一来这个功能基本上就可以实现了，但是仍有一个问题，第一次调用的时候函数并没有执行，而是直接从第三次调用开始执行的，那么我们再改进一下，加一个第一次调用时的哨兵即可：var throttle = function(fn){
  var timer = null, first = true;
  return function(){
    var args = arguments, context = this;
    if(first){
      first = false;
      fn.call(context, args)
    }
    if(!timer){
      timer = setTimeout(function(){
        timer = null;
        fn.call(context, args)
      }, 100);
    }
  }
}
三、穷举组合
实现一个函数，给三个参数，data是整形数组，m和sum都是一个整数，从data中取出n个整数，使它们的和为sum，求出一种组合即可。 我的思路是穷举data中的n个key的组合，假设data有6(n)个元素，从中取出3(m)个数，那么它key的组合就有：[0,1,2]、[0,1,3]、[0,1,4]、[0,1,5]、[0,2,3]、[0,2,4]、[0,2,5]、...、[3,4,5] 列出它的所有组合就好办了，直接用这些key去data里面取数，如果找到答案就退出程序。 下面仅给出穷举组合的算法，为了简单，相关参数写死并忽略全局污染：
// 数组a用于存放key的组合，data并没有出现，只给出data元素个数nvar a=[0,1,2], oldA = [],n = 6, len = a.length;function listArr(key){
    let same = true
    for(let i = 0 ; i < len ; i++){
        if(a[i] !== oldA[i]){
            same = false
            break
        }
    }
    if(!same){
        console.log(a)
        oldA = Array.prototype.slice.call(a)
    }
}function list(currentKey, initValue){
    if(currentKey >= len || initValue >= n){
        return
    }
    for(let v = initValue ; v <= n + currentKey - len ; v++){
        a[currentKey] = v
        arguments.callee(currentKey+1, v+1)
        listArr(currentKey);
    }
}list(0,0)




JS打乱数组
function shuffle(arr) {
    let i = arr.length;
    while (i) {
        let j = Math.floor(Math.random() * i--);
        [arr[j], arr[i]] = [arr[i], arr[j]];
    }
}
JS 预编译
js预编译实现过程：
1.js首先扫描var关键字，提前到顶端；
2.然后扫描function定义，提到var之后
3.然后再顺序执行
JS ajax
//步骤一:创建异步对象var ajax = new XMLHttpRequest();//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get','getStar.php?starName='+name);//步骤三:发送请求
ajax.send();//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {if (ajax.readyState==4 &&ajax.status==200) {
    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
　　　　console.log(ajax.responseText);//输入相应的内容
　　}
}
JS bind 实现
if (!Function.prototype.bind) {
    Function.prototype.bind = function () {
        var self = this,                        // 保存原函数
        context = [].shift.call(arguments), // 保存需要绑定的this上下文
        args = [].slice.call(arguments);    // 剩余的参数转为数组
        return function () {                    // 返回一个新函数
            self.apply(context,[].concat.call(args, [].slice.call(arguments)));
        }
    }
}

Function.prototype.bind = function (...arg) {
    var self = this;
        var newArr = [...arg];                       // 保存原函数
    var context = newArr.shift(); // 保存需要绑定的this上下文
    return function (...arg2) {
                var arr = [...newArr];
                Array.prototype.push.apply(arr,arg2)
                self.apply(context,arr);
    }
}
懒加载
let lazyImages = [...document.querySelectorAll('.lazy-image')]let inAdvance = 300 // 自定义一个高度，当距离300px到达图片时加载
function lazyLoad() {
    lazyImages.forEach(image => {
        if (image.offsetTop < window.innerHeight + window.pageYOffset + inAdvance) { // 距离xxpx时加载图片
            image.src = image.dataset.src
            image.onload = () => image.classList.add('loaded')
        }
    })

    // if all loaded removeEventListener
}

lazyLoad()
window.addEventListener('scroll', _.throttle(lazyLoad, 16)) // 用到了lodash的节流函数window.addEventListener('resize', _.throttle(lazyLoad, 16))
JS实现promise
function PromiseM(){
    this.status='pending';
    this.msg='';
    var process=arguments[0];
    var that=this;
    process(function(){
        that.status='resolve';
        that.msg=arguments[0];
    },function(){
        that.status='reject';
        that.msg=arguments[0];
    });
    return this;
}
PromiseM.prototype.then=function(){
    if(this.status=='resolve'){
        arguments[0](this.msg);
    }
    if(this.status=='reject'&&arguments[1]){
        arguments[1](this.msg);
    }
}
JS发布订阅模式
const event = {
    clientList: [],
    listen: function(key , fn) {
        if (this.clientListen[key]) {
            this.clientList[key] = []
        }
        this.clientList[key].push(fn)
    },
    trigger: function() {
        const key = Array.prototype.shift.call(arguments)
        const fns = this.clientList[key]
        if (!fns || fns.length === 0 ) {
            return false
        }
        for (let i = 0, fn ;fn = fns[i++];) {
            fn.apply(this, arguments)
        }
    },
    remove : function(key , fn) {
        const fns = this.clientList[key]
        if (!fns) {
            return false
        }
        if (!fn) {
            fns && (fns.length = 0)
        } else {
            for (let l = fns.length - 1; l>=0; l--) {
                const _fn = fns[l]
                if ( _fn ===fn) {
                    fns.splice(l, 1)
                }
            }
        }
}
const installEvent = (obj) => {
    for (let i in event) {
        obj[i] = event[i]
    }
}
JSONP
var script = document.createElement('script');
  script.type = 'text/javascript';

  // 传参并指定回调执行函数为onBack
  script.src = 'http://www.domain-com:8080/login?user=admin&callback=onBack';
  document.head.appendChild(script);

  // 回调执行函数
  function onBack(res) {
      alert(JSON.stringify(res));
  }
JS 获取url参数
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
}

CSS
无限旋转
@keyframes rotate{
    0%{
        transform: rotate(0);
      }
    50%{
        transform:rotate(200deg);
    }
    100%{
         transform: rotate(0);
        }
    }
.rotate{
    transition: 0.5s;
    transform-origin: 30px 30px;
    animation: rotate 10s linear infinite;  /*开始动画后无限循环，用来控制rotate*/
}
卡牌翻转
.wutai{
    position: relative;
    perspective: 800px;
    width: 220px;
    height: 292px;
    transform-style: preserve-3d;
}#trans{
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 1s;
    transform-style: preserve-3d;
}.back{transform: rotateY(180deg);}.flip{transform: rotateY(180deg);}
CSS性能优化
前端性能优化之CSS详细解读 - 秋虹连宇 - 博客园
自适应和响应式的区别
自适应开发几套样式，响应式一套样式
自适应和响应式的介绍和区别 - 林大夏的专栏 - CSDN博客
display 有兼容性怎么办
.box{
    display: -webkit-box;  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;     /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;  /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex;         /* 新版本语法: Opera 12.1, Firefox 22+ */
}
.flex1 {
    -webkit-box-flex: 1   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;     /* OLD - Firefox 19- */
    -webkit-flex: 1;      /* Chrome */
    -ms-flex: 1           /* IE 10 */
    flex: 1;              /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
网络篇
get请求
对称加密和非对称加密区别 对称加密采用了对称密码编码技术，它的特点是文件加密和解密使用相同的密钥加密
也就是密钥也可以用作解密密钥，这种方法在密码学中叫做对称加密算法，对称加密算法使用起来简单快捷，密钥较短，且破译困难，除了数据加密标准（DES），另一个对称密钥加密系统是国际数据加密算法（IDEA），它比DES的加密性好，而且对计算机功能要求也没有那么高
与对称加密算法不同，非对称加密算法需要两个密钥：公开密钥（publickey）和私有密钥（privatekey）。
公开密钥与私有密钥是一对，如果用公开密钥对数据进行加密，只有用对应的私有密钥才能解密；如果用私有密钥对数据进行加密，那么只有用对应的公开密钥才能解密。因为加密和解密使用的是两个不同的密钥，所以这种算法叫作非对称加密算法。
非对称加密算法实现机密信息交换的基本过程是：甲方生成一对密钥并将其中的一把作为公用密钥向其它方公开；得到该公用密钥的乙方使用该密钥对机密信息进行加密后再发送给甲方；甲方再用自己保存的另一把专用密钥对加密后的信息进行解密。甲方只能用其专用密钥解密由其公用密钥加密后的任何信息。
https和http的区别
•	HTTPS和HTTP的区别主要如下：
1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
•	HTTP与HTTPS的区别
https的缺点
虽然说HTTPS有很大的优势，但其相对来说，还是存在不足之处的：
（1）HTTPS协议握手阶段比较费时，会使页面的加载时间延长近50%，增加10%到20%的耗电；
（2）HTTPS连接缓存不如HTTP高效，会增加数据开销和功耗，甚至已有的安全措施也会因此而受到影响；
（3）SSL证书需要钱，功能越强大的证书费用越高，个人网站、小网站没有必要一般不会用。
（4）SSL证书通常需要绑定IP，不能在同一IP上绑定多个域名，IPv4资源不可能支撑这个消耗。
（5）HTTPS协议的加密范围也比较有限，在黑客攻击、拒绝服务攻击、服务器劫持等方面几乎起不到什么作用。最关键的，SSL证书的信用链体系并不安全，特别是在某些国家可以控制CA根证书的情况下，中间人攻击一样可行。
http option的作用
简而言之，OPTIONS请求方法的主要用途有两个：
1、获取服务器支持的HTTP请求方法；
2、用来检查服务器的性能。
其实在正式跨域之前，浏览器会根据需要发起一次预检（也就是option请求），用来让服务端返回允许的方法（如get、post），被跨域访问的Origin（来源或者域），还有是否需要Credentials(认证信息)等。
强缓存和协商缓存的缓存，是从哪里拿的？
http缓存
TCP与UDP的区别
[TCP与UDP连接区别.md](../../html&css/TCP与UDP连接区别.md)

算法
选择排序
function selectionSort(arr) {
    var len = arr.length;
    var minIndex, temp;
    for (var i = 0; i < len - 1; i++) {
        minIndex = i;
        for (var j = i + 1; j < len; j++) {
            if (arr[j] < arr[minIndex]) {     //寻找最小的数
                minIndex = j;                 //将最小数的索引保存
            }
        }
        temp = arr[i];
        arr[i] = arr[minIndex];
        arr[minIndex] = temp;
    }
    return arr;
}
二分查找算法
function binarySearch(data,item,start,end){
    var end=end || data.length-1;
    var start=start || 0;
    var m=Math.floor((start+end)/2);
    if(item === data[m]){
        return m;
    }else if(item<data[m]){
        return binarySearch(data,item,start,m-1) //递归调用
    }else{
        return binarySearch(data,item,m+1,end);
    }
    return false;
}
归并算法
function merge(left, right) {
  var tmp = [];

  while (left.length && right.length) {
    if (left[0] < right[0])
      tmp.push(left.shift());
    else
      tmp.push(right.shift());
  }

  return tmp.concat(left, right);
}

function mergeSort(a) {
  if (a.length === 1)
    return a;

  var mid = ~~(a.length / 2)
    , left = a.slice(0, mid)
    , right = a.slice(mid);

  return merge(mergeSort(left), mergeSort(right));
}

回文算法
```js
function palindrome(str) {
    var newstr = str.replace(/[^0-9a-z]/gi, "");
    newstr = newstr.toLowerCase();
    for (var i = 0, j = newstr.length - 1; i < j; i++, j--) {
        if (newstr.charAt(i) !== newstr.charAt(j))
        {
            return false; //逐个字符比较，不匹配返回false
        }
    }
    return true;
}

节流函数 function throttle(method,delay,duration){ var timer=null; var begin=new Date(); return function(){ var context=this, args=arguments; var current=new Date(); clearTimeout(timer); if(current-begin>=duration){ method.apply(context,args); begin=current; }else{ timer=setTimeout(function(){ method.apply(context,args); },delay); } } } 函数消抖 function debounce(method,context){ clearTimeout(method.tId); method.tId=setTimeout(function(){ method.call(context) },300) }function debounce(method,delay){ var timer = null; return function(){ var context = this,args = arguments; clearTimeout(timer); timer = setTimeout(function(){ method.apply(context,args); },delay); } } const throttle = (method, delay, duration) => { const date = new Date(); let timer = null; return function (...arg){ const current = new Date(); clearTimeOut(timer); if(current - data >= duration){ method.apply(this, arg); date = current; } timer = setTimeOut(() => { method.apply(this, arg); }, delay) } } IndexOf 的实现 function ArrayIndexOf(arr,value,n){ var i=isNaN(n)?0:n;//有第三参时 i=(i<0)?arr.length+i:i;//第三参为负数时 for(i;i<arr.length;i++){ if(arr[i]===value){return i;} }return -1; }

面试过程中面试官提了哪些问题 • 1.行内元素和块级元素 • 2.回流和重绘 • 3.进程和线程的区别 • 4.怎么通信 • 5.操作系统里如何调度 • 6.计算机网络的七层模型 • 7.http 在哪一层，tcp 呢 • 8.tcp 和 udp 区别 • 9.setTimeOut • 10.原型链代码 • 11.继承 • 12.Ajax 的作用全称 • 13.Apply\call 的区别 • 14.什么时候清除浮动 • 15.同源策略 • 16.跨域的方式 • 17.事件轮询 • 18.浏览器如何渲染页面 • 19.Tcp 三次握手四次挥手 • 20.http 请求方式 • 21.二分法代码 • 22.垂直居中的代码适合什么环境 • 23.React 的虚拟 dom


```js
rollup和webpack的区别

特性：
    rollup 所有资源放同一个地方，一次性加载，利用tree-shaking，减少代码体积
    webpack 拆分代码、按需加载  webpack3已经逐渐支持tree-shaking

    rollup:
        1. 编译出来的代码 可读性好，打包后生成的bundle内容十分干净，没有什么多余的代码，只是将各个模块按照依赖顺序拼接起来，所有模块构建在一个函数内（Scope Hoisting），执行效率更高
        2. 编译时依赖处理 自然比运行时依赖处理 性能更好
        3. 天然原生支持tree-shaking
    webpack：
        1. 通过loader处理各种各样的资源依赖
        2. HMR模块热替换
        3. 代码按需加载
        4. 提取公共模块

什么情况下会有 DOM 性能影响呢？

一般数据比较少的情况下，DOM 性能问题不明显，但是数据量多的时候累计起来的性能问题就会造成卡顿，用户体验差。

浏览器页面的 DOM 主要性能问题一般来源于页面的重绘和重排。

重排和重绘

浏览器的渲染进程

箭头函数的 this 指向哪里

箭头函数和普通函数的区别

谈谈你对 this 指向的理解

node 中如何进行进程之间的通讯？

进程之间的通讯和创建进程有关，node 有 4 中创建进程的方式，分别为

  • spawn，执行脚本命令

  • exec，执行脚本命令

  • execFile，执行脚本文件

  • fork，克隆进程 spawn 和 exec 不同点在于 spawn 返回 stream，exec 返回 buffer，由于 buffer 是有大小限制（默认 200K），因此 spawn 适合子进程返回大量数据的情形。

通讯方式有 4 种：

  1. 通过 stdin/stdout 传递 json 明显的限制是需要拿到“子”进程的 handle，两个完全独立的进程之间无法通过这种方式来通信（比如跨应用，甚至跨机器的场景） 使用例子如下： index.js 文件

const { spawn } = require("child_process");
const child = spawn("node", ["./stdio-child.js"]);
child.stdout.setEncoding("utf8");
// 父进程-发
child.stdin.write(
  JSON.stringify({
    type: "handshake",
    payload: "你好吖",
  })
);
// 父进程-收
child.stdout.on("data", function (chunk) {
  const data = chunk.toString();
  const message = JSON.parse(data);
  console.log(`${message.type} ${message.payload}`);
});

stdio-child.js 文件

// 子进程-收
process.stdin.on("data", (chunk) => {
  const data = chunk.toString();
  const message = JSON.parse(data);
  switch (message.type) {
    case "handshake":
      // 子进程-发
      process.stdout.write(
        JSON.stringify({
          type: "message",
          payload: message.payload + " : hoho",
        })
      );
      break;
    default:
      break;
  }
});

  1. 原生 IPC 支持 明显的限制是需要拿到“子”进程的 handle，两个完全独立的进程之间无法通过这种方式来通信（比如跨应用，甚至跨机器的场景） index.js 文件

const cp = require("child_process");
const n = cp.fork("./stdio-child.js");

n.on("message", (m) => {
  console.log("PARENT got message:", m);
});

// 引起子进程打印：CHILD got message: { hello: 'world' }
n.send({ hello: "world" });

stdio-child.js 文件

process.on("message", (m) => {
  console.log("CHILD got message:", m);
});

// 引起父进程打印：PARENT got message: { foo: 'bar', baz: null }
process.send({ foo: "bar", baz: NaN });

  1. 使用 socket 有一个 node-ipc 依赖包是基于 socket 试下了跨机器间的进程通信。

  2. 使用 MQ、Redis 等消息列队通信方式 这种方式在 node 使用的场景比较少。

心跳检测

上一页2022.05.14下一页HR面试准备

最后更新于

这有帮助吗？