如何准备面试?

December 17, 2023
测试
测试
测试
测试
7 分钟阅读

未来几个月内,将迎来一波人才合理流动。

没有面试成功的面试经验却来分享面试,估计也只有我能做这样的事情了哈哈。我现在只是在为了面试而准备,在准备的过程中无意间发现自己还有很多不懂的地方,所以拿出来说一说写一写。题外话,无论你是否有或者在看机会,我们都应该保持两个月一次的被面试,是让我们保持对行情的了解,对知识的进一步学习。更是一次学习交流的机会,让我们不在局限于目前工作

为什么要了解浏览器工作原理?

前端,不管是pc端还是移动端,都是在最终要在浏览器上面运行展示的。所以我们首先应该了解的是浏览器的工作原理,前端借助于浏览时引擎而展示,如果我们连最基础浏览器工作原理都不太明白,那么我们如何进行性能优化?如何提高用户体验?如何将我们的工作做到极致?你可能会告诉我网上有很多性能优化的方案,随便找找复制粘贴就好的,是的完全可以这样,没有任何问题。早期的我就是这样的,那时候的我可能是并没有想再前端这个行业长久发展,只是想混口饭吃,混过面试。但是在实际的工作中,我发现了项目的问题,当你请求一个网页,从请求到页面渲染要等上30s,你就知道项目项目优化的重要性,等等。现在的我想在前端这个行业走的更久,更远,或许已经是一种追求了。所以我想和你说去了解了解浏览器的工作原理吧?我自己不太懂,来不来这么好的文章,我推荐一篇,我自己觉得写的好不错的

zhuanlan.zhihu.com/p/47407398

好好利用开发工具

前面我说到了了解浏览器工作原理,我假设你已经了解了浏览器工作原理了,那么接下来我们就可以有针对性开展进行网页的性能。网上说了那么多可以优化的方案,我们可以一一尝试一下,是的,完全没有任何问题。但是如果你想更加精确准确的了解到底是哪里耗时多,影响了最终的展示?想对症下药的话,我建议你还是好好利用开发工具,开发工具精确无误告诉你哪里需要优化,可以进行如何优化。不一定会比网上好,但是一定不会差。我不会写一篇文章告诉你如何利用开发工具,我写不来那么好的文章,这东西有时效性,我建议你去看官方文档,人家写的比我好多了,管用还是实时更新的

developers.google.com/web/tools/c…

说说我刷的面试题

我是在准备面试,是在准备哟,而不是已经面试了。多么希望自己要不要面试直接入职呀!欢迎有经验的评论指点,好让我顺利面试完,入职公司。哈哈 前面说了那么多废话,好好利用开发工具,了解浏览器工作原理,这些可能面试观都不会问你。

  1. 伪类

在写样式的时候,或许还用 class ,id,但是在我的工作中我很少用到 id ,用 class 用的多,但是有时候会词穷,不知道要写怎么语义话的名字。这时候我喜欢用伪类,方便。伪类和伪元素是有区别的,不要混淆。

p:first-child => 表示在一组兄弟元素中的第一个元素。

p:nth-child(1) => 这个 CSS 伪类首先找到所有当前元素(p)的子元素底下的第一个

我用这两个用的比较多,所以就直说他了,你想要了解更多,看文档

developer.mozilla.org/zh-CN/docs/…

  1. 重绘和回流(重排)

不同的人会给不同的组合,但是实际上却就是一个意思,网上也有很多很不错的答案来解释,我就不一一贴链接了,就说说自己最简单粗暴的理解

重绘:页面属性发生变化(只影响外观,不影响布局),比如颜色改变,不影响布局吧

重排(回流):页面结构发生变化(会发生很昂贵的代价,影响布局),比如宽度改变要影响布局吧

  1. ++之前和++之后的区别

a++ : 先用a的原值,然后a加1;

++a :先给a加1,然后用a的新值

  1. [] == [] //false,都是对象,长得一样,可是确引用了不同的地址,所以不相等 [] == ![] //true,这个解释就好像有点麻烦了,![]会转化为一个boolean进行比较。所以就相等了, 上面都是我自己瞎扯的,可以自行https://www.google.com/ 或者https://www.baidu.com
  2. ['1','2','3'].map(parseInt)?? [1, NaN, NaN] 应该是和 parseInt() 的第二个参数有关系 parseInt 的基数 radix,导致出现超范围的 radix 赋值和不合法的进制解析,才会返回 NaN
  3. let a = {},b={key:1},c={key:2}; a[b] = 123; a[c] = 456; a[b]?? 答案:a[b] = 456 因为b,c是变量,a[b],a[c]相当于a[object object],所以是引用了同一段地址
  4. 多个数组合并之后去重

建议自己先写然后在看我的

利用对象属性的唯一性去重

function uniqueArray(arr,...rest){
        let array = arr.concat(...rest)
        let obj = {}
        let result = []
        array.forEach(item=>{
          obj[item]?'':obj[item]=true && result.push(item)
        })
    return result
      }
  uniqueArray([1,2],[3,4,2],[9,0,2])
复制代码
function uniqueArray(arr,...rest){
        let array = arr.concat(...rest)
        let obj = {}
        return array.reduce((pre,next)=>{
          obj[next]?'':obj[next]=true&&pre.push(next)
          return pre
        },[])
      }
  uniqueArray([1,2],[3,4,2],[9,0,2])
复制代码

数组方法去重

function uniqueArray(arr,...rest){
      let array = arr.concat(...rest)
      let uniqueArray = []
  array.forEach((item,index)=>{
    if(array.indexOf(item)==index){
      uniqueArray.push(item)
    }
  })
  return uniqueArray
    }
uniqueArray([1,2],[3,4,2],[9,0,2])
复制代码

es6 去重

function uniqueArray(arr,...rest){
      let array = arr.concat(...rest)
     let map = new Map()
  array.forEach(item=>{
    if(!map.has(item)){
      map.set(item,item)
    }
  })
  console.log(map.values())
  return [...map.values()]
    }
uniqueArray([1,2],[3,4,2],[9,0,2])
复制代码

这道题很基础,但是我去觉得他涉及到的知识面不少,还可以扩展

扩展,数组对象根据指定的属性去重?确保唯一性???这个可以自己思考,利用上面的方法可实现,这个是上面的升级版。贴一个我以前写的链接

juejin.im/post/5bc897…

  1. 数组的 reduce

之前没怎么用 reduce ,不知道原来 reduce 可有这么强大,上面尝试之后,去了解了一下 reduce 的文档,贴链接

developer.mozilla.org/zh-CN/docs/…

如果你看链接,就不要看我接下来的废话了

二维数组转化为一维数组

[[2,3],[4,5],[0]].reduce((prev,next)=>{
    return prev.concat(next)
},[])
复制代码

计算数组中每个元素出现的次数

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var countedNames = names.reduce(function (allNames, name) { 
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
复制代码

按属性对 object 分类节

var people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupedPeople = groupBy(people, 'age');
复制代码

数组去重

let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current)=>{
    if(init.length===0 || init[init.length-1]!==current){
        init.push(current);
    }
    return init;
}, []);
复制代码

好了,暂时就先写到这里了,以后在慢慢更。最近在准备面试应该有很多要慢慢写的

我也不例外的在准备,看是否有更好的机会。请推荐 github.com/sunseekers 哈哈

继续阅读

更多来自我们博客的帖子

如何安装 BuddyPress
由 测试 December 17, 2023
经过差不多一年的开发,BuddyPress 这个基于 WordPress Mu 的 SNS 插件正式版终于发布了。BuddyPress...
阅读更多
Filter如何工作
由 测试 December 17, 2023
在 web.xml...
阅读更多
如何理解CGAffineTransform
由 测试 December 17, 2023
CGAffineTransform A structure for holding an affine transformation matrix. ...
阅读更多