2018我遇到的前端面试题

一年工作经验……

HTML篇：

1. doctype是什么？有哪些类型？

doctype用于声明文档类型；
HTML4的doctype有三种：过渡的（不严格）//严格的（不允许使用任何表现层的表示和属性）//框架的

2.input有哪些新类型？简要说明其用法。

email || url || number || range || Date || pickers (date, month, week, time, datetime, datetime-local) || search || color

==大多数浏览器不支持==

3.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

新特性
canvas

video和audio标签

本地存储：localStorage和sessionStorage
语义化：article、footer、header、nav、section

表单控件新类型

地理定位Geolocation

移除的元素

big/center/tt/u/s/frame/frameset/noframes

解决兼容性

区分HTML4.0和HTML5

DOCTYPE声明\新增的结构元素\功能元素

4.bootstrap响应式的实现原理是什么？

百分比和媒体查询

5.多终端页面适配是怎样实现的？

1.使用淘宝的rem.js，基本原理是根据通过dpr设置缩放比，实现布局视口大小，然后通过js动态计算font-size

2.根据设计稿的大小，设置一个参考值计算font-size

CSS篇：

1.实现两列布局，左边自适应，右边固定宽度

网上有很多种方法，我只尝试了一种：

2.用css画一个三角形

3.css实现字体大写

  
    
  
  
    
This is some text in a paragraph.
    
This is some text in a paragraph.
    
This is some text in a paragraph.
  

4.display有哪些常用属性值，各是什么意思？

block:显示为块级元素（块级元素和行内元素的区别略）
inline-block || inline || none || flex || grid

5.position为absolute、relative、fixed的定点位置。

absolute：相对与除了static定位的父集元素;

relative：相对于自身原来的起点位置;

fixed：相对于可视窗口

6.用三种方法清除浮动

1.在父级末尾添加空div，并设css样式clear:both;

2.父级使用伪类after,具体如下：

el:after{
    content:"";
    height:0;
    position:absolute;
    clear:both;
    display:block;
}
el{
    zoom:1;//兼容IE
}

3.父级设置height

Javascript篇：

1.什么是事件捕获和冒泡？如何阻止事件冒泡？（js原生和jQuery两种）

2.js创建对象，至少用三种方式实现。

3.简述一下事件穿透，及解决办法。

4.用三种方式判断变量类型是否是数组

5.怎样实现对象的拷贝？（ES5）

var cloneObj = function (obj) {  
    var newObj = {};  
    if (obj instanceof Array) {  
        newObj = [];  
    }  
    for (var key in obj) {  
        var val = obj[key];  
        //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一个函数中运行，它就代表哪个函数, 一般用在匿名函数中。  
        newObj[key] = typeof val === 'object' ? cloneObj(val): val;  
    }  
    return newObj;  
}; 

6.什么是闭包？闭包有何优缺点？

7.简述一下new一个构造函数的过程。

8.简述一下ajax请求过程

9.为什么会有跨域？怎么实现的？简述一下实现原理。

10.js的原始数据类型有哪些？

string , boolean , number , null , undefined

11.写一个函数，判断一个变量是否是字符串(一种数据类型)。

typeof str != "string" && str.constructor != String

12.以下代码有否正确？如不正确，请改正

f = function(){return true;}
g = function(){return false;}
(function(){
    if(g()&&[]==![]){
    f = function f(){return false;} 
    function g(){return true;} } 
})(); 
console.log(f());//true or false?

13.typeof有哪几种结果？

string || number|| undefined || boolean || function|| object

14.箭头函数和普通函数有什么区别？

1.箭头函数没有绑定this指针，普通函数的this指向调用函数的对象（匿名函数的this都指向全局window对象）;
2.箭头函数没有构造器

15.请用三种方法实现数组去重

1.使用空对象，将数组元素作为对象key值，出现次数作为value值，循环数组
2.使用ES6的Set类型，[...new Set([1,2,3,2,3,1,4,5])];//[1,2,3,4,5];
3.普通的for循环，循环之前排序，会高效一点点

16.检测一个对象是否有prop属性，没有就抛出异常，有的话返回true，并删掉该属性

 var o = {
      age:10,
      prop:"prop"
    }
    function hasProperty(pro,obj){
      if(obj.hasOwnProperty(pro)){
        delete obj.prop;
      }else{
        throw new Error("没有该属性");
      }
    }
    hasProperty("prop",o)
    console.log(o)

17.href和src有什么区别？

href是文档之间的跳转
src是资源的引用，将指定资源插入到src所在的位置

jQuery篇：

1.attr()和prop()的区别？

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()
典型应用：用checkbox类型实现radio的功能，有兴趣的话可以实验一把

    1
    2
    3
    4

2.on和bind有什么区别？js动态添加的DOM元素，用on还是bind绑定？

bind现在基本已经被弃用，不做讨论

on常用于事件委托，如：

$(el).on("click","subel1,subel2",function(){});

之后动态添加的el的同类型子元素自动被绑上此事件！！！

3.touch和click有何区别？

touch有延迟，等待是否双击事件

4.window.onload和jQuery的ready有什么区别？

略！

Vue篇：

1.简述一下Vue的生命周期及其特点

2.Vue的双向绑定原理是什么？

3.Vue的特点有哪些？和jQuery有何区别？

4.父子组件之间传递数据的方法

5.子组件之间如何共享数据

Vuex

6.一般用什么工具进行数据交互？

7.webpack原理是什么？

8.简述一下$nextTick的用法

浏览器篇：

1.有用过浏览器缓存吗？请介绍一下基本的缓存机制。

浏览器缓存有两种：强缓存和协商缓存，强缓存类型不会发送请求到服务器，协商缓存会发送请求到服务器，但不会请求新的响应数据；
js禁止缓存：设置请求头 // 在链接后手动添加随机数

2.cookie，sessionStorage，localStorage的区别是什么？

兼容性问题篇：

1.key up,key down,key press在不同浏览器下有何不同？

主要是浏览器兼容性问题

2.请介绍一下margin “塌陷”问题。

网络篇：

1.url请求所经历的过程有哪些？

判断请求类型，是否用缓存，是否是异步数据交互等几种情况，
详见https://blog.csdn.net/u014600626/article/details/78720763

2.从服务器端安全考虑，请求方式用get还是post？

get！！ 因为get方式是查询操作，而post可能会恶意修改数据

3.http和https的区别？

项目经验篇：

1.项目过程中遇到的最大挑战及解决办法？

其他：

1.常用的网页性能优化方法有哪些？