篇一：前端面试自我介绍
背景：
1.面试官在你自我介绍的时候，才有时间看你的简历。人太多没时间看，看了也记不住。
2.你在自我介绍中，他在想问你什么问题。
3.了解你语言 表达能力，自信气场，仪表形态。
常规低级错误：
1.对面试官说：简历上有你自己看吧。
2.对照简历就念。
要点：熟悉自己的简历，熟悉自己要讲什么，反复练习。
3.不遵守时间要求。要求一分钟，说了五分钟。
4.将自己太完美，或者太low。
讲什么东西：
1.姓名，年龄，专业，特长，经历（有价值的）
2.在一分钟自我介绍，人士想了解什么。
讲出跟他招聘有关联性的东西。岗位是什么，一分钟就要匹配什么。
必须做岗位和企业的一样的
3.将创意的东西。70%的时间来突显这一块。
我最擅长的是什么?
我最深入研究的领域知识是什么？
我性格中最匹配这个岗位的是什么？
我做过最成功的是什么？
我最主要的成就是什么？
呈现技巧：
1.自信：抬头挺胸，面带微笑。
2.眼神的交流：眼睛看哪里？与对方有交流，看对方的头顶。
3.声音：抑扬顿挫，有停顿，声音洪亮，有手势，大声音。
4.面试结尾：面试官，以上是我的介绍，谢谢。
（ps：强烈建议：反复练习，3-4遍）
篇二：2017年前端开发面试题(含答案)
XX公司
产品部-前端面试题-答案
产品部 Beijing
前端开发面试知识点大纲：
HTML&CSS：
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应
JavaScript：
数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。
其他：
HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯
作为一名前端工程师，无论工作年头长短都应该必须掌握的知识点：
1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
3、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。
4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。
5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。
6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型
7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们
8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
10、JSON —— 作用、用途、设计结构。
2 / 28
HTML
一、 Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
二、 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
（2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素： <br><hr><img><input><link><meta>
鲜为人知的是： <area><base><col><command><embed><keygen><param><source><track><wbr>
三、 link 和@import 的区别是？
（1）link属于XHTML标签，而@import是CSS提供的;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
（4）link方式的样式的权重 高于@import的权重.
四、 浏览器的内核分别是什么?
* IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；
3 / 28
五、 常见兼容性问题？
* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
* IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性.
* IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
4 / 28
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性
-webkit-text-size-adjust: none; 解决.
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
六、 html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问
题？如何区分 HTML 和 HTML5？
* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
* 绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websockt, Geolocation
* 移除的元素-纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
七、 支持HTML5新标签：
* IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式：
* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 <!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
5 / 28
篇三：前端面试题整理js篇
1.列举BOM中常用的几个全局变量和全局方法
全局对象：window
全局变量：document location history navigator screen
全局方法：alert() confirm() prompt() open() close()
2.在js中如何创建一个对象
var p1 = {name:”Tom”,age:12}
function Person(name,age){
this.name = name;
this.age = age;
}
var p2 = new Person(“jack”,14);
3.在js中获取对象属性
var age = p1.age;
var age = p1[‘age’];
4.谈谈ajax技术
Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服
务器获得数据，然后用 javascript 来操作 DOM 而更新页面的局部显示。
Ajax优点：
1.最大的一点是页面无刷新，给用户的体验非常好。
2.使用异步方式与服务器通信，不需要打断用户操作，具有更加迅速的响应能力。
3.ajax 的原则是“按需取数据”，最大程度的减少冗余请求，减少服务器的负荷。 Ajax缺点：
1.破坏浏览器后退按钮的正常行为。在动态更新页面后，用户无法回到前一个页面的状态.
2.使用 JavaScript 作 Ajax 的引擎，JavaScript 的兼容性和 Debug 本身就让人头大。
5.你觉得jquery有哪些好处
jQuery 是轻量级的 javascript 框架 强大的选择器
出色的 DOM 操作的封装
可靠的事件处理机制
完善的 ajax 封装
出色的浏览器的兼容性
支持链式操作，隐式迭代
支持丰富的插件
jquery的文档也非常的丰富
6.jquery对象和dom对象如何转换
1. jquery 转 DOM 对象: jQuery对象是一个数组对象，可以通过[index]的丰富得到 DOM 对象还可以通过 get[index]去得到相应的 DOM 对象。
2. DOM 对象转 jQuery 对象: $(DOM 对象)
7.jquery中$.get()提交和$.post()提交的区别
1. $.get() 方法使用 GET 方式提交请求,而$.post()使用 POST 方式。
2. GET 方式传输的数据大小不能超过 2KB 而 POST 要大的多
3. GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。
8.$(document).ready()方法和window.onload区别
两个方法有相似的功能，但是在实行时机方面是有区别的。
1 window.onload 方法是在网页中所有的元素(包括元素的所有关联文件)完全加 载到浏览器后才执行的。
2 $(document).ready() 方法可以在 DOM 载入就绪时就对其进行操纵，并调用执 行绑定的函数
9.xml有哪些解析技术
有DOM,DOM4j,SAX,PULL 等
DOM: 一次性将整个文档加载到内存中, 生成一个对象树, 在处理大型文件时其性 能下降的非常厉害。
DOM4J: 对 DOM 的进一步封装, API 使用更简洁
SAX:基于事件驱动的方法回调机制。每读取一小部分数据时就会回调事件处理 器对象的方法, 但解析一旦开始就不能停止.
PULL: 也是基于事件驱动, 只是需要手动控制读取下一部分数据,这样得到想要的 数据后就可以停止解析.
10.你在项目中用到了xml技术的哪些方面？如何实现的？
用到了数据存贮，信息配置两方面。在做数据交换平台时，将不能数据源的数据组装成 XML 文件，然后将 XML 文件压缩打包加密后通过网络传送给接收者，接收解密与解压缩后再同 XML 文件中还原相关信息进行处理。在做软件配置时，利用 XML 可以很方便的进行，软件的各种配置参数都存贮在 XML 文件中。
11.说说你对json的理解
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于标准JavaScript的一个子集，是一个js对象或数组结构的字符串
JSON有三类数据
1.单个数据
有number,string,boolean,null四种类型数据
2.多个有序的数据：数组
用[]包含起来, 其元素可以是三类数据中的任意一种, 元素之间用,号隔开
3.多个无序的数据: 对象用{}包含起来, 其元素必须由 key-value 组成, key 是一个字符串, value 可以是 任意类型数据, key 与 value 之间用:号隔开, 两个 key-value 之间用,号隔开。
12.javascript的typeof返回哪些数据类型
Object number string boolean underfind
13.例举3种强制类型转换和2种隐式类型转换?
强制（parseInt,parseFloat,number）
隐式（== – ===）
14.split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串
15.数组方法pop() push() unshift() shift()
push()尾部添加 pop()尾部删除
unshift()头部添加 shift()头部删除
16.IE和标准下有哪些兼容性的写法
var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target
17.ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面 请求头里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的，一个是类似修改密码的
18.call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
19.ajax请求时，如何解释json数据
使用eval parse 鉴于安全性考虑 使用parse更靠谱
20.写一个获取非行间样式的函数
function getStyle(obj,attr,value){
if(!value){
if(obj.currentStyle){
return obj.currentStyle(attr)
}else{
obj.getComputedStyle(attr,false)
}
}else{
obj.style[attr]=value
}
}
21.闭包是什么，有什么特性，对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。
22.添加 删除 替换 插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore()
obj.replaceChild()
obj.removeChild()
23.javascript的本地对象，内置对象和宿主对象
本地对象为array obj regexp等可以new实例化
内置对象为gload Math等不可以实例化的
宿主为浏览器自带的document,window等
24.document.load 和document.ready的区别
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)
25.”==”和“===”的不同
前者会自动转换类型
后者不会
26.Javascript的语法
1.区分大小写
2.弱类型变量 var age=10 var name=”dd”
3.每行结尾的分号可有可无，但建议还是加上
4.注释与java相同
27.变量
变量是通过var关键字来声明的。（variable）
变量的命名规则与java一致
注释有三种：///**/ <!-- --> 这个只能注释单行
28.javascript的Hello world
document.write()是写在文档的最前面
29. slice()、substring()、subtr
Slice和substring (2,5) 指的是从第3为开始，取（5-2）=3个数，其中slice的参数可以为负 substr（2,5）指的是从第3为开始，取5个数。但ECMAscript 没有对该方法进行标准化，因此尽量少使用该方法
30. indexOf()和lastIndexOf(),isNan,typeOf
indexOf（”i”） //从前往后,i在第几位
indexOf（”i”,3）可选参数，从第几个字符开始往后找
lastIndexOf（”i”）//从后往前,i在第几位
lastIndexOf (”i”,3) //从后往前,i在第几位
如果没找到，则返回-1
String类型的变量，在Java中，用“”符号表示字符串，用’’表示单个字符。而在javascript中这两种都可以
Nan（not a number）
Alert(nan ==nan)返回false,因此不推荐使用nan本身，推荐函数isNan
Alert(isNan(“ab”));//返回false
typeof运算符
var stmp = “test”;
alert(typeof stmp); //输出string
alert(type of 1);//输出number
此外：还有boolean,undefined,object(如果是引用类型或者null值,null值返回object，这其实是ecmascript的一个错误)
当声明的变量未初始化的时候，它的值就是undefined.当没有这个变量的时候，typeof 变 返回的值也是undefined。但是没声明的变量是不能参与计算的。
当函数无明确返回值时，返回的也是undefined
function a(){
}
Alert(a() == undefined) //返回true
Alert(null == undefined)//返回true
31.数值计算
var mynum1 = 23.345;
var mynum2 = 45;
var mynum3 = -34;
var mynum4 = 9e5; //科学计数法 为 9*10五次方
var fNumber = 123.456;
alert(fNumber.toExponential(1));//保留的小数点数 1.2e+2
alert(fNumber.toExponential(2));//1.23e+2
32.布尔值
var married = true;
alert("1." + typeof(married));//Boolean
married = "true";
alert("2." + typeof(married));//String
33.类型转换
转换成string类型有三种方式
var a = 3;
var b = a + "";
var c = a.toString();
var d = "student" + a;
toString()
var a=11;
document.write(a.toString(2) + "<br>");//转成2进制
免费论文网友情提示：本网站所有内容为共享上传提供，不涉及任何商业利益，本站对此不承担任何保证责任！
Copyright © www.csmayi.cn Corporation, All Rights Reserved 共享时代 共享你我他 版权所有