前端面试题（持续更新）

清除浮动的几种方式：
1、 给父元素添加伪类，clear:both
2、 在结尾处添加空div，clear:both
3、 给父元素定义overflow:hidden
4、 给父元素定义overflow:auto
5、 父元素也一起浮动

水平垂直居中：
1、 绝对定位和transform
2、 display:flex

相邻选择器：+
CSS选择器：通配选择器，标签选择器，类选择器，ID选择器，后代选择器，子元素选择器，相邻兄弟选择器、伪类。

伪类：link,visited,active,hover
伪元素：:after,:before,:first-letter,:first-line

important>行内样式>id>class>tag

小程序生命周期：onLaunch>onShow>onHide
onLoad>onReady>onShow>onHide>onUnload
onReady() 页面初次渲染完成时触发。一个页面只会调用一次
onHide() 页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
onUnload() 页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时

如何提高页面加载速度：开启gzip功能对网站源文件进行压缩；减少flash或者大图片的使用；使用cdn对网站进行加速；减少HTTP请求的数量；雪碧图的使用
将js放在页面底部
压缩js文件；css样式的缩写

2成功，3重定向，请求资源已被移动到别的地方，4客户端错误，5服务端错误

请求一个网页的过程：解析域名、建立连接、发送请求、响应请求、解析html、呈现页面

什么样式会被子元素继承：color， font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height，list-style，text-align, text-indent, visibility，visibility，word-spacing

用!important可以改变优先级别为最高，其次是style行内样式，然后是id > class >tag

常见兼容性问题：
1.不同浏览器的标签默认的margin 和padding差异较大（比如低版本的ie浏览器就有默认的margin，而且数值不统一）
解决方案：CSS里 *{margin:0;padding:0;}
2.块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
_display:inline;解决

http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

常见兼容性问题
img有默认间距（给img加float:left;）

空标签：<area> <br> <hr> <img><input> <keygen><link> <meta><source>
可替换标签：
含义：指标签会被替代，例如img标签会被下载的图片替代。
典型的可替换元素有 <img>、 <object>、 <video>、<textarea>、 <input> 、 <audio> 、 <canvas> 。

link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
src表示引用资源，表示替换当前元素，用在img，script，iframe上
href 表示超文本引用(hypertext reference)，src是source资源

跨域：
1、 jsonp，被浏览器允许
2、 $.ajax({
url: ‘http://www.domain2.com:8080/login’,
type: ‘get’,
dataType: ‘jsonp’, // 请求方式为jsonp
jsonpCallback: “handleCallback”, // 自定义回调函数名
data: {}
});（jsonp缺点：只能实现get一种请求。）
3、nginx代理跨域
4、vue中处理跨域

call和apply都是改变类的方法的this指向，不同的是apply只能传两个参数，第二个是数组

js优化：
1、 阻塞式脚本：合并文件（减少http请求），将script标签放在body尾部（减少页面css，html的下载阻塞，减少界面的空白时间
2、 少DOM操作
3、 减少http请求
4、 强缓存与协商缓存区别：强缓存不会发请求到服务器，协商缓存会发请求到服务器。
5、 CSS Sprites
6、 Lazy Load Images
Cache-Control优先级比Expires高

flex-direction: row | row-reverse | column | column-reverse;

主轴justify-content: flex-start | flex-end | center | space-between | space-around;
交叉轴align-items: flex-start | flex-end | center | baseline | stretch;
BFC 即 Block Formatting Contexts (块级格式化上下文)

触发bfc:float,position,overflow,display

mvvm:
• View 代表UI视图，负责数据的展示；
• ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；
• Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。

的title和alt有什么区别:
Alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示
title 可提高图片高可访问性，搜索引擎会重点分析。鼠标滑过时显示的文字。

https在http的基础上多加了ssl层，所以http有三次握手，https有7次握手

不可继承的样式：border padding margin width height ;

important 比 内联优先级高,但内联比 id 要高

:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。
:only-child 选择器匹配属于父元素中唯一子元素的元素。
CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个

元素的每个

元素。
p:last-of-type 选择属于其父元素的最后

元素的每个

元素。
p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。
p:only-child 选择属于其父元素的唯一子元素的每个

元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

absolute，相对于 static 定位以外的第一个祖先元素进行定位。
*fixed （老IE不支持），相对于浏览器窗口进行定位。
relative，相对于其在普通流中的位置进行定位。
static 默认值。没有定位，元素出现在正常的流中
inherit 规定从父元素继承 position 属性的值。

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。

Doctype作用? 严格模式与混杂模式如何区分

_ie6
+ie6,7
\9ie6,7,8

1、统一通过getAttribute()获取自定义属性.
2、IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性
3、Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决
4、超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
5、ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点.
语义化更好的内容标签（header,nav,footer,aside,article,section）
表单控件，calendar、date、time、email、url、search
==》IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

请说出三种减少页面加载时间的方法。
1.优化图片
2.优化CSS（压缩合并css，如margin-top,margin-left…)
3.减少http请求（合并文件，合并图片）
jsonp的原理是动态插入script标签
documen.write和 innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
针对不同版本的IE的hack实践过优雅降级
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能
你有哪些性能优化的方法？
1.减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
2.用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
3.当需要设置的样式很多时设置className而不是直接操作style。
4.少用全局变量、缓存DOM节点查找的结果。
5.图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。也就是说，它会先使用options去测试，你这个接口是否能够正常通讯，如果不能就不会发送真正的请求过来，如果测试通讯正常，则开始正常请求。
解决方法：需要在后台进行设置，允许options请求