首页

当前位置:永利皇宫463登录 > 首页 > 前端面试,前端面试4

前端面试,前端面试4

来源:http://www.makebuLuo.com 作者:永利皇宫463登录 时间:2019-10-05 06:20

前端面试【有感而发】

2015/09/16 · HTML5, JavaScript · 1 评论 · 面试

原文出处: 聂微东(@聂微东)   

首先,这篇没有具体的面试题;

其次,这篇仅是我个人的面试态度;

最后,在这金三银四的跳槽季里,祝愿各位找到好工作。

俺第一次做面试官是2011年,想起那时自己真的很紧张(不管做什么头几次都紧张哈),可是还是在希望在面试者面前留个比较专业的印象,所以总是装作很淡定,记得那时总会放一件修身小西装放公司,专门用来面试的时候穿的,装成熟,你懂得。现在回忆起那时的点滴,不由自主的会嘴角上扬:)

图片 1

——————————- 低调的分割线 ——————————-

 

“全世界都缺前端” —— 这话总会被提起,PM尤其是喜欢这么说,而且还是在工作推动的过程中(我会告诉你我这是在黑PM么)

面试一直是俺工作中重要的一块,而且自己也喜欢去参与面试(工作忙爆的时间除外)。原因究竟为甚其实我自己也说不上来,可能是因为心里希望在工作时可以与聪明的人合作吧;也可能是希望通过面试push自己去主动了解行业新的技术…Anyhow,也就一头扎进了面试官的行列,且乐此不疲。

图片 2

前端回忆录  

8年前的前端做些什么?页面重构(HTML+CSS)和实现页面交互(JS+CSS);jQuery也是在8年前诞生(06年8月发布V1.0);

4年前业内提出大前端,这直接让前端职位在产品和业务中变得更加重要,甚至是最重要的存在,在以前的技能基础上又需要掌握一门服务端语言和少量数据库的经验(从那时开始身边经常有朋友由后端转前端);

2年前的前端界Node开始疯狂火热,且一扫各种前端论坛、开源项目,狂热者更提出“JS一统WEB开发”的头号,数据结构简单点的网站建设只需要一个工程师即可搞定,那就是前端,叼炸天呀;

Now,全端工程师???maybe…

移动互联网风光依旧,前端更是无处不在。

可是… …

招人真心难,招前端更难,招个好前端难上加难有木有~~

图片 3

主观意识 & 经验主义  

工程师每轮面试时间一般为一小时左右,除非面试官对你没有兴趣,否则不会十几分钟就打发走你(我厂要求面试至少20分钟)。而且就在这差不多一小时,面试官要判断你是否符合招聘的岗位,这本身就是一件非常挑战的事情。正因为这样,所以面试官的决定都有一定的风险和主观意识,这不可避免。

许久以前看过一篇跟面试相关的文章,具体内容说什么忘记了,不过里面有一句话给我印象深刻,大概意思是:“很多面试官希望能招到个像自己的人,和自己类似的人”。很容易理解这句话,因为和自己类似所有更容易引起自身的关注,而且记忆会更深刻。这个“类似”俩字我理解应该至少包括几个方面:技术方向、性格、思维方式等。

我也同意会带着主观意识去面试,但我认为这并不是什么糟糕的事情。

具体点说,我会考虑你是否会push甚至引导团队的成长、与你合作是否会愉快,这也是我参与面试的原因之一。在此,希望你静静思考下,你在团队中是否属于这类人,至于是与不是由看官您自己评判了:)

图片 4

技术一面  

通常情况下工程师面试都有几轮?不管几轮都很正常,反而很少有听说只有一轮面试的,所以这里说的一面是纯技术的面试。

有时我会为面试面到一名优秀的同学而高兴不已,因为聊天会很畅快,而且决定很明朗。

更多时候我会比较纠结,因为我需要考虑给不给面试者通过我这关。正因如此,其实很多时候我做的每个选择都有一定的运气成分。

俺初期做面试官的时候,基本都是我主动来发问和出题,用自己的主观意识去考察面试者的方方面面。那时想当然的认为,这份岗位需要这些XX技能和用到这些XX技巧,所以如果面试者具备这些知识点就可以通过。

再后来面试的经验提升了,想明白了学习能力、思维方式和技术能力同样非常重要,所有会主要针对面试者比较擅长的领域来【交流、讨论】。

在面试这个过程里,我现在总会在正式面试之前,和面试者说句话:“面试就是聊天,我们简单聊聊吧”。

图片 5

本来想随便配个图,可是看到这个图片突然想起一首儿歌:丢肥皂 丢肥皂 轻轻的放在小基友的后面 大家不要告诉他 快点快点捉住他,快点快点捉住他…

好吧,节操碎了一地。

 

我的期待  

下周已经安排有六个面试。请思考,作为一名面试官应该对你又有怎样的期待?

俺的面试时的问题一般不固定,因为我不喜欢背题的做法。

有一定工作经验最好,当然没有也同样有机会,而且有工作经验对于面试也不一定都是好事。

PS:工作年限和项目经验决定了你的知识储备,所以也会有针对性的调整难度和问题。

 

在我看来评价一名同事是否优秀其实很简单, 看看他是否够【专业】就行了。那么合计合计,你自己对待工作是否对得住专业俩字。至于怎么理解专业俩字,还是见仁见智吧。

简历造假或者过分夸大。夸大自己的工作确实也属正常,可是如果夸大、夸大程度都需要有底线可言。经常会看到简历上写着精通XX,比如jQuery,然后面试的一问没有读过源码,对其细节原理说不出所以然来,这还不如不写。

记得前不久在微博上看 @朴灵 说过:“如果你的GitHub上没有任何项目和代码,简历上还是别填GitHub地址了,没啥好处的。”

期待你不要紧张、而且自信,让自己好的一面尽量的展现出来,努力把面试官当成你的同事,你只是与他探讨工作中的问题。甚至可以多提些自己觉得有意思的想法,如果能够和面试官一直存于一个较愉快的谈话环境,相信你的面试结论上,面试官一定不会吝啬对你进行正面的评价。

图片 6

总结  

面试其实也是修心的过程。

我毕业初期时找工作也并不顺利,不过多次在找工作面试的过程中经常会遇见很好的面试官,就算你没有达到他们的岗位要求,他们还是会中肯的给你一些靠谱的建议。这些面试过程就非常的美好,其实结果不一定是最重要的,过程也一样美妙,不是吗。

最后,请带着你积极的心态,好好享受每一次面试。

祝好

2 赞 3 收藏 1 评论

图片 7

伪类选择器

:link :visited :hover :active

<a></a>的样式顺序

:focus

表单获得焦点的样式

:first-child

如p:first-child, 指的是第一个p, 不是p的第一个元素. 必须声明<!DOCTYPE>,这样:first-child才能在IE中生效

:last-child

类似:first-child

:lang

q:lang(no), <lang="no">

:first-of-type

选择属于其父元素的首个 <x> 元素的每个 <p> 元素。与:first-child的不同在于它是区分类型的

:last-of-type

类似:first-of-type

:only-of-type

选择属于其父元素唯一的 <x> 元素的每个 <x> 元素。

:only-child

选择属于其父元素的唯一子元素的每个 <x> 元素。Internet Explorer 不支持 :only-child 选择器

:nth-child(n)

你懂的

:nth-last-child(n)

你懂的

:nth-of-type(n)

:nth-child在基础上多了类型限制

:nth-last-of-type(n)

:nth-last-child在基础上多了类型限制

:root

选择文档的根元素

:empty

选择没有子元素的每个元素(包括文本节点)

:target

(选择当前活动的 锚 元素)

:enabled

(如input的disabled="disabled")

:disabled

(如input的disabled="disabled")

:checked

(如input的checked="checked")

:not

(selector) (selector可以为一般选择器)

::selection

(选择被用户选取的元素部分。例如文本.)

打印: [0, 1, 2, 3, 4, 5]

目录

  • CSS相关
    • 选择器
      • 属性选择器
  • 创建了一个新对象
  • 将this指向这个新对象
  • 执行构造函数里面的代码
  • 返回新对象(this)
    6.你做过哪些性能优化
  • 网页内容
    1.减少http请求(通过 合并图片,合并CSS和JS文件)
    2.减少DNS的查询(DNS预解析)
    3.使用CDN
  • CSS
    1.将样式表置顶
    2.少用@import
  • js
    1.使用外部js和css(因为可以被缓存)
    2.减少dom操作
    7..前端路由的原理
    什么是路由?
    简单的说,路由是根据不同的 url 地址展示不同的内容或页面
    原理:在 HTML5 的 history API 出现之前,前端的路由都是通过 hash 来实现的,hash 能兼容低版本的浏览器。
  • HTML5 History
    两个新增的API: history.pushState 和 history.replaceState,两个 API 都会操作浏览器的历史记录,而不会引起页面的刷新。
  • Hash
    就是url 中看到 # ,我们需要一个根据监听哈希变化触发的事件( hashchange) 事件。我们用 window.location 处理哈希的改变时不会重新渲染页面,而是当作新页面加到历史记录中,这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容。
    8.call,apply和bind的区别
    它们在功能上是没有区别的,都是改变this的指向,它们的区别主要是在于方法的实现形式和参数传递上的不同
    ①:函数.call(对象,arg1,arg2....)
    ②:函数.apply(对象,[arg1,arg2,...])
    ③:var ss=函数.bind(对象,arg1,arg2,....)
    我们通过代码来更加明显的区别一下:

其他选择器

+

相邻

h1+p{}

~

后面兄弟

h1~p{}
//ES5的写法
var arr1 = [0,1,2];
var arr2 = [3,4,5];
Array.prototype.push.apply(arr1,arr2);
console.log(arr1);

属性选择器

~=

空格分割的值包含某值

.target[xxx~=yyy]{}

<div kk="aaa bbb yyy ccc"></div>

|=

连字符的值包含某值([lang~=en], 如<div lang="en-us">)

.target[lang~=en]{}

<div lang="en-us">

^=

以"xxx"开头

.target[attr1^=xxx]{}

$=

以"xxx"结尾

.target[attr1$=xxx]{}

=*

包含"xxx"

.target[attr1*=xxx]{}

function foo() {  
     var context=1;
     console.log(context);
     context=2;
      foo = function() {
        console.log(context);
     }
}

foo();

选择器

CSS相关

通过观察上面的代码,很明显的就可以得出它们三者的区别,仅仅是函数传递的不同以及bind方法可以更加的方便的使用

  • 解构赋值
[...'hello']
//['h','e','l','l','o']
var arr = Array.prototype.slice.apply(arguments);

注意:扩展运算符也只能放在最后一位,否则报错
5.当new Foo()时发生了什么

  • this对象的指向是可变的,但在箭头函数中是固定的,指向定义时所在的对象,而非调用时所在的对象
  • 不可以做构造函数,也就是不能使用new,否则抛出一个错误
  • 不可以使用arguments,因为它在函数体内不存在,可以用rest代替
    2.将arguments转换为数组

注意:rest参数只能是最后一个参数,否则报错;
rest参数可替代arguments

//arguments变量的写法
const sortNum = () => Array.prototype.slice.call(arguments).sort();
//rest参数的写法
const sortNum = (...numbers) => numbers.sort();

3.rest参数
用于获取函数的多余参数,它是一个数组

第一次打印1,之后都打印2

1.箭头函数使用需要注意的地方
this、new、arguments

var arr1 = [0,1,2];
var arr2 = [3,4,5];
[arr1,...arr2];
var arr = [...arguments];

9.闭包的应用
闭包+函数重写

 function show(sex){  
            console.log("普通函数"+sex);  
        }  
        var person={  
            name:"aa",  
            age:14  
        };  
        show.call(person,"男");  
        show.apply(person,["女"]);  
        //对于bind来说,用法更加的灵活  
        var ss=show.bind(person,"不明");  
        ss();  

可以理解为arguments.slice()(当然arguments里面没有slice方法)

4.扩展运算符...
作用:将数组转换为一个参数序列

打印: [0, 1, 2, 3, 4, 5]

应用:

add(...values){ } //values获取的是add的全部参数
add(arr, ...values){ }//values获取的是剩余的参数

*将字符串转换成真正的数组

// 判断element是否匹配选择器selector
function matchSelector(element, selector) {
    var match = 
        document.documentElement.webkitMatchesSelector || 
        document.documentElement.mozMatchesSelector || 
        document.documentElement.msMatchesSelector ||
        // 兼容IE8及以下浏览器
        function(selector, element) {
            // 这是一个好方法,可惜IE8连indexOf都不支持
            // return Array.prototype.indexOf.call(document.querySelectorAll(selector), this) !== -1;

            if (element.tagName === selector.toUpperCase()) return true;

            var elements = document.querySelectorAll(selector),
            length = elements.length;

            while (length--) {
            if (elements[length] === this) return true;
            }

            return false;
        };

    // 重写函数自身,使用闭包keep住match函数,不用每次都判断兼容
    matchSelector = function(element, selector) {
        return match.call(element, selector);
    };

    return matchSelector(element, selector);
}
//使用ES6
var arr1 = [0,1,2];
var arr2 = [3,4,5];
arr1.push(...arr2);

//ES5的写法
var arr1 = [0,1,2];
var arr2 = [3,4,5];

console.log(arr1.concat(arr2));
const [first, ...rest] = [1,2,3,4,5];
first //1
rest //[2,3,4,5]

本文由永利皇宫463登录发布于首页,转载请注明出处:前端面试,前端面试4

关键词:

上一篇:没有了

下一篇:没有了