web前端基础面试题汇总
1.HTML，CSS，javaScript在网页开发中的定位？
HTML：超文本标记语言，定义网页的结构
CSS：层叠样式表，用来美化页面
JavaScript：主要用来验证表单，做动态交互(其中AJAX)
1.link和@import的区别
1）. link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2）. link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3）. link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4）. link支持使用Javascript控制DOM去改变样式；而@import不支持
1.html5新特性
新特性
html5增加了一些像画板、声音、视频、web存储方面等高级功能，但是html5有一个不好的地方，那就是html5太强调语义了，导致开发者都不知道要选择哪个标签。在页面布局时，无论头部、主体、导航等模块都使用div来表示，但是html5的规范，需要使用不同不同的标签。(header,footer)
如何区分
DOCTYPE声明\新增的结构元素\功能元素
2.HTML语义化的理解
⒈用正确的标签做正确的事情
⒉HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；
⒊及时在没有样式CSS情况下也以一种文档格式显示，并且是任意阅读的；
⒋搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；
⒌阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
2.CSS和CSS3相关知识
CSS 选择符：
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a: hover, li:nth-child）
可以继承的属性：
可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height ;
优先级：
同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
!important > id > class > tag
important 比 内联优先级高,但内联比 id 要高
CSS3有哪些新特性
CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
增加了更多的CSS选择器 多背景 rgba
在CSS3中唯一引入的伪元素是::selection.
媒体查询，多栏布局
3.CSS的元素分类
块级元素：div,p,h1,form,ul,li;
行内元素 : span,a,label,input,img,strong,em;
4.盒子模型
（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE的content部分把 border 和 padding计算了进去;
4.盒模型两种模式
- 标准模式: box-sizing: content-box; 宽高不包括内边距和边框
- 怪异模式: box-sizing: border-box
4.BFC
BFC 又称 块状格式化上下文
大概意思是：BFC 是 CSS 渲染页面环节中的一部分。在块级盒子布局的范围中出现，并且它也影响着浮动元素和其他元素。
4.src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部
4.img的alt和title
alt：描述图片含义。地址写错或网络状况不好，无法查看图像时，显示该说明。可用于屏幕阅读软件和搜索引擎。
title：光标悬浮在图像上时以提示的方式显示该特性内容。
4.同步和异步的区别
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
4.浮动及清除浮动的方法
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用after伪对象清除浮动
该方法只适用于非IE浏览器。该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；
3.设置overflow为hidden或者auto
4.浮动外部元素
5.CSS隐藏元素
(1) Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
(2) Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
(3) Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的 内容。这种方式产生的效果就像元素完全不存在;
(4) Position:不会影响布局，能让元素保持可以操作;
display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素
5.CSS居中
内联元素居中方案
水平居中设置：
1.行内元素· 设置 text-align:center；
2.Flex布局· 设置display:flex;justify-content:center;
垂直居中设置：
1.父元素高度确定的单行文本（内联元素）· 设置 height = line-height；
2.父元素高度确定的多行文本（内联元素）
· a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle；
· b:先设置 display:table-cell 再设置 vertical-align:middle；
块级元素居中方案
·水平居中设置：
1.定宽块状元素· · 设置 左右 margin 值为 auto；
2.不定宽块状元素
· a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto；
· b:给该元素设置 display:inine 方法(转换为内联元素)；
· c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%；
垂直居中设置：
· 使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;
· 利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;
· 利用display:table-cell属性使内容垂直居中;
· 使用css3的新属性transform:translate(x,y)属性;
· 使用:before元素;
6.Js定时器
setTimeout 只执行一次
setInterval 会一直重复执行
7.本地存储方式，区别？
Cookie
localStorage
sessionStorage
区别：
存储大小限制不同，cookie数据大小不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只能保存很小的数据。sessionStorage和localStorage不会自动把数据发给服务器，只在本地保存，虽然也有大小限制，但是要比cookie大得多，可以达到5M或者更大。
数据有效期不同，sessionStorage仅在当前浏览器窗口关闭前有效，不能持久保存；localStorage：始终有效，浏览器窗口关闭也一直保存；cookie：只在cookie设置的过期时间之前保存，即使浏览器窗口关闭。
作用域不同，sessionStorage在不同浏览器窗口的数据不能共享，即使是同一个页面；localStorage在所有的同源窗口中都是共享的；cookie也是在同源窗口中共享的
8.ajax? ajax的步骤
ajax 能够刷新局部网页数据而不是重新加载整个网页
第一步，创建xmlhttprequest对象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest对象用来和服务器交换数据。
第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。
第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。
8.This对象的理解
this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。
但是有一个总原则，那就是this指的是调用函数的那个对象。
this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象
9.js的数据类型
五种基本类型: Undefined、Null、Boolean、Number和String
引用类型: Object、Array和Function
9.null和undefined的区别
undefined表示变量已经声明，但是没有赋值；
null表示一个对象，但是这个对象没有实例化||没有意义||纯粹的空。
9.数组方法pop() push() unshift() shift()的区别
1）.shift:从集合中把第一个元素删除，并返回这个元素的值。
2）unshift: 在集合开头添加一个或更多元素，并返回新的长度
3）.push:在集合中添加元素，并返回新的长度
4）.pop:从集合中把最后一个元素删除，并返回这个元素的值。
10.px和em的区别
px表示像素 ，是绝对单位，不会因为其他元素的尺寸变化而变化；
em表示相对于父元素的字体大小。em是相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。
11.优雅降级和渐进增强
渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
其实渐进增强和优雅降级并非什么新概念，只是旧的概念换了一个新的说法。在传统软件开发中，
经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容，而优雅降级相当于向下兼容。
12.JS内存泄露
（1）意外的全局变量引起的内存泄露
（2）闭包引起的内存泄露
（3）没有清理的DOM元素引用。
（4）被遗忘的定时器或者回调
（5）子元素存在引起的内存泄露。
13.什么是闭包
闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，
因此可以把闭包简单理解成“定义在一个函数内部的函数”。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
使用闭包的注意点：
· 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
14.ajax请求时get和post的区别
get：从服务器上获取数据，传送数据量小，安全性低，请求会被缓存，缓存是针对URL进行缓存的，get请求参数直接加在URL地址后面，一种参数组合就会产生一种URL的缓存，重复的请求结果是相同的；
post：向服务器发送数据；传送数据量大，请求不会被缓存，参数封装在二进制的数据体中，服务器也不会记录参数，相对安全，所以涉及用户隐私的数据都要用post传送
14.cookie 和session 的区别
1、cookie数据存放在客户端浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能,考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中，比如购物车
15.跨越问题
1.什么是跨域？
由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。
2.什么是同源策略？
所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击
3.如何解决跨域？
（1）通过jsonp跨域
原理：虽然同源策略限制了ajax的跨域请求，但是并没有限制标签上的src 和href访问不同域下的资源，jsonp就 是利用了这一点。
定义和用法：通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。
特点：通过情况下，通过动态创建script来读取他域的动态资源，获取的数据一般为json格式
16.深拷贝与浅拷贝的区别
对于仅仅是复制了引用（地址），换句话说，复制了之后，原来的变量和新的变量指向同一个东西，彼此之间的操作会互相影响，为 浅拷贝。
而如果是在堆中重新分配内存，拥有不同的地址，但是值是一样的，复制后的对象与原来的对象是完全隔离，互不影响，为 深拷贝。
深浅拷贝 的主要区别就是：复制的是引用(地址)还是复制的是实例
17.事件委派（事件委托）的原理
事件委派的原理是事件冒泡机制，通过给父标签绑定事件，然后利用事件冒泡的现象使得点击子元素的时候，可以触发事件达到给子元素绑定事件的效果
18.ES6的新增方法
（1）新增声明命令let和const
在es6中通常用 `let` 和 `const` 来声明，`let` 表示变量、`const` 表示常量。
（2）模板字符串
用一对反引号(`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，也可以在字符串中嵌入变量，js表达式或函数，变量、js表达式或函数需要写在${ }中。
19.VUE双向绑定原理
双向绑定，采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调
具体步骤：
1. 需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter
2. compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
3. Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，待属性变动 dep.notice() 通知时，调用自身的 update() 方法，并触发Compile 中绑定的回调。
20.vue计算属性与监听属性的区别
computed 计算属性在数据未发生变化时，优先读取缓存，只有在相关的数据发生变化时才会改变要计算的属性。
watch 监听属性会实时监听数据变化，数据每次有变化都去执行函数
21.vue如何在父子组件之间传输数据
父组件可以通过 **props** 属性来给子组件传递数据。
子组件要把数据传递给父组件，就需要使用自定义事件通过 this.**$emit()** 来调用组件上面的自定义事件，并向事件方法传递数据，这样就实现了通过事件把数据传递给vue实例中的方法
子组件可以用 **`this.$parent`** 访问它的父组件。根实例的后代可以用 **`this.$root`** 访问它。父组件有一个数组 `this.$children`，包含它所有的子元素。
尽管可以访问父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 props 传递数据
23.vue框架的优缺点
优点：1. 简单：官方文档很清晰，比 Angular 简单易学。
2. 快速：异步批处理方式更新 DOM。
3. 组合：用解耦的、可复用的组件组合你的应用程序。
缺点：1. 不是很成熟：Vue.js是一个新的项目，没有angular那么成熟。
2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
3. 不支持IE8
八.web前端进阶版
1.网站性能优化
内容方面：
1.减少 HTTP 请求
2.减少 DOM 元素数量
3.使得 Ajax 可缓存
面向图片(Image)：
1.优化图片
2 不要在 HTML 中使用缩放图片
3 使用恰当的图片格式
4 使用 CSS Sprites 技巧对图片优化
2.从输入url到显示页面，都经历了什么
1、首先，在浏览器地址栏中输入url。
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器。
7、浏览器收到HTTP响应。
8、读取页面内容，浏览器渲染，解析html源码。
9、生成Dom树、解析css样式、js交互。
10、客户端和服务器交互。
11、ajax查询。
3.前端工程化
前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的*为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间*，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程
4.怎样添加、移除、移动、复制、创建和查找节点
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
5.浏览器是如何渲染页面
渲染的流程如下：
1.解析HTML文件，创建DOM树
自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
2.解析CSS
优先级：浏览器默认设置<用户设置<外部样式<内联样式 3.将CSS与DOM合并，构建渲染树（Render Tree） 4.布局和绘制，重绘（repaint）和重排（reflow） **共同点：**脱离文档流，文档流中没有它的空间，未设置偏移时在原位置。默认宽度为内容宽度。 不同点： absolute：绝对定位。参照物为第一个定位元素/根元素html。元素随页面的滚动而滚动。 fixed：固定定位。参照物是视窗。不随页面的滚动而滚动。 relative（相对定位）：定位原点是元素本身所在位置 变量声明语句会被“提前”至脚本或函数的顶部，但初始化的操作还在原来var语句的位置执行，在声明语句之前变量的值是undefined。 ===判断左右两边对象或值是否类型相同且值相等。 ==判断操作符两边对象或值是否相等，类型不同时，使用Number()转换 1.链入外部样式表,就是把样式表保存为一个样式表文件,然后在页面中用 2.内部样式表,就是把样式表放到页面的区里. 3.导入外部样式表,用@import 4.内嵌样式,就是在标签内写入style="" 区别： 1）. link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。 2）. link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。 3）. link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。 4）. link支持使用Javascript控制DOM去改变样式；而@import不支持 如果绑定了事件 就可以触发事件 比如click事件 mouseover事件 事件还可以传播 让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！ Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 状态: pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态 none：此元素不显示。 采用的是均分原理,把矩形分为4等份,这4等份其实都是边框 主要分成两部分：渲染引擎和JS引擎。 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。 JS引擎：解析和执行javascript来实现网页的动态效果。 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎 Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML] Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）] 语义化的优点有: 其基础语言不同 语法严格程度不同 可混合应用不同 大小写敏感度不同 公布时间不同 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 怎么创建BFC： BFC 特性:6.position的absolute和fixed的共同点与不同点
7.var变量声明
8.和=的区别
9.css引入的方式
<link rel="stylesheet" type="text/css" href="*.css">
<style type="text/css">
div {
height: 600px;}
style>
<style type="text/css">
@import "*.css"
style>
<div style="background:#cccccc">div>设置div背景色为灰色
10.事件绑定和普通事件有什么区别
但是如果不绑定事件 就不能执行任何操作 可以说就不具有交互性11.事件委托
12.介绍Promise以及Promise的几种状态
13.Doctype作用？严格模式与混杂模式如何区分
声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
14.display有哪些值
block：将元素显示为块级元素，前后会带换行符。
inline:默认值，元素会被显示为内联元素，前后没有换行符。
inline-block:行内块级元素15.用纯CSS创建一个三角形的原理
核心就是给块级元素设置宽高为0,设置边框的宽度,不需要显示的边框使用透明色16.给元素添加背景色的方法
background:red
background:#FF0000
background:rgb(255,0,0)
background:rgba(255,0,0,0.5)
background:hsl(167,88%,90)
background:hsla(167,88%,90,0.9)17.对浏览器内核的理解
18.常见的浏览器内核
19.对语义化的理解
语义化标签主要有
title,header,nav,main,article,h1~h6,ul,ol,address,canvas,dialog,aside,section,figure,details,mark20.HTML与XHTML有什么区别
1、XHTML是基于du可扩展标记语言（XML）。
2、HTML是基于标准通用标记语言（SGML）。
1、XHTML语法比较严格，存在DTD定义规则。
2、HTML语法要求比较松散，这样对网页编写者来说，比较方便。
1、XHTML可以混合各种XML应用，比如MathML、SVG。
2、HTML不能混合其它XML应用。
1、XHTML对大小写敏感，标准的XHTML标签应该使用小写。
2、HTML对大小写不敏感。
1、XHTML是2000年W3C公布发行的。
2、HTML4.01是1999年W3C推荐标准21.BFC原理及作用