JavaScript前端面试题总结

1、em和rem

像素（px）：用于元素的边框或定位。

em/rem：用于做响应式页面，em相对于父元素，rem相对于根元素。

• rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。
• em 单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。

2、语义化标签

定义：命名或者标签有意义，能够直观的看出来是什么意思

h5新增的标签：header、nav（导航）、footer、vedio、audio、time、section（章节）、artical、aside

3、ES6新特性

ES52009年发布 ES62015年发布

• 模板字符串
• let和const
• for of 只循环访问对象的中值
• ···res接受剩余的实参
• 箭头函数 const greet = name => Hello ${name}!;
• JavaScript中标准函数this

4、css3新特性

• 新增各种css选择器
• 圆角 border-radius
• 多列布局
• 阴影和反射
• 文字特效text-shadow
• 线性渐变
• 旋转transform

5、css3新增的伪类

• p:first-of-type 选择属于其父元素的首个p元素的每个p元素。
• p:last-of-type 选择属于其父元素的最后p元素的每个p元素。
• p:only-of-type 选择属于其父元素唯一的p元素的每个p元素。
• p:only-child 选择属于其父元素的唯一子元素的每个p元素。
• p:nth-child(2) 选择属于其父元素的第二个子元素的每个p元素。
• :after 在元素之前添加内容,也可以用来做清除浮动。
• :before 在元素之后添加内容。
• :enabled 已启用的表单元素。
• :disabled 已禁用的表单元素。
• :checked 单选框或复选框被选中。

6、闭包函数、原型、原型链；作用域、作用域链

闭包函数定义： 定义：当两个函数发生嵌套关系时，内层函数使用外层函数的变量，并在全局环境下调用内层函数保护内部变量不别清理掉

作用域定义：可以访问变量的集合。全局作用域：在全局或任何地方都可以起作用的变量，任何地方都可以修改；局部作用域：- 定义在函数内部的变量、函数的形参

作用域链：我们可以把作用域看成是用链条连接起来的，这样能够使得函数能有序的进行运行：里层函数可以访问外层函数的变量，但是外层函数不可以访问里层函数的变量

每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时 如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念

关系：instance.constructor.prototype = instance.proto

特点：JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的 就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象

7、浏览器优化

• 雪碧图：雪碧图是根据CSS sprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。
• 图片精灵技术

8、 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

• cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）

• cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递

• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

• 存储大小：

  • cookie数据大小不能超过4k
  • sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

• 有期时间：

  • localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除
  • cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

9、http中的get和post请求区别

http://www.w3school.com.cn/tags/html_ref_httpmethods.asp

10、三种传输方式put、delter

11、浏览器内核

IE——>IE内核 谷歌——>wbbkit内核 火狐——>gecko（火狐）内核

12.简述一下src与href的区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

• src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素
• href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

13.HTML、JavaScript

HTML：超文本标记语言

python：面向对象的动态类型，强类型语言

JavaScript：基于对象和事件驱动的松散型、解释性语言，寄宿于浏览器，单线程异步

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言内置支持类型，他的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，用来给html网页增加动态功能。

• 基于对象/基于原型：面向对象的开发语言；

• 事件驱动：所有的效果都是通过事件触发一系列代码实现的；

• 解释性：不需要编译，寄宿于浏览器，不需要运行环境；

• 松散型：要求i没有严格；没有那么严谨；

• 动态类型：变量，可以加效果，动态的变化

• 弱类型：对类型没有那么严格，比如字符串可以跟数字相加

• 基于原型的：内置支持类型；

14、自动换行三行代码

    word-wrap:break-word;
    word-break:break-all;
    overflow: hidden;

15、选择器的优先级

!important > 行内样式 > #id > .class > tag > * > 继承 > 默认

选择器 从右往左 解析

16、new操作符具体干了哪些事？

• 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型
• 属性和方法被加入到 this 引用的对象中
• 新创建的对象由 this 所引用，并且最后隐式的返回 this

17、this指向

• this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象
• 《javascript语言精髓》中大概概括了4种调用方式：
• 方法调用模式
• 函数调用模式
• 构造器调用模式
• apply/call调用模式

18、深浅拷贝

• 浅拷贝：是一个传址,也就是把a的值赋给b的时候同时也把a的址赋给了b，当b（a）的值改变的时候，a（b）的值同时也会改变

• 深拷贝：深拷贝是指，拷贝对象的具体内容，二内存地址是自主分配的，拷贝结束之后俩个对象虽然存的值是一样的，但是内存地址不一样，俩个对象页互相不影响，互不干涉

• 初始数据类型和引用数据类型的区别：分别放在栈区和堆区，栈区和堆区的区别：栈区放置变量和函数名，执行完程序自动删除，堆区放置引用的数据，可以自己删除，也会被js的垃圾回收处理删除

19、JavaScript发展的时间轴：

1、1995：JavaScript诞生，它的初始名叫LiveScript。
2、1997：ECMAScript标准确立。
3、1999：ES3出现，与此同时IE5风靡一时。
4、2000–2005： XMLHttpRequest又名AJAX。
5、2009： ES5出现，也就是我们现在用的，例如foreach，Object.keys，Object.create和JSON标准。
6、2015：ES6/ECMAScript2015出现