前端面试题集锦系列一

1.常用的浏览器有哪些？它们的内核分别是什么？

答：(1) Trident内核: IE, 360,搜狗,TT
       (2) Gecko内核: Netscape6及以上版本，Mozilla Firefox
       (3) Presto内核: Opera7及以上
       (4) Webkit内核：Safari, Chrome (Blink为Webkit的分支）

 

 

2.一个200*200的div在不同分辨率上下左右居中，用css实现

答: (1) position定位：#div {position: absolute; top: 50%;left: 50%;margin-top: -100px;margin-left: -100px;width: 200px;height: 200px;}
      (2) flex布局：html,body {width: 100%;height: 100%;} body {display: flex;align-items: center;justify-content: center;} #div{width: 200px;height: 200px;}
      (3) transform: #div {position: absolute; top: 50%;left: 50%;width: 200px;height: 200px; transform: translate(-100px, -100px);}

 

 

3.解释css sprites， 如何使用？

答：网页图片应用处理方式，把小图组合到一张大图中，常称精灵图
使用：background-image + background-repeat + background-position组合使用

 

4.如何使用原生js给一个按钮绑定两个onclick事件？
答：var btn  = document.getElementById(‘btn’)
btn.addEventListener(‘click’, f1)
btn.addEventListener(‘click’, f2)
function f1 () {alert(‘f1’)}
function f2 () {alert(‘f2’)}


5.拖拽会用到哪些事件？
答：(1) 在拖动目标上触发事件
ondragstart: 用户开始拖动元素触发
ondrag: 元素正在拖动时触发
ondragend: 用户完成元素拖动后触发
（2) 释放目标时触发的事件：
ondragenter: 当被鼠标拖动的对象进入其容器范围内触发
ondragover: 当某被拖动的对象在另一个对象容器范围内拖动时触发此事件
ondragleave: 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop: 在一个拖动过程中，释放鼠标键时触发此事件


6.请列举jquery中的选择器
答：6.1 基本选择器 $(‘#test’)   $(‘.test’)   $(‘div’)  $(‘*’)  $(‘#test’, ‘.test’)
6.2 层次选择器 $(‘#test span’)  $(‘#test>span’)  $(‘#test + span’)  $(‘#test~span’)   $(‘#test’).siblings(‘span’)
6.3 基础过滤选择器 $(‘span:first’)  $(‘span:last’)  $(‘span:not(.t)’)  $(‘span:even’) $(‘span:odd’)  $(‘span:gt(3)’)  $(‘span:lt(3)’)  $(‘span:eq(3)’)  $(‘:span’)
6.4 内容选择器 $(‘span:contains(“cont”)’)  $(‘span:empty’) $(‘span:parent’)  $(‘span:has(‘.test’)’)  $(‘span:not(:contains(“test”))’)
6.5 可见度过滤选择器 $(‘span:visible’)  $(‘span:hidden’)
6.6 属性过滤器 $(‘span[name]’) name = ? name != ? name^ = ? name$ = ?  name* = ?
6.7 子元素过滤选择器 $(‘span:nth-child(2)’)  $(‘span:first-child’). $(‘span:last-child’). $(‘span:only-child’)
6.8 表单对象属性过滤器  $(‘input[type=text]:enabled’) $(‘input[type=text]:disabled’) $(‘input[type=checkbox]:checked’)  $("select option:selected”)
6.9 表单选择器  $(‘:image’) $(‘:reset’)  $(‘:button’) $(‘:file’) $(‘input:hidden’) …

 

 

7.Javascript中的定时器有哪些？区别与用法是什么？可以互相转化吗？

答：setTimeout: 延迟执行一次

setInterval: 延迟多久再次执行，每隔一段时间会再次调用，可以执行多次
setTimeout(expression, milliseconds)  setInterval(expression, milliseconds)

可以使用setTimeout实现setInterval的功能，方法如下：
var a = 1; var tm = setTimeout(function () {alert(a++); tm = setTimeout(arguments.callee, 2000);}, 2000)

如果需要保持一个时间间隔固定的setInterval,则如下：

function interval (fun, time) {
  var iv = function (t) {
    return function () {
      setTimeout(iv, t);
      fun.call(null);
    }
  }(time);
  setTimeout(iv, time);
}
interval(function () {alert(‘jj’)}, 1000)

清理定时器 clearTimeout() clearInterval()

 

8.请描述一下cookie,sessionStorage,localStorage的区别

答：三者均存存储在客户端，分别从三个方面分析

8.1 存储大小 cookie <= 4k sessionStorage localStorage <= 5M

8.2 有效时间 cookie可以设置过期失效时间，在设置时间之前一直有效，无关乎窗口，localStorage 存储持久化数据，主动删除会消失，无关乎窗口 ， sessionStorage在当前浏览器窗口有效，窗口关闭随之消失，为会话性质

8.3 与服务器打交道 cookie自动传输，服务端亦可写入，另两者无沟通，存于本地

 

 

 

9.计算一个数组arr所有元素的和

答： var arr = [1,2,3];
function sum1 (arr) {

 var  sum = 0;

for(var i=0; i<arr.length;i++) {sum += arr[i];}

return sum;

}
function sum2(arr) {
  return arr.reduce(function(prev, current,inx,arr) {return prev + curr;}, 0);
}
function sum3 (arr) {
var sum = 0;
  arr.forEach(function(val, i,ary) {
    ary[index] = val;
    sum += value;
    return sum;
  });
}



10.数组去重方法有哪些？
答： 10.1 es6 var arr = [1,1,3,45,6];  var nv = […new Set(arr)] console.log(nv);
10.2 双重for循环  let  newArr = []; for(var i=0;i<arr.length;i++) {for(var j = 0; j <newArr.length;j++;){if (arr[i] === newArr[j]) {i++;j = i}; newArr.push(arr[i]}; return newArr};
10.3 indexOf
10.4 for…of + object
10.5 reduce let arr = [1,1,1,3,4] let arr2 = arr.reduce(function(ar, cur) {if (!ar.includes(cur){ar.push(cur); return ar}, [])

 

11.document.write 与 innerHTML的区别
答：document.write输出内容会重写整个页面，innerHTML与调用元素的所有子节点是对应的，它会根据指定的值创建新的DOM树替换旧的子节点，不至于页面全部重绘

 

12.JSON 与 XML的区别

答：XML是扩展标记语言，它提供统一的方法来描述与交换数据，基于文档大类型定义，比较标准，易于交互及数据共享，但文件大，格式复杂，解析耗时

JSON是轻量级的数据交换格式，优于结构简单，易于读写解析，支持度广，目前推广度不及XML

 

13.浅拷贝和深拷贝的区别和实现方法

答：一般情况下，浅拷贝和深拷贝针对的是js的引用类型，像Object, Array 区别在于浅拷贝只复制对象的第一层属性，而深拷贝则可以对对象的属性进行递归复制

浅拷贝 function lc (obj1) {
let obj2 = {};
for(let i in obj1) {
 if (obj1.hasOwnProperty(i)) {
  object2[i] = obj1[i]
}
}
}

或者Object.assign()

 

深拷贝 function dc (obj1,obj2) {
var obj2  = obj2 || {};
for(let i in obj1) {
  if (typeof obj1[i] === ‘object’) {if(obj1[i].constructor === Array) { console.log(‘array’) obj2[i] = [ ];} else  { console.log(‘object’); obj2[i] = {}} this.dc(obj1[i], obj2[i] } else {obj2[i] = obj1[i];} return c}
}
}

或者使用JSON.parse(JSON.stringify())

 

14.ajax?

答：ajax是指异步js xml,它能够刷新局部网页数据，实现异步更新
var xmlhttp = new XMLHttpRequest() || new ActiveXObject(‘Microsoft.XMLHTTP

’)

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    }

  }

xmlhttp.open("GET","test1.txt",true);

xmlhttp.send();

 

 

15.描述一下HTML5新特性

答：新的文档类型 <!DOCTYPE html>; 脚本链接无需type; 语义化的标签，header,footer,article…;表单文本框相关的属性,required,pattern, autofocus;音频视频相关标签;canvas,geolocation,webworker,websocker,svg,storage,drag

 

 

16.描述一下CSS3的新特性

答：16.1 css3选择器，:last-child  :nth-child(n) :nth-last-child(n)

16.2 @font-face 字体图标引用

16.3 圆角 border-radius: 10px;

16.4 阴影 box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

16.5 弹性盒模型 display: flex;

16.6 渐变 background-image: -webkit-gradient(linear, 0%  0%, 100% 0%, from(#fff), to(#f64));

16.7 CSS3动画特效 transition: all 0.5s ease-in 0.1s;(过渡) 

transform: translate ,rotate, scale, skew(2d转换效果); 

Animation动画 animation: ani 0.2 ease-in 0.1; @keyframs an {}

 

17.  Js动画与C3动画的优缺点对比

答：由于js在浏览器中的运行是单线程的，因此，在动画渲染过程可能会受到其他运行的js脚本，样式等任务执行而可能出现阻塞，因而动画可能会丢帧，js动画的代码复杂度会高于c3动画，但js动画控制能力强，可以掌控动画整个的运行周期及相关细节，效果更加丰富，大多时候没有兼容性问题

C3动画运行过程控制弱，没有回调方法可以绑定，代码冗长，但C3动画是基于浏览器绘制的，因此呢，可以强制作用硬件加速来提高动画性能，它使用requestAnimationFrame在刷新浏览器后不会进行重绘或者回流，性能更高，动画更流畅

 

18.什么是DOM？

答：DOM 定义了访问 HTML 和 XML 文档的标准， HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法，HTML中的所有内容称之为节点，文档节点，元素节点，文本节点，属性节点，注释节点，节点树彼此拥有层级关系，它拥有一些方法和属性，getElementById()，getElementsByTagName()，getElementsByClassName()，appendChild()，removeChild()，insertBefore()，createAttribute()，createElement() , getAttribute(), setAttribute(),还有点击等事件

 

19.什么是BOM?

答：浏览器对象模型（Browser Object Model，简称 BOM）提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，当前浏览器窗口对象为window对象，属性有status,opener,closed,方法有： alert, confirm, setInterval, clearInterval setTimeout  clearTimeout open 子对象有 document, location, location, history,screen

 

20.DOM事件有哪些阶段？谈谈对事件代理的看法

答：分为三大阶段： 捕获 — 目标 — 冒泡 使用window.addEventListener 设置最后一个参数为true 即为事件捕获模式， false即为冒泡模式，通过e.stopPropagation(window.event.cancelBubble)来取消冒泡

事件代理简而言之是指事件不直接绑定到某元素上，而是绑到父级，通过事件触发操作，条件判断再执行，好处在于节省内在开销，代码更简洁

 

21.请说一说js执行机制及其事件循环的理解

答：js是单线程，任务是队列，需要排队，在js中，任务是有同步跟异步之分的，异步后于同步任务执行,一般比较耗时的任务将采用异步执行

 

22.深入理解盒子模型

答：从HTML元素开始说起，HTML中的大多数元素分为块级block与行内inline元素,行内块元素固名思义是结合了块级元素与行内元素优点的特殊分类
块级元素会独占一行，并尽可能地充满整个容器,块级元素是可包含其他分类的，可以设置width,height,margin,padding,border属性
行内元素不独占一行，只占据标签本身所拥有的内容范围，内容宽高即可容器宽高，可以设置margin-left与margin-right,border,padding,border-top和padding-top到页面顶部后就不再增加

盒模型：HTML文档中的每个元素都被描绘成矩形盒子，这些盒子通过一个模型来描述其占用空间，盒模型通过4个边界来描述：margin(外边距),border(边框),padding(内边距),content(内容区域)

它分为标准盒模型(W3C)与怪异盒模型(IE)

标准content的width/height = 设置的width/height
标准的盒子总宽度/总高度 = 设置的width/height+padding+border+margin

怪异content的width/height = 设置的width/height - padding - border
怪异盒子总宽度/高度=设置的width/height + margin = content宽度/高度 + padding + border + margin

 

兼容方案：建议在指定宽度的盒子无需添加内边距，而是合理利用父级元素的内边距或者子级元素的外边距

通过CSS3指定盒子模型种类： box-sizing: content-box (w3c) / border-box(ie) 

这些盒模型占用一定的空间，自上而下分成行，自左向右依次排列，形成了文档流，当然通过像float,position等是可以脱流文档流的