史上最全最新前端面试题（不定期更新，有问题欢迎评论区对线）

一阶段面试题：

CSS浮动怎么理解的
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，也就是脱离文档流，所以文档的普通流中的块框表现得就像浮动框不存在一样。一般使用float来实现浮动，联系=》清除浮动的相关方法。27题
绝对定位相对定位怎么理解
absolute：绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据根元素(html)《浏览器》进行定位，而其层叠通过z-index属性定义。
relative ：相对定位，该对象的文档流位置不动，将依据right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置；其层叠通过z-index属性定义
块元素和行内元素、行内块什么区别
1.行内元素
　　行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体和标签，还有_{和^{这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。

　　行内元素特征：(1)设置宽高无效

　　　　　　　　　(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

　　　　　　　　　(3)不会自动进行换行

2.块状元素

　　块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。

　　块状元素特征：(1)能够识别宽高

　　　　　　　　　(2)margin和padding的上下左右均对其有效

　　　　　　　　　(3)可以自动换行

　　　　　　　　　(4)多个块状元素标签写在一起，默认排列方式为从上至下

3.行内块状元素

　　行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

　　行内块状元素特征：(1)不自动换行

　　　　　　　　　　　(2)能够识别宽高

　　　　　　　　　　　(3)默认排列方式为从左到右

这三者是可以互相转换的，使用display属性能够将三者任意转换：

　　(1)display:inline;转换为行内元素

　　(2)display:block;转换为块状元素

　　(3)display:inline-block;转换为行内块状元素}}
Css如何实现盒子水平垂直居中
第一种：
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
第二种：
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
第三种：
.middle{
width:100px;
height:100px;
background-color:tomato;
/* 水平垂直居中*/
position: absolute;
top:50%;
left:50%;
margin: -50px 0 0 -50px;
}
第四种：
#container{
width:100%;
height: 100%;
/* 子元素middle垂直居中 */
display: flex;
justify-content: center; // 水平居中
align-items:center; // 垂直居中
}
第五种：
#container{
width:100%;
height: 100%;
display: flex;
}
.middle{
width:100px;
height:100px;
background-color:tomato;
margin:auto;
}
Href 和 src的区别
1.href：Hypertext Reference的缩写，超文本引用，它指向一些网络资源，建立和当前元素或者说是本文档的链接关系。在加载它的时候，不会停止对当前文档的处理，浏览器会继续往下走。常用在a、link等标签。
2.src：source的所写，表示的是对资源的引用，它指向的内容会嵌入到当前标签所在的位置。由于src的内容是页面必不可少的一部分，因此浏览器在解析src时会停下来对后续文档的处理，直到src的内容加载完毕。常用在script、img、iframe标签中，我们建议js文件放在HTML文档的最后面。如果js文件放在了head标签中，可以使用window.onload实现js的最后加载。
总结：href用于建立当前页面与引用资源之间的关系（链接），而src则会替换当前标签。遇到href，页面会并行加载后续内容；而src则不同，浏览器需要加载完毕src的内容才会继续往下走。
Px和Rem的区别
px：绝对单位，页面按精确像素展示。
rem：相对单位，相对根节点html的字体大小来计算，CSS3新加属性。

7.常见的浏览器内核和前缀有哪些？微信的浏览器内核是什么
Trident内核：IE浏览器以Trident作为内核引擎。（遨游，世界之窗，腾讯TT……都是IE）。-ms-
Trident内核最慢。
Gecko内核：开放源代码，以C++编写的网页排版引擎，是跨平台的。
FireFox是基于Gecko开发。-moz-
presto内核（Opera前内核）（已废弃）：该款引擎的特点就是渲染速度的优化达到了极致，然而代价却是牺牲了网页的兼容性。-o-
Webkit内核：（Safari内核，Chrome内核原型，开源），它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。-webkit-
Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时也支持BSD系统的开发。所有Webkit也是自由软件，同时开放源代码。在安全方面不受IE，FireFox的制约。所以，Safari浏览器在国内还是很安全的。
微信浏览器内核-------QQ浏览器X5内核
也就是说微信、手机QQ内置浏览器都是腾讯的QQ浏览器。
X5内核是腾讯基于开源Webkit优化的浏览器渲染引擎，目前除了微信、手机QQ、京东等有30多款APP内置浏览器都是基于X5内核。

html5中新增哪些api
多媒体：baivideo、audio、
游戏：canvas、webgl、
存储du：localstorage、sessonstorage、websql、indexedDB
网络：websocket
html5新增哪些标签
h5是html的最新版本，是14年由baiw3c完成标准制du定。增强了，浏览zhi器的原生功能，减少浏览器插件（eg：flash）的应用，提dao高用户体验满意度，让开发更加方便。- h5新增的标签
新增元素
说明
video 表示一段视频并提供播放的用户界面
audio 表示音频
canvas 表示位图区域
source 为video和audio提供数据源
track 为video和audio指定字母
svg 定义矢量图
code 代码段
figure 和文档有关的图例
figcaption 图例的说明
main
time 日期和时间值
mark 高亮的引用文字
datalist 提供给其他控件的预定义选项
keygen 秘钥对生成器控件
output 计算值
progress 进度条
menu 菜单
embed 嵌入的外部资源
menuitem 用户可点击的菜单项
menu 菜单
template
section
nav
aside
article
footer
header
移动端怎么做适配
一：meta viewport
meta viewport属性主要是让viewport的宽度等于当前设备的宽度，也可以按照需求来限制用户是否可以缩放。

width=device-width：让当前viewport宽度等于设备的宽度 user-scalable=no：禁止用户缩放 initial-scale=1.0: 设置页面的初始缩放值为不缩放 maximum-scale=1.0: 允许用户的最大缩放值为1.0 minimum-scale=1.0: 允许用户的最小缩放值为1.0 二：媒体查询（media）一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。格式一： @media() and () {} //满足小括号里的条件就使用花括号里的样式格式二： //link标签会下载好，但是是否生效就取决于是否满足media的条件。 media中可以使用逻辑操作符，包括not、and和only等，构建复杂的媒体查询。and操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求，只有当每个属性都为真时，结果才为真。not操作符用来对一条媒体查询的结果进行取反。only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到。若使用了not或only操作符，必须明确指定一个媒体类型。你也可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于or操作符。三：rem rem是根据网页的根元素来设置字体大小，和em的区别是，em是根据父元素的字体大小来设置，而rem则是根据网页的根元素的来设置的。举一个简单的例子： html { font-size: 16px; //现在大部分浏览器，如果不更改字体配置，默认显示的font-size都是16px。} 给一个p标签设置12px的字体就可以这样设置 p { font-size： 0.75rem；} 由此可见rem会根据html的font-size自适应的转变大小 rem的特性同样适用于CSS，不过一般要通过一层计算才行，比如要设置一个长度为100px的div，那么就要计算出100px对应的em值是100/16（html默认的font-size）=6.25rem。对于没有使用sass的工程：为了方便，可以将html的font-size设置成100px，这样在写单位时，直接将数值除以100再加上rem的单位就可以了。动态rem的两种方案：在script标签加入这段代码： 1：使用JS动态调整rem 2：使用sass实现px自动变rem

你们以前移动端是怎么写的
布局，写样式，写功能，上线
你们以前移动端是怎么布局的
1.固定meta视图
1
　　这种写法中，利用meta标签，将视图宽度定位了750px，固定值，也就是ios6的标准，然后css也是基于750px的设计稿进行布局。
优点：前端开发十分快速，都是死值。
缺点：匹配不完全，手机像素高于这个的，显示这个效果，不理想状态；低于这个状态的，不兼容这个状态；固定宽在做项目的时候由于每个手机屏幕的高度不同需要有一个最小的内容区域。
2.rem布局
rem是一种基于页面根元素的布局方式
当手机屏幕大小改变了，只要改变对应的页面根元素，就可以实现页面的缩小放大。按照750px的设计稿，进行布局的时候可以在head中添加下图的一段j，监听屏幕改变，从而动态改变页面根元素的fonsize大小，对页面进行缩放改变
换句话说设置根元素 fontsize=16px 那么 1rem=16px，所以根据屏幕大小而动态改变 fontsize的值，从而做到移动端rem适配效果。

优点：引入js后，通过动态修改根元素fontsize,根据手机屏幕自动缩放
缺点：head中就要引入js，会有一点加载影响
3.meta媒体查询动态设置，几个手机的比例，进行对应匹配；
meta标签，通过媒体查询按照不同手机的像素宽高不同，进行条件匹配
优点：根据不同手机定制不同css，达到完美展示
缺点：需要写匹配很多手机，写很多套css，对前端工作量比较大
4.改变缩放比例，进行布局，类似于第2种方式，2是根据设备宽高对根元素进行font-size的动态改变，4这种方式则是通过改变meta种缩放比例，来进行动态改变页面的
这里有一个点需要说明
像素比 window.devicePixelRatio = 设备像素/css像素
（补充一下分辨率和像素的内容：某博客内容
高分辨率：eg每一毫米5像素点，像素点越多，色块越多，页面越清晰
低分辨率：eg每一毫米3像素点，像素点越少，色块越少，页面越模糊
肉眼看得请不清晰，跟屏幕实际尺寸的大小没关系，而跟单位长度的像素点有关，低分辨率的放在大屏上也只是一个放大的不清楚的画面而已，对于前端开发来说，设计图是1920或者是1366并不代表是宽度。
所以当你的网页完全按照设计图使用px来实现的话，有可能出现两种情况：

html宽度用了设计图1366px，但无奈到了1024的电脑或者手机的时候，就会出现了横向滚动条
html宽度用了设计图1366px，到了1920的电脑上，就会出现大量的留白
5.百分比布局
将整个页面按照百分比进行布局对于宽度比较好把握但是高度还是需要具体的值

你对语义化标签是怎么理解的？有什么好处？
什么是标签语义化？
<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
标签语义化有什么意义？
为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
Css3动画有哪些
2D：transform属性，包括位移translate()、旋转rotate()、缩放scale()、倾斜skew()
3D：transform-style属性，有两个属性值：flat和preserve-3d，包括3D位移translate3d(tx,ty,tz)、3D旋转rotate3d(x,y,z,a)、3D缩放scale3d(sx,sy,sz)
使用 CSS 预处理器吗？喜欢哪个？
工作流程：
各种预处理器语法不一样，但最终工作流程是一样的，以Sass为例。
以Sass提供的语法规则编写样式代码
经过编译器把Sass编写的代码转换成标准的CSS代码
浏览器加载解析转换后的CSS样式（浏览器只能解析标准的CSS代码，而不能是Sass等）
主流CSS预处理器：
Sass，2007，最早最成熟的CSS预处理器，有两种语法，分别以 .sass 和 .scss 为扩展名。SCSS是Sass 3引入的新语法，完全兼容CSS3，并继承了Sass的强大功能，和CSS语法结构更接近
Less，2009，受Sass影响大，以 .less 为扩展名
Stylus，2010，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，以 .styl 为扩展名
可以在CSS预处理器中：使用变量、简单逻辑判断、函数等基本编程技巧。
CSS优化、提高性能的方法有哪些？
1，首推的是合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的css文件慢。
2，减少css嵌套，最好不要套三层以上。
3，不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，嵌套完全是浪费性能。
4，建立公共样式类，把相同样式提取出来作为公共类使用，比如我们常用的清除浮动等。
5，减少通配符*或者类似[hidden=“true”]这类选择器的使用，挨个查找所有…这性能能好吗？当然重置样式这些必须的东西是不能少的。
6，巧妙运用css的继承机制，如果父节点定义了，子节点就无需定义。
7，拆分出公共css文件，对于比较大的项目我们可以将大部分页面的公共结构的样式提取出来放到单独css文件里，这样一次下载后就放到缓存里，当然这种做法会增加请求，具体做法应以实际情况而定。
8，不用css表达式，表达式只是让你的代码显得更加炫酷，但是他对性能的浪费可能是超乎你的想象的。
9，少用css rest，可能你会觉得重置样式是规范，但是其实其中有很多的操作是不必要不友好的，有需求有兴趣的朋友可以选择normolize.css
10，cssSprite，合成所有icon图片，用宽高加上bacgroud-position的背景图方式显现出我们要的icon图，这是一种十分实用的技巧，极大减少了http请求。
11，当然我们还需要一些善后工作，CSS压缩(这里提供一个在线压缩 YUI Compressor ，当然你会用其他工具来压缩是十分好的)，
12，GZIP压缩，Gzip是一种流行的文件压缩算法，详细做法可以谷歌或者百度
怎么让Chrome支持小于12px 的文字
通过对文字区域局部应用以下样式解决：针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性进行缩放。

CSS3有哪些新特性？
1.CSS3实现圆角（border-radius），阴影（box-shadow），
2.对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4.增加了更多的CSS选择器多背景 rgba
5.在CSS3中唯一引入的伪元素是 ::selection.
6.媒体查询，多栏布局
7.border-image
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
新特性：
拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation
移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

如何区分：
DOCTYPE声明新增的结构元素、功能元素

::before 和 :after中双冒号和单冒号有什么区别？
· 在 CSS 中伪类一直用 : 表示，如 :hover, :active ,:visited,:link等
· 伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after
· 后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
· 由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素
· 综上所述：::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法
说下遇到的各种兼容性的处理方法？
1、不同浏览器的标签默认的margin和padding不同
解决方案：可以使用Normalize来清除默认样式。
2、块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
3、设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度
解决方案：给超出高度的标签设置overflow:hidden;
4、阻止事件冒泡
e.stopPropagation()；ie:window.event.cancelBubble = true;
Html盒模型的不同？
w3c的盒子模型： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。
IE的盒子模型： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 。
一般都使用标准的w3c盒子模型，如果需要使用IE的盒子模型，可以使用box-sizing属性进行修改。
W3C盒模型是与IE盒模型的区别就是对宽高的定义不同。
W3C认为：宽高是内容区的宽度（只包含节点显示的具体内容）content-box
IE认为：宽高是显示效果的实际效果（包含节点的全部内容）border-box
响应式布局
响应式布局概念
Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。·
响应式设计的步骤
设置 Meta 标签
通过媒介查询来设置样式 Media Queries
设置多种试图宽度
透明度opacity和rgba的区别？
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）使用Opacity时，背景和背景内的元素都会透明；而rgba()只会让背景透明。
兼容IE8以下的浏览器你是如何编写css样式的
IE hacks:
“_” 是IE6 专有的hack;
“\9” 对IE6-IE10都有效；
"\0"对IE8-IE10都有效；
"\9\0"对IE9-IE10都有效；
优点:
CSS hacks 内嵌在普通的 CSS 里面，不会产生更多 HTTP 请求。CSS hacks 内嵌在普通的 CSS 里面，编写时比较方便。
缺点:
　　它是不标准的产物。内嵌在其他 CSS 中，不便维护。尤其是当 hacks 的数量比较多的时候维护简直是个恶梦。内嵌在其他 CSS 中，即使在非 IE 浏览器中也会被加载，浪费资源。
2.条件注释 CSS:

   条件注释是一种 IE 专有的、对常规（X）HTML 注释的 Miscrosoft 扩展。从 W3C 标准来说，它也是不标准的产物，但它是微软官方推出的针对 IE 进行开发的方式，

并且条件注释对于其他所有浏览器作为常规注释出现，因此对其他浏览器无害
优点：
　　条件注释 CSS 的好处是在独立的 CSS 文件中编写，能准确控制在特定的 IE 中加载，不会造成资源浪费，并且便于维护。
缺点：
就是会产生多余的 HTTP 请求，尤其是当你需要兼容的 IE 版本很多的时候，你就需要产生多个 HTTP 请求，这对于本来通道数目就少的低版本 IE 来说无疑会影响页面加载速度。
以上两种方法不是很好，以下的方法相对来说会好点；
3.条件注释 html 标签：
　　这种方案也是利用条件注释，但并不是对 CSS 使用条件注释，而是对 html 标签使用条件注释，引入不同的 class ，从而区分不同的 IE 以及其他浏览器；

然后把对特定 IE 的 CSS 加上相应的 class 并写在普通 CSS 文件里即可: .ie6 .header .nav {margin:0 0 0 ;padding:0 0 0 0; }
　　优点：
　　　　条件注释表达式的好处在于不会产生多余的 HTTP 请求；
　　缺点：
　　　　由于这些针对特定 IE 的 CSS 与普通的 CSS 放在一起，即不是相应的 IE 也会被加载，因此如果 CSS 数目比较多的话就会像使用 hacks 那样，造成浪费；

移动端项目开发过程中你遇到过哪些兼容行问题，你们一般兼容哪些浏览器
1.在ios和android下，audio和vedio不能自动播放
//方法：触屏即播
$(‘html’).on(‘touchstart’,function(){
audio.play()
})
2.CSS动画页面闪白，动画卡频
方法：（1）使用transform和opacity属性来设计动画，不适用position的left和top来定位。
（2）设置时，加上不同浏览器的前缀，如-webkit-、-moz-、-ms-、-o-
3.input的placeholder会出现文本位置偏上的情况
方法：设置line-height：normal
4.fixed定位缺陷
ios下，当出现软键盘的时候，会影响fixed元素定位
方法：使用iScroll插件解决

26.清除浮动的方法
1.overflow: hidden
2.增加额外标签，然后添加属性clear: both
3.给父元素添加高度
4.给所有元素添加浮动
5.使用display: inline-block
6.使用

7.after伪类清除
8.设置overflow: auto
9.设置display: table

二阶段面试题：

Ajax同步和异步怎么理解的
AJAX的核心是客户端的JavaScript程序能够实现异步执行,异步执行是相对与同步执行的.同步执行意味着代码必须顺序执行.
Js面相对象是怎么理解的
ECMAScript 有两种开发模式：1.函数式(过程化)，2.面向对象(OOP)。面向对象的语言有一个标志，那就是类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。但是，ECMAScript 没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。
js（如果没有作特殊说明，本文中的js仅包含ES5以内的内容）本身是没有class类型的，但是每个函数都有一个prototype属性。prototype指向一个对象，当函数作为构造函数时，prototype则起到类似class的作用。
Js写过原生插件吗？
写过，比如轮播图插件，运动插件，烟花特效插件
Js闭包是如何理解的
在一个函数内部创建另一个函数，通过另一个函数访问这个函数的局部变量，将函数内部的变量和方法传递到外部。
简单来说就算将函数内部和函数外部连接起来。
apply和call的区别
Apply：B.apply(A, arguments);即A对象应用B对象的方法。第一个参数是对象，第二个参数是是一个数组，是要替换的数据集合
Call：B.call(A, args1,args2);即A对象调用B对象的方法。第一个参数是对象，第二个往后参数是是要替换的数据
js中数组后面添加数据数组前面添加数据数组后面删除数据数组前面删除数据用什么？
push、unshift、pop、shift
请描述一下cookies，sessionStorage和localStorage的区别？
相同点：都存储在客户端
不同点：
1.存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
你对localStorage是怎么理解的？
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
localStorage 属性是只读的
跨域请求是怎么理解的？
也就是触发同源策略（同域名同协议同端口），跨域交互数据有几种方法，jsonp（script、src、href还有ajajx等）、cors服务器代理、API
Post和get的区别是怎么理解的？
GET
1. 倾向于向服务器获取数据
2. 直接再地址后面进行拼接(请求体是空的)
3. 大小限制为 2KB 左右(因为 IE 最多传递 2KB)
4. 会被浏览器主动缓存
5. 相对于 POST 不是很安全(明文发送)
6. 数据格式必须是 url 编码的格式, 如果不是会自动转换成 url 编码
  POST
7. 倾向于向服务器传递数据
8. 再请求体里面传递过去(地址后面没有)
9. 理论上是没有限制(但是可以被服务器限制)
10. 不会被浏览器主动缓存, 需要手动设置
11. 相对于 GET 比较安全的(暗文发送)
12. 数据格式理论上我所谓, 但是要和请求头中的 content-type 一致
  => 请求头里面的 content-type 表示请求体的数据格式
什么情况下面存在跨域
端口、协议、域名其一不一样就会存在
你如何处理后台接口返回的数据
通过json转换成前端能识别的代码
开发过程中遇到的内存泄露情况，如何解决的？
1、定义和用法：
内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。C#和Java等语言采用了自动垃圾回收方法管理内存，几乎不会发生内存泄露。我们知道，浏览器中也是采用自动垃圾回收方法管理内存，但由于浏览器垃圾回收方法有bug，会产生内存泄露。
2、内存泄露的几种情况:
(1)、当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会作出恰当处理，此时要先手工移除事件，不然会存在内存泄露。
(2)、由于是函数内定义函数，并且内部函数–事件回调的引用外暴了，形成了闭包。闭包可以维持函数内局部变量，使其得不到释放。
实例如下
网站如何优化？
减少http请求代码合并整合
网站加载速度慢如何优化
提高网速、静态化生成页面、减少http请求，整合css代码和js代码、压缩图片
网站seo优化有哪些方法？
1、战略的制定：通过数据分析用户需求和竞争对手，找出SEO优化的突破口。
2、关键词挖掘：根据用户需求和SEO优化的突破口进行关键词挖掘。
3、网站搭建：按照战略目标，有计划的制定网站建设框架，网站搭建分为几个步骤：导航设计、页面框架、确定草图、设计设置展示。网站搭建之后就可以根据我们之前设计的框架对导航、首页、目录页、内页的标题和url进行设置了，同时也可以根据内容框架开始给网站填充内容。
4、优化战略制定：首先，战略制定是SEO基础操作必须做好的一个工作。所谓的战略的制定就是我们要通过数据分析满足到我们网站的用户最大的搜索需求，并且通过对比竞争对手找到最适合的SEO优化方向。战略制定分为四个部分。
Seo针对搜索引擎操作的
一次完整的HTTP事务是怎样的一个过程？
客户端输入url回车后解析成ip地址向服务器发送请求（三次握手），服务器端接收请求，查看路径，给你做出响应
服务器响应，数据到了前端，渲染到页面中
你以前用过哪些js库和框架
jQuery、Angular、vue、react
ajax请求时，如何解释json数据
JSON.parse(xhr.responseText)
如何阻止事件冒泡和默认事件
阻止默认事件
非IE
e.stopPropagation();
IE
window.event.cancelBubble = true;
阻止默认事件
//全支持
// event.preventDefault();
//该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。
// window.event.returnValue = false;
//不建议滥用，jq中可以同时阻止冒泡和默认事件
// return false;
// 兼容
// stopDefault(event)
解释jsonp的原理，以及为什么不是真正的ajax
①Ajax与JSONP这两种技术看起来很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jQuery等框架都把JSONP作为Ajax的一种形式。
②实际上Ajax与JSONP有着本质上的不同。Ajax的核心是通过XMLHttpRequest获取数据，而JSONP的核心则是动态添加

1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；演示代码如下:
View Code

2.bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()，替代函数为on(),这也是1.7版本新添加的函数，同样，可以
　用来代替live()函数，live()函数在1.9版本已经删除；

3.live()函数和delegate()函数两者类似，但是live()函数在执行速度，灵活性和CSS选择器支持方面较delegate()差些，想了解具体情况，请戳这：
　http://kb.cnblogs.com/page/94469/

3.bind()支持Jquery所有版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；

Jquery与jQuery UI有啥区别？
jQuery UI 与 jquery 的主dao要区别是：　
　(1) jQuery是一du个js库，主要提供的zhi功能是选择器，属性dao修改和事件绑定内等等。　
　(2) jQuery UI则是在容jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。　
　(3) jQuery本身注重于后台，没有漂亮的界面，而jQuery UI则补充了前者的不足，他提供了华丽的展示界面，使人更容易接受。既有强大的后台，又有华丽的前台。jQuery UI是jQuery插件，只不过专指由jQuery官方维护的UI方向的插件。
Zepto如何理解的
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的api。如果你会用jquery，那么你也会用zepto。
zepto与jquery的区别
jquery针对pc端，主要用于解决浏览器兼容性问题，zepto主要针对移动端。
zepto比jquery轻量，文件体积更小
zepto封装了一些移动端的手势事件
zepto的使用与jquery基本一致，zepto是分模块的，需要某个功能，就需要引入某个zepto的文件。
requireJS是怎么理解的
RequireJS 是一个JavaScript模块加载器。
在ES6出现之前，JS不像其他语言同样拥有“模块”这一概念，于是为了支持JS模块化，出现了各种各样的语言工具，如webpack，如ReuqireJS。
模块化：模块化就是将不同功能的函数封装起来，并提供使用接口，他们彼此之间互不影响。
· 不会阻塞页面：RequireJS，会在相关的js加载后执行回调函数，这个过程是异步的，所以它不会阻塞页面。
· 按需加载：平时我们写html文件的时候，在底部可能会引用一堆js文件。在页面加载的时候，这些js也会全部加载。使用require.js就能避免此问题。举个例子，比如说我写了一个点击事件，放到了一个js文件里，并在html引用，在不使用require.js的情况下，页面加载它跟着加载，使用后则是什么时候触发点击事件，什么时候才会加载js。
require.js将javascript模块化确实比较好用，语法也简单，主要掌握三个语法就能实现一定的功能，即require.config()、require()、define()。但可惜自从webpack出现后，RequireJs几乎退出了人们的视野，官网也不再升级版本，后续出现的框架如angular、React、Vue又将前端模块上升到了另外一个高度。跟随前端时代的变迁固然重要，但有时，尝试一些“老技术”也无可厚非，或许也能给我们带来不同的体。
jQuery的优点
（1）轻量级：JQuery非常轻巧，采用Dean Edwards编写的Packer压缩后，大小不到30KB,如果使用Min版并且在服务器端启用Gzip压缩后，大小只有18KB。
（2）强大的选择器：JQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及JQuery独创的高级而且复杂的选择器，另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。
（3）出色的DOM操作的封装：JQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候能够得心应手。
（4）可靠的事件处理机制：JQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华，是的JQuery在处理事件绑定的时候相当可靠。
（5）完善的Ajax：JQuery将所有的Ajax操作封装到一个函数 $. a j a x () 里，使得开发者处理 A j a x 的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和 X M L H t t p R e q u e s t 对象的创建和使用的问题。（ 6 ）不污染顶级变量： J Q u e r y 只建立一个名为 J Q u e r y 的对象，其所有的函数方法都在这个对象之下。其别名$ 也可以随时交流控制权，绝对不会污染其他的对象。该特性是JQuery可以与其他JavaScript库共存，在项目中放心地引用而不需要考虑到后期的冲突。
（7）出色的浏览器兼容性：JQuery能够在IE6.0+,FF 2+,Safari2.+和Opera9.0+下正常运行。JQuery同时修复了一些浏览器之间的的差异，使开发者不必在开展项目前建立浏览器兼容库。
（8）链式操作方式：JQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个JQuery对象上的一组动作，可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅。
（9）隐式迭代：当用JQuery找到带有“.myClass”类的全部元素，然后隐藏他们时。无需循环遍历每一个返回的元素。相反，JQuery里的方法都被设计成自动操作的对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅度地减少代码量。
（10）行为层与结构层的分离：开发者可以使用选择器选中元素，然后直接给元素添加事件。
（11）丰富的插件：JQuery的易扩展性，吸引了来自全球开发者来编写JQuery的扩展插件。目前已经有超过几百种官方插件支持，而且还不断有新插件面试。
（12）完善的文档：JQuery的文档非常丰富，现阶段多位英文文档，中文文档相对较少。很多热爱JQuery的团队都在努力完善JQuery中文文档，例如JQuery的中文API。
（13）开源：JQuery是一个开源的产品，任何人都可以自由地使用并提出修改意见。
懒加载的原理？
意义：懒加载的主要目的就是作为服务器前端的优化，减少请求次数或者延迟请求数。
实现原理:先加载一部分数据，当触发某个条件时利用异步(async)加载剩余的数据，新得到的数据不会影响原有数据的显示，同时最大幅度的减少服务器端资源耗用。
数组的所有遍历方法，包括es6
1.For循环 2.forEach循环 3.map循环 4.for of遍历 5.for in遍历 6.filter遍历
7.every遍历 8.some遍历 9.indexOf 10.find 11.findIndex 12.includes 13.reduce
14.reduceRight
说下事件委托是什么？有什么好处？
事件委托就是利用事件冒泡机制指定一个事件处理程序，来管理某一类型的所有事件。
即：利用冒泡的原理，把事件加到父级上，触发执行效果。
好处：
只在内存中开辟了一块空间，节省资源同时减少了dom操作，提高性能
对于新添加的元素也会有之前的事件。
开发过程中有什么编码规范？
HTML规范
一.DOCTYPE的声明: 每个HTML开头使用！doctype来启用标准模式声明，在此建议使用HTML5的声明模式
二.字符集和编码字符: 在每个页面的head中设置字符集，一般都是使用"UTF-8"
三.语法: 使用四个空格的缩进在属性上使用双引号不要忽略可选的关闭标签
四.引入css样式以及js脚本: 需要采用外链的形式引入css样式/js脚本，方便管理和修改
五.正确的标签嵌套
除了固定的嵌套规则（如ul包含li，ol包含li等），一般遵循以下规则：
1.块级元素与块级元素平级、内联元素与内联元素平级
2.块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素
3.有几个特殊的块级元素只能包含内联元素，不能再包含块级元素 h1~h6、p、dt。
4.块级元素不能放在标签p里面。
5.li标签可以包含div标签，因为li和div标签都是装在内容的容器。
六.属性顺序
HTML属性应该按照特定的顺序出现保证可读性
除了固定的嵌套规则（如ul包含li，ol包含li等），一般遵循以下规则：
1.class
2.id、name.
3.data-*
4.src，for，tpye，href等
5.title，alt
6.role，aria-*
七.逻辑顺序
尽量让自己的网站按照先后顺序比如先写页头，在写页体，最后写页脚
CSS书写规范
一.声明顺序
1.positioning 定位
2.因为可使一个元素脱离文档流，覆盖盒模型相关的样式
3.Box model盒模型
4.Typographic 排版
5.Visual 外观
二.媒体查询
尽量将媒体查询的位置靠近他们的相关的规则。不要把他们放在一个独立文件当中，也不要写在最底下，以免容易忘记
三.CLASS的命名
不但要自己能看懂代码，也要别人能轻松读懂自己的代码。
1.规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或_
2.命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合+
3.不允许通过1、2、3等序号进行命名；避免class与id重名
4.class用于标识某一个类型的对象，命名必须言简意赅
5.尽可能提高代码模块的复用，样式尽量用组合的方式
6.规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名
四.属性简写
坚持限制属性取值简写的使用，过度使用属性简写往往会导致更混乱的代码。常见的属性简写滥用包括： padding，margin，font，background等
实现多个标签页的通信？（就是localStorage和cookie）
在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；
在另一个标签页里面监听 storage 事件。即可得到 localstorge 存储的值，实现不同标签页之间的通信。将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。
在浏览器中输入url到整个页面显示在用户面前时，这个过程发生了什么？
①域名解析
②发起请求
③相应请求
④浏览器解析
常见的http请求方式，以及区别？
GET：从服务器获取数据（给的少拿的多）
POST：向服务器推送数据（给的多拿的少）
DELETE：删除服务器的一些内容
PUT：向服务器存放一些内容
HEAD:只请求页面的头部
TRACE（或OPTIONS）：发送一个探测性请求，如果返回了信息说明建立了连接
记住几个常用的状态码(200，400,401,404,500)
200，服务器成功处理请求。400，错误请求。401，服务器未授权，先验证身份。
201，404，服务器找不到请求的页面。500，服务器内部错误。
Es6你用过什么？具体说下
（1）let/const 特性：let定义的变量只能在代码块{}里面使用,形成一个{}块级作用域，var作用于函数作用域。let不允许重复声明,它是一个封闭空间,解决了i问题。const用来定义常量,一旦定义了,后面就不能修改了。
（2）箭头函数：没有this、super、arguments和new.target绑定；不能通过new关键字调用；没有原型；不可以改变this的绑定；不支持arguments对象；不支持重复的命名参数。
（3）解构赋值：左右两边结构一样；右边必须是合法结构；声明和赋值写在一句话中。
（4）模板字符串：用反引号()标识，它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量，还支持插入、字符串连接、表达式、换行。
（5）模块化：
exprot default // 导出
import modA from ‘./a.js’ // 引入模块
（6）参数：rest参数：ES6 引入 rest 参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
（7）Map：Map 是一个可以存储键值对的对象。其中键和值都可以是对象。
Map对象基本方法：
set(‘属性’,‘属性值’) 添加操作
has(‘属性’)
get(‘属性’) 通过属性来获去属性值
clear() 清空
delete() 删除
（8）Set：Set跟数组很像，集合中的数据是唯一的。
Set中的方法：
- add() 添加数据
- clear() 清空集合
- has() 检车集合中是否存在制定的数据
- forEach() 遍历
- delete() 删除成员
  （9）for Each：可以使用foreach进行循环,然后再执行一个函数,函数的第一个参数是数组的每一项,第二个参数是数组的索引(index),第三表示改元素所在数组的全部数据(整个数组数据)。
  （10）filter方法: 过滤筛选的作用，数组filter后，返回的结果为新的数组。
你对前端工程师的理解是什么？在代码方面有什么难度？
前端开发工程师，是从事Web前端开发工作的工程师。主要进行网站开发，优化，完善的工作。不过，现阶段的网站开发已经不同于早年的网页设计，当时主要是以图片和文字为主，用户使用网站的行为也以浏览为主，这些的东西html就可以办到。而现在的前端开发使得现代网页更加美观，交互效果显著，功能更加强大。所以现在的前端开发，能做到的更多，运用到的知识面更加广泛，要学习到的知识也就更多，三大基础技能html、CSS和JavaScript是少不了的。

45.变量命名规则
变量名首字母必须为字母(a-z A-Z)，下划线()，或者美元符号($)开始。
变量名只能是字母(a-z A-Z)，数字(0-9)，下划线()的组合，并且之间不能包含空格，数字不能放在变量名首位。
变量名不能使用编程语言的保留字。比如在javascript中不能使用true,false,while,case,break保留字等等。

三阶段面试题：

你对MVC、MVVM的理解？
M、V、C
Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。
View（视图）：是应用程序中处理数据显示的部分。
Controller（控制器）：是应用程序中处理用户交互的部分。
M、V、VM
· 模型层 (Model)：负责从各种数据源中获取数据；
· 视图层 (View)：在 Android 中对应于 Activity 和 Fragment，用于展示给用户和处理用户交互，会驱动 ViewModel 从 Model 中获取数据；
· ViewModel 层：用于将 Model 和 View 进行关联，我们可以在 View 中通过 ViewModel 从 Model 中获取数据；当获取到了数据之后，会通过自动绑定，比如 DataBinding，来将结果自动刷新到界面上。
你知道哪些htlm5的移动端框架。
1.jquery mobile框架
2.bootstrap框架
3.ionic框架
4.Mobile Angular UI框架
5.Intel XDK框架
6.Appcelerator Titanium框架
7.Sencha Touch框架
8.Kendo UI框架
9.PhoneGap框架
知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?
angular、backbone、knockout都是完整的MV*框架
angular是双向数据绑定的，backbone、knockout是单向数据绑定的
React只是单纯地View层
常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
常使用的js库：jQuery Bootstrap.js vue.js react.js
常用的前端开发工具：webstorm sublime vs code
开发过的应用：欢乐上墙、微信小程序“信息加密”
你怎么看待Web App 、hybrid App、Native App？
Native App
Native App是一种基于智能手机本地操作系统如iOS、Android、WP并使用原生程式编写运行的第三方应用程序,也叫本地app。
常用语言当然就是
iOS ：Objective-C swift
Android ：JAVA
Windowsphone ：C++
优点：
（1）打造完美的用户体验
（2）性能稳定
（3）操作速度快，上手流畅
（4）访问本地资源（通讯录，相册）
（5）设计出色的动效，转场，
（6）拥有系统级别的贴心通知或提醒
（7）用户留存率高
缺点：
（1）分发成本高（不同平台有不同的开发语言和界面适配）
（2）维护成本高（例如一款App已更新至V5版本，但仍有用户在使用V2， V3， V4版本，需要更多的开发人员维护之前的版本）
（3）更新缓慢，根据不同平台，提交–审核–上线等等不同的流程，需要经过的流程较复杂

Web App
Web App，顾名思义是指基于Web的应用，基本采用Html5语言写出，不需要下载安装。类似于现在所说的轻应用。基于浏览器运行的应用，基本上可以说是触屏版的网页应用。
优点
（1）开发成本低，
（2）更新快，
（3）更新无需通知用户，不需要手动升级，
（4）能够跨多个平台和终端。
缺点：
（1）临时性的入口
（2）无法获取系统级别的通知，提醒，动效等等
（3）用户留存率低
（4）设计受限制诸多
（5）体验较差
比如我们经常使用的日历工资计算器、网页地图等等
Hybrid App（混合模式移动应用）
Hybrid APP指的是半原生半Web的混合类App，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
需要下载安装，看上去类似Native App，但只有很少的UI Web View，访问的内容是 Web 。
混合式 APP 目前有越来越火的趋势，一大原因是可以进行“热更新”，不再受限于审核、上线等等繁复的流程。
AppStore里的电商类、新闻类APP，视频类APP普遍采取的是Native的框架，Web的内容。如淘宝、腾讯新闻等等。
Hybrid App 极力去打造类似于Native App 的体验，但仍受限于技术，网速，等等很多因素。
Hybrid App按网页语言与程序语言的混合，又分为四种类型：
多View混合型
即Native View和Web View独立展示，交替出现。
这种应用混合逻辑相对简单。即在需要的时候，将WebView当成一个独立的View（Activity）运行起来，在WebView内完成相关的展示操作。这种移动应用主体通常是Native App，Web技术只是起到补充作用。开发难度和Native App基本相当。
单View混合型
即在同一个View内，同时包括Native View和Web View，互相之间是覆盖（层叠）的关系。
这种Hybrid App的开发成本较高，开发难度较大，但是体验较好。
如百度搜索为代表的单View混合型移动应用，既可以实现充分的灵活性，又能实现较好的用户体验。
Web主体型
即移动应用的主体是Web View，主要以网页语言编写，穿插Native功能的Hybrid App开发类型。
这种类型开发的移动应用体验相对而言存在缺陷，但整体开发难度大幅降低，并且基本可以实现跨平台。
Web主体型的移动应用用户体验的好坏，主要取决于底层中间件的交互与跨平台的能力。
国外的appMobi、PhoneGap和国内的WeX5、AppCan和Rexsee都属于Web主体型移动应用中间件。
其中Rexsee不支持跨平台开发。
appMobi和PhoneGap除基础的底层能力更多是通过插件（Plugins）扩展的机制实现Hybrid。
AppCan除了插件机制，还提供了大量的单View混合型的接口来完善和弥补Web主体型Hybrid App体验差的问题，接近Native App的体验。
而WeX5则在揉合PhoneGap和Bootstrap等主流技术的基础上，对性能进一步做了深度优化，不但完全具备Native App对本地资源的调用能力，性能体验也不输原生；WeX5所开发出来的app具备完全的跨端运行能力，可以无需任何修改直接运行在各种前端环境上。
从分析可见，Hybrid App中的Web主体型只要能够解决用户体验差的问题，就可以变成最佳Hybrid App解决方案类型。
多主体共存型（灵活型）
这是一种新型的开发模式，即支持Web主体型的应用，又支持以Native主体的应用，也支持两者混合的开发模式。
比如kerkee框架，它具有跨平台、用户体验好、性能高、扩展性好、灵活性强、易维护、规范化、具有Debug环境、彻底解决跨域问题等特点。用户体验与Native App媲美。功能方面，开发者可随意扩展接口。

你移动端前端开发的理解？（和 Web 前端开发的主要区别是什么？）
pc端的网页开发要考虑更多样式兼容性的问题，ie，火狐，chrome等各大浏览器内核不一，使用到新特性的时候需要给样式加上最基础的兼容前缀，所以最好的做法还是尽量避免使用新样式属性来完成预期的效果。在移动端开发网页就基本不用考虑这种浏览器间的兼容问题了，手机上的浏览器绝大部分是webkit内核的，所以在移动端网页开发的时候能用到很多新的特性，像是极大简便了页面布局的flex布局，还有各种语义化的标签等。
平时如何管理你的项目？
先期团队必须确定好全局样式（globe.css），编码模式(utf-8)等；
编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
页面进行标注（例如页面模块开始和结束）；
CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；
JS 分文件夹存放命名以该JS功能为准的英文翻译。
图片采用整合的 images.png png8 格式文件使用尽量整合在一起使用方便将来的管理
说说最近最流行的一些东西吧？常去哪些网站？
Node.js、Mongodb、npm、MVVM、MEAN、three.js,React 。网站：w3cfuns,sf,hacknews,CSDN,慕课，博客园，InfoQ,w3cplus等
简单描述一下你做过的移动APP项目研发流程？
第一阶段：需求策划。
在需求阶段产品经理内部进行需求讨论：讨论下版本需求重点是什么，做什么功能，怎么做。通过反复调研、讨论、输出交互方案。
确认需求可行性：产品在输出交互方案后找相应的开发讨论需求方案是否可行，这个讨论阶段产品和开发的思维方式不同，往往会擦出新火花、新惊喜；但讨论控制不好或者会演化为产品和程序员的撕逼大战，呵呵。
UI设计：设计师将产品的交互方案变得更生动精美，不过精美的设计稿不见得都能实现出来。在这个过程中产品经理需要协调设计师和前端人员的沟通，制定设计规范。同时保证设计稿的质量，出稿进度。需求宣讲：产品经理将交互方案和实现逻辑完善以及将上版本的bug、其他优化需求等整合出完整的版本需求文档后，拉上项目所有成员宣讲。宣讲目的主要让项目成员清楚新版本需求的重点是什么，做什么功能，为什么做（重点讲）；简单介绍怎么做，讲解交互方案或设计稿，给大家有一个整体的印象，让大家都了解版本功能的意义。
第二阶段：需求研发。
项目启动：需求宣讲后，开发根据产品需求文档进行需求评审，评估出研发周期、提测时间、预发布时间点、正式发布时间点。
产品根据评审结果发送项目启动邮件。研发：需求研发过程中，产品跟进研发进度，保持与开发沟通确保需求被正确理解，及时解决研发过程中发现的新问题。测试用例：产品、测试、开发共同确认版本测试用例，并同步研发过程中变更的需求和细节。
提测：产品验收开发输出的功能模块，并输出体验回归文档；测试根据用例验证需求逻辑，提bug、优化给开发。内网环境测试通过后，测试继续验证预发布环境、正式环境。
第三阶段：版本发布。
客服培训：测试验证的过程中，版本发布前，产品提前给客服培训新版本内容。
发布：后端开发、运维人员将代码发布外网环境，前端输出外网正式包。产品运营将正式包上传各大安卓市场或ios -appstore提审。
升级：所有安卓渠道包更新好，或者appsore审核通过，新版本也没有发现什么问题时，后端开发和运营人员打开升级配置，并发送升级通知。运营报告：版本发布完毕还未算完呢，运营人员在新版本发布后，收集用户反馈，进行数据监测、数据分析；评估新版本功能效果和影响，验证新版本功能以及输出下版本需求开发和优化建议。
你认为怎样才是全端(全栈式)工程师（Full Stack developer）？
懂得配置服务器、懂得UI设计、懂得HTML、CSS、JS还有后端语言比如python，java等，懂得测试，懂得产品兼容PC与安卓IOS以及后期服务器优化
介绍一个你最得意的作品吧？
可以介绍自己的项目过程困难解决方法等等。
项目中遇到国哪些印象深刻的技术难题，具体是什么问题，怎么解决？
前后端交互出现问题，前端请求不到数据，与后端讨论问题是在哪，ie低版本浏览器兼容问题，添加兼容指令或运用插件，移动客户端操作系统问题，利用虚拟机模拟
最近在学什么？能谈谈你未来3，5年给自己的规划吗？
vue.js,react.js,Node.js、Mongodb、当产品经理或者开发小组长
模块化开发如何理解的。
.什么是模块化？
模块化就是讲js文件按照功能分离，根据需求引入不同的文件中。源于服务器端。
在前段开发中，最先出现在node.js中，commne.js中（module.exports和require）随着web应用的模块化，在浏览器端页是需要进行模块化开发，早期AMD，CMD规范，代表Require.js和sea.js。在es6中，提出了原生模块呼哈的解决方案，就是export和import但是浏览器并没有完全支持，需要借助一些工具，–babel，实现这个转换的有browserify和webpack。
在node.js中，模块就是一个文件，通常js、json文件，包是多个模块的集合，类似文件夹。
模块化通俗点的理解就是这样：就像我们小时候拼积木一样。我们想拼一个房子出来，我们不是一下子从低到顶逐渐的拼出来。而是我们把一个横条，竖条，圆圈等拼凑在一起，形成一个窗户，一面墙，房顶等等部件。这些部件就如同是一个个模块一样。具备一定的功能，可以单独分开使用。不同的框架和库的模块，有很多功能类似，可以理解为你的积木是塑料的，他的是木头的，只要接口Api可以对的上，那么也可以通用。
如何提高网站性能
1…浏览器访问优化
2.减少http请求
3.使用浏览器缓存
4.启用压缩
5.CSS放在页面最上面，JavaScript放在页面最下面
6.减少Cookie传输
7.CDN加速
8.反向代理
9.应用服务器性能优化
10.分布式缓存
11.异步操作
12.使用集群
13.代码优化
怎么实现js的模块化编程？
在没有全局污染的情况下，更好的组织项目代码
你有上线项目吗？
有，具体介绍自己参与过的项目，着重把设计思路、开发过程，难题简述出来
对React的理解
react把用户界面抽象成一个个组件，如按钮组件button，对话框组件Dialog，日期组件Calendar，开发者通过组合这些组件，最终得到功能丰富、可交互的页面，通过引用jsx语法，复用组件变得非常容易，同时也能保证组件结构清晰，有了组件这层抽象，react把代码和真实渲染目标隔离开来，除了可以在浏览器端渲染到DOM来开发网页外，还能用于开发原生移动应用。
react的特点有：
1.声明式设计 −React采用声明范式，可以轻松描述应用（自动dom操作）。
2.高效 −React通过对DOM的模拟(虚拟dom)，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
React的核心是组件，精髓是函数式编程，组件的设计目的是提高代码复用率、降低测试难度和代码复杂度
对Vue的理解
· vue的语法很简单,很容易上手,可以说就是对着模板来填充内容.想要动态绑定的数据,那么就在data中填充内容.想要具体的method,那么就在methods属性中填充内容.想要显示变量就用双花括号.可以说是很简单了.
· vue使用的是MVVM模式,并且使用简单的命令加数据来进行DOM操作,让我避开了进行繁杂的获取,创建和删除DOM元素的操作.
· 借助vue的vue-router插件,可以很方便的实现单页面应用的搭建.并且可以实现浏览器中的回退效果.
· vue的组件化开发可以说很方便的就实现了组件的复用.之前想要写复用组件的时候,一方面要写重复的html,另一方面把对应的CSS文件和JS文件独立开来,需要的时候进行引入.但是vue把三者放在同一个文件中,可以说非常的贴心,修改也很方便.
对面向对象的理解

面向对象的三大特征继承，封装，多态

一继承
继承概念：一个类继承另一个类，则称继承的类为子类，被继承的类为父类。
目的：实现代码的复用。
理解：子类与父类的关系并不是日常生活中的父子关系，子类与父类而是一种特殊化与一般化的关系，是is-a的关系，子类是父类更加详细的分类。如 class dog 继承于 animal,就可以理解为dog is a animal.注意设计继承的时候.
结果：继承后子类自动拥有了父类的属性和方法，子类可以写自己特有的属性和方法，目的是实现功能的扩展，子类也可以复写父类的方法即方法的重写。

二封装
概念：封装也称为信息隐藏，是指利用抽象数据类型将数据和基于数据的操作封装在一起，使其构成一个不可分割的独立实体，数据被保护在抽象数据类型的内部，尽可能地隐藏内部的细节，只
保留一些对外接口使之与外部发生联系。系统的其他部分只有通过包裹在数据外面的被授权的操作来与这个抽象数据类型交流与交互。也就是说，用户无需知道对象内部方法的实现细节，但可以根据对象提供的外部接口(对象名和参数)访问该对象。
好处：(1)实现了专业的分工。将能实现某一特定功能的代码封装成一个独立的实体后，各程序员可以在需要的时候调用，从而实现了专业的分工。(2)隐藏信息，实现细节。通过控制访问权限可以将可以将不想让客户端程序员看到的信息隐藏起来，如某客户的银行的密码需要保密，只能对该客户开发权限。

三、多态
概念：相同的事物，调用其相同的方法，参数也相同时，但表现的行为却不同。
理解：子类以父类的身份出现，但做事情时还是以自己的方法实现。子类以父类的身份出现需要向上转型(upcast)，其中向上转型是由JVM自动实现的，是安全的，但向下转型(downcast)是不安全的，需要强制转换。子类以父类的身份出现时自己特有的属性和方法将不能使用。

“面向过程”和“面向对象”的区别
面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了；面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。

史上最全最新前端面试题（不定期更新，有问题欢迎评论区对线）相关推荐

2022最全最新前端面试题（附加解答）
JS 1.说一下innerHTML 与 innerText的作用与区别? 作用:都可以获取或者设置元素的内容区别:innerHTML可以解析内容中的html标签 innerText不能解析内容中的h ...
史上最强的前端面试题！
招聘前端不考html,不考css,js,也不考用户体验的知识,居然考这样一道面试题,汗! 我们 javascript森林群有人发了一道某公司的面试题: 题目如下: <javascript权 ...
史上最全的spark面试题——持续更新中
1.spark中的RDD是什么,有哪些特性? 答:RDD(Resilient Distributed Dataset)叫做分布式数据集,是spark中最基本的数据抽象,它代表一个不可变,可分区,里面的 ...
最新前端面试题整理和答案（全）一直更新
最新前端面试题整理和答案(全) 参考地址:https://blog.csdn.net/wdlhao/article/details/79079660 javascript: JavaScript中如何 ...
史上最全 Java 多线程面试题及答案
这篇文章主要是对多线程的问题进行总结的,因此罗列了40个多线程的问题. 这些多线程的问题,有些来源于各大网站.有些来源于自己的思考.可能有些问题网上有.可能有些问题对应的答案也有.也可能有些各位网友也 ...
史上最全阿里 Java 面试题总结及答案
史上最全阿里 Java 面试题总结及答案 qq_35151346 于 2019-08-06 13:26:53 发布 33740 收藏 817 分类专栏: 面试题文章标签: 阿里巴巴面试题答案 j ...
史上最全的iOS面试题及答案
史上最全的iOS面试题及答案 1.写一个NSString类的实现 + (id)initWithCString:(c*****t char *)nullTerminatedCString encodin ...
史上最全 BAT 大厂面试题整理
转载自史上最全 BAT 大厂面试题整理!(速度收藏) 主要分为以下几部分: (1)java面试题 (2)Android面试题 (3)高端技术面试题 (4)非技术性问题&HR问题汇总 1 ja ...
史上最全Java多线程面试题
转载自史上最全Java多线程面试题及答案多线程并发编程是Java编程中重要的一块内容,也是面试重点覆盖区域.所以,学好多线程并发编程对Java程序员来来说极其重要的. 下面小编整理了60道最常见的 ...

史上最全最新前端面试题（不定期更新，有问题欢迎评论区对线）

史上最全最新前端面试题（不定期更新，有问题欢迎评论区对线）相关推荐

最新文章

热门文章