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