前端基础高频面试题(更新中)

时间 2019-11-24

标签前端基础高频面试更新栏目快乐工作繁體版

原文原文链接

页面渲染的全过程

输入url后，先拿到html文件，html下载完之后会开始对它进行解析css

html在解析的过程当中，若是文本里有外部资源连接，好比css、js和img时，会当即启用其余线程下载这些静态资源。html

特殊的是当遇到js文件的时候，html解析会停下来，等js文件下载结束而且执行完，再进行html执行。前端

在html解析的同时，解析器会把解析完的html转化成DOM对象，构建成DOM树。html5

当css下载完，css解析器开始对css解析，把css解析成css对象，把css组装起来，构建CSSOM树。web

DOM和CSSOM树构建完毕，浏览器根据两棵树建一颗渲染树。正则表达式

HTML

Hyper Text Markup Language 超文本标记语言chrome

html5为何只须要写<! DOCTYPE HTML>

答:这是w3c制定的规则,是文档类型声明,语义化说是告诉浏览器和其余开发者,这个文档使用的是html5标准。canvas

2.html5新特性有哪些

答:header、footer、aside、nav、video、audio、canvas、localStorage、sessionStorage、cookie、output、datalist、keygen、data、time、email、url、search···windows

< img > 的 title 和 alt 有什么区别？

答： alt 是图片加载失败时，显示在网页上的替代文字；数组

title 是鼠标放上面时显示的文字。

这些都是表面上的区别，alt是img必要的属性，而title不是。

XHTML和HTML有什么区别

答:XHTML:

1)全部的标记都必须有一个相应的结束标记;

2)全部标签的元素和属性的名字都必须使用小写;

3)全部的XHTML标记都必须合理嵌套;

4)全部的属性都必须用引号""括起来;

5)XHTML文档必须拥有根元素。

如何在 html 页面上展现 < div> < /div> 这几个字符

答：使用忽略HTML标记< xmp>，

如：<p><xmp><div></div></xmp></p>
复制代码

什么是渐进式渲染

答:指打开页面先加载首页显示内容;,以后再随着时间或者滚动页面进行后面的加载。

前端页面有哪三层构成,分别是什么?做用是什么?

结构标准:制做网页按照html标准结构写网页;

表现标准:用来美化网页CSS;

行为标准:用来实现网页中用户的动做处理JavaScript。

浏览器的内核有哪些

答:

Trident(IE内核):IE、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等;

Gecko(firefox):火狐浏览器

webkit(Safari):Apple

Blink:谷歌浏览器

什么是语义化的HTML

答:就是写出的HTML代码符合内容的结构,选择合适的标签,可以便于开发者阅读和写出更优雅的代码,好比页面结构写顶部用header标签,导航有nav标签等,同时也让浏览器的爬虫和机器更好的解析。

实体字符

CSS

Cascading Style Sheets 层叠样式表

特性

层叠性、继承性、优先级

块级元素

特色:块级独占一行;能够设置宽高;若是没设置宽度,那么其宽度等于父元素的宽度。

好比:div,p,ul,ol,dl,li,dd,h1-h6

转换:display:block;

行内元素

特色:都在一行显示,不能设置宽度和高度。

好比:a b em font i img input br label span small select textarea

转换:display:inline

行内块元素

特色:都在一行上显示,能够设置宽度和高度。

好比:

转换:display:inline-block;

选择器优先级

!important>行内样式>id选择器(#)>类选择器(class)>标签选择器>通配符选择器

CSS3新特性有哪些

答:颜色--RGBA、文字阴影--text-shadow、边框圆角--border-radius、边框阴影--box-shadow、盒子模型--box-sizing、设置背景图片的尺寸--background-size、渐变--linear-gradient、过渡动画--transition、媒体查询多栏布局、伸缩布局、transform:translate···

清除浮动的几种方式

1)父级div设置height;

2)结尾处加空div标签clear:both;

3)父级div定义伪类:after和zoom;

4)父级div定义overflow:hidden或者auto;

link和@import有什么区别

@import引用的css会等到页面被加载完毕后再加载，link在页面加载时会同时被加载。

link是html标签，无兼容问题。link方式的样式权重高于@import

transition和animation的区别

他们都是随时间改变元素的属性值，主要区别是transition须要触发一个事件才能改变属性，而animation不需触发任何事件就会随时间改变属性值。

meta viewport标签相关

<!DOCTYPE html>  H5标准声明，使用 HTML5 doctype，不区分大小写
<head lang=”en”> 标准的 lang 属性写法
<meta charset=’utf-8′>    声明文档使用的字符编码,防乱码
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>   优先使用 IE 最新版本和 Chrome
<meta name=”description” content=”不超过150个字符”/>       页面描述
<meta name=”keywords” content=””/>      页面关键词
<meta name=”author” content=”name, email@gmail.com”/>    网页做者
<meta name=”robots” content=”index,follow”/>      搜索引擎抓取
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport
<meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin
<meta name=”apple-mobile-web-app-capable” content=”yes”/>  添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/>  设置苹果工具栏颜色
<meta name=”renderer” content=”webkit”>  启用360浏览器的极速模式(webkit)
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     避免IE使用兼容模式
<meta http-equiv=”Cache-Control” content=”no-siteapp” />    不让百度转码
<meta name=”HandheldFriendly” content=”true”>     针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，好比黑莓
<meta name=”MobileOptimized” content=”320″>   微软的老式浏览器
<meta name=”screen-orientation” content=”portrait”>   uc强制竖屏
<meta name=”x5-orientation” content=”portrait”>    QQ强制竖屏
<meta name=”full-screen” content=”yes”>              UC强制全屏
<meta name=”x5-fullscreen” content=”true”>       QQ强制全屏
<meta name=”browsermode” content=”application”>   UC应用模式
<meta name=”x5-page-mode” content=”app”>    QQ应用模式
<meta name=”msapplication-tap-highlight” content=”no”>    windows phone 点击无高光
设置页面不缓存
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>

复制代码

< meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

详细的描述一下position

1)position:absolute--绝对定位的元素,相对于其父元素进行定位。

2)position:relative--生成相对定位的元素,相对于其正常位置进行定位。

3)position:fixed--固定定位,相对于浏览器窗口进行定位。

4)position:static--默认值,没有定位,元素在正常的文档流

JavaScript

JavaScript的组成

1)ECMAScript:是JS的核心,描述了语言的基本语法和数据类型,是JS的语法规范

2)BOM:浏览器对象模型,经过BOM能够操做浏览器窗口,如:弹出框

3)DOM:文档对象模型,一套操做页面元素的API

JavaScript的输入、输出方式

输出:

1)alert() --弹出一个提示框(提示/警告文字)

2)document.write() --会将输入的内容放置到body标签内部,做为html内容

3)console.log() --代码后台

输入:

prompt('提示文字', 默认值);

对象的建立方式

1)对象字面量

var o = {
  name: 'jay',
  age: 18,
  sex: true,
  sayHi: function () {
    console.log(this.name);
  }
};
复制代码

2)new Object()建立对象

var person = new Object();
person.name = 'Jolin';
person.age = 16;
person.job = 'actor';
person.sayHi = function() {
  console.log('Hello,everyBody');
}
复制代码

3)工厂函数建立对象

function createPerson(name, age, job) {
  var person = new Object();
  person.name = name;
  person.age = age;
  person.job = job;
  person.sayHi = function(){
    console.log('Hello,everybody');
  }
  return person;
}
var p1 = createPerson('Jay', 18, 'actor');
复制代码

4)自定义构造函数

function Person(name, age, job){
  this.name = name;		//this是关键字，这里表明“本身”，“当前对象”
  this.age = age;
  this.job = job;
  this.sayHi = function(){
  	console.log('Hello,everybody');
  }
}
var p1 = new Person('Jay', 18, 'actor');
复制代码

new关键字运行机制

1)new会在内存中建立一个新的空对象

2)new会让this指向这个新的对象

3)执行构造函数目的是给这个新对象加属性和方法

4)new会返回这个新对象

this的使用场景

1)普通函数调用时,指向全局window

2)构造函数调用时,指向实例对象

3)对象方法调用时,指向该方法的对象

4)事件绑定时,指向绑定事件的对象

5)箭头函数中this指向外部函数做用域的this

==和===有什么区别

=是赋值

==（相等）返回一个布尔值，相等返回true，不相等返回false，容许不一样数据类型的转换。

===（全等）只要数据类型不同，就会返回false。

JavaScript内置对象之Math(求绝对值,取整,随机数)

Math.random() 生成一个0-1之间的随机小数

Math.floor()/Math.ceil() 向下取整/向上取整

Math.round() 取整,四舍五入

Math.abs() 绝对值

Math.max()/Math.min() 求最大值/最小值

Math.sin()/Math.cos() 正弦/余弦

Math.pow/Math.sqrt() 求指数次幂/求平方根

JavaScript内置对象之Date(处理时间和日期,基于1970年1月1日)

getTime() 返回毫秒数和valueOf()结果同样

getMilliseconds()

getSeconds() 返回0-59

getMinutes() 返回0-59

getHours() 返回0-23

getDay() 返回星期几 0表明是周日 6表明是周六

getDate() 返回当前月的第几天

getMonth() 返回月份,从0开始

getFullYear() 返回4位的年份如 2016

JavaScript内置对象之Array

push()/pop() 加入数组的末端/删除数组的最后一项

unshift()/shift() 在数组最前面插入项/删除数组中前面项

reverse() 翻转数组

sort() 根据字符,从小到大排序

slice() 从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始

splice() 删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)

indexOf() 索引位置

forEach() 遍历数组不返回值,返回参数

join() 把数组中的全部元素放入一个字符串

JavaScript内置对象之String

concat() 拼接字符串,等效于'+','+'更经常使用

slice(start,end) 从start位置开始,截取到end位置,end取不到

substring() 方法同slice

substr(start,length) 从start位置开始,截取到length个字符,若是没有length参数,则截取到最后

toUpperCase() 转换为大写

toLowerCase() 转换为小写

search() 查找,返回找到的位置

replace() 替换,注意:一次只能替换一个

split() 将字符串以指定的字符分割为数组

JavaScript中动态操做DOM的方法

createElement 建立一个元素节点

creatTextNode 建立一个文本节点

appendChild 向元素的末尾追加一个节点

inserBefore(a,b) 意思是a节点会插入b节点的前面

removeChild 删除一个子节点

cloneChild 复制节点,接收布尔值参数,true表示深复制(复制节点及其全部子节点),false表示浅复制(复制节点自己,不复制子节点)

replaceChild 替换节点

document.getElementsByTagName() 经过标签名称查找节点

document.getElementsByName() 经过元素的Name属性的值查找节点

document.getElementById() 经过元素ID查找节点

事件的三个阶段,如何阻止事件冒泡

答:目标、捕获、冒泡

event.stopPropagation

call,apply,bind有什么区别

三者都是用来改变函数的this对象指向，调用其方法改变函数执行的上下文，从而改变this指向。

call()和apply()的第一个参数相同,是指定的对象,这个对象是该函数的执行上下文

call()能够接受多个参数，在第一个参数以后的后续全部参数就是传入该函数的值

apply()只有两个参数,第一个是对象,第二个是数组

bind()不会当即执行该函数,他的参数和call()相同

闭包函数

1.什么是闭包?

当函数执行时,首先会造成一个私有做用域,这个私有做用域保护私有变量不收外界的干扰,咱们把这个体制称为闭包。闭包是指有权访问另外一个函数做用域中变量的函数。

2.闭包优势:

1)保护函数内的变量安全,增强了封装性;

2)在内存中维持一个变量,方便调用上下文的局部变量;

3.闭包缺点:

1)内存消耗;

2)滥用闭包函数会形成内存泄露,不能被垃圾回收机制所回收。

递归函数

1.什么是递归函数

答:递归函数即自调用函数,在函数体内直接或者调用本身自己函数

2.递归函数的优势

答:代码更加简洁清晰,可读性更好

3.递归函数的缺点

答:大量使用递归函数,会消耗空间,形成系统卡顿,非必要时建议不要使用递归函数。

面向对象和面向过程

答:面向对象:开发过程当中分析大致步骤,找到辅助的开发工具

面向过程:开发过程当中专一于每一个功能的具体实现方式

面向对象的三个特征

封装性:多个相同操做的功能封装到一个对象中

继承性:让功能复用

多态性:加强功能使用性灵活性

正则表达式

答:对字符串进行操做的一组工具,做用:匹配,替换,提取功能

/^$/ 这个是个通用的格式。

^ 匹配输入字符串的开始位置；$匹配输入字符串的结束位置

*匹配前面的子表达式零次或屡次；

+匹配前面的子表达式一次或屡次；

?匹配前面的子表达式零次或一次；

\d 匹配一个数字字符，等价于[0-9]

校验11位手机号案例:

function checkPhone(){ 
    var phone = document.getElementById('phone').value;
    if(!(/^1[35678]\d{9}$/.test(phone))){ 
        alert("手机号码有误，请从新填写");  
        return false; 
    } 
}
复制代码

校验邮箱案例:

function isEmail(str){
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
return reg.test(str);
}
复制代码

原型三者关系

实例对象：实例对象都具备__proto__,就是原型对象

原型对象：原型对象都具备constructor属性，就是构造函数

构造函数：构造函数都具备prototype属性，就是原型对象

如何在JS中清空数组

如：var list = [1,2,3,4]
复制代码

方法一：

list= []; 
//设置一个新的空数组，若是从另外一个变量引用到这个数组，那么原始的引用数组将保持不变。
复制代码

方法二：

list.length=0;
//这种方式会更新指向原始数组的全部引用变量。
复制代码

方法三：

list.splice（0,list.length）;
//也将更新对原始数组的全部引用。
复制代码

方法四：

while(list.length){
    list.pop();
};
//不建议常用该方式。
复制代码

JS中的转义字符是什么

可以在不破坏应用程序的状况下编写特殊字符，转义字符（\）用于处理特殊字符，如单引号、双引号、撇号和&号，在字符前放置。

如：console.log(" I am a \"beautiful\"girl")
复制代码