前端面试整理

前端面试题整理（含答案）

小菜鸡在前端笔试的时候偷偷记下了一些面试题，今天有时间就整理下，有些公司的面试题也都是网上搜的，自己多上网刷刷就可以了…（只能应付简单的前端面试哦）

HTML+CSS部分

• 对于WEB标准以及W3C的理解与认识？
  
  • WEB标准不是某一个标准，而是一系列标准的集合。
  • Web标准可以分为三个层次：结构、样式、行为，在前端主要由html、css 和 js文件组成，体现其层次结构。
  • W3C编辑要求
    a) js文件css样式要外链，文件分开，方便解析；
    b) css样式表在头部引入，js文件在脚部引入，这是根据浏览器解析的顺序相关的；
    c) 标签要闭合、不可随意嵌套，标签要小写，编写要规范（id、css样式见名知意）；
    d）少用行间样式
• xhtml与html、html5的区别？
  
  • HTML是超文本标记语言，XHTML可拓展的超文本标记语言
  • HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。
  • HTML5 是 HTML、XHTML 以及 HTML DOM 的新标准。它仍处于完善之中。但目前为止的大部分现代浏览器已经支持 HTML5
  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • XHTML 标签名必须用小写字母
  • XHTML 文档必须拥有根元素。
  • HTML5相比XHTML，新增一些特性：
    
    1. 用于绘画的 canvas 元素
    2. 用于媒介回放的 video 和 audio 元素
    3. 对本地离线存储的更好的支持
    4. 新的特殊内容元素，比如 article、footer、header、nav、section
    5. 新的表单控件，比如 calendar、date、time、email、url、search
• 行内元素与块级元素有什么不同?
  
  • 设置宽度width 无效。
  • 设置高度height无效，盒子的宽度可以通过line-height来设置。
  • 设置margin 只有左右margin有效，上下无效。
  • 设置padding 只有左右padding有效，上下则无效。
• 前端页面由哪三层构成，分别是什么？
  
  • 网页分成三个层次，即：结构层（html）、表示层（css）、行为层（js）。
• 你做的页面在哪些流览器测试过?都是什么哪些内核？
  
  • IE内核浏览器：360，傲游，搜狗，世界之窗，腾讯TT。
  • 非IE内核浏览器：firefox opera safari chrome 。
  • Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
  • 具体的浏览器内核请参考博客主流浏览器内核介绍（前端开发值得了解的浏览器内核历史）
• Doctype严格模式与混杂模式-如何触发这两种模式？区分他们有什么意义？
  
  • DOCTYPE（是Document Type文档类型的简写）是一组机器可读的规则，它们指示(X)HTML文档中允许有什么，不允许有什么，DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明）用以告诉其他人这个文档的类型风格
  • 区别：严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如
    ，混杂模式则是一种向后兼容的解析方法。
  • 触发：根据不同的DTD触发，如果没有声明，那么默认为混杂模式。
• CSS的引入的方式有哪些？link和@import的区别是什么？
  
  • link方式：
  • @import方式：
  • 使用链接link和导入import的好处就是易于维护，但当网速比较慢的时候，会出现加载中断的情况，导致页面排版错误
  • *差别1：link属于XHTML标签，而@import完全是CSS提供的一种方式。
  • link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
  • *差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候比较明显
  • *差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
  • 差别4：使用DOM控制样式时的差别。当使用javascript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。
• CSS选择器有哪些？哪些属性可以继承？优先级算法是如何计算的？内联和import哪个优先级比较高？
  
  • 从CSS代码存放位置看权重优先级：内嵌样式 > 内部样式表 > 外联样式表。其实这个基本可以忽视之，大部分情况下CSS代码都是使用外联样式表。
  • 从样式选择器看权重优先级：important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。
  • 参考链接权重的计算方法、你应该知道的一些事情——CSS权重
• CSS的基本语句构成？
  
  • 选择器{属性1:值1;属性2:值2;……}
• 标签上的title和alt的区别?
  
  • alt是当图片不存在时的替代文字;title是对图片的描述与进一步说明
  • 在firefox和ie8中，当鼠标经过图片时title值会显示，而alt的值不会显示;只有在ie6中，当鼠标经过图片时title和alt的值都会显示。
  • 搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里，进一步对图片说明。
• CSS中reset的作用和用途？
  
  • 作用 ： 因为浏览器的品种很多，每个浏览器的默认样式也是不同的。通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。
  • 有最简单的*{margin:0 ; padding:0}
  • 参考文档CSS中reset的作用
• 解释CSS Sprites，如何使用？
  
  • CSS精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
• 清除浮动的各种方式？以及各自的优缺点？
  
  • 参考文档CSS 中的浮动和清除浮动，梳理一下！
  • 参考文档css清除浮动clear:left-right-both示例效果
  • 参考文档浮动的原理是什么？浮动有什么影响？请列举常见的闭合浮动的方法。

javascript部分

• javascript的typeof都有哪些返回类型？
  
  • undefined
  • string
  • boolean
  • number
  • symbol(ES6)
  • Object
  • Function

• 列举三种强制类型转换，和两种隐式类型转换？

  • 强制类型转换
  • Number(参数)把任何类型转换成数值类型
  • parseInt（参数1，参数2）将字符串转换成整数
  • parseFloat()将字符串转换成浮点数字
  • string(参数)：可以将任何类型转换成字符串

  • Boolean()可以将任何类型的值转换成布尔值

  • • 隐式类型转换
      1.四则运算
      　　　　加法运算符+是双目运算符，只要其中一个是string类型，表达式的值便是一个String。
      　　　　对于其他的四则运算，只有其中一个是Number类型，表达式的便是一个Number。
      　　　　对于非法字符的情况通常会返回NaN:’1’*’a’ // => NaN,这是因为parseInt(a)值为NaN，1*NaN还是NaN
      2.判断语句
      　　　　判断语句中的判断条件需要是 Boolean类型，所以条件表达式会被隐式转换为Boolean。其转换规则则同Boolean的构造函数。比如:

var obj = {};if(obj){while(obj);}

• split和join的区别？
  
  • 前者是切割成数组的形式，后者是将数组转换成字符串
  • 参考文档 JS中split（）和join的区别
• 数组中pop、push、shift和unshift的区别？
  
  • Push()尾部添加 pop()尾部删除
  • Unshift()头部添加 shift()头部删除
• IE和DOM事件流的区别？
  
  • 参考文档DOM标准与IE的html元素事件模型区别
• IE和标准模式下有哪些兼容的写法？
  
  • Var ev = ev || window.event
  • document.documentElement.clientWidth||document.body.clientWidth
  • Var target = ev.srcElement||ev.target
• ajax请求中get和post的区别？
  
  • 1.get请求需注意缓存问题,post请求不需担心这个问题
  • 2.post请求必须设置Content-Type值为application/x-form-www-urlencoded
  • 3.发送请求时,因为get请求的参数都在url里,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数
  • 参考文档Ajax中Get请求与Post请求的区别
• call和apply的区别？
  
  • 定义：调用一个对象的一个方法，以另一个对象替换当前对象。
  • 说明： call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
    如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
  • apply()应用某一对象的一个方法，用另一个对象替换当前对象。
  • 如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
    如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。
  • 参考文档 JS中的call()和apply()方法
• ajax如何解析json和xml数据？
  
  • json： 使用eval parse,鉴于安全性考虑 使用parse更靠谱;
  • 参考文档 JS中Json数据的处理和解析JSON数据的方法详解
• 写出获取非行间样式的函数以及兼容写法？
  
  • 参考文档 javascript中获取非行间样式的方法
    
• 事件委托是什么？
  
  • 参考文档 js中的事件委托
• 添加、删除、替换和插入到某个节点的方法？
  
  • obj.appendChidl()
  • obj.innersetBefore
  • obj.replaceChild
  • obj.removeChild
• ==和===的区别？
  
  • 前者会自动转换类型，后者不会
• 对string对象进行扩充使其具有删除前后空格的方法？
  
  • ”abc 123 def”.replace(/\s/g, “”) 正则表达式替换
  • 参考文档 去除string中的空格
• 对数组去重的写法？
  
  • 参考文档 数组去去重的几种写法
• 对字符串去重的方法？
  
  • 参考文档 对字符串去重的写法
• 闭包的概念以及优缺点
  
  • 参考文档 闭包的使用场景及优缺点
• 判断数据类型的方法及区别
  
  • typeof()
  • instanceof()
  • Object.prototype.toString.Call()

好多都是直接从网上拷的，前端的知识太多，太杂。等有时间还要再看一遍
还有一份比较齐全的前端面试题前端面试必知的50道题目汇总

promise知识点