前端面试题【总结1】

前端面试题（A&B）

1.怪异盒模型与正常盒模型的区别

          怪异盒模型：内嵌

          正常盒模型：外扩

2.如何清除浮动

给父元素设置overflow：hidden 

动态向父元素后面添加一个clear：both的块属性元素

BFC作用：解决高度塌陷问题，清除浮动

3.== 与 ===的区别是什么

      == 内容相等

      === 值和数据类型都相等

4.基本数据类型与引用数据类型的区别是什么

     基本：值在栈区

    引用：值在堆区

5.请写出三种定位的参考物分别是什么

固定定位：相对于浏览器窗口

绝对定位：相对于有定位的父元素或祖先元素，如果都没有就相对于body

相对定位：相对于元素原来的位置

6.字符串方法substr与substring的区别是什么

substr（a,b）：可以从下标为a的位置开始截取，一直截取到下标为b的位置（取头取尾）

substring（a,b）:从下标为a的位置开始截取，截取到下标为b-1的位置（取头取不到尾）

7.什么是原型链

  对象调用属性或方法的寻找过程

先在自己的构造函数中寻找，如果没有就到自己的原型中寻找，如果还没有，就到原型的原型中寻找，一直找到Object的原型，如果还没有就报错

8.请解释事件委托

把事件添加给标签的父元素

通过事件对象e.target来实现具体的操作

9.DOM0与DOM2的区别是什么

dom0只能添加一个事件响应

dom2可以添加多个事件响应

10.说一下存储机制之间的区别

localStroage：数据存储在本地，需要手动删除，存储量大

sessionStroage：数据依赖浏览器，当页面关闭或者退出浏览器时清空数据，存储量大

cookie：可以为数据设置过期时间，存储量小，可以与后台共用

11.说一下你对闭包的理解

函数内部实现另一个函数

局部变量持久化

造成一定内存压力

12.call方法与apply方法的异同

  改变this指向

call（this，参数1，参数2）

apply（this，[参数列表]）

13.请写出 阻止冒泡 与 阻止默认

阻止冒泡：e.stopPropagation()

阻止默认：e.preventDefault()

14.请解释 构造函数 与 析构函数

构造函数：开辟内存空间

析构函数：释放内存空间

15.什么是响应式开发

    一套代码适用于多个平台

16.dom对象与jq对象如何互换

dom：$(对象)

jq：取下标

17.简述一下你对this的理解

this所在函数属于谁指向谁

18.如何解决塌陷问题

父级的第一个标签使用marign-top

设置overflow：hidden

添加一个border（给父元素）

不使用marign-top给父级使用padding-top

19.form表单的action与method有什么作用

method：请求方式

action：提交地址

20.请写出6种js的数据类型

基本数据类型

• number

• string

• boolean

• null

• undefined

复杂数据类型

• object

• function

• array

21.深浅拷贝的区别是什么

深拷贝：拷贝了内容

浅拷贝：拷贝了地址

22.什么是闭包，有什么作用

23.请写出至少6个数组的方法并解释其作用

  //1.join()将数组分隔为字符串 如果有参数用参数来分割 如果没有默认用逗号分隔

  //2.向数组添加或者删除

  //添加 push（向数组最后面添加） unshift（向数组最前面添加）会改变原数组

  //pop 删除数组的最后一项 shift删除数组的最前面一项 会改变原数组

  //3.sort()数组排序 如果是单个数字默认通过

  //4.反转数组 reverse 会改变原数组

  //5.拼接数组 concat（）返回新的数组 不会改变原数组

  //6.截取数组 slice（）返回新的数组 不会改变原数组

  //7.indexOf()从前向后查找 或者获取某元素的索引值 如果查找不到 得到的是-1

  //lastIndexOf()从后向前查找 或者获取某元素的索引值 如果查找不到 得到的是-1

24.什么是原型

     该类的公共空间，节省内存空间，本质是个对象

25.请解释事件对象

    该事件所有的相关信息

26.load方法与ready方法的区别是什么

     Load DOM0只能实现一次 不能简写 资源加载完毕

   ReadyDOM2 可实现多次 可简写  标签加载完毕

27.如何跨页面传值

   通过a标签或者location.href添加数据，在其他页面可以用location.search获取

   通过数据存储手段

28.标签为什么要语义化

标签名字有意义

1.在没有css样式的情况下对代码结构一目了然

2.有利于SEO

29.viewport的作用是什么

   初始化页面元素，防止页面被缩放，规范用户操作

30.Mouseenter，mouseleave 与 mouseover,mouseout的区别是什么

建议使用mouseenter mouseleave，因为mouseover mouseout会造成多次无效触发

31.post与get有什么区别

get：get是明文，获取数据

post：上传数据

32.什么是同步,什么是异步

同步：上一个任务结束，下一个在开始，比如alert弹窗，登录注册流程

异步：按顺序开始，不一定按顺序结束，比如图片加载，上传下载等任务

33.jquery链式语法的原理是什么

     因为jq 方法会返回一个jquary对象

34.input事件与change事件的区别是什么

change：内容被修改并且失去焦点

input：内容被修改

35.请从html，css，js三个维度说一下如何减少页面加载时间

          html ：多使用语义化标签，减少层级嵌套

          css：减少动画的使用 适当使用服务器字体 使用精灵图（雪碧图）

          js：减少for循环的嵌套  多使用switch   多使用类来修改 减少内联样式的修改 少使用load多使用ready 减少网络请求次数 按需加载

36.请用setTimeout实现setInterval

          

请使用setTimeout实现setInterval
timerFun()
function timerFun(){
  //要执行的操作
  var timer=setTimeout(function(){
  timerFun()
  clearTimeout(timer)
  },2000)
}

37.代码：冒泡排序

冒泡排序
var arr = [7, 5, 9, 3, 4, 2, 1, 6, 8];
        console.log(arr)
        for (var j = 0; j < arr.length-1; j++) {
            for (var i = 0; i < arr.length-1-j; i++) {
                if (arr[i] > arr[i + 1]) {
                    var temp = arr[i]
                    arr[i] = arr[i + 1]
                    arr[i + 1] = temp
                }
            }
        }