面试基础（2018-03-16）
1、 Doctype作用？标准模式与兼容模式各有什么区别?
1、声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
2、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）； 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
2、 viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
width:设置viewport的宽度，值为正整数或者device-width(设备宽度);
initial-scale:设置默认缩放比例；
minimum-scale:允许用户缩放的最小比例；
maximum-scale:允许用户缩放的最大比例；
user-scalable:是否允许手动缩放；
延伸提问：怎样处理 移动端 1px 被渲染成 2px 问题？
1、局部处理
meta 标签中的 viewport 属性 ，initial-scale 设置为 1rem 按照设计稿标准走，外加利用 transfrome 的 scale(0.5) 缩小一倍即可；
2、全局处理
meta 标签中的 viewport 属性 ，initial-scale 设置为 0.5rem 按照设计稿标准走即可
可能用到的meta标签：
3、 实现跨域的几种方式
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
1、 通过jsonp跨域，原生实现：
var script = document.createElement('script');
script.type = 'text/javascript';
// 传参并指定回调执行函数为onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
// 回调执行函数
function onBack(res) {
alert(JSON.stringify(res));
}
2、nginx 代理跨域
3、nodejs 中间件代理跨域
4、后端在头部信息里面设置安全域名
4、块级元素有哪些？行内元素有哪些？空元素有哪些？
块级元素：div、ul、ol、li、dl、dt、dd、p、h1~h4
行内元素：span、img、b、strong（强调）、input、select
空元素：<br>、<hr>、<img>
5、 link和@import有什么区别？
1、link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
2、页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
3、import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
6、HTML语义化的理解？
用正确的标签做正确的事情。html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
7、 cookies，sessionStorage 和 localStorage 的区别？
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。存储大小： cookie数据大小不能超过4k。 sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。有期时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage 数据在当前浏览器窗口关闭后自动删除。 cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
8、如何实现浏览器内多个标签页之间的通信? (阿里)
WebSocket、SharedWorker；也可以调用localstorge、cookies等本地存储方式；localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信；注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；
9、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
1、有两种， IE 盒子模型、W3C 盒子模型；
2、盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
3、区 别： IE的content部分把 border 和 padding计算了进去;
10、 CSS选择符有哪些？哪些属性可以继承？
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a:hover, li:nth-child）
可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height ;
11、CSS优先级算法如何计算？
优先级就近原则，同权重情况下样式定义最近者为准;载入样式以最后载入的定位为准;
!important > id > class > tag
important 比 内联优先级高
12、CSS3新增伪类有那些？
p:first-of-type 选择属于其父元素的首个元素的每个元素。
p:last-of-type 选择属于其父元素的最后元素的每个元素。p:only-of-type 选择属于其父元素唯一的元素的每个元素。
p:only-child 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容
:enabled
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
13、 css定义的权重
以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
/*权重为1*/
div{}
/*权重为10*/
.class1{}
/*权重为100*/
#id1{}
/*权重为100+1=101*/
#id1 div{}
/*权重为10+1=11*/
.class1 div{}
/*权重为10+10+1=21*/
.class1 .class2 div{}
14、介绍js的基本数据类型。
Undefined、Null、Boolean、Number、String
15、js有哪些内置对象？
Object 是 JavaScript 中所有对象的父对象
数据封装类对象：Object、Array、Boolean、Number 和 String其他对象：Function、Arguments、Math、Date、RegExp、Error
16、 JavaScript原型，原型链 ? 有什么特点？
每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。关系：instance.constructor.prototype = instance.__proto__
特点：JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话， 就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。 function Func(){} Func.prototype.name = "Sean"; Func.prototype.getInfo = function() { return this.name; } var person = new Func();//现在可以参考var person = Object.create(oldObject); console.log(person.getInfo());//它拥有了Func的属性和方法 //"Sean" console.log(Func.prototype); // Func { name="Sean", getInfo=function()}
17、JavaScript有几种类型的值？，你能画一下他们的内存图吗？
栈：原始数据类型（Undefined，Null，Boolean，Number、String） 堆：引用数据类型（对象、数组和函数）两种类型的区别是：存储位置不同；原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体
18、Javascript如何实现继承？
1、构造继承2、原型继承3、实例继承4、拷贝继承原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。
function Parent(){
this.name = 'wang';
}
function Child(){
this.age = 28;
}
Child.prototype = new Parent();//继承了Parent，通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被继承的属性
}
19、eval
它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')');
20、 js常会问的问题：找出字符串中出现次数最多的字符。
let testStr = 'asdasddsfdsfadsfdghdadsdfdgdasd';
function getMax(str) {
let obj = {};
for(let i in str) {
if(obj[str[i]]) {
obj[str[i]]++;
}else{
obj[str[i]] = 1;
}
}
let keys = Object.keys(obj); // 获取对象中所有key的值返回数组
let values = Object.values(obj); // 获取所有value返回数组
let maxVal = Math.max(...values);// Math.max可以找出传入参数的最大值，如：Math.max(1,2);这里可使用es6中的解构，
也可以使用Math.max.apply(Math,values)可认为是apply(Math.max, arr)
然后，arr是一个参数列表，对于max方法，其参数是若干个数，即Math.max(a, b, c, d, ...)
console.log(keys[values.indexOf(maxVal)],maxVal);
}
getMax(testStr);
// obj值：{a: 5, s: 7, d: 12, f: 4, g: 2, h: 1, s: 7,}
keys[values.indexOf(maxVal)] => value里面最大的数字的位置，最大数字位置对应的key。
maxVal最大的数，也就是出现做多的次数。str[i]是对应字符串中的第i个字符，obj[str[i]] 就是对应的每个字母for循环就是把里面出现了的字母作为obj这个对象的key，然后循环的时候判断obj里面有没有以str[i]为key的对象，如有，就把它的value加一，说明这个字母在obj中出现的次数多了一次；刚开始i是键名，str[i]是键值，用这个键值再做obj的键名，然后赋值，或累加
eg：
obj[str[i]] = 1; => var obj={};obj.aa = 1;console.log(obj)
//正则
let stringMax = (str) => {
str = str.split('').sort().join('');
var s = str.match(/(\w+)(\1)/g);
if(s === null) {
return str[0];
}
s = s.map(e => e=e+e[0]);
var out = s.sort((a,b) =>b.length - a.length);
console.log(out[0][0],out[0].length);
};
stringMax(testStr)
30、渲染优化
1.禁止使用iframe（阻塞父文档onload事件）
iframe会阻塞主页面的Onload事件；
搜索引擎的检索程序无法解读这种页面，不利于SEO;
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题。
2.禁止使用gif图片实现loading效果（降低CPU消耗，提升渲染性能）；
3、使用CSS3代码代替JS动画（尽可能避免重绘重排以及回流）；
4、对于一些小图标，可以使用base64位编码，以减少网络请求。但不建议大图使用，比较耗费CPU；
小图标优势在于：
1.减少HTTP请求；
2.避免文件跨域；
3.修改及时生效；
5、页面头部的 会阻塞页面；（因为 Renderer进程中 JS线程和渲染线程是互斥的）；
6、页面头部 会阻塞页面；（因为 Renderer进程中 JS线程和渲染线程是互斥的）；
7、页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程)；
8、网页Gzip，CDN托管，data缓存 ，图片服务器；
9、前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
10、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
11、当需要设置的样式很多时设置className而不是直接操作style。
12、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
13、避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
14、图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
15、 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。 向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法"优化"的。
31、快速的让一个数组乱序
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(function(){
return Math.random() - 0.5;
})
console.log(arr);
32、 字体font-family
@ 宋体 SimSun
@ 黑体 SimHei
@ 微信雅黑 Microsoft Yahei
@ 微软正黑体 Microsoft JhengHei
@ 新宋体 NSimSun
@ 新细明体 MingLiU
@ 细明体 MingLiU
@ 标楷体 DFKai-SB
@ 仿宋 FangSong
@ 楷体 KaiTi
@ 仿宋_GB2312 FangSong_GB2312
@ 楷体_GB2312 KaiTi_GB2312 @
@ 说明：中文字体多数使用宋体、雅黑，英文用Helvetica
body { font-family: Microsoft Yahei,SimSun,Helvetica; }
33、消除 transition 闪屏
css { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000;
}
过渡动画（在没有启动硬件加速的情况下）会出现抖动的现象， 以上的解决方案只是改变视角来启动硬件加速的一种方式；启动硬件加速的另外一种方式：
.css { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0);
}
启动硬件加速
最常用的方式：translate3d、translateZ、transform
opacity 属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态）
will-chang 属性（这个比较偏僻），一般配合opacity与translate使用（而且经测试，除了上述可以引发硬件加速的属性外，其它属性并不会变成复合层）。
弊端：硬件加速会导致 CPU 性能占用量过大，电池电量消耗加大 ；因此尽量避免泛滥使用硬件加速。
34、JS 判断设备来源
/ 判断移动端设备
function deviceType(){
var ua = navigator.userAgent;
var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
for(var i=0; i0){
break; } }
}
deviceType();
window.addEventListener('resize', function(){ deviceType();
})
// 判断微信浏览器
function isWeixin(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=='micromessenger'){ return true; }else{ return false; }
}
35、 audio元素和video元素在ios和andriod中无法自动播放
原因：因为各大浏览器都为了节省流量，做出了优化，在用户没有行为动作时（交互）不予许自动播放；
//音频，写法一
<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦 </audio>
//音频，写法二
<audio controls="controls">
source src="music/bg.ogg" type="audio/ogg">
source src="music/bg.mp3" type="audio/mpeg">
优先播放音乐bg.ogg，不支持在播放bg.mp3
</audio>
//JS绑定自动播放（操作window时，播放音乐）
$(window).one('touchstart', function(){ music.play();
})
//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () { music.play();
}, false);
//小结
//1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常；
//2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间；
//3.注意不要遗漏微信的兼容处理需要引用微信JS；
36、css实现单行文本溢出显示 ...
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
37、实现多行文本溢出显示...
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
38、让图文不可复制
-webkit-user-select: none;-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
