未来几个月内,将迎来一波人才合理流动。
没有面试成功的面试经验却来分享面试,估计也只有我能做这样的事情了哈哈。我现在只是在为了面试而准备,在准备的过程中无意间发现自己还有很多不懂的地方,所以拿出来说一说写一写。题外话,无论你是否有或者在看机会,我们都应该保持两个月一次的被面试,是让我们保持对行情的了解,对知识的进一步学习。更是一次学习交流的机会,让我们不在局限于目前工作
为什么要了解浏览器工作原理?
前端,不管是pc端还是移动端,都是在最终要在浏览器上面运行展示的。所以我们首先应该了解的是浏览器的工作原理,前端借助于浏览时引擎而展示,如果我们连最基础浏览器工作原理都不太明白,那么我们如何进行性能优化?如何提高用户体验?如何将我们的工作做到极致?你可能会告诉我网上有很多性能优化的方案,随便找找复制粘贴就好的,是的完全可以这样,没有任何问题。早期的我就是这样的,那时候的我可能是并没有想再前端这个行业长久发展,只是想混口饭吃,混过面试。但是在实际的工作中,我发现了项目的问题,当你请求一个网页,从请求到页面渲染要等上30s,你就知道项目项目优化的重要性,等等。现在的我想在前端这个行业走的更久,更远,或许已经是一种追求了。所以我想和你说去了解了解浏览器的工作原理吧?我自己不太懂,来不来这么好的文章,我推荐一篇,我自己觉得写的好不错的
zhuanlan.zhihu.com/p/47407398
好好利用开发工具
前面我说到了了解浏览器工作原理,我假设你已经了解了浏览器工作原理了,那么接下来我们就可以有针对性开展进行网页的性能。网上说了那么多可以优化的方案,我们可以一一尝试一下,是的,完全没有任何问题。但是如果你想更加精确准确的了解到底是哪里耗时多,影响了最终的展示?想对症下药的话,我建议你还是好好利用开发工具,开发工具精确无误告诉你哪里需要优化,可以进行如何优化。不一定会比网上好,但是一定不会差。我不会写一篇文章告诉你如何利用开发工具,我写不来那么好的文章,这东西有时效性,我建议你去看官方文档,人家写的比我好多了,管用还是实时更新的
developers.google.com/web/tools/c…
说说我刷的面试题
我是在准备面试,是在准备哟,而不是已经面试了。多么希望自己要不要面试直接入职呀!欢迎有经验的评论指点,好让我顺利面试完,入职公司。哈哈 前面说了那么多废话,好好利用开发工具,了解浏览器工作原理,这些可能面试观都不会问你。
- 伪类
在写样式的时候,或许还用 class
,id
,但是在我的工作中我很少用到 id
,用 class
用的多,但是有时候会词穷,不知道要写怎么语义话的名字。这时候我喜欢用伪类,方便。伪类和伪元素是有区别的,不要混淆。
p:first-child
=> 表示在一组兄弟元素中的第一个元素。
p:nth-child(1)
=> 这个 CSS 伪类首先找到所有当前元素(p)的子元素底下的第一个
我用这两个用的比较多,所以就直说他了,你想要了解更多,看文档
developer.mozilla.org/zh-CN/docs/…
- 重绘和回流(重排)
不同的人会给不同的组合,但是实际上却就是一个意思,网上也有很多很不错的答案来解释,我就不一一贴链接了,就说说自己最简单粗暴的理解
重绘:页面属性发生变化(只影响外观,不影响布局),比如颜色改变,不影响布局吧
重排(回流):页面结构发生变化(会发生很昂贵的代价,影响布局),比如宽度改变要影响布局吧
- ++之前和++之后的区别
a++ : 先用a的原值,然后a加1;
++a :先给a加1,然后用a的新值
- [] == [] //false,都是对象,长得一样,可是确引用了不同的地址,所以不相等 [] == ![] //true,这个解释就好像有点麻烦了,![]会转化为一个boolean进行比较。所以就相等了, 上面都是我自己瞎扯的,可以自行https://www.google.com/ 或者https://www.baidu.com
- ['1','2','3'].map(parseInt)?? [1, NaN, NaN] 应该是和
parseInt()
的第二个参数有关系parseInt
的基数radix
,导致出现超范围的radix
赋值和不合法的进制解析,才会返回NaN
。 - 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],所以是引用了同一段地址
- 多个数组合并之后去重
建议自己先写然后在看我的
利用对象属性的唯一性去重
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…
- 数组的
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 哈哈