面试问题总结
面试了两家公司，第一家没有笔试直接面试，第二家笔试+面试，将记得住的问题记录下来，答案本身找的，有好的答案欢迎提出。javascript
一、响应式布局
一家公司问了em和rem的区别，另外一家公司先问了一下px,em,rem的区别，而后又问是否熟悉响应式布局php
（1）px,em,rem的区别css
px:像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。html
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。实际上只须要知道em是相对于父元素的就好了，父元素字体大小是10px，1em就等于10px。前端
rem也是相对长度单位，但相对的只是HTML根元素html5
目前，除了IE8及更早版本外，全部浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。java
p {font-size:14px; font-size:.875rem;}
（2）响应式布局ios
流式布局%，em,rem，弹性布局flex都属于响应式布局,固然最出名的是媒体查询web
流式布局和弹性布局及配合媒体查询 是 响应性布局的最好方式。面试
详情参考手把手教你响应式布局（一）
二、两栏布局，一侧固定一侧自适应的几种方式
<div class="wrapper" id="wrapper"> <div class="left"> 左边固定宽度，高度不固定 </br> </br></br></br>高度有可能会很小，也可能很大。 </div> <div class="right"> 这里的内容可能比左侧高，也可能比左侧低。宽度须要自适应。</br> 基本的样式是，两个div相距20px, 左侧div宽 120px </div> </div>
（1）基本方法
.wrapper { padding: 15px 20px; border: 1px dashed #ff6c60; } .left { width: 120px; border: 5px solid #ddd; } .right { margin-left: 20px; border: 5px solid #ddd; }
（2）float方法
.wrapper-float { overflow: hidden; // 清除浮动 } .wrapper-float .left { float: left; } .wrapper-float .right { margin-left: 140px; }
（3）使用float+BFC方法
.wrapper-float-bfc { overflow: auto; } .wrapper-float-bfc .left { float: left; margin-right: 20px; } .wrapper-float-bfc .right { margin-left: 0; overflow: auto; }
（4）使用absolute+margin-left方法
.wrapper-absolute .left { position: absolute; } .wrapper-absolute .right { margin-left: 150px; }
(5)flex方案
.wrapper-flex { display: flex; align-items: flex-start; } .wrapper-flex .left { flex: 0 0 auto; } .wrapper-flex .right { flex: 1 1 auto; }
须要注意的是，flex容器的一个默认属性值:align-items: stretch;。这个属性致使了列等高的效果。
为了让两个盒子高度自动，须要设置: align-items: flex-start;
三、h5废弃的标签和属性及新增的标签和属性
四、浏览器的内核有哪些
一、IE浏览器内核：Trident内核，也被称为IE内核；
二、Chrome浏览器内核：Chromium内核 → Webkit内核 → Blink内核；
三、Firefox浏览器内核：Gecko内核，也被称Firefox内核；
四、Safari浏览器内核：Webkit内核；
五、Opera浏览器内核：最初是自主研发的Presto内核，后跟随谷歌，从Webkit到Blink内核；
五、box-sizing有哪几种
box-sizing: content-box | border-box | inherit;
六、经过原生js和jQuery获取元素的区别
jQuery获取的是jQuery对象，原生js获取到的是DOM元素
七、工做中的增删改查是哪些方法
新增一条数据，编辑原有数据，删除数据，查询数据
八、Vue的生命周期有哪些，页面挂载以前beforecreated到mounted使用的区别
beforeCreate（建立前）,created（建立后）,
beforeMount(载入前),mounted（载入后）,
beforeUpdate（更新前）,updated（更新后）,
beforeDestroy（销毁前）,destroyed（销毁后）
beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载
beforecreate : 举个栗子：能够在这加个loading事件
created ：在这结束loading，还作一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子作一些事情
beforeDestroy： 你确认删除XX吗？
destroyed ：当前组件已被删除，清空相关内容
九、你作过哪些性能优化
1、减小HTTP请求
CSS Sprites直译过来就是CSS精灵
在能够大量使用字体图标的地方咱们能够尽量使用字体图标，字体图标能够减小不少图片的使用，从而减小http请求，字体图标还能够经过CSS来设置颜色、大小等样式
合并脚本 和样式表：将多个样式表或者脚本文件合并到一个文件中，能够减小HTTP请求的数量从而缩短效应时间。
然而合并全部文件对许多人尤为是编写模块化代码的人来讲是不能忍的，并且合并全部的样式文件或者脚本文件可能会致使在一个页面加载时加载了多于本身所须要的样式或者脚本，对于只访问该网站一个（或几个）页面的人来讲反而增长了下载量，因此你们应该本身权衡利弊
2、使用CDN
3、添加Expires头
页面的初次访问者会进行不少HTTP请求，可是经过使用一个长久的Expires头，可使这些组件被缓存，下次访问的时候，就能够减小没必要要的HTPP请求，从而提升加载速度。
Web服务器经过Expires头告诉客户端可使用一个组件的当前副本，直到指定的时间为止。例如：
Expires: Fri, 18 Mar 2016 07:41:53 GMT
Expires缺点： 它要求服务器和客户端时钟严格同步；过时日期须要常常检查
HTTP1.1中引入Cache-Control来克服Expires头的限制，使用max-age指定组件被缓存多久。
Cache-Control： max-age=12345600
若同时制定Cache-Control和Expires，则max-age将覆盖Expires头
4、压缩组件
从HTTP1.1开始，Web客户端能够经过HTTP请求中的Accept-Encoding头来表示对压缩的支持
Accept-Encoding: gzip,deflate
若是Web服务器看到请求中有这个头，就会使用客户端列出来的方法中的一种来进行压缩。Web服务器经过响应中的Content-Encoding来通知 Web客户端。
Content-Encoding: gzip
5、将样式表放在头部
首先说明一下，将样式表放在头部对于实际页面加载的时间并不能形成太大影响，可是这会减小页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。
咱们老是但愿页面可以尽快显示内容，为用户提供可视化的回馈，这对网速慢的用户来讲是很重要的。
将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了不当样式变化时重绘页面元素，浏览器会阻塞内容逐步呈现，形成“白屏”。这源自浏览器的行为：若是样式表仍在加载，构建呈现树就是一种浪费，由于全部样式表加载解析完毕以前务虚会之任何东西
6、将脚本放在底部
更样式表相同，脚本放在底部对于实际页面加载的时间并不能形成太大影响，可是这会减小页面首屏出现的时间，使页面内容逐步呈现。
js的下载和执行会阻塞Dom树的构建（严谨地说是中断了Dom树的更新），因此script标签放在首屏范围内的HTML代码段里会截断首屏的内容。
下载脚本时并行下载是被禁用的——即便使用了不一样的主机名，也不会启用其余的下载。由于脚本可能修改页面内容，所以浏览器会等待；另外，也是为了保证脚本可以按照正确的顺序执行，由于后面的脚本可能与前面的脚本存在依赖关系，不按照顺序执行可能会产生错误。
7、使用外部的JavaScript和CSS
内联脚本或者样式能够减小HTTP请求，按理来讲能够提升页面加载的速度。然而在实际状况中，当脚本或者样式是从外部引入的文件，浏览器就有可能缓存它们，从而在之后加载的时候可以直接使用缓存，而HTML文档的大小减少，从而提升加载速度。
影响因素：
一、每一个用户产生的页面浏览量越少，内联脚本和样式的论据越强势。譬如一个用户每月只访问你的网站一两次，那么这种状况下内联将会更好。而若是该用户可以产生不少页面浏览量，那么缓存的样式和脚本将会极大减小下载的时间，提交页面加载速度。
二、若是你的网站不一样的页面之间使用的组件大体相同，那么使用外部文件能够提升这些组件的重用率。
8、精简JavaScript
移除没必要要的空白字符（空格，换行、制表符），这样整个文件的大小就变小了。
通常来讲，压缩产生的节省是高于精简的，在生产环境中，精简和压缩同时使用可以最大限度的得到更多的节省。
CSS的精简
CSS的精简带来的节省通常来讲是小于JavaScript精简的，由于CSS中注释和空白相对较少。
除了移除空白、注释以外，CSS能够经过优化来得到更多的节省：
合并相同的类；
移除不使用的类；
9、避免重定向
当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达以前，页面中不会呈现任何东西，也没有任何组件会被下载。
来看一个实际例子：对于ASP.NET webform开发来讲，对于新手很容易犯一个错误，就是把页面的链接写成服务器控件后台代码里，例如用一个Button控件，在它的后台click事件中写上：Response.Redirect("")；然而这个Button的做用只是转移URL，这是很是低效的作法，由于点击Button后，先发送一个Post请求给服务器，服务器处理Response.Redirect("")后就发送一个302响应给浏览器，浏览器再根据响应的URL发送GET请求。正确的作法应该是在html页面直接使用a标签作连接，这样就避免了多余的post和重定向。
十、截取字符串的方法有哪些？参数的区别？
slice(start,[end])
第一个参数表明开始位置,第二个参数表明结束位置的下一个位置,截取出来的字符串的长度为第二个参数与第一个参数之间的差;若参数值为负数,则将该值加上字符串长度后转为正值;若第一个参数等于大于第二个参数,则返回空字符串...
substring(start,[end])
第一个参数表明开始位置,第二个参数表明结束位置的下一个位置;若参数值为负数,则将该值转为0;两个参数中,取较小值做为开始位置,截取出来的字符串的长度为较大值与较小值之间的差.
substr(start,[length])
第一个参数表明开始位置,第二个参数表明截取的长度
函数：split()
功能：使用一个指定的分隔符把一个字符串分割存储到数组
例子：
str=”jpg|bmp|gif|ico|png”;
arr=theString.split(”|”);
//arr是一个包含字符值”jpg”、”bmp”、”gif”、”ico”和”png”的数组
函数：John()
功能：使用您选择的分隔符将一个数组合并为一个字符串
例子：
var delimitedString=myArray.join(delimiter);
var myList=new Array(”jpg”,”bmp”,”gif”,”ico”,”png”);
var portableList=myList.join(”|”);
//结果是jpg|bmp|gif|ico|png
function func(s, n) { return s.slice(0, n).replace(/([^x00-xff])/g, “$1a”).slice(0, n).replace(/([^x00-xff])a/g, “$1″); }
十一、改变this指向的方法有哪些？call和apply的区别
call方法:
语法：call(thisObj，Object) //对象，参数集
定义：调用一个对象的一个方法，以另外一个对象替换当前对象。
说明：
call 方法能够用来代替另外一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
若是没有提供 thisObj 参数，那么 Global 对象被用做 thisObj。
apply方法：
语法：apply(thisObj，[argArray]) //对象，数组
定义：应用某一对象的一个方法，用另外一个对象替换当前对象。
说明：
若是 argArray 不是一个有效的数组或者不是 arguments 对象，那么将致使一个 TypeError。
若是没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用做 thisObj， 而且没法被传递任何参数。
call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,由于属于Function.prototype,因此每一个Function对象实例,也就是每一个方法都有call, apply属性.既然做为方法的属性,那它们的使用就固然是针对方法的了.这两个方法是容易混淆的,由于它们的做用同样,只是使用方式不一样.
$.proxy(fn,context)改变this的指向 fn必须是一个函数
ES5还定义了一个方法：bind()
js改变this指向方法call,apply;jq改变this指向方法$.proxy()
十二、知道哪些ES6语法，解构赋值数组和对象的区别？
数组以序列号一一对应，这是一个有序的对应关系。
而对象根据属性名一一对应，这是一个无序的对应关系，属性名一致便可。根据这个特性，使用解析结构从对象中获取属性值更加具备可用性。
1三、你对jQuery优化有哪些建议？
一、老是使用#id去寻找element. 在Classes前面使用Tags
二、缓存jQuery对象，能够用逗号隔开一次定义多个本地变量，这样能够节省一些字节。
三、更好的利用链
四、事件委托（又名：冒泡事件）
五、听从$(windows).load
1四、AMD和CMD
AMD： 即Asynchronous Module Definition，中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范。因为不是JavaScript原生支持，使用AMD规范进行页面开发须要用到对应的库函数，也就是大名鼎鼎RequireJS，实际上AMD 是 RequireJS 在推广过程当中对模块定义的规范化的产出。
requireJS主要解决两个问题
一、多个js文件可能有依赖关系，被依赖的文件须要早于依赖它的文件加载到浏览器
二、js加载的时候浏览器会中止页面渲染，加载文件越多，页面失去响应时间越长
require([dependencies], function(){});
require()函数接受两个参数
第一个参数是一个数组，表示所依赖的模块
第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可使用这些模块
require()函数在加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。
CMD： 即Common Module Definition通用模块定义，CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS，SeaJS要解决的问题和requireJS同样，只不过在模块定义方式和模块加载（能够说运行、解析）时机上有所不一样
1五、如何建立一个对象，划出内存图
1、原始方法
经过new关键字生成一个对象，而后根据JavaScript是动态语言的特性来添加属性和方法，构造一个对象。其中的this表示调用该方法的对象。
二：工厂方法（构造函数）
<script> function Person(name,age){ this.name = name; this.age = age; this.showName = function () { console.log(this.name); }; this.showAge = function () { console.log(this.age); }; } var obj1 = new Person("Kitty","21"); var obj2 = new Person("Luo","22"); obj1.showName();//Kitty obj1.showAge();//21 obj2.showName();//luo obj2.showAge();//22 </script>
工厂方法为每一个对象都建立逻辑相同的方法，很浪费内存。
三：混合的构造函数/原型方式
<script> function Person(name,age){ this.name = name; this.age = age; this.array = new Array("Kitty","luo"); } Person.prototype.showName = function (){ console.log(this.name); }; Person.prototype.showArray = function (){ console.log(this.array); }; var obj1 = new Person("Kitty",21); var obj2 = new Person("luo",22); obj1.array.push("Wendy");//向obj1的array属性添加一个元素 obj1.showArray();//Kitty,luo,Wendy obj1.showName();//Kitty obj2.showArray();//Kitty,luo obj2.showName();//luo </script>
四：动态原型方法
<script> function Person(name,age){ this.name = name; this.age = age; this.array = new Array("Kitty","luo"); //若是Person对象中_initialized 为undefined，代表尚未为Person的原型添加方法 if(typeof Person._initialized == "undefined"){ Person.prototype.showName = function () { console.log(this.name); }; Person.prototype.showArray = function () { console.log(this.array); }; Person._initialized = true; } } var obj1 = new Person("Kitty",21); var obj2 = new Person("luo",22); obj1.array.push("Wendy");//向obj1的array属性添加一个元素 obj1.showArray();//Kitty,luo,Wendy obj1.showName();//Kitty obj2.showArray();//Kitty,luo obj2.showName();//luo </script>
参考：JavaScript如何建立一个对象
1六、new具体作了哪些事情
var fn = function () { }; var fnObj = new fn();
（1）建立一个空对象
var obj = newobject();
（2）设置原型链
obj._proto_ = fn.prototype;
（3）让fn的this指向obj，并执行fn的函数体
var result = fn.call(obj);
（4）判断fn的返回值类型，若是是值类型，返回obj。若是是引用类型，就返回这个引用类型的对象。
if (typeof(result) == "object"){ fnObj = result; } else { fnObj = obj; }
new 操做符具体干了什么？
- 建立一个新的对象
- 将构造函数的做用域赋值给新对象（this执行新的对象）
- 执行构造函数的代码
- 返回新的对象
1七、CSS3有哪些新特性，如何兼容CSS3和H5新标签？
CSS3新特性：
border-radius box-shadow border-image text-overflow @font-face 规则 //2D转换 translate() rotate() scale() skew() matrix() //3D转换 rotateX() rotateY()
渐变：linear-gradient、radial-gradient
transition //过渡 @keyframes animation //动画
//多列 column-count //多少列 column-gap //列的间隙 //多列边框 column-rule-style column-rule-width column-rule-color column-rule column-span //元素跨越多少列 column-width //列宽
box-sizing
Flex Box
@media CSS3 根据设置自适应显示
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
CSS3兼容写法： -webkit-, -ms- （IE）或 -moz- （FF），-o-
IE8浏览器中尚未添加对HTML5新标签的支持，因此在IE8中没法直接展示HTML5新标签中的内容。庆幸的是IE8/IE7/IE6支持经过document.createElement方法产生的标签，能够利用这一特性让这些浏览器支持HTML5新标签，代码以下：
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', '); var i= e.length; while (i--){ document.createElement(e[i]) }
浏览器支持新标签后，还须要添加标签默认的样式： article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block} mark{background:#FF0;color:#000}
1八、doctype声明，严格模式和混合模式是什么，意义？
放在网页顶部的doctype声明是让浏览器进入正确呈现模式的关键。浏览器自动切换到恰当的呈现模式，以便正确显示由doctype声明所指定的文档种类。
doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的状况下，“阅读程序”一般是浏览器或者校验器这样的一个程序，“规则”则是W3C所发布的一个文档类型定义（DTD）中包含的规则。
1九、浏览器常见兼容问题
1：不一样浏览器的标签默认的外补丁和内补丁不一样
- 解决方案：css里
*{margin:0;padding:0;}
2：图片默认有间距
- 解决方案：使用float属性为img布局
3：透明度的兼容css设置
最全整理浏览器兼容性问题与解决方案、常见的浏览器兼容性问题总结
20、定位有哪些
static：默认值，块级元素和行内元素按照各自的特性进行显示
relative:相对定位,元素相对于本来位置的定位，元素不脱离文档流，位置会被保留，其余的元素位置不会受到影响，不会改变元素的display属性
absolute：绝对定位，相对于static之外的第一个父元素进行定位，如何不存在这样的包含块则相对于body进行定位。脱离文档流，并改变了display属性，元素自己生成块级框（能够设置宽高，不设置宽度时宽高由内容撑开，不继承父级宽度，能够在一行显示，换行符不解析）
fixed:固定定位，相对于浏览器窗口进行定位。脱离文档流，并改变了display属性，元素自己生成块级框。
inherit:从父元素继承 position 属性的值。IE8以及之前的版本都不支持inherit属性。
sticky:粘性定位，它结合了结合了position:relative 和 position:fixed 两种定位功能于一体的特殊定位
2一、如何实现div居中，如何让float元素居中
.center { display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; }
.center { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
//浮动元素居中 //子元素在父元素里面垂直居中 //父元素设置 ｛ display:table-cell; vertical-align:middle; ｝ //浮动元素既垂直又水平居中的方法 { display:table-cell; vertical-align:middle; margin:0 auto; }
DIV居中的几种方法
2二、如何区分html和html5
1. 拖拽释放(Drag and drop) API 2. 语义化更好的内容标签（header,nav,footer,aside,article,section） 3. 音频、视频API(audio,video) 4. 画布(Canvas) API 5. 地理(Geolocation) API 6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； 7. sessionStorage 的数据在浏览器关闭后自动删除 8. 表单控件，calendar、date、time、email、url、search 9. 新的技术webworker, websocket, Geolocation支持HTML5新标签：
2三、CSS选择器有哪些？它们的优先级顺序怎么样？CSS3增长了哪些伪类选择器？
ID选择符 #box
类选择符 .box
标签 div
伪类和伪元素 link、visited、active、hover
总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
CSS选择器优先级总结
2四、对json的理解
JSON，是一种轻量级数据交换格式，是一种传递对象的语法，JSON可以作到字符串到对象之间的转换
JSON.stringify()方法用于将一个值转为字符串。该字符串应该符合JSON格式，而且能够被JSON.parse()方法还原
默认状况下，JSON.stringify()输出的JSON字符串不包括任何空格字符或缩进
2五、get和post的区别
get和post是HTTP与服务器交互的方式，get用于获取数据，post用于提交数据
GET和POST本质上就是TCP连接，并没有差异。可是因为HTTP的规定和浏览器/服务器的限制，致使他们在应用过程当中体现出一些不一样。
GET后退按钮/刷新无害，POST数据会被从新提交（浏览器应该告知用户数据会被从新提交）。 GET能被缓存，POST不能缓存 。 GET历史参数保留在浏览器历史中。POST参数不会保存在浏览器历史中。 GET对数据长度有限制，当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。POST无限制。 与 POST 相比，GET 的安全性较差，由于所发送的数据是 URL 的一部分。
GET和POST还有一个重大区别，简单的说：
GET产生一个TCP数据包；POST产生两个TCP数据包。
长的说：
对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
GET和POST两种基本请求方法的区别、get和post区别？
2六、link与@import的区别
1.从属关系区别@import是 CSS 提供的语法规则，只有导入样式表的做用；link是HTML提供的标签，不只能够加载 CSS 文件，还能够定义 RSS、rel 链接属性等。
2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签做为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别
能够经过 JS 操做 DOM ，插入link标签来改变样式；因为 DOM 方法是基于文档的，没法使用@import的方式插入样式。
就结论而言，强烈建议使用link标签，慎用@import方式。
2七、如何实现移动端字体大小屏幕自适应，百分比方法的缺点，rem的做用
（1）用媒体查询+rem
@media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) { //针对iPhone 4, 5c,5s, 全部iPhone6的放大模式，个别iPhone6的标准模式 html{font-size:10px;} } @media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2) { //针对大多数iPhone6的标准模式 html{font-size:12px;} } @media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) { //针对全部iPhone6+的放大模式 html{font-size:16px;} } @media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio: 3) { //针对全部iPhone6+的标准模式,414px写为412px是因为三星Nexus 6为412px，可一并处理 html{<font-size:20px;} }
（2）js+rem
按照设计稿的宽去设置一个合适的rem ,配合js查询屏幕大小来改变html的font-size，从而达到适配各类屏幕的效果
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth;<br>window.innerWidth>max ? window.innerWidth : max; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); //这个方法就是在监听屏幕的宽度，而后根据不一样的屏幕作出反应 //orientationchange :检测屏幕发生反转时，就是是横屏仍是竖屏时 //clientWidth :就是设备的宽度 //docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; 核心就是这句设置根元素的字体大小是clientWidth/320*20 //document.documentElement.clientWidth 屏幕宽度
（3）CSS3的计算calc和vw单位
calc()的运算规则
使用“+”、“-”、“*” 和 “/”四则运算； 可使用百分比、px、em、rem等单位； 能够混合使用各类单位进行计算； 表达式中有“+”和“-”时，其先后必需要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的； 表达式中有“*”和“/”时，其先后能够没有空格，但建议留有空格。
.elm { /*Firefox*/ -moz-calc(expression); /*chrome safari*/ -webkit-calc(expression); /*Standard */ calc(); }
VW：相对于视口的宽度。视口被均分为100单位的vw，也就是说在375宽度的屏幕中，1vw等于3.75px，320的屏幕中，1vw等于3.2px。这样的话对于不一样尺寸的屏幕有了一个统一的单位来进行衡量，这时咱们再结合rem，即对HTML设置字体大小font-size：calc(100vw/18.75)——这是以iPhone6的尺寸为设计图时作的计算，此时在iPhone6尺寸的页面中1rem为20px；
2八、如何封装ajax？参数是什么对象？
export const BASEURL = '/api/' export function ajax(options){ let config = { url:options.url, method:options.method || 'get', params:options.params || {}, data:options.data || {}, headers:options.headers || {} } axios.interceptors.response.use((response) => { //响应拦截器 if (response.data.errorCode === '401') { router.push('/login') message({ message:'会话失效，请从新登录', type:'error' }) return response } else { return response } }, (error) => { return Promise.reject(error) }) return axios(config).catch((e) => { if(!e.response){ router.push('/login') message({ message:'会话失效，请从新登录', type:'error' }) }else{ if(e.response.status === 504){ message({ message:"网关超时", type:'error' }) }else{ message({ message:e.response.data.msg, type:'error' }) } } }) }
2九、事件委托的原理是什么？何时须要事件委托？
事件委托的原理是事件冒泡机制
当动态建立元素的时候，由于DOM不存在的时候没法添加事件，因此须要委托给父元素
30、懒加载多页面优化
- 1. vue 面试问题总结
- 2. .net面试问题总结
- 3. java 面试问题总结
- 4. Java面试问题总结
- 5. 面试问题总结
- 6. 111111111111111111111111JVM面试问题总结
- 7. MySQL 面试问题总结
- 8. HR面试问题总结（HR面经）
- 9. 面试常问问题总结
- 10. flask面试常问问题总结
- 更多相关文章...
- • Lua 调试(Debug) - Lua 教程
- • Markdown 标题 - Markdown 教程
- • 算法总结-双指针
- • 算法总结-回溯法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. vue 面试问题总结
- 2. .net面试问题总结
- 3. java 面试问题总结
- 4. Java面试问题总结
- 5. 面试问题总结
- 6. 111111111111111111111111JVM面试问题总结
- 7. MySQL 面试问题总结
- 8. HR面试问题总结（HR面经）
- 9. 面试常问问题总结
- 10. flask面试常问问题总结