Vue面试题
1.什么是 vue 生命周期
Vue 实例从创建到销毁的过程，就是生命周期。
也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后
2.vue生命周期的作用是什么
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
3.第一次页面加载会触发哪几个钩子
第一次页面加载时会触发
beforeCreate,
created
beforeMount
mounted
4.简述每个周期具体适合哪些场景
生命周期钩子的一些使用方法：
beforecreate : 可以在这加个loading事件，
在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted : 挂载元素，
获取到DOM节点 updated : 如果对数据统一处理，在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom
5.created和mounted的区别
mounted一般是在html渲染完成后的操作，此时el，data都已经加载完成，一般对dom的操作都写在mounted中，例如获取innerHTML，初始化echarts的时候。
created一般是在html渲染前的操作，此时el还是undefined，data已经存在。这里不能对dom进行操作
6.vue获取数据在哪个周期函数
created
vue路由面试题
1.mvvm 框架是什么？
MVVM是Model-View-ViewModel的简写
总结：就是vm层（视图模型层）通过接口从后台m层（model层）请求数据，vm层继而和v（view层）实现数据的双向绑定。
MVVM是MVC的增强版，实质上和MVC没有本质区别，只是代码的位置变动而已.
优点：
1.Controller清晰简洁： ViewModel分离了大部分Controller代码，更加清晰和容易维护。
2.方便测试：开发中大部分Bug来至于逻辑处理，由于ViewModel分离了许多逻辑，可以对ViewModel构造单元测试。
3.开发解耦
缺点：
1.看起来代码会比MVC多点
2.需要对每个Controller实现绑定，
2.vue-router 是什么它有哪些组件
路由，其实就是指向的意思
路由中有三个基本的概念 route, routes, router。
1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。
2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]
3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。
4，客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.
3.active-class 是哪个组件的属性？
一、首先，**active-class是什么?，
active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；
二、在vue-router中要**使用active-class有两种方法：
1、直接在路由js文件中配置linkActiveClass
export default new Router({
linkActiveClass: 'active',
})
2、在router-link中写入active-class
<router-link to="/home" class="menu-home" active-class="active">首页</router-link>
4.怎么定义 vue-router 的动态路由 怎么获取传过来的值
1.如果是模块化机制，需要调用 Vue.use(VueRouter)
2.定义路由组件，如：
const Foo = {
template: '<div>foo</div>'
};
3.定义路由（数组）
const routes = [
{
path: '/foo',
component: Foo
}
];
4.创建 router 实例
const router = new VueRouter({
routes
});
5.创建和挂载根实例
const app = new Vue({
routes
}).mount('#app');
5.vue-router 有哪几种导航钩子
1） 全局钩子函数：定义在全局的路由对象中，主要有：
beforeEach：在路由切换开始时调用
afterEach：在每次路由切换成功进入激活阶段时被调用
2）单独路由独享的钩子：可以再路由配置上直接定义beforeEnter 钩子
3）组件的钩子函数：定义在组件的router选项中
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
6.
router 的区别
1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等我们可以从vue devtools中看到每个路由对象的不同
7.vue-router响应路由参数的变化
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
8.vue-router传参
1.get方法
传递值:
<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>
接收值:
this.$route.query.name
2.post方法
传递值:
<router-link :to="{path:'/test',push: {name: id}}">跳转</router-link>
接收值:
this.$route.params.name （在页面刷新的时候就会消失）
3.路由方法
传递值:
//?问号的意思是该参数不是必传项
//多个参数用/:id连接
//path: '/Driver/CarManager/CarSetting/:car_id/:page_type',
{
path: 'test/:name?',
name: 'test',
component: 'test.vue',
props: true,
}
接收值:
props:{name:{required:false,default:''}} （页面刷新不消失，可以在路由配置中设置参数）
9.vue-router的两种模式
众所周知，vue-router有两种模式，hash模式和history模式，这里来谈谈两者的区别。
1.hash模式:
hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:
window.onhashchange = function(event){
console.log(event.oldURL, event.newURL);
let hash = location.hash.slice(1);
document.body.style.color = hash;
}
2.history路由
随着history api的到来，前端路由开始进化了,前面的hashchange，你只能改变#后面的url片段，而history api则给了前端完全的自由
history api可以分为两大部分，切换和修改
切换历史状态:
history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进
修改历史状态
history.pushState({color:'red'}, 'red', 'red'})
window.onpopstate = function(event){
console.log(event.state)
if(event.state && event.state.color === 'red'){
document.body.style.color = 'red';
}
}
history.back();
history.forward();
10.vue-router实现路由懒加载（ 动态加载路由 ）
1.vue异步组件===异步加载
vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .
但是,这种情况下一个组件生成一个js文件
2.es提案的import()===路由懒加载
3.webpack的require,ensure()
vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
vue常见面试题
1.vue优点
1.轻量级框架
只关注视图层,是一个构建数据的视图集合,大小只有几十kb
2.简单易学
国人开发,中文文档,不存在语言障碍,易于理解和学习
3.双向数据绑定
保留了angular的特点,在数据操作方面更为简单
4.组件化
保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势
5.视图,数据,结构分离
是数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作
6.虚拟DOM
dom操作时非常耗费性能的,不再使用原生的dom操作节点,极大解放dom操作,但具体操作的还是dom不过是换了另一种方式
7.运行速度更快
像比较与react而言,同样都是操作虚拟dom,就性能而言,vue存在很大的优势
2.vue父组件向子组件传递数据？
父传子主要通过在父组件v-model绑定数据，在子组件进行用props进行数据的接收
<div id="container">
<Child :msg="data"></Child>
</div>
export default {
data() {
return {};
},
props:["msg"]
};
3.子组件向父组件传递事件
this.$emit('父组件绑定事件名')
4.v-show和v-if指令的共同点和不同点
v-show本质就是通过设置css中的display设置为none;控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素;
v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，如果要频繁切换某节点时，故v-show性能更好一点。
5.如何让CSS只在当前组件中起作用
<style scoped>
6.<keep-alive></keep-alive>的作用是什么
7.如何获取dom
8.说出几种vue当中的指令和它的用法？
9. vue-loader是什么？使用它的用途有哪些？
10.为什么使用key
11.axios及安装
12.axios解决跨域
axios.get( {
url: "你的api地址",
headers: {
"Content-Type": "application/octet-stream",
"Access-Control-Allow-Origin": "*",
}
} )
13.v-modal的使用
14.scss的安装以及使用
15. 请说出vue.cli项目中src目录每个文件夹和文件的用法？
16.分别简述computed和watch的使用场景
17.v-on可以监听多个方法吗
18.$nextTick的使用
19.vue组件中data为什么必须是一个函数
20.vue事件对象的使用
21 组件间的通信
22.渐进式框架的理解
23.Vue中双向数据绑定是如何实现的
24.单页面应用和多页面应用区别及优缺点
25.vue中过滤器有什么作用及详解
26.v-if和v-for的优先级
v-for优先级比v-if高
27.assets和static的区别
28.列举常用的指令
29.vue常用的修饰符
30.数组更新检测
31.Vue.set视图更新
32.自定义指令详解
33.vue的两个核心点
34.vue和jQuery的区别
35 引进组件的步骤
36.Vue-cli打包命令是什么？打包后悔导致路径问题，应该在哪里修改
37.三大框架的对比
38. 跨组件双向数据绑定
39.delete和Vue.delete删除数组的区别
40.SPA首屏加载慢如何解决
41.Vue-router跳转和location.href有什么区别
42. vue slot
43.你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？
44.vue遇到的坑，如何解决的？
45.Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？
46.Vue2中注册在router-link上事件无效解决方法
47.RouterLink在IE和Firefox中不起作用（路由不跳转）的问题
48.axios的特点有哪些
49.请说下封装 vue 组件的过程？
50.vue 各种组件通信方法（父子 子父 兄弟 爷孙 毫无关系的组件）
51.params和query的区别
52. vue mock数据
53 vue封装通用组件
54.vue初始化页面闪动问题
55.vue禁止弹窗后的屏幕滚动
56.vue更新数组时触发视图更新的方法
57.vue常用的UI组件库
58. vue如何引进本地背景图片
59. vue如何引进sass
60.vue修改打包后静态资源路径的修改
vuex常见面试题
1.vuex是什么？怎么使用？哪种功能场景使用它？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
使用场景：
1、购物车功能；
2、下单页面有选择优惠券按钮，点击进入优惠券页面，选择后返回到下单页，数据会绑定回来，显示已选择的优惠券；
3、登录状态等等
2.vuex有哪几种属性
3.不使用Vuex会带来什么问题
4.Vue.js中ajax请求代码应该写在组件的methods中还是#####vuex的actions中？
5.vuex一个例子方法
6.Vuex中如何异步修改状态
7.Vuex中actions和mutations的区别
ES6面试题
1.let const var比较
2.反引号（`）标识
3.函数默认参数
4.箭头函数
5.属性简写
6.方法简写
7.Object.keys()方法，获取对象的所有属性名或方法名
8.Object.assign ()原对象的属性和方法都合并到了目标对象
9.for...of 循环
10.import和export
11.Promise对象
12.解构赋值
13.set数据结构（可用于快速去重）
14.Spread Operator 展开运算符(...)
15.字符串新增方法
ES6数组面试题
1.forEach()
2.map()
3.filter()
4.reduce()
5.some()
6.every()
7.all()方法
react生命周期面试题
1.react 生命周期函数
2.react生命周期中，最适合与服务端进行数据交互的是哪个函数
3.运行阶段生命周期调用顺序
4.shouldComponentUpdate 是做什么的，（react 性能优化是哪个周期函数？）
5.指出(组件)生命周期方法的不同
react 基础面试题
1.React 中 keys 的作用是什么？
2.React 中 refs 的作用是什么？
3.React 中有三种构建组件的方式
4.调用 setState 之后发生了什么？
5.react diff 原理（常考，大厂必考）
6.为什么建议传递给 setState 的参数是一个 callback 而不是一个对象
7.除了在构造函数中绑定 this，还有其它方式吗
8.setState第二个参数的作用
9.(在构造函数中)调用 super(props) 的目的是什么
10.简述 flux 思想
11.在 React 当中 Element 和 Component 有何区别？
12.描述事件在 React 中的处理方式。
13.createElement 和 cloneElement 有什么区别？
14.如何告诉 React 它应该编译生产环境版本？
15.Controlled Component 与 Uncontrolled Component 之间的区别是什么？
react组件面试题
1.展示组件(Presentational component)和容器组件(Container component)之间有何不同
2.类组件(Class component)和函数式组件(Functional component)之间有何不同
3.(组件的)状态(state)和属性(props)之间有何不同
4.何为受控组件(controlled component)
5.何为高阶组件(higher order component)
6.应该在 React 组件的何处发起 Ajax 请求
7.react中组件传值
8.什么时候在功能组件( Class Component )上使用类组件( Functional Component )？
9.受控组件( controlled component )与不受控制的组件( uncontrolled component )有什么区别？
10.react 组件的划分业务组件技术组件？
react性能比较面试题
1.vue和react的区别
2.react性能优化的方案
3.React 项目用过什么脚手架
4.介绍一下webpack webpack
5.如果你创建了类似于下面的 Twitter 元素，那么它相关的类定义是啥样子的？
6.为什么我们需要使用 React 提供的 Children API 而不是 JavaScript 的 map？
js面试题
1.简述同步和异步的区别
2.怎么添加、移除、复制、创建、和查找节点
3.实现一个函数clone 可以对Javascript中的五种主要数据类型（Number、string、Object、Array、Boolean）进行复制
4.如何消除一个数组里面重复的元素
5.写一个返回闭包的函数
6.使用递归完成1到100的累加
7.Javascript有哪几种数据类型
8.如何判断数据类型
9.console.log(1+'2')和console.log(1-'2')的打印结果
10.Js的事件委托是什么，原理是什么
11.如何改变函数内部的this指针的指向
12.列举几种解决跨域问题的方式，且说明原理
13.谈谈垃圾回收机制的方式及内存管理
14.写一个function ，清除字符串前后的空格
15.js实现继承的方法有哪些
16.判断一个变量是否是数组，有哪些办法
17.let ，const ，var 有什么区别
18.箭头函数与普通函数有什么区别
19.随机取1-10之间的整数
20.new操作符具体干了什么
21.Ajax原理
22.模块化开发怎么做
23.异步加载Js的方式有哪些
24.xml和 json的区别
25.webpack如何实现打包的
26.常见web安全及防护原理
27.用过哪些设计模式
28.为什么要同源限制
29.offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
30.javascript有哪些方法定义对象
31.说说你对promise的了解
32.谈谈你对AMD、CMD的理解
33.web开发中会话跟踪的方法有哪些
34.介绍js有哪些内置对象？
35.说几条写JavaScript的基本规范？
36.javascript创建对象的几种方式？
37.eval是做什么的？
38.null，undefined 的区别？
39.[“1”, “2”, “3”].map(parseInt) 答案是多少？
40.javascript 代码中的”use strict”;是什么意思 使用它区别是什么？
41.js延迟加载的方式有哪些？
42.defer和async
43.说说严格模式的限制
44.attribute和property的区别是什么？
45.ECMAScript6 怎么写class么，为什么会出现class这种东西
46.常见兼容性问题
47.函数防抖节流的原理
48.原始类型有哪几种？null是对象吗？
49.为什么console.log(0.2+0.1==0.3) //false
50.说一下JS中类型转换的规则？
51.深拷贝和浅拷贝的区别？如何实现
52.如何判断this？箭头函数的this是什么
53.== 和 ===的区别
54.什么是闭包
55.JavaScript原型，原型链 有什么特点？
56.typeof()和instanceof()的用法区别
57.什么是变量提升
58.all、apply以及bind函数内部实现是怎么样的
59.为什么会出现setTimeout倒计时误差？如何减少
60.谈谈你对JS执行上下文栈和作用域链的理解
61.new的原理是什么？通过new的方式创建对象和通过字面量创建有什么区别？
62.prototype 和 proto 区别是什么？
63.使用ES5实现一个继承？
64.取数组的最大值（ES5、ES6）
65.ES6新的特性有哪些？
66.promise 有几种状态, Promise 有什么优缺点
67.Promise构造函数是同步还是异步执行，then呢 promise如何实现then处理
68.Promise和setTimeout的区别
69.如何实现 Promise.all
70.如何实现 Promise.finally
71.如何判断img加载完成
72.如何阻止冒泡？
73.如何阻止默认事件？
74.ajax请求时，如何解释json数据
75.json和jsonp的区别
76.如何用原生js给一个按钮绑定两个onclick事件？
77.拖拽会用到哪些事件
78.document.write和innerHTML的区别
79.jQuery的事件委托方法bind 、live、delegate、on之间有什么区别？
80.浏览器是如何渲染页面的？
81.$(document).ready()方法和window.onload有什么区别？
82. jquery中%E6%8F%90%E4%BA%A4%E5%92%8C)
.post()提交有区别吗？
83.对前端路由的理解？前后端路由的区别？
84.手写一个类的继承
85.XMLHttpRequest：XMLHttpRequest.readyState;状态码的意思
86.正则表达式常见面试题
浏览器/html/css面试题
1.什么是盒模型
元素的外边距（margin）、边框（border）、内边距（padding）、内容（content）就构成了CSS盒模型。
IE盒模型的宽度或者高度计算方式为：width/height = content + padding + border，
W3C盒模型的宽度或者高度计算方式为：width/height = content。
2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？
（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常见的空元素：
<br> <hr> <img> <input> <link> <meta>
鲜为人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
区别：
1、行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。
块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。
2、块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
3、行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
3.简述src和href的区别
1.src 是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用。
2.href 是超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。在 link和a 等元素上使用。
使用区别：
src通常用作“拿取”（引入），href 用作 "连结前往"（引用）。
4.什么是css Hack
根据不同浏览器写不同的css
5.什么叫优雅降级和渐进增强
6.px和em的区别
px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位 ，不会因为其他元素的尺寸变化而变化。
em表示相对于父元素的字体大小。em是相对单位 ，没有一个固定的度量值，而是由其父元素元素尺寸来决定的相对值。
7.HTML5 新特效
8.Http的状态码有哪些
200 – 请求成功
301 – 资源(网页等)被永久转移到其它URL
404 – 请求的资源(网页等)不存在
500 – 内部服务器错误
分类分类描述
1**信息，服务器收到请求，需要请求者继续执行操作
2**成功，操作被成功接收并处理
3**重定向，需要进一步的操作以完成请求
4**客户端错误，请求包含语法错误或无法完成请求
5**服务器错误，服务器在处理请求的过程中发生了错误
9.一次完整的HTTP事务是怎么一个过程
1.域名解析
2. 发起TCP的3次握手
3.建立TCP连接后发起http请求
4.服务器响应http请求，浏览器得到html代码
5.浏览器解析html代码，并请求html代码中的资源（如js、css、图片等
6.浏览器对页面进行渲染呈现给用户
10.HTTPS是如何实现加密
11.浏览器是如何渲染页面的
1、解析文档构建DOM树:HTML/CSS/JS
2、构建渲染树
解析文档完成后，浏览器引擎会将 CSS Rule Tree 附着到DOM Tree 上，并根据DOM Tree 和 CSS Rule Tree构造 Rendering Tree（渲染树）。此处需要注意：
Render Tree和DOM Tree的区别在于，类似Head或display：node之类的东西不会放在渲染树中；
将CSS Rule Tree匹配到DOM Tree需要解析CSS的选择器，为了提高该过程的性能，DOM树应该尽量小，CSS Selector应该尽量使用id和class，避免过度层叠。
3、布局与绘制渲染树
解析position, overflow, z-index等等属性，计算每一个渲染树节点的位置和大小，此过程被称为reflow。最后调用操作系统的Native GUI API完成绘制（repain）。注意：
渲染树的节点，在Gecko中称为frame，而在webkit中称为renderer；
reflow和repaint是两个不同的概念，其区别会在后文进行探讨。
12.浏览器的内核有哪些？分别有什么代表的浏览器
firefox：gecko内核
Safari：webkit内核
opera：以前是用presto内核，现在已经改用google chrome的blink内核
chrome：blink（基于webkit，是google与opera software共同开发的
13.页面导入时，使用link和@import有什么区别
用法:
import的写法
<style type=”text/css”>
@import url（“a.css”）；
</style>
link的写法
<link rel="stylesheet" href="index.csss">
区别:
1.来源：link属于XHTML标签，import是CSS提供的方式。link方式除了CSS，还可以定义RSS，定义rel连接属性等，而import只能加载CSS。
2.顺序：link是页面加载时同时执行的，而import是在页面加载完之后，才会执行的（所以容易导致样式闪烁，即开始页面没有样式，突然会闪烁一下，然后就有了样式，就我个人比较喜欢link引用的方式）
3.js控制的差别：当页面需要使用javascript控制dom改变样式的时候，只能使用link标签，因为import不是js操作dom可以控制的。也不支持js操作dom来控制。
14.如何优化图像，图像格式的区别
优化：
1、不用图片，尽量用css3特效代替。
2、 使用矢量图SVG替代位图。
3、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。
4、按照HTTP协议设置合理的缓存。
5、使用字体图标webfont、CSS Sprites等
6、用CSS或JavaScript实现预加载。
7、WebP图片格式能给前端带来的优化。
区别：
1、gif:是是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。
2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo,各种小图标icons等。
-3、png:PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。
15.列举你了解Html5. Css3 新特性
16.可以通过哪些方法优化css3 animation渲染
17.列举几个前端性能方面的优化
18.如何实现同一个浏览器多个标签页之间的通信
19.浏览器的存储技术有哪些
20.css定位方式
21.尽可能多的写出浏览器兼容性问题
22.垂直上下居中的方法
23.响应式布局原理
25.清除浮动的方法
26.http协议和tcp协议
27.刷新页面，js请求一般会有哪些地方有缓存处理
28.如何对网站的文件和资源进行优化
29.你对网页标准和W3C重要性的理解
30.Http和https的区别
31.data-属性的作用
32.如何让Chrome浏览器显示小于12px的文字
33.哪些操作会引起页面回流（Reflow）
34.CSS预处理器的比较less sass
35.如何实现页面每次打开时清除本页缓存
36.什么是Virtual DOM,为何要用Virtual DOM
37.伪元素和伪类的区别
38.http的几种请求方法和区别
39.前端需要注意哪些SEO
40.的title和alt有什么区别
41.从浏览器地址栏输入url到显示页面的步骤
42.如何进行网站性能优化
43.语义化的理解
1、去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
2、有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4、便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
44.HTML5的离线储存怎么使用，工作原理能不能解释一下？
原理：
HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
怎么用：
首先，在html页面头部加入一个manifest的属性:
<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>
然后书写cache.manifest文件：
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
manifest （即 .appcache 文件）文件是简单的文本文件，可分为三个部分：
CACHE ：在此标题下列出的文件将在首次下载后进行缓存。
NETWORK ：在此标题下列出的文件需要与服务器的连接，且不会被缓存，离线时无法使用。 可以使用 “*” 来指示所有其他资源/文件都需要因特网连接：NETWORK: *如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
FALLBACK：在此标题下列出的文件规定当页面无法访问时的回退页面。
45.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢
46.iframe有那些缺点？
47.WEB标准以及W3C标准是什么
48.Doctype作用 严格模式与混杂模式如何区分？它们有何意义
49.HTML全局属性(global attribute)有哪些
50.Canvas和SVG有什么区别？
51.如何在页面上实现一个圆形的可点击区域？
52.网页验证码是干嘛的，是为了解决什么安全问题
53.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
54. CSS选择器有哪些？哪些属性可以继承？
55.CSS优先级算法如何计算？
56.CSS3有哪些新特性？
57.请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？
58.用纯CSS创建一个三角形的原理是什么？
59.常见的兼容性问题？
60.为什么要初始化CSS样式
61.absolute的containing block计算方式跟正常流有什么不同？
62.CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？
63.display:none与visibility：hidden的区别？
64.position跟display、overflow、float这些特性相互叠加后会怎么样？
65.对BFC规范(块级格式化上下文：block formatting context)的理解？
66.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
67.上下margin重合的问题
68. 设置元素浮动后，该元素的display值是多少？
69.移动端的布局用过媒体查询吗？
70.CSS优化、提高性能的方法有哪些？
71.浏览器是怎样解析CSS选择器的？
72.在网页中的应该使用奇数还是偶数的字体？为什么呢？
73.margin和padding分别适合什么场景使用？
74.元素竖向的百分比设定是相对于容器的高度吗？
75.全屏滚动的原理是什么？用到了CSS的哪些属性？
76.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
77. 视差滚动效果？
78.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
79.让页面里的字体变清晰，变细用CSS怎么做？
80. position:fixed;在android下无效怎么处理？
81.如果需要手动写动画，你认为最小时间间隔是多久，为什么？
82.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
83.display:inline-block 什么时候会显示间隙？
84. 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
85.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
86.style标签写在body后与body前有什么区别？
87.CSS属性overflow属性定义溢出元素内容区的内容会如何处理
88.阐述一下CSS Sprites
89. 一行或多行文本超出隐藏
<style>
p{
width:300px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>
