面试题总结(概念篇)
HTML
[if !supportLists]1、[endif]请列举HTML5的新特性
[if !supportLists]· [endif]语义化标签
[if !supportLists]· [endif]表单新特性
[if !supportLists]· [endif]视频(video)和音频(audio)
[if !supportLists]· [endif]canvas画布
[if !supportLists]· [endif]svg绘图
[if !supportLists]· [endif]地理定位
[if !supportLists]· [endif]为鼠标提供的拖放API
[if !supportLists]· [endif]webworker
[if !supportLists]· [endif]（重点）Storage
[if !supportLists]· [endif]（重点）Websocket
2、什么是BFC？怎样形成？
BFC（块级格式化上下文），是一个独立的渲染区域，让处于BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
[if !supportLists]· [endif]触发条件:
[if !supportLists]o [endif]根元素
[if !supportLists]o [endif]position: absolute/fixed
[if !supportLists]o [endif]display: inline-block / table
[if !supportLists]o [endif]float 元素
[if !supportLists]o [endif]ovevflow !== visible 元素的布局，这个渲染区域只对块级元素起作用
3、简述一下前端语义化及常见的语义化标签
[if !supportLists]· [endif]<title>：页面主体内容。
[if !supportLists]· [endif]<hn>：h1~h6，分级标题，
[if !supportLists]· [endif]<h1>与<title> 协调有利于搜索引擎优化。
[if !supportLists]· [endif]<ul>：无序列表。
[if !supportLists]· [endif]<li>：有序列表。
[if !supportLists]· [endif]<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
[if !supportLists]· [endif]<nav>：标记导航，仅对文档中重要的链接群使用。
[if !supportLists]· [endif]<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
[if !supportLists]· [endif]<article>：定义外部的内容，其中的内容独立于文档的其余部分。
[if !supportLists]· [endif]<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
[if !supportLists]· [endif]<aside>:定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
[if !supportLists]· [endif]<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
[if !supportLists]· [endif]<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
[if !supportLists]· [endif]<strong>：和em 标签一样，用于强调文本，但它强调的程度更强一些。
CSS
1、CSS选择器有哪些？哪些属性可继承？
CSS选择器有：
[if !supportLists]· [endif]id 选择器（ # myid）
[if !supportLists]· [endif]类选择器（.myclassname）
[if !supportLists]· [endif]标签选择器（div, h1, p）
[if !supportLists]· [endif]相邻选择器（h1 + p）
[if !supportLists]· [endif]子选择器（ul < li）
[if !supportLists]· [endif]后代选择器（li a）
[if !supportLists]· [endif]通配符选择器（* ）
[if !supportLists]· [endif]属性选择器（a[rel = "external"]）
[if !supportLists]· [endif]伪类选择器（a: hover, li: nth - child）
可继承的属性有：font-size，font-family，color;
不可继承的属性有：border，padding，margin，width，height;
CSS3 新增伪类举例：
[if !supportLists]· [endif]p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
[if !supportLists]· [endif]p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
[if !supportLists]· [endif]p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
[if !supportLists]· [endif]p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
[if !supportLists]· [endif]p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
[if !supportLists]· [endif]:enabled、:disabled 控制表单控件的禁用状态。
[if !supportLists]· [endif]:checked，单选框或复选框被选中。
2、CSS选择器权重计算
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
优先级为:
[if !supportLists]· [endif]!important > id > class = 伪类 > tag
[if !supportLists]· [endif]important 比 内联优先级高
复杂的计算方法：
[if !supportLists]· [endif]用1 表示派生选择器的优先级
[if !supportLists]· [endif]用10 表示类选择器的优先级
[if !supportLists]· [endif]用100 标示 ID 选择器的优先级
3、简述一下你对CSS盒模型的理解
CSS 的盒子模型有两种：IE 盒子模型、标准的 W3C 盒子模型模型
盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框
4、display:none与visibility：hidden的区别是什么？
display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility : 隐藏对应的元素并且挤占该元素原来的空间。
即使用CSSdisplay:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将 “丢失”;
而使用visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
5、display 有哪些值？请说明他们的作用
常用的有：
[if !supportLists]· [endif]none：此元素不显示。
[if !supportLists]· [endif]block：将元素显示为块级元素，前后会带换行符。
[if !supportLists]· [endif]inline:默认值，元素会被显示为内联元素，前后没有换行符。
[if !supportLists]· [endif]inline-block:行内块级元素。
6、position 跟 display、margin-collapse、overflow、float 这些特性相互叠加后会怎么样？
浮动的行内变成块级元素，绝对定位的行内也会变成块级元素。绝对定位时浮动失效，top,bottom,left,right能改变位置。相邻普通流块级垂直方向margin叠压。浮动，inline-block，绝对定位不会和垂直方向其他元素margin叠压。BFC不会和子元素margin叠压。(absolute,fixed都是绝对定位)
7、响应式布局是如何实现的？
8、简述flex布局，并实现垂直居中
9、弹性盒模型中flex属性{flex:1 1 auto}
10、CSS中什么是外边距重叠？重叠的结果是什么？
外边距重叠就是margin-collapse。
在CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一 个单独的外边距。 这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠 外边距。
折叠结果遵循下列计算规则：
[if !supportLists]· [endif]两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
[if !supportLists]· [endif]两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
[if !supportLists]· [endif]两个外边距一正一负时，折叠结果是两者的相加的和。
11、<img>的title和alt属性分别有什么作用？
12、希望图片具有“提交”按钮同样的功能，该如何编写表单提交？
13、如何解决移动端的1px边框问题，原理是什么？
14、盒子模型有时候会出现设置背景、边框无法撑大和设置内外间距异常，一般来说导致此类问题是何原因？
15、设置margin的上下和设置宽高无效，其他有效的元素有哪些？
16、行内块元素之间有间距，怎么解决？
17、行内元素有哪些？块级元素有哪些？区别或特点是什么？
18、rgba()和opacity的透明效果有什么不同？
rgba()和 opacity 都能实现透明效果，但最大的不同是
[if !supportLists]· [endif]opacity 作用于元素，以及元素内的所有内容的透明度，
[if !supportLists]· [endif]rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）
19、哪些方式可以对一个DOM设置它的CSS方式？
20、什么是CSS Hack？ie6,7,8的Hack分别是什么？
针对不同的浏览器写不同的CSS code 的过程，就是 CSS hack。
21、如何垂直居中一个浮动元素？如何垂直居中一个<img>？
22、Link 和 @import 的区别是什么？
[if !supportLists]· [endif]Link 属于 html 标签，而@import 是 CSS 中提供的
[if !supportLists]· [endif]在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载
[if !supportLists]· [endif]@import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题
[if !supportLists]· [endif]Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）
23、描述一下你对优雅降级和渐进增强的理解
JavaScript
1、JS中有哪些内置函数？
js内置函数是浏览器内核自带的，不用任何函数库引入就可以直接使用的函数。
javascript内置函数一共可分为五类：
[if !supportLists]· [endif]常规函数
[if !supportLists]· [endif]数组函数
[if !supportLists]· [endif]日期函数
[if !supportLists]· [endif]数学函数
[if !supportLists]· [endif]字符串函数
2、=== 和 == 分别在何时使用？
==：用来检测两个操作数是否相等，这里的相等定义的非常宽松，可以允许进行类型转换
===：用来检测两个操作数是否严格相等
3、请描述DOM事件捕获的具体流程
4、bind()、call()、apply()的区别
5、观察者和订阅-发布者的区别
6、如何获取页面滚动高度？
7、在JS中，如何判断某变量是否为数组？
8、简述webpack的作用？
9、同步和异步的区别？
10、JavaScript typeof返回哪些数据类型？
11、描述js实现Ajax的原理
12、get和post的区别？以及何时使用post？
13、JavaScript的new操作符具体干了些什么？
14、JavaScript实现判断设备（Android、iOS）？
15、请写一个验证手机号码的正则表达式？
16、尝试描述闭包概念及优缺点
17、document.write方法与对象的innerHTML方法有什么区别？
18、什么是跨域？跨域请求资源的方法有哪些？
[if !supportLists]· [endif]1、通过jsonp跨域
[if !supportLists]· [endif]2、document.domain + iframe跨域
[if !supportLists]· [endif]3、location.hash + iframe
[if !supportLists]· [endif]4、window.name + iframe跨域
[if !supportLists]· [endif]5、postMessage跨域
[if !supportLists]· [endif]6、跨域资源共享（CORS）
[if !supportLists]· [endif]7、nginx代理跨域
[if !supportLists]· [endif]8、nodejs中间件代理跨域
[if !supportLists]· [endif]9、WebSocket协议跨域
19、严格模式和非严格模式的区别是什么？
20、写一下对js中this关键字的理解
21、写一下对js中作用域的理解
22、简要描述一下同步和异步的区别？如何避免回调地狱？
23、简要描述一下Cookie、SessionStorage、localStorage的区别？
24、请列举ES6的新特性
箭头函数、模块、let与const、字符串模板、解构、默认参数
25、箭头函数和普通函数的区别是什么？
26、描述一下 var 和 let 的区别
27、描述一下对事件冒泡的理解
28、你对闭包的理解？编写代码实现一个截流或者防抖函数？
29、说说你的原型和原型链的理解，最好图示
30、前端路由hash和history的区别
31、promise
32、请简述async/await中await做了什么？
33、什么是伪数组？如何将伪数组转化为标准数组？
伪数组：
1.具有length属性
2.按索引方式存储数据
3.不具有数组的push,pop等方法
伪数组转化为标准数组：Arry.prototype.slice.call(伪数组)
34、pop push shift unshift的区别
pop()是弹出最后一个，并返回该元素，
push()是从后面继续添加元素，
shift()是弹出第一个，
unshift()是在前端添加
35、在JavaScript中实现继承的方法有哪些？
1.构造函数绑定
2.prototype模式
3.直接继承
4.利用空对象中介
5.拷贝继承
Jquery
1、JavaScript.window.onload()事件和jQuery.ready()函数有何不同？
2、jQyery中绑定事件都有哪些方法？
3、jQuery选择器选择出的元素与原生js选择出的元素，怎样进行相互转换？
框架：vue
1、vue-router如何获取页面的get参数？
2、vue性能优化
3、vue双向绑定数据原理
4、请谈谈vue中的MVVM和MVC的概念以及区别？
MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型， 也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的，因此 View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM,不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理
区别：
MVC 和 MVVM 其实区别并不大。都是一种设计思想。主要就是 MVC 中Controller演变成 MVVM 中的ViewModel。MVVM 主要解决了 MVC 中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验
5、嵌套路由怎么定义？
6、vue中 keep-alive 组件的作用？
7、Vuex/Redux是什么？原理是什么？有什么作用？
8、sync
9、$emit 的作用
10、请列举vue组件的生命周期，当使用keep-alive属性是，有会增加哪两个生命周期？
11、请分别说出vue修饰符 .trim，.number，.lazy的作用
12、Vue中的 $nextTick 是什么作用？
13、Vue中如何实现父子层级的组件通信？
14、Vue中如何实现非父子层级的组件通信？？
15、Vue中v-show与v-if的区别
v-show 是控制CSS属性 display 来达到显示或者隐藏的目的 v-if 是通过组件的销毁和创建达到显示或者隐藏的目的
16、Vuex有哪5种属性？
tate => 基本数据 getters => 从基本数据派生的数据 mutations => 提交更改数据的方法，同步！ actions => 像一个装饰器，包裹mutations，使之可以异步。 modules => 模块化Vuex
17、请写出你所熟悉的vue生命周期并做简要说明
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。 更新前/后：当data变化时，会触发beforeUpdate和updated方法。 销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
18、用vue脚手架中，在main.js中引入vue，在App中又引入一次，会不会重复打包vue？为什么？
不会，因为对象调用两次、文件导入一次。
19、第一次页面加载会触发哪几个钩子？Dom渲染在哪个周期就已经完成了
第一次页面加载时会触发beforeCreate, created, beforeMount, mounted 这几个钩子。 DOM 渲染在 mounted 中就已经完成了。
浏览器
1、浏览器兼容问题及解决方案？
[if !supportLists]1. [endif]双边距BUG：float 引起的,使用 display
[if !supportLists]2. [endif]3像素问题：使用 float 引起的,使用 dislpay:inline -3px
[if !supportLists]3. [endif]超链接hover 点击后失效：使用正确的书写顺序 link visited hover active
[if !supportLists]4. [endif]IE z-index 问题：给父级添加 position:relative
[if !supportLists]5. [endif]png透明：使用js代码改
[if !supportLists]6. [endif]min-height 最小高度：!important 解决
[if !supportLists]7. [endif]select 在 IE6 下遮盖：使用 iframe 嵌套
[if !supportLists]8. [endif]为什么没有办法定义1px左右的宽度容器：IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px
[if !supportLists]9. [endif]IE5-8 不支持 opacity：
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE
8*/
}
[if !supportLists]10. [endif]IE6 不支持 PNG 透明背景：IE6 下使用 gif 图片
2、浏览器缓存有哪些？通常缓存有哪几种方式？
3、简要描述一下在浏览器输入一个url到页面返回内容的过程中都发生了什么？
4、浏览器拿到一个页面是如何渲染，请写出渲染步骤
流程如下：
（解析html以构建dom树->构建render树->布局render树->绘制render树）
具体的流程如下：
[if !supportLists]· [endif]1：浏览器会将HTML解析成一个DOM树，DOM树的构建过程是一个深度遍历过程，当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点，
[if !supportLists]· [endif]2：将CSS解析成CSS规则树；
[if !supportLists]· [endif]3：根据DOM树和CSS来构造render树，渲染树不等于DOM树，像header和display：none；这种没有具体内容的东西就不在渲染树中；
[if !supportLists]· [endif]4：根据render树，浏览器可以计算出网页中有哪些节点，各节点的CSS以及从属关系，然后可以计算出每个节点在屏幕中的位置；
[if !supportLists]· [endif]5：遍历render树进行绘制页面中的各元素。
网络协议
1、XSS和CSRF如何避免？
2、简要描述一下 http 和 https 的区别？以及https的简单原理？
3、tcp、udp、http、ip有什么异同？
4、与缓存相关的HTTP请求头有哪些？
5、请写出以下状态码的含义
性能优化
1、请列举降低页面加载时间的方法。
2、简单的以前端角度出发，做好SEO需要考虑什么？
3、描述一下你对web前端性能优化的基本思路和对应措施
[if !supportLists]· [endif]代码规范：命名规则、标签使用、注释规范
[if !supportLists]o [endif]css规范：属性顺序、选择器、属性使用缩写、媒体查询的位置（媒体查询放在相关规则后面或者统一放在文档底部，若统一放在文档底部的）
[if !supportLists]o [endif]js规范：文件命名、语言规范、编码风格
[if !supportLists]o [endif]vue规范：属性顺序、组件、事件
[if !supportLists]· [endif]页面优化：
[if !supportLists]o [endif]1.减少HTTP请求
[if !supportLists]o [endif]2.使用CDN
[if !supportLists]o [endif]3.添加Expires
[if !supportLists]o [endif]4.压缩组件
[if !supportLists]o [endif]5.将样式表放在头部
[if !supportLists]o [endif]6.将脚本放在底部
[if !supportLists]o [endif]7.避免css表达式
[if !supportLists]o [endif]8.使用外部的js和css
[if !supportLists]o [endif]9.减少DNS查找
[if !supportLists]o [endif]10.精简js
[if !supportLists]o [endif]11.避免重定向
[if !supportLists]o [endif]12.删除重复脚本
[if !supportLists]o [endif]13.配置ETag
[if !supportLists]o [endif]14.使ajax可缓存
4、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
[if !supportLists]· [endif]图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
[if !supportLists]· [endif]如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
[if !supportLists]· [endif]如果图片为css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。
[if !supportLists]· [endif]如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
[if !supportLists]· [endif]如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。
其他
1、进程与线程的区别？
2、简述iframe的优缺点？
3、Node.js有哪些优缺点？
4、使用npm有哪些好处？最主要的文件是什么？
5、请简要描述一下你对前端工程化以及大前端的理解？
