如何准备面试?

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

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

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

前端,不管是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 哈哈

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 数组对象根据对象中指定的属性去重?你知道多少

    有一天有一个朋友给我发来消息 “数组对象根据对象中指定的属性去重?让我写写看”,看到这个的时候我有点懵逼,好像不太会。

    sunseekers
  • 移动端下拉刷新和上拉加载实现

    最近在做移动端开发,移动端的性能不如 PC 端,屏幕页没有 PC 大,需要我们优化的东西很多;在工作中我所做的移动端小页面,无一例外的都是将网页嵌入到安卓或者 ...

    sunseekers
  • React 总结初稿一

    18 年转眼即逝,不同寻常的一样。这一年我毕业了,入坑前端。工作只用 vue ,自己又学了 react , TypeScript ,小程序,这些在工作中从未用到...

    sunseekers
  • ③热敏电阻解析

    昨天预告的今天写蜂鸣器的,但是在《如何用单片机设计一款产品》中写的标号是热敏电阻在蜂鸣器之前,所以今天先写了热敏电阻,蜂鸣器明晚送上,见谅!

    单片机技术宅
  • 昆明市成立大数据产业联盟,云通讯公司“环信”获1.03亿融资 | 大数据24小时

    数据猿导读 IBM Watson与Salesforce就AI技术达成战略合作;全通讯能力云品牌服务商“环信”获1.03亿元融资;大数据营销公司“谦玛网络”新三板...

    数据猿
  • 在已经配置了Tensorflow的虚拟环境中配置Opencv

    在开发环境里面已经安装了tensorflw,但是有时候需要进行底层图像处理,需要配置opencv,下面介绍在虚拟环境中配置opencv的方法。

    于小勇
  • 已知空间两点组成的直线求线上某点的Z值

    已知空间两点组成的直线求线上某点的Z值,为什么会有这种看起来比较奇怪的求值需求呢?因为真正三维空间的几何计算是比较麻烦的,很多时候需要投影到二维,再反推到三维空...

    charlee44
  • 【iOS开发】自动识别剪贴板内容

    之前用淘宝给微信好友分享链接的时候,发现在微信中复制了宝贝的链接,然后再从后台切换到淘宝客户端,淘宝就会弹出一个页面,询问是否要跳转到相关页面,今天试着实现了一...

    KyXu
  • 《AI+化学与制药》论坛:有AI就不搬砖,化学逆合成也可以借鉴AlphaGo的思想

    2020年6月29日,未来论坛·青创联线上学术研讨会YOSIA Webinar举办第三期论坛,主题为《AI+化学与制药,人工智能为药物研发和化学研究按下快进键》...

    AI科技评论
  • 树莓派基础实验17:温度传感器实验

       温度传感器是检测温度并将其转换为输出信号的组件。根据材料和部件的特点,温度传感器可分为热电阻和热电偶两种,热敏电阻是前者的一种,他由半导体材料制成。大多数...

    张国平

扫码关注云+社区

领取腾讯云代金券