AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【前端面试题】我靠它拿到了大厂Offer 二

2022-05-29 183
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
全局流量管理 GTM，标准版 1个月
云解析 DNS，旗舰版 1个月
公共DNS（含HTTPDNS解析），每月1000万次HTTP解析
简介： 【前端面试题】我靠它拿到了大厂Offer

第79题：柯里化函数

实现一个Add函数，满足以下功能：

add(1); // 1

add(1)(2); // 3

add(1)(2)(3)； // 6

add(1)(2, 3); // 6

add(1, 2)(3); // 6

add(1, 2, 3); // 6

  • 解析：
function add(){
  let args = [...arguments];
  let addfun = function(){
    args.push(...arguments);
    return addfun;
  }
  addfun.toString = function(){
    return args.reduce((a,b)=>{
      return a + b;
    });
  }
  return addfun;
}

参考：

第78题：给定一个数组 nums，编写一个函数将所有 0 移动到数组的末尾，同时保持非零元素的相对顺序

const result = (arr) => arr.filter(Boolean).concat([...Array(arr.length - arr.filter(Boolean).length).fill(0)])
console.log(result([0,1,0,3,0,12,0,0]))
const arr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 0, 0, 0, 1, 9, 9, 9, 0, 0, 0, 0, 1, 0, 3, 12, 0, 0, 0, 0];
    const len = arr.length;
    console.log(len)
    for (let i = len; i >= 0; i--) {
      if (arr[i] === 0) {
        arr.splice(i, 1);
        arr.push(0)
      }
    }
console.log(arr)

第77题：打印出 1 - 10000 之间的所有对称数, 例如：121、1331 等

[...Array(10000).keys()].filter((x) => { 
  return x.toString().length > 1 && x === Number(x.toString().split('').reverse().join('')) 
})

let result=[]
for(let i=1;i<10;i++){
    result.push(i)
    result.push(i*11)
    for(let j=0;j<10;j++){
        result.push(i*101+j*10)
        result.push(i*1001+j*110)
    }
}

这个方法把1~9考虑在内：

第76题： Promise.all 的使用、原理实现及错误处理

Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。

  • 如果传入的参数是一个空的可迭代对象，则返回一个已完成（already resolved）状态的 Promise。
  • 如果传入的参数不包含任何 promise，则返回一个异步完成（asynchronously resolved） Promise。注意：Google Chrome 58 在这种情况下返回一个已完成（already resolved）状态的 Promise。
  • 其它情况下返回一个处理中（pending）的Promise。这个返回的 promise 之后会在所有的 promise 都完成或有一个 promise 失败时异步地变为完成或失败。 见下方关于“Promise.all 的异步或同步”示例。返回值将会按照参数内的 promise 顺序排列，而不是由调用 promise 的完成顺序决定。
  • 使用:
var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
}); 
Promise.all([p1, p2, p3]).then(values => { 
  console.log(values); // [3, 1337, "foo"] 
});
  • 错误处理：
var p1 = new Promise((resolve, reject) => { 
  setTimeout(resolve, 1000, 'one'); 
}); 
var p2 = new Promise((resolve, reject) => { 
  setTimeout(resolve, 2000, 'two'); 
});
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'three');
});
var p4 = new Promise((resolve, reject) => {
  setTimeout(resolve, 4000, 'four');
});
var p5 = new Promise((resolve, reject) => {
  reject('reject');
});
Promise.all([p1, p2, p3, p4, p5]).then(values => { 
  console.log(values);
}, reason => {
  console.log(reason)
});
//From console:
//"reject"
//You can also use .catch
Promise.all([p1, p2, p3, p4, p5]).then(values => { 
  console.log(values);
}).catch(reason => { 
  console.log(reason)
});
//From console: 
//"reject"

Promise.all 在任意一个传入的 promise 失败时返回失败。例如，如果你传入的 promise中，有四个 promise 在一定的时间之后调用成功函数，有一个立即调用失败函数，那么 Promise.all 将立即变为失败。

参考：

第75题：input 搜索 如何处理中文输入

触发compositionstart时，文本框会填入 “虚拟文本”（待确认文本），同时触发input事件；在触发compositionend时，就是填入实际内容后（已确认文本）。例如：中文输入法输入内容时还没将中文插入到输入框就验证的问题，

为此，我们可以在中文输入完成以后才验证。即：在compositionend发生后再进行逻辑的处理：

var cpLock = true;
$('.com_search_input').on('compositionstart', function () {
        cpLock = false;
//      console.log("compositionstart")
    });
    $('.com_search_input').on('compositionend', function () {
        cpLock = true;
//      console.log("compositionend")
    });
$(".com_search_input").on("input",function(e){
e.preventDefault();
var _this = this;
// console.log("input");
setTimeout(function(){
if (cpLock) {
//开始写逻辑
  console.log("逻辑")
}
},0)
})

使用延时器的原因：

因为选词结束的时候input会比compositionend先一步触发，此时cpLock还未调整为true，所以不能触发到console.log(“逻辑”)，故用setTimeout将其优先级滞后。

第74题：Vue 的父组件和子组件生命周期钩子执行顺序是什么

  • 加载渲染过程：
    父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
  • 子组件更新过程：
    父beforeUpdate->子beforeUpdate->子updated->父updated
  • 父组件更新过程：
    父beforeUpdate->父updated
  • 销毁过程：
    父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

第73题：旋转数组

问题描述：

将包含* n* 个元素的数组向右旋转 *k *步。

例如，如果 n = 7 , k = 3，给定数组 [1,2,3,4,5,6,7] ，向右旋转后的结果为 [5,6,7,1,2,3,4]。

解析：利用解构数组和数组的splice方法

function rotateArr(arr,k) {
  return [...arr.splice(k+1),...arr];
}
rotateArr([1,2,3,4,5,6,7],3);

第72题：对象的键名的转换

  1. 对象的键名只能是字符串和 Symbol 类型。
  2. 其他类型的键名会被转换成字符串类型。
  3. 对象转字符串默认会调用 toString 方法。

考察：下列代码输出结果：

// example 1
var a={}, b='123', c=123;
a[b]='b';
a[c]='c'; // c 的键名会被转换成字符串'123'，这里会把 b 覆盖掉。
console.log(a[b]); // 'c'
// example 2
var a={}, b=Symbol('123'), c=Symbol('123');
a[b]='b';// b 是 Symbol 类型，不需要转换
a[c]='c';// c 是 Symbol 类型，不需要转换。任何一个 Symbol 类型的值都是不相等的，所以不会覆盖掉 b
console.log(a[b]);//'b'
// example 3
var a={}, b={key:'123'}, c={key:'456'};
// b 不是字符串也不是 Symbol 类型，需要转换成字符串。
// 对象类型会调用 toString 方法转换成字符串 [object Object]。
a[b]='b';
// c 不是字符串也不是 Symbol 类型，需要转换成字符串。
// 对象类型会调用 toString 方法转换成字符串 [object Object]。这里会把 b 覆盖掉。
a[c]='c';
console.log(a[b]);//'c'

第71题：数组里面有10万个数据，取第一个元素和第10万个元素的时间相差多少

在jsperf中进行了测试，点击查看。

第70题：用Proxys实现双向数据绑定

参考

第69题：BFC、IFC、GFC和FFC

FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC

块级格式化上下文：就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。怎样会产生BFC：

  • float的值不为none。
  • overflow的值不为visible。
  • position的值不为relative和static。
  • display的值为table-cell, table-caption, inline-block中的任何一个。

IFC

内联格式化上下文：高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)。

IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。

  • IFC一般有什么用：
    水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
    垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

GFC

网格布局格式化上下文：当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。

FFC

自适应格式化上下文：display值为flex或者inline-flex的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少safari和chrome还是OK的，毕竟这俩在移动端才是王道。

Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。

伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。

第68题：for与forEach性能

  • for 循环没有任何额外的函数调用栈和上下文；
  • forEach函数签名实际上是

array.forEach(function(currentValue, index, arr), thisValue)

它不是普通的 for 循环的语法糖，还有诸多参数和上下文需要在执行的时候考虑进来，这里可能拖慢性能；

参考

第67题：在字符串中查找匹配的字符串

const findStr = (s,t) => {
    let posArr = [];
    let index = s.search(t);
    while(index !== -1) {
      posArr.push(index);
      index = s.indexOf(t,index+t.length);
    }
    console.log(posArr);
  }
findStr('sdfsdf123er123','123');//[6,11]

第66题：webpack热更新原理

参考

第65题：字符串大小写操作

如何把一个字符串的大小写取反（大写变小写小写变大写），例如 ’AbC’ 变成 ‘aBc’

  function trans2Case(str) {
    let arr = str.split('');
    arr = arr.map((item)=>{
      return item === item.toUpperCase() ? item.toLowerCase() : item.toUpperCase();
    });
    return arr.join('');
  }
  console.log(trans2Case('AbC'))

第64题： 随机生成一个长度为 10 的整数类型的数组，例如 [2, 10, 3, 4, 5, 11, 10, 11, 20]，将其排列成一个新数组，要求新数组形式如下，例如 [[2, 3, 4, 5], [10, 11], [20]]。

function Array2Group(len) {
  //生成随机整数型数组
  let arr = Array.from({length:len},(f)=>{return Math.floor(Math.random()*100)})
  arr = arr.sort((a,b)=>{//升序排序
    return a-b;
  })
  //去重
  arr = arr.filter((item,index)=>{
    return item !== arr[index+1];
  })
  //分组,将连续的放在一组
  let continueArr = [], tempArr = [];
  arr.map((item,index)=>{
    tempArr.push(item);
    if(arr[index+1] !== ++item) {
      continueArr.push(tempArr);
      tempArr = [];
    }
  })
  console.log(continueArr)
}
Array2Group(9);

第63题：Babe是将ES6转换为ES5的原理

Babel的功能非常纯粹，以字符串的形式将源代码传给它，它就会返回一段新的代码字符串（以及sourcemap）。他既不会运行你的代码，也不会将多个代码打包到一起，它就是个编译器，输入语言是ES6+，编译目标语言是ES5。

Babel的编译过程跟绝大多数其他语言的编译器大致同理，分为三个阶段：

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

第1步转换的过程中可以验证语法的正确性，同时由字符串变为对象结构后更有利于精准地分析以及进行代码结构调整。

第2步原理就很简单了，就是遍历这个对象所描述的抽象语法树，遇到哪里需要做一下改变，就直接在对象上进行操作，比如我把IfStatement给改成WhileStatement就达到了把条件判断改成循环的效果。在.babelrc里配置的presets和plugins都是在第2步工作的。

第3步也简单，递归遍历这颗语法树，然后生成相应的代码

  • 抽象语法树是如何产生的：
  1. 分词：将整个代码字符串分割成 语法单元 数组
  2. 语义分析：在分词结果的基础之上分析 语法单元之间的关系

参考

第62题：a.b.c.d和a[‘b’][‘c’][‘d’]，哪个性能更高

a[‘b’][‘c’]和a.b.c，转换成AST前者的的树是含计算的，后者只是string literal，天然前者会消耗更多的计算成本，时间也更长

参考

第 61 题: 模拟实现promise的finally方法

promise.finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。即finally方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

上面代码中，不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数。

实现：

Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};

参考

第 60 题: token加密的实现原理

1、后端生成一个secret（随机数）

2、后端利用secret和加密算法(如：HMAC-SHA256)对payload(如账号密码)生成一个字符串(token)，返回前端

3、前端每次request在header中带上token

4、后端用同样的算法解密

参考

第 59 题: !important

不改变下面代码的情况下，设置width为330px

<img src="1.jpg" style="width:480px!important;”>

img {max-width:330px;}

第 58 题：求两个数组的交集

  • filter、include方法
ar nums1 = [1, 2, 2, 1], nums2 = [2, 2, 3, 4];
// 1.
// 有个问题， [NaN].indexOf(NaN) === -1
var newArr1 = nums1.filter(function(item) {
     return nums2.indexOf(item) > -1;
});
console.log(newArr1);
// 2.
var newArr2 = nums1.filter((item) => {
     return nums2.includes(item);
});
console.log(newArr2);

第 57 题：箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？

箭头函数是普通函数的简写，和普通函数相比，有以下几点差异：

  1. 函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。
  2. 不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
  3. 不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。
  4. 不可以使用 new 命令，因为没有自己的 this，无法调用 call，apply。
    同时，没有 prototype 属性 ，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 __proto__,new 过程大致如下：
function newFunc(father, ...rest) {
  var result = {};
  result.__proto__ = father.prototype;
  var result2 = father.apply(result, rest);
  if (
    (typeof result2 === 'object' || typeof result2 === 'function') &&
    result2 !== null
  ) {
    return result2;
  }
  return result;
}

new运算符

js中，。new运算符创建了一个继承于其运算数的原型的新对象，然后调用该运算数，把新创建的对象绑定给this。

如果你忘记使用new运算符，你得到的是一个普通的函数调用，并且this被绑定到全局对象，而不是新创建的对象。这意味着当你的函数尝试去初始化新成员属性时它将会污染全局变量。

如果你要使用new运算符，与new结合使用的函数应该以首字母大写的形式命名，并且首字母大写的形式应该只用来命名那些构造函数。

一个更好的做法是，不去使用new。

第 56 题：分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

  • 结构：
    display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击，
    visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击
    opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击
  • 继承：
    display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
    visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。
  • 性能：
    displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
    visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
    opacity: 0 ： 修改元素会造成重绘，性能消耗较少

第55题：class设计,设计LazyMan类，实现下述功能

LazyMan('Tony');
// Hi I am Tony
LazyMan('Tony').sleep(10).eat('lunch');
// Hi I am Tony
// 等待了10秒...
// I am eating lunch
LazyMan('Tony').eat('lunch').sleep(10).eat('dinner');
// Hi I am Tony
// I am eating lunch
// 等待了10秒...
// I am eating diner
LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');
// Hi I am Tony
// 等待了5秒...
// I am eating lunch
// I am eating dinner
// 等待了10秒...
// I am eating junk food
  • 解析
class LazyManClass {
  constructor(name) {
    this.taskList = [];
    this.name = name;
    console.log('Hi I am',this.name);
    let that = this;
    setTimeout(()=>{
      that.next();
    },0);
  }
  eat(name) {
    let that = this;
    let fn = (function(name) {
      return function() {
        console.log('I am eating',name);
        that.next();
      }
    })(name);
    that.taskList.push(fn);
    console.log(that.taskList)
    return that;
  }
  sleepFirst(time) {
    let that = this;
    let fn = (function(time) {
      return function() {
        setTimeout(()=>{
          console.log(`等待了${time}秒`);
          that.next();
        },time*1000);
      }
    })(time);
    that.taskList.unshift(fn);
    console.log(that.taskList)
    return that;
  }
  sleep(time) {
    let that = this;
    let fn = (function(time){
      return function() {
        setTimeout(()=>{
          console.log(`等待了${time}秒`);
          that.next();
        },time*1000);
      }
    })(time);
    that.taskList.push(fn);
    console.log(that.taskList)
    return that;
  }
  next() {
    let that = this;
    let fn = that.taskList.shift();
    console.log(that.taskList)
    if(typeof fn ==='function')
      fn && fn()
  }
}
function LazyMan(name){
  return new LazyManClass(name);
}
LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');

第 54 题：某公司 1 到 12 月份的销售额存在一个对象里面，如下：{1:222, 2:123, 5:888}，请把数据处理为如下结构：[222, 123, null, null, 888, null, null, null, null, null, null, null

  • Array.from()：方法从一个类似数组或可迭代对象中创建一个新的数组实例,例如：
console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]
  • 解析问题
let obj = {1:222, 2:123, 5:888};
const result = Array.from({ length: 12 })         //先生成一个长度为12的数组，里面的值为undefined
          .map((_, index) => obj[index + 1] || null); //然后对数组赋值
console.log(result)

参考

第 53 题：冒泡排序如何实现，时间复杂度是多少， 如何改进？

冒泡排序这个算法的名字由来是因为越大的元素会经由交换慢慢“浮”到数列的顶端（升序或降序排列），就如同碳酸饮料中二氧化碳的气泡最终会上浮到顶端一样，故名“冒泡排序”。

冒泡排序算法的原理如下：

  1. 比较相邻的元素。如果第一个比第二个大，就交换他们两个。
  2. 对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。
  3. 针对所有的元素重复以上的步骤，除了最后一个。
  4. 持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。

冒泡排序最好的时间复杂度为 O(n)，冒泡排序的最坏时间复杂度为 O(n^2) ,冒泡排序总的平均时间复杂度为 O(n^2) ,是一种稳定排序算法。

以升序为例：

// 升序冒泡
function bubbleSort(arr){
  const array = [...arr]
  for(let i = 0, len = array.length; i < len - 1; i++){
    for(let j = i + 1; j < len; j++) {
      if (array[i] > array[j]) {
        let temp = array[i]
        array[i] = array[j]
        array[j] = temp
      }
    }
  }
  return array
}

上述这种算法不太好，因为就算你给一个已经排好序的数组，如[1,2,3,4,5,6] 它也会走一遍流程，白白浪费资源。

  • 改进：加个标识，如果已经排好序了就直接跳出循环。
functionbubbleSort(arr){
  const array = [...arr]
  let isOk = true
  for(let i = 0, len = array.length; i < len - 1; i++){
    for(let j = i + 1; j < len; j++) {
      if (array[i] > array[j]) {
        let temp = array[i]
        array[i] = array[j]
        array[j] = temp
        isOk = false
      }
    }
    if(isOk){
      break
    }
  }
  return array
}

参考

第 52 题：执行顺序优先级

下列代码的执行结果：

var a = {n: 1};
var b = a;
a.x = a = {n: 2};
console.log(a.x)    //undefined
console.log(b.x)    // {n:2}
  • 1、优先级。.的优先级高于=，所以先执行a.x，堆内存中的{n: 1}就会变成{n: 1, x: undefined}，改变之后相应的b.x也变化了，因为指向的是同一个对象。
  • 2、赋值操作是从右到左，所以先执行a = {n: 2}，a的引用就被改变了，然后这个返回值又赋值给了a.x，需要注意的是这时候a.x是第一步中的{n: 1, x: undefined}那个对象，其实就是b.x，相当于b.x = {n: 2}

第 51 题：让一个 div 水平垂直居中

// no.1
div.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
// no.2
div.parent {
    position: relative; 
}
div.child {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}
//no.3
div.child {
    width: 50px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -5px;
}
//no.4
div.child {
    width: 50px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
//no.5
div.parent {
    display: grid;
}
div.child {
    justify-self: center;
    align-self: center;
}
//no.6
div.parent{
  display:flex;
}
div.child{
  margin:auto;
}

文章标签：
云解析DNS
JavaScript
前端开发
iOS开发
容器
自然语言处理
搜索推荐
网络架构
Web App开发
算法
编译器
关键词：
面试offer
前端offer
前端面试
前端面试题
前端面试offer
前端修罗场
目录
相关文章
土木林森
|
14天前
|
缓存 前端开发 JavaScript
"面试通关秘籍：深度解析浏览器面试必考问题，从重绘回流到事件委托，让你一举拿下前端 Offer！"
【10月更文挑战第23天】在前端开发面试中，浏览器相关知识是必考内容。本文总结了四个常见问题：浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析，帮助求职者更好地理解和准备面试。掌握这些知识点，有助于提升面试表现和实际工作能力。
土木林森
48 1
周一同学Zelina
|
2月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点，特别是围绕Git的使用进行了详细介绍，包括Git的基本概念、常用命令以及在团队协作中的最佳实践，同时还涉及了Chrome调试工具和Linux命令行的基础操作。
周一同学Zelina
28 1
「offer来了」浅谈前端面试中开发环境常考知识点
我是快乐的嘟嘟
|
3月前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
我是快乐的嘟嘟
177 57
游客zi3qmblbcdexu
|
24天前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
游客zi3qmblbcdexu
12 0
周一同学Zelina
|
2月前
|
存储 移动开发 前端开发
「offer来了」面试中必考的15个html知识点
该文章汇总了前端面试中常见的15个HTML知识点，涵盖了从HTML文档的规范书写、doctype声明的作用到新兴的HTML5标签应用及移动端viewport设置等内容，旨在帮助求职者更好地准备相关技术面试。
周一同学Zelina
38 0
「offer来了」面试中必考的15个html知识点
周一同学Zelina
|
2月前
|
Web App开发 前端开发 JavaScript
「offer来了」1张思维导图，6大知识板块，带你梳理面试中CSS的知识点！
该文章通过一张思维导图和六大知识板块系统梳理了前端面试中涉及的CSS核心知识点，包括CSS框架、基础样式问题、布局技巧、动画处理、浏览器兼容性及性能优化等方面的内容。
周一同学Zelina
19 0
你都不懂
|
3月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
你都不懂
49 2
sunyalei
|
3月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
sunyalei
37 0
游客zi3qmblbcdexu
|
3月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题
游客zi3qmblbcdexu
26 1
想飞的雪糕
|
25天前
|
存储 人工智能 前端开发
前端大模型应用笔记（三）：Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用，通过使用Transformer模型，实现了更智能的搜索功能，如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue，使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程，并展示了实际效果和待改进点。
想飞的雪糕
108 2

热门文章

最新文章

  • 1
    lemon oa前端页面——由user-base-list谈项目组织
  • 2
    好程序员web前端培训分享JavaScript学习笔记cookie
  • 3
    前端校验和后端校验的区别和优缺点
  • 4
    使用人人开源快速搭建项目前后端框架（附带商品分类管理示例），生成CRUD代码以及前端界面
  • 5
    前端，测试如何修改后端接口返回的响应数据
  • 6
    前端 时间个性化 插件 jquery.timeago.js
  • 7
    前端分页插件pagination
  • 8
    前端|AJAX入门
  • 9
    《智能前端技术与实践》——第 2 章 前端开发基础 ——2.5 与 Google 扩展程序相关的 JavaScript API
  • 10
    前端工作总结285-重置新增的mode
  • 1
    Java的前景如何，好不好自学？，万字Java技术类校招面试题汇总
    53
  • 2
    es集群安装，邮储银行java面试
    77
  • 3
    Android 11 中的存储机制更新，面试心得体会
    87
  • 4
    真的强！借助阿里技术博主分享的Android面试笔记，我拿到了字节跳动的offer
    60
  • 5
    【redis源码学习】持久化机制，java程序员面试算法宝典pdf
    75
  • 6
    Python中return和yield的区别，面试官不讲武德
    45
  • 7
    FFmpeg流媒体调试工具(六)，软件开发项目经理面试题
    105
  • 8
    我把Spring Cloud的超详细资料介绍给你，面试官不会生气吧？geigei
    73
  • 9
    Java大文件排序（有手就能学会），kafka面试题2024
    58
  • 10
    Flutter学习笔记&学习资料推荐，15分钟的字节跳动视频面试
    93

    • 相关课程

    更多
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    无影云桌面