A. 面试Web前端需要注意什么会面试哪些问题
作为一名HTML5前端工程师，为了工作，为了就业我们免不了要参加各种各样的面试。为此总结了面试前的注意事项：
第一：注意自己的仪容仪表
面试之前，一定要再次从头到脚地将自己的仪容仪表检查一遍。检查时主要包括，自己的牙缝是不是还有食物残渣，所以你需要就近找一个卫生间，如果没有卫生间就近找一个角落也是可以的，但是切记一定不要在大庭广众之下。因此，为了给自己整理出着装的时间请在约定时间前20分钟到达。
第二：再次检查面试时所需的资料是否都已带全
这些资料主要包括：身份证明、学历文凭证明、个人简历、以往作品等等，如果这些东西齐全之后，需要对这些资料做一个整理与排序。因为没有哪个面试官希望看到面试者拿出一堆“莫名其妙”的东西塞给他，让他自己再一页一页的翻找自己需要的内容，如果说这些资料在面试官手中不小心散落一地，结果可想而知。这样的求职者在面试官眼中也一定不是一个让人放心、有条不紊的员工。当然如果检查时发现资料没有带全，也不要紧张。反而你要庆幸幸亏及时检查，也有足够的时间组织语言去向面试官解释。
第三：面试之前将通信工具调成振动或关闭状态
虽然说面试者与面试官之间是一个平等的关系，但毕竟你是去人家公司求职的，始终处于一个被动的状态，所以最起码的尊重还是要做到的。曾经有调查显示，对于面试过程中接电话或是被电话打断的求职者，会被HR减分。
第四：等候面试官时，仔细观察多了解面试公司
在等候面试官时，可以暗自观察一下公司的大体情况比如员工的着装风格、公司的LOGO或是贴在墙上的企业文化、公司的环境等等，一来可以在接下来的面试过程中表现出自己对公司的认同感，二来也可以让自己对求职公司多些了解，以确定是否要接受这里的工作。如果你身边有公司的资料宣传架，不妨取一本翻看一下，也会增加HR对你的好感。
第五：放松心情，保持自信
面试时一定要保持一定的自信，这样也会给面试官留下很好的印象。面试只是你步入工作的第一步，即便是失败了那也是人生重要的经历。失败是为了更好的迎接下一个挑战。
作为一名web前端工程师千万不要觉得懂技术面试就能万事大吉了，像以上五点细节性的东西也是一定要掌握的。
面试题系列：
网页链接
B. c# picturebox如何动态添加图片
pictureBox1.Image=Image.FromFile("d:\test.jpg");
代码就是这样，不知为什么你的不行
privatevoidbutton1_Click(objectsender,EventArgse)
{
pictureBox1.Image=Image.FromFile("D:\chart.png");
}
C. Web前端岗位面试题有哪些
前端面试题汇总，基本上会有四大类问题，具体如下：
一、HTML
1、Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
2、HTML5 为什么只需要写 <!DOCTYPE HTML>？
3、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
4、页面导入样式时，使用link和@import有什么区别？
5、介绍一下你对浏览器内核的理解？
6、常见的浏览器内核有哪些？
7、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
8、简述一下你对HTML语义化的理解？
9、HTML5的离线储存怎么使用，工作原理能不能解释一下？
10、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
11、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
12、iframe有那些缺点？
13、Label的作用是什么？是怎么用的？（加 for 或 包裹）
14、HTML5的form如何关闭自动完成功能？
15、如何实现浏览器内多个标签页之间的通信? (阿里)
16、webSocket如何兼容低浏览器？(阿里)
17、页面可见性（Page Visibility）API 可以有哪些用途？
18、如何在页面上实现一个圆形的可点击区域？
19、实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、网页验证码是干嘛的，是为了解决什么安全问题？
21、tite与h1的区别、b与strong的区别、i与em的区别？
二、css
1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
2、CSS选择符有哪些？哪些属性可以继承？
3、CSS优先级算法如何计算？
4、CSS3新增伪类有那些？
5、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
6、display有哪些值？说明他们的作用。
7、position的值relative和absolute定位原点是？
8、CSS3有哪些新特性？
9、请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
10、用纯CSS创建一个三角形的原理是什么？
11、一个满屏 品 字布局 如何设计?
三、常见兼容性问题？
1、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
2、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
3、为什么要初始化CSS样式。
4、absolute的containing block计算方式跟正常流有什么不同？
5、CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
6、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
7、对BFC规范(块级格式化上下文：block formatting context)的理解？
8、CSS权重优先级是如何计算的？
9、请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
10、移动端的布局用过媒体查询吗？
11、使用 CSS 预处理器吗？喜欢那个？
12、CSS优化、提高性能的方法有哪些？
13、浏览器是怎样解析CSS选择器的？
14、在网页中的应该使用奇数还是偶数的字体？为什么呢？
15、margin和padding分别适合什么场景使用？
16、抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]
17、元素竖向的百分比设定是相对于容器的高度吗？
18、全屏滚动的原理是什么？用到了CSS的那些属性？
19、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
20、视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）
21、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
22、如何修改chrome记住密码后自动填充表单的黄色背景 ？
23、你对line-height是如何理解的？
24、设置元素浮动后，该元素的display值是多少？（自动变成display:block）
25、怎么让Chrome支持小于12px 的文字？
26、让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）
27、font-style属性可以让它赋值为“oblique” oblique是什么意思？
28、position:fixed;在android下无效怎么处理？
29、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
30、display:inline-block 什么时候会显示间隙？(携程)
31、overflow: scroll时不能平滑滚动的问题怎么处理？
32、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
33、png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
34、什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
35、style标签写在body后与body前有什么区别？
四、JavaScript
1、介绍JavaScript的基本数据类型。
2、说说写JavaScript的基本规范？
3、JavaScript原型，原型链 ? 有什么特点？
4、JavaScript有几种类型的值？（堆：原始数据类型和 栈：引用数据类型），你能画一下他们的内存图吗？
5、Javascript如何实现继承？
6、Javascript创建对象的几种方式？
7、Javascript作用链域?
8、谈谈This对象的理解。
9、eval是做什么的？
10、什么是window对象? 什么是document对象?
11、null，undefined的区别？
12、写一个通用的事件侦听器函数(机试题)。
13、[“1”, “2”, “3”].map(parseInt) 答案是多少？
14、关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
15、什么是闭包（closure），为什么要用它？
16、javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？
17、如何判断一个对象是否属于某个类？
18、new操作符具体干了什么呢?
19、用原生JavaScript的实现过什么功能吗？
20、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
21、对JSON的了解？
22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解释一下这段代码的意思吗？
23、js延迟加载的方式有哪些？
24、Ajax 是什么? 如何创建一个Ajax？
25、同步和异步的区别?
26、如何解决跨域问题?
27、页面编码和被请求的资源编码如果不一致如何处理？
28、模块化开发怎么做？
29、AMD（Moles/Asynchronous-Definition）、CMD（Common MoleDefinition）规范区别？
30、requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？）
31、让你自己设计实现一个requireJS，你会怎么做？
32、谈一谈你对ECMAScript6的了解？
33、ECMAScript6 怎么写class么，为什么会出现class这种东西?
34、异步加载的方式有哪些？
35、documen.write和 innerHTML的区别?
36、DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
37、.call() 和 .apply() 的含义和区别？
38、数组和对象有哪些原生方法，列举一下？
39、JS 怎么实现一个类。怎么实例化这个类
40、JavaScript中的作用域与变量声明提升？
41、如何编写高性能的Javascript？
42、那些操作会造成内存泄漏？
43、JQuery的源码看过吗？能不能简单概况一下它的实现原理？
44、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？
45、jquery中如何将数组转化为json字符串，然后再转化回来？
46、jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
47、jquery.extend 与 jquery.fn.extend的区别？
48、jQuery 的队列是如何实现的？队列可以用在哪些地方？
49、谈一下Jquery中的bind(),live(),delegate(),on()的区别？
50、JQuery一个对象可以同时绑定多个事件，这是如何实现的？
51、是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？
52、jQuery 是通过哪个方法和 Sizzle 选择器结合的？（jQuery.fn.find()进入Sizzle）
53、针对 jQuery性能的优化方法？
54、Jquery与jQuery UI有啥区别？
55、JQuery的源码看过吗？能不能简单说一下它的实现原理？
56、jquery 中如何将数组转化为json字符串，然后再转化回来？
57、jQuery和Zepto的区别？各自的使用场景？
58、针对 jQuery 的优化方法？
59、Zepto的点透问题如何解决？
60、jQueryUI如何自定义组件?
61、需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
62、如何判断当前脚本运行在浏览器还是node环境中？（阿里）
63、移动端最小触控区域是多大？
64、jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?
65、把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？
66、移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？（click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。）
67、知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?
68、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？
69、解释JavaScript中的作用域与变量声明提升？
70、那些操作会造成内存泄漏？
71、JQuery一个对象可以同时绑定多个事件，这是如何实现的？
72、Node.js的适用场景？
(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
73、解释一下 Backbone 的 MVC 实现方式？
74、什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
75、知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?
76、如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
77、前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
78、简述一下 Handlebars 的基本用法？
79、简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？
80、用js实现千位分隔符?(来源：前端农民工，提示：正则+replace)
检测浏览器版本版本有哪些方式？
81、我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获
D. 阿里p6前端面经
本科毕业，学校既不是211也不是985，我也没有一毕业就进入大厂工作的经历。我的职业生涯里一共有10多次面试经历，阿里我面试了5次，失败了4次，屡战屡败，屡败屡战。每当我听到别人传奇的经历，会羡慕别人开挂的人生，也会有小失落，感叹自己当初没有做太多的努力，甚至自我怀疑和自我否定。人生中主动裸辞，被动裁员的经历，曾经让我在无数的黑夜里，真的以为人生就这样了。
在第四次面试阿里失败后，我开启了为期2年的自我重塑计划，梳理 体系化的知识结构 、刻意练习 知识结构化表达 ，学习参考了吸引力法则完善自己的 简历人设 。最后在2020.1入职阿里巴巴，成为AE国际体验技术团队的P6前端工程师。
在这一段经历中，我梳理了当时自己的几个问题，大家看看是否有跟我相似的处境呢？
自我重塑的前提是自我觉醒，意识到自己存在问题，再让自己走出舒适区，不断地打碎自己，然后在这个过程中把碎掉的东西重新收拾起来，变成身体的一部分。 这个过程会让你很痛苦，但如果你克服了，你就蜕变了。薛兆丰教授说过一句话，“生活不会在你都准备好了以后才开始”。面试也一样，面试考验的不是那几轮的面试表现，而是你在长期生活、工作中积累的 硬技能和软技能 ，这些包括：你的专业能力，框架能力，思维能力，性格和心态，沟通能力，价值观等等。你只是刚好在这几轮的面试里表现出了你的这些积累，吸引到了对方，最后拿到了Offer。如果临时抱佛脚，光背概念和知识点，没有结合项目深入思考，那么面试的时候会表现的很空洞，给人的印象只是在堆砌一些关键词，这样面试挂掉的可能性就很高。
传说有人问泰勒斯:“何事最难为?” 泰勒斯回答说:“认识你自己。” 随着年龄的增长，阅历的丰富，你会渐渐发现，无论是生活还是工作，很多的事情本质是与自己相处，了解自己的性格，发现自己的优缺点，知道自己从哪来，到哪去，最后想成为一个什么样的人。
举个例子，我了解自己的性格是内向性格，而且原生家庭在我童年成长的过程中，让我有些自卑，甚至我一度怀疑内向是一种性格缺陷。直到我看了一本书，书名叫《内向性格的竞争力》，开始渐渐明白我 自卑的点，来源于我根本不了解自己是什么 。我也不了解外向性格、内向性格的优势。外向性格的优势在于它性格非常开朗，很容易给人一种亲和力，自来熟。内向的性格优势在于它的敏感度，洞察他人情绪，感知他人情绪的能力。内向性格的人都有一个共同的特点，叫做你需要提前充电。比如我们去参加一个面试，内向性格的人像一块电池，需要提前充电，然后呢，这块电池只能维持大概1个小时，但是一旦过了1个小时，电池电量用完，你就受不了，你在后半程的面试会感受不太舒服，因为你的性格里就是不太喜欢这样的环境。
如果大家意识到这一点，在面试的时候你可以更好的去利用。
胆怯的心态，这个是最难克服的。我曾经是胆怯的人，我会把自己包裹起来，裹上一层坚硬的外壳。
这些会直接影响你在他人心中的形象，像阿里P6前端工程师，是一个独挡一面的角色。如果自己性格胆怯，表现出畏缩畏尾的样子，那么即使进阿里了，你在推进项目的时候，会遇到很大的阻碍。这个阻碍一方面来自于你内心的胆怯，另一方面来自于外部压力。所以这个是必须要克服的。
我克服胆怯的方法很粗暴。利用周末的时间刷了杭州城20多个恐怖密室（漆黑的密室环境，而且有NPC出来吓人），慢慢把胆子练起来。后来我胆子大到什么程度呢，我一个人跑到临安挑战极限，坐上飞机从10000英尺的高度自由降落，高空跳伞。
所以性格它不是一成不变的，你发现了，克服了，最后你的心态会越来越好，这个就是我想分享的。
这个是最核心的一个能力，同时也是可以让你快速进入一门新领域的方法。以我现在的认知水平， 知识可以分为三层：知识点、理论、体系。 我们需要可以通过学习知识点 -> 整理理论 -> 形成体系。
输入： 我们平时信息输入的渠道，可以是通过看源码、看书、他人分享的得到关键词，通过关键词搜索可以让我们更广泛地获取信息。在搜索关键词的过程中，我们往往会得到更多的关键词，它可以是A、是B、是C。
构建： 我们需要这些ABC进行分类，构建我们的思维导图。如果你没有自己的思维导图，网上有很多前端的知识图谱，可以照着学习和搜索，理解每一个知识节点承载的内容，慢慢去构建属于你自己的思维导图。前期构建脑图的过程挺痛苦的，意味你要把每一个知识点去摸清楚，但是一旦你建立好了，往后只需要在现有的脑图里添加你新的知识节点，学习会越来越轻松。
解释： 思维导图构建好了以后，就是输出，如何向别人解释一个知识。
以上学习的方法，是我对费曼技巧的个人实践，费曼技巧也被称作是终极的学习方法。简单说它是 “以教为学”，在学习的知识的时候，以别人听得懂为目标，用最简单的话把自己的意思表达出来。
关于学习的方法，我还要分享的是，在构建脑图知识点的时候，我们不妨问自己5个问题？
理清楚了这5个问题，相信你会对这块知识了解的很全面了。往往在面试的时候，面试官不会这么一板一眼的提问，有时候会问一些开放式的题目，或者一些刁钻的技术问题，不要慌，他有可能是考察是否能用学到的知识来解释一下新的例子。所以我们学习还要做最后一步， 把所学的知识都忘掉，剩下的思维能力才是你的。
掌握学习的方法还不够，我们还要常常做一些阶段性回顾，以一个项目为周期或者以半年为周期（周期时间可以自己把握），把人生当中的关键节点梳理出来，这不只是为了面试时快速反应，也是为了更加帮助你认识自己。
我们投递简历失败，有一部分原因在于，我们对自己定位不够清晰。当前 P6 水平投递 P7 岗位，那么挂掉的概率就更高了。我们需要了解阿里岗位职级是怎么样的。阿里巴巴社招一般层级是从P6开始，往往工作经验3年是一个分界点。
了解岗位职级，可以帮助我们认清当前水平处在哪一个层次，知道通往一下层次需要掌握哪些技能。比如我是P6，那么我在写简历或者面试的时候，尽可能在展示当前层次水平之外，会额外展示掌握的P7的一些能力，让面试官看到你的潜力和亮点，你是具备快速通往下一层次的能力的。
阿里的面试按流程来的，你开始面试就会进入流程，在流程里的简历，除了面试官其他人是看不到。每个流程通常有5轮面试，4轮技术面和1轮HR面，面试官会根据你的水平层级和个人情况，决定要不要安排笔试和交叉面。面试的前两轮是电话面试，后几轮是现场面试。在投递的简历的时候，尽量找人内推，内推的优势在于内推人可以给你做信用背书，查看你的面试进度。如果不是走内推渠道，是阿里员工主动采蜜打电话邀请你面试，说明你的简历或者过去的历史评价，是具有一定吸引力的，不然也不会打电话给你。接到电话后，可以跟面试官确认电话面试的时间，你可以在这段时间内，开始面试前的准备。
面试前需要做哪些准备呢？
形象建设分为 声音形象、外在形象、内在形象 。
声音形象： 为什么我要讲声音形象呢？因为前几轮的面试都是电话面试，面试官看不到你，你的语速、语调、语气，都会影响电话那头对你的判断。
声音影响面试的问题有哪些呢？
那我们要做的是尽可能的让我们的语速保持匀速的水平，一分钟200字左右，然后用胸腔偏下的位置发声，用气息推动喉咙，这样的发出的声音雄浑有力，不会显得沉闷，反而有些磁性。
外在形象： 针对现场面试的，简单、干练、不邋遢就好。
内在形象： 声音形象，外在形象都是浅层的吸引，最致命的吸引是人格吸引，是你的内在形象。我们在自我认识的环节，梳理过了“关键”信息，在面试的时候，就派上用场了，把那些能够呈现你内在形象的案例展示给面试官，通过例子证明自己，你就是这样的一个人，简单说就是：“ 我不要我觉得，我要你觉得 ”。内在形象有哪些呢？自信、踏实、皮实、乐观等等
简历为避免排版混乱，使用PDF格式。书写原则： 可以适度包装，但是不要造假 。造假涉及到诚信问题，你在技术面混过去了，后面第三方背景调查的时候，会验证你说的情况，一旦打上不诚信的标签，你就永远进不了阿里了。在写简历的时候，多关注一下对方招聘岗位的JD，岗位职责和需要的技术栈是什么。了解这些后，尽可能在书写简历的时候，展示你和招聘岗位所需重合的技能。如果当前掌握的技能和目标岗位有一定差距，那需要花时间提升不足，补齐这块差距。不同公司的前端岗位的职责或技术方向不同，往往要准备多份简历去匹配不同公司岗位的情况。
我的简历的内容排版很简洁，写了基本信息，专业技能、项目经历，最后才是教育背景。对于社招来说，你在大学期间发生的事情已经不是那么重要了。重要的是你目前 掌握的技能和项目经历 ，这两块是要重点描写的。专业技能按掌握、熟悉、了解程度依次罗列。亮点项目是之前你梳理过的，详细写，附带数据描述成果更具说服力。其他不重要的项目可以简单描述技术栈，一笔带过。这么做的目的就是一眼让面试官看到你的优势和核心竞争力。推荐一些好的简历模板，比如 WonderCV、五百丁。简历不用太花里胡哨，简单明了，能够清晰的表达你的内容即可。
面试前自我模拟面试可以增加你的自信心，自我介绍、面试的一些的话术都可以提前准备好，然后可以讲给别人听、讲给自己听。或者找一个水平在你之上的前辈对你进行一次模拟面试，收集面试反馈，针对模拟面试时卡顿、忘词的知识点，重新记忆和解释，然后不断的重复上面步骤，直到你能可以用自己的话说出知识点的核心内容。
沟通的原则： 客观描述事实，不做主观臆断 。具体有哪些情况呢？三说和三不说。
面试的时候，可以尝试引导面试官。 每个面试官的喜好，出题的角度都不一样，这个我们是无法预测的，但是我们可以去引导对方问一些问题。比如他问到某一个知识点A的时候，我们在回答A的同时，引申出和A有联系的知识点B或C。回答的重心放在知识点A上，B或C是你在回答A的时候顺带那么一提，它就像一个鱼钩，来引导面试官来问我们擅长的、准备好的知识。
渲染情绪： 在面试的时候多感知对方的情绪，在适当的时候，用一些你准备好的事迹，引发对方共情。之前我们梳理过一些“关键信息”，有一些失败经历或高光时刻是很容易让人产生共鸣的。
反问阶段：如果你不知道问些什么，有保守一点的问法是，去问问对方团队的情况，团队在组织定位是怎么样的、技术栈是什么、有哪些人员梯度，当前遇到什么痛点问题等等。这些问题你传递出来的信息是，我对当前岗位所处的团队，所做的事情非常感兴趣。之前我在一家公司现场面试的时候，就主动提出带我在公司转转，了解公司的产品形态。这也是一个向对方表达兴趣的技巧。
面试的时候考察什么？技术一面，重点考察基础和知识广度，上探你的技术天花板，下探计算机底层原理。一面常见的考察点有哪些呢？
技术一面专业能力占了80%，软素质占了20%。如果过了技术一面，说明你的基础各方面是很不错的。接下来技术二面会重点考察你的工程能力、设计能力、规划能力。二面通常会从你的项目开始问，这个时候你梳理的亮点项目就派上用场了。二面常见的考察点有哪些呢？
这些都是考察范围，技术二面专业占了60%，软素质占了40%。到了技术三面的时候，会聊一聊技术格局、视野、人生规划、软技能考察，这部分多展示你的大局观，比如业务上的大图，技术上的大图，你长期或短期的人生规划等等。
2.2.6 描述项目（STAR法则）
我分享一个描述的、项目的方法，叫做STAR法则，他有五个要素，情境(situation)、目标（target）、行动(action)、结果(result)，我把他扩展了一下，技术面或者hr面的时候描述项目的时候，可以按这个套路来。
2.2.6 面试复盘
面试后记得主动添加面试官的微信，这是免费的性价比很高的人脉。加完微信能做哪些事？
面试后还需要复盘， 复盘结果和情绪 。拿一张白纸记录你在面试中答好的/不好的知识点，还有你的在情绪占比，紧张、开心、严肃是不是占了面试中大部分情绪。每一次面试都像一面镜子，照出你的短板，然后你把短板改掉，就离目标越来越近了。拥有这种面试意识，面试的次数多了，你会从害怕面试变得爱上面试。
分享一本软件能的书 《金字塔原理》 ，是麦肯锡咨询公司第一位女性顾问：芭芭拉·明托，写的一本关于逻辑思路的书。里面介绍了一些方法，帮助我们怎么去 自下而上的构建逻辑金字塔 ，或者是 自上而下的表达金字塔 。
书的内容介绍我不做具体的描述了，感兴趣的同学可以自行搜索。
我们在提升硬技能的同时，也要注重提升软技能。技术很重要，但是它是我们实现想法的语言工具。在这之上， 使用工具的方法，比工具本身更关键 ，我们要清楚真正的修炼是什么？ 永远都是内在的东西，软性的东西 。比如说你的思维能力，耐心，聪明，情商，遇到挫折时的内心复原力。这些技能是可以伴随你漫长的一生的，终身受用的，那么我们就应该为此投资。
我在工作前2年是处于一个迷茫的状态，没有自己的规划。真正让我发生改变的是，突然有一天我回家，父母的头发都白了，那一刻我意识到自己该学会长大，该为未来做点什么了。从那以后，我每天的状态就是，白天公司工作谋生存，晚上自我提升谋发展。在工作第3年的时候，自我感觉准备差不多了，开始去阿里面试，所以才有了那段裸辞的经历。当然我摔的很惨，也重新认识了自己。
我们做一个时间切片，把过去的自己和现在的自己对比，你会我发现当时所经历的，觉得很困难的事，现在看来都不是事。给自己的人生列个目标，知道自己想成为什么样的人，实现目标，自己的差距就会越来越小。
还有什么想了解的可以
有想了解更多的小伙伴可以加Q群 链接 里面看一下，应该对你们能够有所帮助
E. Web前端最全面试宝典- Html篇
HTML
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；
2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的html文档
加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug
4.行内元素有哪些?块级元素有哪些?
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
5.HTML全局属性(global attribute)有哪些
参考资料：MDN: html global attribute或者W3C HTML global-attributes
accesskey
:设置快捷键，提供快速访问元素如aaa在windows下的firefox中按alt + shift + a
可激活元素
class
:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素
contenteditable
: 指定元素内容是否可编辑
contextmenu
: 自定义鼠标右键弹出菜单内容
data-*
: 为元素增加自定义属性
dir
: 设置元素文本方向
draggable
: 设置元素是否可拖拽
dropzone
: 设置元素拖放类型： , move, link
hidden
: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果
id
: 元素id，文档内唯一
lang
: 元素内容的的语言
spellcheck
: 是否启动拼写和语法检查
style
: 行内css样式
tabindex
: 设置元素可以获得焦点，通过tab可以导航
title
: 元素相关的建议信息
translate
: 元素和子孙节点内容是否需要本地化
6.什么是web语义化,有什么好处
web语义化是指通过HTML标记表示页面包含的信息，包含了HTML标签的语义化和css命名的语义化。 HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构 css命名的语义化是指：为html标签添加有意义的class，id补充未表达的语义，如Microformat通过添加符合规则的class描述信息 为什么需要语义化：
去掉样式后页面呈现清晰的结构
盲人使用读屏器更好地阅读
搜索引擎更好地理解页面，有利于收录
便团队项目的可持续运作及维护
7.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
新特性：
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation
移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架）：
如何区分：
DOCTYPE声明新增的结构元素、功能元素
8. HTML5 存储类型有什么区别？
HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案：
localStorage - 没有时间限制的数据存储，数据永远不会过期，关闭浏览器也不会丢失
sessionStorage - 针对一个 session 的数据存储，同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
9. HTML5 标准提供了哪些新的API？
1：canvas，不用多说，可以画出很多绚丽的图形，甚至可以直接做出伪3D游戏。
2：媒体控制，也很好理解(直译就是回放功能，假如只用html5.0以下的标签写，以前的音乐播放是不可能实现滚动条的。)
3：离线网页程序，可以把资源文件完全缓存在客户端，并且通过js的一些方法清空缓存
4：文档编辑，应该是更好的支持对文档的编辑。
5：拖动，可以将文件拖动到某些区域上传
6：跨文档请求，websocket，一种更加高效的通讯方式
7：历史管理，可以通过js管理和插入历史记录
8：MIME头自定义
9：客户端数据存储，localstoage sessionstoage
10：地理位置共享
11：本地数据库
12：索引数据库
10.HTML5 应用程序缓存和浏览器缓存有什么区别？
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
11.常用那几种浏览器测试？有哪些内核(Layout Engine)?
(Q1)浏览器：IE，Chrome，FireFox，Safari，Opera。
(Q2)内核：Trident，Gecko，Presto，Webkit。
12.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间；
13.如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等本地存储方式
14.请写出localStorage对象的常用方法。
存储 - localStorage.setItem(key, value) - 如果key存在，更新value
获取 - localStorage.getItem(key) - 如果key不存在，返回null
删除 - localStorage.removeItem(key) - 删除key对应的数据
全部清除 - localStorage.clear() - 清空localStorage中所有数据
遍历 - localStorage.length
遍历 - localStorage.key(index)
15.如何在HTML5中启用应用程序缓存？
<html manifest="fileName.appcache">
每个指定了manifest的页面在用户对其访问时都会被缓存。
.appcache是manifest文件的扩展名
16.html5 离线存储
Html5的一个重要特性就是离线存储，所谓的离线存储就是将一些资源文件保存在本地，这样后续的页面重新加载将使用本地资源文件，在离线情况下可以继续访问web应用，同时通过一定的手法（更新相关文件或者使用相关API），可以更新、删除离线存储等操作。
Html5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的，使用如 <html manifest='offline.manifest'> 来引入一个manifest文件，这个文件的路径可以是相对的，也可以是绝对的，如果你的web应用很多，而且希望能集中管理manifest文件，那么静态文件服务器是个不错的选择。
17.HTML5 Canvas 元素有什么用？
Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作
F. 史上最全前端vue面试题！推荐收藏
1.为什么会形成跨域？
不是一个源的文件操作另一个源的文件就会形成跨域。当请求端的协议、域名、端口号和服务器的协议、域名、端口号有一个不一致就会发生跨域。
解决方法：安装插件
Pip install django-cors-headers
2.vuex的工作流程？
① 在vue组件里面，通过dispatch来出发actions提交修改数据的操作。
② 然后再通过actions的commit来出发mutations来修改数据。
③ mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。
④ 最后由store触发每一个调用它的组件更新。
3.vuex是什么？怎么使用？
vuex是一个专为vue.js应用程序开发的状态管理模式。使用:store,getters,mutations,actions,moles详细使用写法请见：https://blog.csdn.net/qq_33226029/article/details/109628600?spm=1001.2014.3001.5502
4.vuex中的数据在页面刷新后数据消失怎么解决？
使用sessionStorage或localStorage存储数据;也可以引入vuex-persist插件
5.在vue中，如何阻止事件冒泡和默认行为？
在绑定事件时，在指令后边加上修饰符.stop来阻止冒泡，.prevent来阻止默认行为
6.深拷贝与浅拷贝？
假设B复制A，修改A的时候，看B是否变化：B变了是浅拷贝（修改堆内存中的同一个值），没变是深拷贝（修改堆内存中不同的值）。浅拷贝只是增加了一个指针指向已存在的内存地址，深拷贝是增加了一个指针并申请了一个新的内存，使这个增加的指针指向这个新的内存。深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。
7.vue的生命周期？
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）组件是否激活调用
8. keep-alive: 组件缓存
https://juejin.cn/post/6844903624099758094
router.js中:
meta: {keepAlive:true} // 需要被缓存
钩子执行顺序：created -> mounted -> actived
include表示需要缓存的页面；exclude表示不需要缓存的页面。如果两个同时设置，exclude优先级更 改，则组件不会被缓存。
应用场景： 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回 该列表页，我们希望列表页可以保留用户的筛选状态。
9.vue传值方式？
props $emit() $on() $parent $children $listener $attr
10. $on 兄弟组件传值
$emit 分发
$on 监听
$off 取消监听
$once 一次性监听一个事件
在js文件中定义一个中央事件总线Bus，并暴露出来
具体的实现方式：
使用Bus的时候在接收Bus的组件的beforeDestroy函数中销毁Bus，否则会一直叠加调用这个方法。
应用场景：“退出登录” -> ①点击退出登录；②修改密码后自动退出登录
11.组件跨级传值
$attrs a->b->c
$listeners 监听
12.vue事件修饰符有哪些？
.stop .prevent .self .once .passive .sync
13.箭头函数中的this？
不具有this绑定，但函数体可以使用this，这个this指向的是箭头函数当前所处的词法环境中的this对象。
15.为什么vue组件中data必须是一个函数？
如果不是函数的话，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了，当他是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，就不会互相影响。
16.v-if 和 v-show区别？
v-if 是对标签的创建与销毁， v-show 则仅在初始化时加载一次，v-if 开销相对来说比v-show 大；
v-if 是惰性的；v-show 做的仅是简单的css切换。
17.v-text 与 v-html区别？
v-text 用于普通文本，不能解析html；
v-html 反之。
18.v-for key的作用？
使用v-for更新渲染过的数据，它默认用“就地复用”策略。如果数据项的顺序改变，vue将不是移动DOM元素来匹配数据项的改变，而是简单地复用此处每个元素，并确保在特定索引下显示已被渲染过的每个元素。key属性类型只能是string或number。
key的特殊属性主要用在虚拟DOM算法，在新旧node对比时辨识VNods。如不使用key，vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法，它会基于key的变化重新排列元素顺序。
19.Scss是什么？在vue-cli中安装步骤？有哪几大特性？
npm 下载loader （sass-loader,css-loader,node-sass）,在webpack中配置extends属性（加.scss拓展） Vscode中可在扩展中下载;
特性：可以用变量，可以用混合器，可以嵌套等。
20.vue获取dom？
ref
21.vue初始化页面闪动问题？
webpack、vue-router
v-cloak css:[v-cloak]:display:none
22.什么是vue-router？
vue router 是官方路由管理器。
主要功能：路由嵌套，模块化 基于组件路由配置，路由参数、查询、通配符，细粒度导航控制，自定义的滚动条行为等。
23.vue路由传参，接收？
传： this.$router.push({path:'', query(params):{}})
接：this.$router.query.xxx
24.防抖和节流？
节流是一定时间内执行一次函数，多用在scroll事件上；
防抖是在一定时间内执行最后一次的函数，多用在input输入操作，表单提交等。
25.如何让scss只在当前组件中起作用？
G. Web前端面试的常见面试题汇总
今天小编要跟大家分享的文章是关于参加Web前端面试的常见面试题汇总。准备参加Web前端面试的小伙伴们来和小编一起看一看吧，希望则宽本篇文章能够对大家有所帮助。1.渐进增强与优雅降级
渐进增强
并不是一种技术，而是一种设计思想。各个浏览器的渲染能力各不相同，要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性，保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等)，并为他们提供当前条件下最好的体验，这就是渐进增强得核心思想。
优雅降级也是一种设计思想，为了保证在高版本浏览器中提供最好的体验，碰到低版本浏览器再降级进行兼容处理，使其能正常浏览。
这两种思想的区别在于：
1.渐进增强是向上兼容，优雅降级是向下兼容;
2.渐进增强是从简单到复杂，优雅降级是从复杂到简单;
3.渐进增强关注的是内容(保证核心内容)，优雅降级关注的是浏览体验(为了兼容低版本浏览器)
2.DOCTYPE
作用
DTD(DocumentTypeDefinition，文档类型定义)是一系列的语法规则，用来定义XML或(X)HTML
的文档类型。浏览器会使用它来判断文档类型，决定何种协议来解析，以及切换浏览模式。
DOCTYPE是用来声明文档类型和DTD
规范的，一个主要的用途便是文件的合法性验证。如果文档代码不合法，那么浏览器解析时便会出现一些差错。
HTML5的文档类型声明：
HTML4.01Strict(HTML4.01严格模式)的DTD包含所有HTML
元素和属性，但不包括展示性的和弃用的元素(如font)，它的文档类型声明：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
标准模式与怪异模式
怪异模式(Quirks
Mode)用于模拟旧浏览器的行为。早期的网站并不会遵循完整的规好卜范，随着浏览器支持越来越多的规范，在那些旧的浏览器中开发的页面在显示时会友盯穗被破坏。为了向后兼容，浏览器发明了怪异模式，一行错误或无效的
DOCTYPE都会触发怪异模式。
浏览器使用文件开头的DOCTYPE来决定用怪异模式处理或标准模式处理。DOCTYPE
可以确保不同浏览器以相同的方式解析文档，以及执行相同的渲染模式。
怪异模式与标准模式的主要区别：
1.怪异模式的宽度和高度会包含padding和border。标准模式不包含，标准模式下可以通过设置box-sizing:
border-box将标准盒模型转化成怪异模式下的盒模型。
2.怪异模式下，当内容超出容器高度时，会将容器拉伸，而不是溢出。
3.怪异模式下，在表格中的字体样式(如font-size)不会继承。
4.怪异模式下颜色值必须使用十六进制标记法。
3.语义化
HTML5
中的语义化就是让元素、属性或属性值有含义，更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离，元素只负责文档内容的结构与含义，而CSS
样式控制内容的呈现，像元素，没有语义但却能将字体变粗，这类元素违背了语义化的目的，将会被废弃。
优点
·使得HTML文档结构清晰、布局合理、主体突出、可读性更强。
·有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
·方便其他设备解析，如盲人阅读器根据语义渲染网页。
·有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
语义化标签
·
·footer内容的页脚，通常包含该章节作者、版权数据或者与文档相关的链接等信息;
·article
文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目;
·nav描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表;
·section表示文档中的一个区域(或节)，比如，内容中的一个专题组;
·main定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站
logo，搜索框(搜索框作为文档的主要内容);
·aside
表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。
4.超链接伪类
:link、:visited、:active和:hover的声明顺序是怎样的?
:link表示未访问的链接状态;
:visited表示已访问状态;:active表示激活状态(鼠标按下);:hover表示悬停状态。
推荐顺序是LVHA，即:link:visited:hover:active。理由如下：
·当鼠标悬停在未访问的链接上时，:link和:hover都会命中，如果:hover在:link
之前声明，那么(:hover)就会被覆盖;
·当鼠标悬停在已访问的连接上时，:visited和:hover都会命中，如果:hover在:visited
之前声明，那么(:hover)就会被覆盖;
·当鼠标单击链接时，:active和:hover都会命中，我们大多是想让:hover只在悬停时展示样式，按下鼠标时使用:active
样式，因此:active在:hover之后声明;
·综上，:hover应在:link和:visited之后，在:active之前，因此active在最后。而:link和
:visited两者的顺序无所谓，互不影响。
5.CSS常见的长度单位
CSS中除了px长度单位之外，还有下面几个长度单位：
·pc六分之一英寸，1pc=12pt=1/6*1in=16px;
·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;
·in一英寸，1in=2.54cm=96px;
·ex在含有“X”字母的字体中，它是该字体的小写字母的高度。对于很多字体来说，1ex≈0.5em;
·em1em等于父级元素的字体大小，2em就是父级元素字体大小的二倍;
·rem当用在根元素()的font-size上面时，它代表了它的初始值;
·ch代表元素所用字体font中“0”这一字形的宽度;
·vh1vh相当于视口高度的1%，100vh就是视口的高度;
·vw1vw相当于视口宽度的1%，100vw就是视口的宽度;
·vmax视口高度vw和宽度vh两者中的最小值
·vmin视口高度vw和宽度vh两种中的最大值;
·%相对于父级元素的大小来确定;
参考：CSS
CSSpercentage[2]
6.事件对象
冒泡与捕获
事件冒泡与捕获是事件处理的两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。
在点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。捕获阶段的行为：
·浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它;
·
然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素;
而冒泡与捕获恰恰相反：
·浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它;
·然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达元素;
而现代浏览器在默认情况下，所有事件处理程序都在冒泡阶段进行注册。因此上面代码在点击子元素时会先执行子元素绑定的事件，然后向上冒泡，触发父元素绑定的事件。
addEventListener函数的第三个参数是个布尔值。含义：
·当布尔值是false时(这也是默认值)，表示向上冒泡触发事件;
·当布尔值是true时，表示向下捕获触发事件;
不能冒泡的事件
有些事件是不会冒泡的。比如：
·blur元素失去焦点时触发，focusout事件也是失去焦点时触发，但可以冒泡;
·focus元素获取焦点时触发;
·mouseenter鼠标移动到元素上时会触发该事件，与之对应的是mouseover事件，但会冒泡;
·mouseleave鼠标离开元素时触发，与之对应的是mouseout，但会冒泡;
事件冒泡可以让我们利用事件委托，尤其是处理大量子元素时，如果给每个子元素都绑定事件，这是不优雅的，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用
e.target属性可以获取到当前触发事件的子元素。
事件对象中的方法
·stopPropagation()阻止事件冒泡，当设置后，点击该元素时父元素绑定的事件就不会再触发;
·preventDefault()阻止默认事件的发生;
·stopImmediatePropagation()它用来阻止监听同一事件的其他事件监听器被调用以及阻止事件冒泡，比如给同一个div
元素绑定多个click事件(使用addEventListener方法可以注册多个)，当在第二个事件函数中调用
stopImmediatePropagation方法时，点击div元素时，后面注册的click将不会被触发，而且还会阻止事件冒泡;
比如下面的例子，给p绑定多个click事件，在第二个事件函数中调用stopImmediatePropagation，第三个click
事件就不会触发，因为也阻止了冒泡，因此父元素的click事件也不会触发。
paragraph