web前端开发面试题-基础篇

最近更新时间：2017年7月19日09:50:06

《我的博客地图》

    IT行业发展迅速并且热火朝天，每年都呈现人才紧缺现象，同时高薪岗位更是数不胜数，但要想过五关斩六将进入大厂，就需要谦虚学习基础知识，不断总结经验。企业的竞争，本质是人才的竞争，优秀的人才进入优秀的企业，是符合社会发展规律不变的定律。
1、CSS选择器有哪些？它们的优先级是怎样的？
    选择器类型：id选择器（ # myid）、类选择器（.myclassname）、标签选择器（div, h1, p）、相邻选择器（h1 + p）、子选择器（ul > li）、后代选择器（li a）、通配符选择器（ * ）、属性选择器（a[rel = "external"]）、伪类选择器（a:hover, li:nth-child）
    选择器优先级：就近原则-同权重情况下样式定义最近者为准;载入样式以最后载入的定位为准;
    优先级为:!important >  id > class > tag，同时important 比 内联优先级高
    权重的规则：标签的权重为1，class的权重为10，id的权重为100；如果权重相同，则最后定义的样式会起作用
2、列出px、em、rem三者的区别，以及各自的适应场景
    px：像素，相对长度单位，相对于显示器屏幕分辨率而言；
    em：相对长度单位，相对于当前对象内的文本字号，如果当前对象没有设置字体尺寸，则相对于浏览器默认字号
    rem：，root em，相对长度单位，相对于HTML根元素的字号尺寸
3、写出一个两列等高，左列固定宽度为200px，右列自适应浏览器的布局
    父元素flex布局，左侧子元素flex-basis:200px，右侧子元素flex:1；

    更多可参考我的文章《CSS面试集锦》

4、你做的页面在哪些浏览器测试过？常见浏览器的内核分别是什么？

    浏览器内核：IE-Trident，Firefox-Gecko，Opera-Blink，Chrome-Webkit，Safari-Webkit，360-兼容模式Trident+极速模式Webkit
5、一个圆心坐标为(0,0)的圆，半径r=10，求45°方向的点坐标(x,y)

    x = Math.cos(Math.PI/4)*r

    y = Math.sin(Math.PI/4)*r
6、定义一个方法，用于将string中的每个字符之间加一个空格，并输出

    如：'hello' -> 'h e l l o'

function joinSpace(str){

  return str.split('').join(' ')

}

7、获取JavaScript对象键名

var obj = {name: 'wan',age: 20, sex: 'male'};  
var objKey = [];  
for(var item in obj){  
  if(obj.hasOwnProperty(item)){  
    objKey.push(item);  
  }  
}  
//for(var item in obj){  
//    objKey.push(item);  
//}  
console.log(objKey);//["name", "age", "sex"]

8、获取页面html标签的个数

var elementArr = document.getElementsByTagName('*')
    var tagNameArr = []
    for(var i= 0,len=elementArr.length;i<len;i++){
        if(tagNameArr.indexOf(elementArr[i].tagName) == -1){
            tagNameArr.push(elementArr[i].tagName)
        }
}

详解：

document.getElementsByTagName('html');返回文档的html对象集合,typeof为object

document.getElementsByTagName('*');返回文档的所有元素集合，是一个对象

document对象属性和方法：

document.URL;//返回文档完整的URL

document.referrer;//返回本文档的引用地址，载入当前文档的文档的URL

document.cookie;//设置或返回与当前文档有关的所有cookie

document.getElementsByTagName('html')[0];返回文档的html元素对象，元素节点有以下属性和方法：

element.addEventListener();//向指定元素添加事件句柄

element.appendChild();//为元素添加一个新的子元素

element.attributes();//返回元素的属性数组

element.tagName();//返回字符串类型的大写元素名

9、DOM事件流包括哪几个阶段

    事件流，从页面接收事件的顺序；IE的事件流叫做事件冒泡；Netscape的事件流叫做事件捕获；

    “DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段

document.addEventListener(type, handler, false);//true事件捕获模式，false事件冒泡模式

10、事件委托的实现原理是什么，优缺点

    参考我的文章《web页面性能优化方案汇总》

    原理：事件冒泡，子元素的单机事件会冒泡到顶层元素document对象上

    优点：DOM操作少，只获取一个顶层DOM元素；减少事件注册，节省内存占用；简化了DOM节点更新时的事件更新

    缺点：不支持不冒泡的事件；出现不期望的事件误判

    适合采用事件委托技术的事件包括：click、mousedown、mouseup、keydown、keyup、keypress

    不冒泡的事件：blur、focus、load、unload

11、call和apply的区别

    语法一：func.call(thisObj,a,b,c...) || func.apply(thisObj,array)

    定义：将函数（方法） func 绑定到对象 thisObj 上去运行，改变了函数func 原有的 this 的指向，this指向了对象thisObj（js中的函数是对象，函数名是对 Function 对象的引用）

 

    语法二：obj.call(thisObj,a,b,c...) || obj.apply(thisObj,array)

    定义：将对象 obj 的属性和方法添加到对象 thisObj 上，即 thisObj 继承了 obj

    区别：call的参数个数，从第二个开始 大于等于 0个，为单个变量；apply的参数只有两个，第二个参数为一个数组，即array = [a,b,c...]；

    实例一：借调方法，对象sub借调对象add的方法add（函数也是对象）

function add(a,b){return a+b}

function sub(a,b){return a-b}

add.call(sub,3,1)//4

sub.call(add,3,1)//2

add.call(sub,3,1) === add(3,1)

    实例二：改变this指向

function a(){console.log(this)}

var obj = {}

a()//window

a.call()//window

a.call(obj)//obj

    实例三：实现继承

function Animal(name){this.name=name;this.showName=function(){alert(this.name)}}
function Cat(name){

    Animal.call(this,name); //将Animal对象的属性和方法应用到Cat上，因此Cat继承了Animal的所有属性和方法
}
var cat = new Cat(“Black Cat”);
cat.showName(); //Black Cat

    实例四：多重继承

 

function add(a,b){return a+b}

function sub(a,b){return a-b}

function calc(a,b){

    add.call(this)

    sub.call(this)

}

12、为下面的类增加一个方法method1

    var A = function(){}

    A.prototype.method1 = function(a,b){return a+b}

13、typeof 和 instanceof 操作的用法、实例

    typeof操作符判断基本数据类型；instanceof检测对象的继承关系，左操作数是对象，右操作数是构造函数

console.log(typeof null);//object
console.log(typeof undefined);//undefined
console.log(typeof 'a');//string
console.log(typeof 1);//number
console.log(typeof true);//boolean
console.log(typeof []);//object

    instanceof可以准确判断 左对象 是 右对象 的实例
console.log([] instanceof Array);//true
console.log('a' instanceof String);//false
console.log(/a/ instanceof RegExp);//true
console.log([] instanceof Object);//true

14、html元素添加事件的方法

    原生方法：

    ①<input type='buttom' value='click me' οnclick='try{showMessage()}catch(ex){}'>

    var btn = document.getElementById('myBtn')

    ②btn.onclick = function(){}

    ③btn.addEventListener('click',function(){},false)//false在冒泡阶段调用事件处理程序

    IE：btn.attachEventListener('click',function(){},false)

15、js中改变this指向的方法

    call、apply、bind，this总是指向调用它的对象

    new function01（），改变了构造函数this的指向，指向创建的对象

16、用js代码完成，body里面生成100个div，内容是1-100自身序号，颜色按照红、黄、蓝、绿交替变色，10行10列

17、不定宽高的img在固定宽高的容器内水平垂直居中，写出html和css

18、清除浮动的原理和实现方法

19、实现Parent类和Child类，并建立Parent和Child的继承关系

function Parent(){

    this.surname = 'wan';

    this.work = function(){console.log('i like work')}

}

 

function Child(){}

原型链继承：Child.prototype = new Parent()

实例化：let person = new Child();

console.log(person.surname);//wan

person.work();//i like work

构造函数继承：function Child(){Parent.call(this)}

组合继承：

function Child(){

    Parent.call(this);//继承属性

}

Child.prototype = new Parent();//继承方法

原型式继承：

function object(obj){

  function Func(){};

  Func.prototype = obj;

  return new Func();

}

var Child = object(Parent);

寄生式继承：

寄生组合式继承：

20、页面的三种弹窗

    alert警告框；confirm确认框；prompt提示框

21、rgba()和opacity的透明效果有什么不同

    代码上的不同：

#out1{width: 10rem;height: 10rem;opacity: 0.2;background: #fda247;}
#out2{width: 10rem;height: 10rem;background: rgba(253,162,71,0.2);margin-top: 1rem;}

    效果上的不同：opacity方案，子元素文字内容同时透明；rgba方案，子元素内容不透明

22、解释原型和原型链

    原型：即对象原型，原型对象上定义方法和属性的目的是为了被子类继承和使用。原型链的形成真正是靠__proto__ 而非prototype

    原型链：每个对象都有原型，对象的原型指向原型对象，即子对象的原型指向父对象，父对象的原型指向爷爷对象，这种原型层层连接起来的就构成了原型链。

23、ajax中get请求与post请求的区别

    get请求会将参数跟在url后进行传递，而post请求则是作为http消息的实体内容发送给web服务器，但是这种区别对用户是不可见的;

    使用Get请求发送数据量小,Post请求发送数据量大;

    get安全性非常低，post安全性较高;

    在以下情况中，请使用 POST 请求：无法使用缓存文件（更新服务器上的文件或数据库）；向服务器发送大量数据（POST 没有数据量限制）；发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

    若符合下列任一情况，则用GET方法：请求是为了查找资源，HTML表单数据仅用来帮助搜索。请求结果无持续性的副作用。收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。

24、降低页面加载时间的方法

    参考我的文章《web页面性能优化方案汇总》

25、jQuery为DOM元素绑定点击事件的方法和区别

    .click(function(){}) 

    .bind({'click mouseleave',function(){}},{'click mouseleave',function(){}}) //在.bind()绑定事件的时候，这些元素必须已经存在。

    .on() //为动态绑定事件

    .one("click", function() {alert("This will be displayed only once.");});//绑定一个事件，并且只运行一次，然后删除自己，

26、使用原生js为以下li实现事件委托，点击后打印对应的node-type属性值

<ul id="test">
    <li node-type="1">b</li>
    <li node-type="2">a</li>
    <li node-type="3">t</li>
</ul>
var ele = document.getElementById('test');
ele.addEventListener('click',function(e){
    var value = e.target.attributes[0].nodeValue;
    console.log(value);
},false) 

27、函数节流定义、作用、示例

    函数节流：某些代码不可以在没有间断的情况下连续重复执行，不仅消耗内存大、占用CPU时间长，同时还会造成不期望的后果，必须采取节流手段；

    基本思想：第一次调用函数，创建一个定时器，在指定的时间间隔后运行代码；第二次调用，清除前一次的定时器并设置另一个；

    目的：只用在执行函数的请求停止了一段时间之后才执行；

var processor = {

  timeoutId: null,

  performProcessing: function(){

    //执行的代码

  },

  process: function(){

    clearTimeout(this.timeoutId);

    var that = this;

    this.timeoutId = setTimeout(function(){

      that.performProcessing();

    },500);

  }

}

processor.process();

    在微信小程序开发中，scroll-view标签用于创建可滚动的列表区域，这个属性可以绑定用户滚动到列表底部的事件，如下：<scroll-view scroll-y bindscrolltolower="bottom"></scroll-view>，但是，页面到达底部之前的临界点，这个事件会重复触发无数次，导致向后台请求分页数据无数次。此时，可以采用函数节流技术；

方案二：

var lastTime = Date.now();

if(Date.now() - lastTime > 20000)}{

lastTime = Date.now();

do something...

//时间间隔2s才能执行的方法

}

28、开发过程中如何调试抓包（http、https）

    pc端：chrome浏览器-Network

    手机的通信包：Fiddler是一个http协议调试代理工具，它能够记录并检查所有你的电脑和互联网之间的http通讯，设置断点，查看所有的“进出”Fiddler的数据（指cookie,html,js,css等文件，这些都可以让你胡乱修改的意思）。 Fiddler 要比其他的网络调试器要更加简单，因为它不仅仅暴露http通讯还提供了一个用户友好的格式。

29、http状态码

    1信息，2成功，3重定向，4客户端错误，5服务器错误

    302请求的资源被临时移动；303查看其他地址；304请求的资源未修改，读取缓存资源；403请求被服务器拒绝；404无法找到资源；500服务器内部错误；502无效请求

30、常见的兼容性问题，列举三种

    所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

    html，H5新标签低版本浏览器无法解析；img标签的alt属性不同浏览器解析不同

    css，margin和padding属性不同浏览器的初始值不同；font-size在chrome浏览器中最小字体是12px

    js，标准的时间绑定方法为addEventListener，IE下是attachEvent

31、ajax的原生js过程

    参考我的文章《AJAX-前后端开发的纽带》

32、页面中如何响应鼠标点击并提取点击坐标

document.onclick = clickStat;
function clickStat() {
    var e = arguments[0] || window.event,x = '',y = '';
    if(e.clientX || e.clientY){
        x = e.clientX;
        y = e.clientY;
    }else{//兼容ie
        x = e.clientX + document.body.scrollLeft - document.body.clientLeft;
        y = e.clientY + document.documentElement.scrollTop;
    }
    console.log(x,y)
}

33、js捕获离开（刷新、关闭、后退）页面事件

    onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 "确定要离开此页吗？"。该信息不能删除。但你可以自定义一些消息提示与标准信息一起显示在对话框。
注意： 如果你没有在 <body> 元素上指定 onbeforeunload 事件，则需要在 window 对象上添加事件，并使用 returnValue 属性创建自定义信息。

window.onbeforeunload = function(){

    setTimeout(function(){console.log('cancel');},1000);

    return '确定离开？'

}

34、ajax请求时，如何解析JSON数据

    eval();//此方法不推荐
    eval( '(' + jsonDate + ')' );

    JSON.parse();//推荐方法
    JSON.parse( jsonDate );
eval();方法解析的时候不会去判断字符串是否合法，而且json对象中的js方法也会被执行，这是非常危险的；

35、原生js实现get请求

//原生js实现ajaxget请求
function originAjax(){
    var xhr;
    if (window.XMLHttpRequest){
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xhr = new XMLHttpRequest();
    }
    else {
        // IE6, IE5 浏览器执行代码
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange=function(){
        if(xhr.readyState == 4 && xhr.status == 200) {
            //xhr.responseText:{isSuccess:1}
            if(xhr.responseText.isSuccess == 1){
                console.log('request success')
            }else{
                console.log('request err')
            }
        }
    }
    xhr.open("GET","http://192.166.65.131?code=10",true);//true 异步
    xhr.send();//xhr.send(string);string仅用于 POST 请求
}

36、css实现，鼠标放在一个div上时该元素在2s内旋转180°

#lamp{
    width: 400px;
    height: 40px;
    background: #ff0000;
}
#lamp:hover{
    animation: rotate 2s;
    -webkit-animation: rotate 2s; /* Safari and Chrome */
}
@keyframes rotate
{
    from {transform: rotate(0deg);}
    to {transform: rotate(180deg);}
}
@-webkit-keyframes rotate /* Safari and Chrome */
{
    from {transform: rotate(0deg);}
    to {transform: rotate(180deg);}
}

37、定义一个类的私有属性和公有属性

function Person(){

  var sex = 'man';//var 私有

  this.surnname = 'wan';//this 公有

}

38、