面试指导

 (四)：面试前准备-有备而去百战百胜

4.1 步了解公司情况，准备三个问题向对方提问

ü  公司产品介绍

ü  营利模式

ü  发展方向

4.2 项目准备和可能会问到的技术点复习

ü  盒子模型

ü  异步处理

ü  跨域请求

ü  JSON格式

4.3  准备几个可能会问到的问题

ü  你在项目中遇到哪些难以解决的问题，你是如何处理的？

ü  你是如何带领团队的？

回答思路：

人的因素

把合适的人放在合适的位置

善于沟通和协调

注意团队的和谐和团结

以结果为导向（奖惩分明）

ü  你是如何作风险把控的？

做好工作计划，精确到人和时间

及时监控跟踪完成的情况

对于异常的情况要进行沟通了解情况，并做出对应的调整

ü  我们为什么要录用你？

从两个角度

能力

态度

ü  是否有其他家的Offer，如果有，为什么还要来我们公司面试，其他家公司给多少钱？

回答思路：现在我才刚开始找工作

4.4 准备对项目的描述

最好先说一下项目的背景，然后才是:

功能介绍-->你所做的部分-->你都用了哪些技术-->遇到的问题-->解决办法。

介绍项目是面试中的重点，一定要说的深入一些。许多面试官直接就问：

给我说一下你这个项目里面，用到的最牛的技术是什么？

或是最难的是什么？

4.5 着装准备

4.6 心态调整

ü  面试就是一个学习的过程

ü  告诉自己不要紧张，面试不上不要紧，只要自己正常发挥就好了，找到工作是迟早的事情。

 (五)：掌握面试技巧，让面试变得轻松

5.1 面试形式

1)        一般而言，小公司做笔试题；大公司面谈项目经验；做地图的一定考算法

2)        面试官喜欢什么样的人

ü  技术好、自信、谦虚、善于沟通、表达。

ü  喜欢追究原理

5.2 面试内容

 1.2.1简历上的项目

ü  介绍下你的项目吧？

1)        第一步：介绍你项目是干嘛的

2)        第二步：介绍下你负责的是哪块

3)        第三步：介绍下里面都有什么功能，你是怎么实现的，怎么分层的？

1.2.2非技术=处事方法+表达+态度+忠诚度

ü  请你做一下自我介绍

ü  你在找工作时，最重要的考虑因素是什么？

ü  你对我们公司了解多少？你为什么想来我们公司工作？

ü  请谈谈你的优点和缺点？

ü  你为什么离开上一家公司？

ü  工作中曾面临的最大困难是什么？如何解决的？

ü  你的职业目标是什么？（短期和长期）

ü  你是应届生，缺乏经验，如何胜任这份工作？

ü  你对加班的看法？

ü  你对薪资的要求？

ü  你最擅长的技术方向是什么？谈谈你之前做的项目？

ü  你有什么问题要问我？(参考下面思路)

n  我们公司有哪些项目要做了？

n  项目中使用什么技术来开发？

n  我们公司上班时间是怎样的？

n  前端开发目前有多少人在做？

5.3 面试技巧

Ø  1靠的是技术  2靠技巧 3玩的是心理

Ø  怎么回答问题

Ø  知道的问题正面回答，用案例去展示

Ø  不知道的问题说解决思路

Ø  原理性的知识，必须背下来，代码不需要会写，没人要求写原理、底层的代码(这是一个空子，可以钻)

Ø  面试始终保持平静，冷静，镇静，面试再刁难也要保持端坐，面带一丝微笑

Ø  对喜欢的公司最好能表现出对加入目标公司的渴望，对技术的追求

Ø  不能说不知道，可以说：之前了解过，做过这种练习，但没有拿到项目中来用。如果你回答了不知道，那面试官直接就否定你了

Ø  面试官给你出题时，回答问题要思考一段时间，提出思路(这样表现出你是善于思考，交流，有思路)。间接性的试探答案，要的就是这种交互性，注意交流很重要

Ø  加分的地方：对简历上的项目很熟悉，技术点都有所研究，包括封装，细节实现，以及自己编写的小工具

Ø  回答问题后，可再加一些个人看法～比如：json用过吗？怎么用？回答时，可把jsonp也叙述一下

Ø  不想去的公司（小公司，刚刚组建开发团队……）也尽量去面试，为的是积累经验。不同公司会问不同类型的问题，经历多了，你会发现面试很爽，尤其是秒杀他们的时候。

Ø  主管和你谈话～是探测你这个人是否可用……，回答问题要表现良好的一面，一般会问～你将来怎么规划的？回答：三年达到技术总监的水平。技术总监需要做到什么？1.技术过硬2.沟通交流，带领团队……

Ø  你在工作中遇到了哪些难题？？ 一定要提前准备两道，忽悠他！

Ø  为什么离开上家公司？业务单一，太闲了，项目太少，想要更大的提升空间，这时对方肯定会想～你喜欢忙一些是吧，我们这里好多项目让你忙个够。你最好也表现出来～你要努力提升自己，不断超越的念头。

Ø  要有底线别把自己的底线出卖了，要有底气。面试官可能一个劲的谈你的弱点，打击你的心里，这时千万不要乱了阵脚，不要把底线出卖了。既然面试官一直和你聊，那就证明你在他眼中是有价值的。薪资方面该怎么要就怎么要。

Ø  你给自己评个等级，初，中，高，你最次也要说中级，好一点说中级偏上。

Ø  谈薪资：这一步你能多拿1000-2000元，你想：对方都和你谈薪资了，证明你这个人有可用价值。 Eg.对方说给你8K，你完全能再多要1-2K，公司不差那点钱，只要你能给公司带来N多K的利益。

Ø  态度很重要：没人查个人背景(这点不用太担心，大不了重新找)；上班后勤勉工作，最好不要泡在QQ上，不懂赶紧问，别拖延时间，转正期也是适应期多，花点时间在工作上，工作态度非常非常重要

Ø  不见得你会这项技术就录用你，也不见得你不会某项技术就不录用你。面试中要注意和面试官交流，在交流中让对方感触到你基础不错，你有潜力，你逻辑思维不错。以上这些你做到了，如果不是那家公司只招一个某个专项技术的人，那你百分之八九十会被录用的。

5.4 面试中需要注意的问题

Ø  音量大小

Ø  语速控制

Ø  不说“我想想”，“好像是”，“可能”，“应该”，“估计”。。。等不肯定的语汇

Ø  用讲故事的方式主导面试官司的思维

Ø  面试的基本流程

1)        自我介绍

姓名、年龄、哪年毕业、哪年哪月入职第一家公司第一个项目开始介绍。。。

为何离职？介绍到最后一个项目的时候开始拿出来演示

2)        技术面试

用项目中的实例来回答面试官的问题

3)        谈薪

上家公司的薪资是多少？期望薪资是多少？

 (六)：面试后需要总结和交流

 

提示：面试后请将题目上传到QQ群 【490916635(Web前端面试权威指导)】
           将有专业老师作答，解答你们面试上遇到的疑惑。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 

Ø  记下这次面试的题目，回家后把面试题做一遍。每次面试的题目发给老师。 老师把面试题的答案上传到【Web前端面试权威指导490916635】群

Ø  总结自己面试不足的地方

ü  简历没有写好

ü  面试没有调整心态，过于紧张

ü  表达能力，没有很好的将自己想说的意思准确的表达出来

ü  对简历上的项目不清楚，没有描述好

ü  面试中提到的问题没有答上来。与老师和同学沟通交流解决办法

Ø  面试后和老师同学分享面试的心得，不断地在面试中成长

Ø  面试的建议

ü  对外包公司的偏见

有些同学觉得外包公司不能去，因为不稳定，干二三个月可能就会被辞。

其实这是一种误解，你在公司入职的时候，同样会签合同，如果公司要辞人的话，那就得按合同办事，额外支付二个月的工资。

其实，只要你有技术，有能力，公司是不会主动辞人的，现在公司都是招不来合适的。

其实第一份工作是外包也挺好，这样能接触到各种各样的项目，对个人技术的提高，会很有帮助。

ü  独立开发的能力

现在公司招开发人员，普遍都有一个要求，你一个人能不能独立的完成一个项目，如果能，OK，工作就搞定，如果不能，那我们得再考滤一下。

 (七)：入职后的建议

7.1 离职证明

大家自己从百度下离职证明，自己填，淘宝买印章

7.2 关于合同

签合同的时候，看公司要求，有些是3年，有些是5年，不要怕，签了就是了，真到想走的时候，提前说一声，随时可以走，不存在什么违约赔偿。

注意：你的合同和薪资都是属于保密的，不能让公司其他同事知道。

7.3 编码规范

 

        代码做好注释，命名要规范，代码结构要有层次

7.4 怎么和团队成员沟通问题

 

        问题纠结了30分钟后不能解决的要先同事请教，仍然不能解决的要向你的上级反应情况，争取早点解决问题。

7.5 少说话，多做事

职后第一个月，压力会非常大。咬紧牙，扛过来，什么都好办了。

少说话，多干活，言多必失。

 (八)：iframe有那些缺点

本题的特点

这道题目的特点就是不按照正常的套路来提问，一般都是问优点，这里比较反常问iframe的缺点，很多同学肯定很不习惯这种问答，因为平时只关注有点，这么一问就懵逼了！

本题解答的思路及要点

① iframe会阻塞主页面的Onload事件；

② 搜索引擎的检索程序无法解读这种页面，不利于SEO;

③ 会影响页面的并行加载。

知识补充：什么是并行加载？

并行加载：同一时间针对同一域名下的请求。一般情况，iframe和所在页面在同一个域下面，而浏览器的并加载的数量是有限制的。如下图

答题加分（提出解决方案，这才是面试官想让你回答的）

使用js动态给iframe的src加载页面内容，示例代码如下：

[html] view plain copy

1.  <iframe id="fram">iframe>  
2.  document.getelementbyid("fram").src="a2.html"   

 

+ (九)：盒子模型你是怎么理解的？

问题分析

这道题问得比较宽泛，一定要找准切入点，如果切入点找不准，很容易乱答，甚至答偏，所以找准切入点是非常的重要的。

解答思路

1）盒子模型有两种，W3C和IE盒子模型

（1）W3C定义的盒子模型包括margin、border、padding、content ，元素的width=content的宽度

  （2）IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度，元素的width=content+padding+border

2）个人理解和心得，要记住在面试时，我们和面试官是平等的，而且面试官也非常欣赏喜欢交谈的人，在面试的时候能够去表达自己的想法，往往会给面试官留下非常好的印象。例如上面的盒子模型，示范如下：

我个人认为W3C定义盒子模型与IE定义的盒子模型，IE定义的比较合理，元素的宽度应该包含border（边框）和padding（填充），这个和我们现实生活的盒子是一样的，W3C也认识到自己的问题了，所以在CSS3中新增了一个样式box-sizing，包含两个属性content-box 和 border-box。

（1） content-box  元素的width=content+padding+border

[css] view plain copy

1. .test1{  
2.     box-sizing:content-box;  
3.     width:200px;  
4.     padding:10px;  
5.     border:15px solid #eee;  
6. }  

（2） border-box   元素的width=width（用样式指定的宽度）

[css] view plain copy

1. .test1{  
2.     box-sizing:border-box;  
3.     width:200px;  
4.     padding:10px;  
5.     border:15px solid #eee;  
6. }  

加分项回答（自己比较独到理解）

1.对于行级元素，margin-top和margin-bottom对于上下元素无效，margin-left和margin-right有效

2.对于相邻的块级元素margin-bottom和margin-top 取值方式

 1） 都是正数： 取最大值

   距离=Math.max(margin-botton,margin-top)

 2） 都是负数： 取最小值

   距离=Math.min(margin-botton,margin-top)

 3）上面是正数，下面是负数或者 上面是负数，下面是正数： 正负相加

   距离=margin-botton+margin-top

 (十)：元素定位有哪些？

本题点评

在web前端中，元素定位是必须掌握的，是网页制作的必备技能，也是衡量是否为一个合格的web前端开发的标准之一，在网页设计中，很多地方都需要使用定位，例如菜单弹出，提示信息层等都需要定位。所以本题的难易程度为简单。

解题思路

position为元素定位属性，包含以下属性值
 

1. absolute绝对定位

相对位置为父元素为非static的第一个父元素进行定位。    

 

2. fixed  固定定位（老IE6不支持）

相对于浏览器窗口进行定位。  

 

3. relative相对定位

相对于其正常（默认布局）位置进行定位。

 

4. static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）

加分项

1. 所有的定位如果left、top、right、bottom属性都为默认值，则为默认定位
2. absolute定位会脱离文档，浮动起来，多个层重叠可以使用z-index属性改变层叠顺序
3. absolute定位忽略padding，相对位置为相对定位容器的左上角内边框，

-------------------------------------------------------------------------------------

 (十一)：样式导入有哪些方式？

样式导入方式

• link
• import

使用方式

• link的使用

[css] view plain copy

1. "index.css" rel="stylesheet">  

• import的使用

[css] view plain copy

1. "text/css">  
2. @import "index.css";  
3.   

不同点

• link除了引用样式文件，还可以引用图片等资源文件，而import只引用样式文件

百度搜索" />

• 兼容性不同，link不存在兼容性的问题，import在IE5以上支持，是css2.1新增的
• 在样式表文件可以使用import导入其它的样式表文件，而link不可以
• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
• link支持使用Javascript控制DOM去改变样式；而@import不支持。

加分项

  import的写法比较多
 

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别

  推荐使用 @import url(index.css);

 (十二)：::before 和:before有什么区别？

题目点评

这个问题看来很简单，但如果之前没有琢磨这个问题，给人感觉也是门头一垂，听到这个题目就懵逼了，因为原来从来没有注意过这个问题，即便有注意这个问题也不能很好的回答清楚。回答的技巧就是从相同点和不同点，以及他们的作用，及注意事项上去回答。

解答要点

•  相同点

1. 1. 都可以用来表示伪类对象，用来设置对象前的内容
   2. :befor和::before写法是等效的

•  不同点

1. 1. :befor是Css2的写法，::before是Css3的写法
   2. :before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好

伪元素选择器

重点：E::before、E::after

是一个行内元素，需要转换成块元素

E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。

E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解

E::first-letter文本的第一个字母或字（如中文、日文、韩文等）；

案例：首字下沉

E::first-line 文本第一行；  文本第一行高亮..

E::selection 可改变选中文本的样式；

":" 与 "::" 区别在于区分伪类和伪元素

  关于before和after

      CSS2中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念

      CSS3中 提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者   E:after伪类;

1. 1.  

加分项

1. 伪类对象要配合content属性一起使用
    
2. 伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
3. 伪类对象的特效通常要使用:hover伪类样式来激活
    

[css] view plain copy

1. 1. .test:hover::before { /* 这时animation和transition才生效 */ }  

 (十三)：css样式的优先级是怎么样的？

题目点评

CSS样式的优先级规则给人的感觉总是摸不透，更不用说怎么去表达了，在网络上流传着很多版本，描述的都很复杂也不全面，看了之后还是不满意。我来给大家介绍一个比较系统、全面有比较容易记住的规则吧！

解答思路

• 样式优先级规则

 1.优先级顺序为：!important>style>权重值

 2. 如果权重相同，则最后定义的样式的起作用，应该避免这种情况出现

权重规则

• 标签的权重为1
• class的权重为10
• id的权重为100

权重取值示例     

[css] view plain copy

1. /*权重为1*/  
2. div{  
3. }  
4. /*权重为10*/  
5. .class1{  
6. }  
7. /*权重为100*/  
8. #id1{  
9. }  
10. /*权重为100+1=101*/  
11. #id1 div{  
12. }  
13. /*权重为10+1=11*/  
14. .class1 div{  
15. }  
16. /*权重为10+10+1=21*/  
17. .class1 .class2 div{  
18. }   

 (十四)：如何居中一个元素（正常、绝对定位、浮动元素）?

题目点评

这道题目的提问比较多，连续问了三个问题，正常元素、绝对定位元素、互动元素如何居中，而且居中没有说清楚是垂直居中还是水平居中，要回答清楚这个问题，必须得有深厚的功底，而且要分类的来回答，条理要清楚。可以先把水平居中各种情况说清楚，然后在把垂直居中说清楚。

（一）元素水平居中的方式

1）行级元素水平居中对齐（父元素设置 text-align:center）      

[html] view plain copy

1.  style="width: 200px; height: 100px;border: 1px solid;text-align:center;">    
2.     行级元素垂直居中     

   

          

2)   块级元素水平居中对齐（margin: 0 auto）

[html] view plain copy

1.   style="width: 200px; height: 100px;border: 1px solid;text-align: center;">  
2.       style="border: 1px solid red;margin: 0 auto;height: 50px;width: 80px;"> 块级元素水平居中

  

  

 

3）浮动元素水平居中

• 宽度不固定的浮动元素

html代码

[html] view plain copy

1.  class="outerbox">  
2.   class="innerbox">我是浮动的