前端小知识点总结，助力你成功面试！

1.Doctype的作用:此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 2.严格模式与混杂模式如何区分？有何意义？ 区分浏览器的使用的标准 3.什么是web语义化,有什么好处？ ＝>去掉样式后页面呈现清晰的结构 =>盲人使用读屏器更好地阅读 =>搜索引擎更好地理解页面，有利于收录 =>便团队项目的可持续运作及维护

4.如何进行网站性能优化 1.前端方面: =>减少HTTP请求：合并文件、CSS精灵、inline Image =>减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询 =>避免重定向：多余的中间访问 =>使Ajax可缓存 =>非必须组件延迟加载 =>未来所需组件预加载 =>减少DOM元素数量 =>将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量 =>减少iframe数量 =>不要404

2.Server方面

=>使用CDN =>添加Expires或者Cache-Control响应头 =>对组件使用Gzip压缩 =>配置ETag =>Flush Buffer Early =>Ajax使用GET进行请求 =>避免空src的img标签

3.Cookie方面 =>减小cookie大小 =>引入资源的域名不要包含cookie =>css方面 =>将样式表放到页面顶部 =>不使用CSS表达式 =>使用不使用@import =>不使用IE的Filter 4.Javascript方面 =>将脚本放到页面底部 =>将javascript和css从外部引入 =>压缩javascript和css =>删除不需要的脚本 =>减少DOM访问 =>合理设计事件监听器 5.图片方面 =>优化图片：根据实际颜色需要选择色深、压缩 =>优化css精灵 =>不要在HTML中拉伸图片 =>保证favicon.ico小并且可缓存 6.移动方面 =>保证组件小于25k =>Pack Components into a Multipart Document

1.css sprite是什么,有什么优缺点

=>概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。

1.优点： 减少HTTP请求数，极大地提高页面加载速度 增加图片信息重复度，提高压缩比，减少图片大小 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

2.缺点： 图片合并麻烦 维护麻烦，修改一个图片可能需要从新布局整个图片，样式

1.display: none;与visibility: hidden;的区别

=>联系：它们都能让元素不可见

=>区别：

display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容

display: block;和display: inline;的区别

block元素特点：

1.处于常规流中时，如果width没有设置，会自动填充满父容器
2.可以应用margin/padding
3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素
4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间）
5.忽略vertical-align

inline元素特点

1.水平方向上根据direction依次布局
2.不会在元素前后进行换行
3.受white-space控制
4.margin/padding在竖直方向上无效，水平方向上有效
5.width/height属性对非替换行内元素无效，宽度由元素内容决定
6.非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定
7.浮动或绝对定位时会转换为block
8.vertical-align属性生效
复制代码

PNG,GIF,JPG的区别及如何选

参考资料： 选择正确的图片格式 GIF:

8位像素，256色
无损压缩
支持简单动画
支持boolean透明
适合简单动画
JPEG：

颜色限于256
有损压缩
可控制压缩质量
不支持透明
适合照片
PNG：

有PNG8和truecolor PNG
PNG8类似GIF颜色上限为256，文件小，支持alpha透明度，无动画
适合图标、背景、按钮
复制代码

CSS有哪些继承属性

关于文字排版的属性如：
font
word-break
letter-spacing
text-align
text-rendering
word-spacing
white-space
text-indent
text-transform
text-shadow
line-height
color
visibility
cursor
复制代码

XMLHttpRequest通用属性和方法

readyState:表示请求状态的整数，取值：
UNSENT（0）：对象已创建
OPENED（1）：open()成功调用，在这个状态下，可以为xhr设置请求头，或者使用send()发送请求
HEADERS_RECEIVED(2)：所有重定向已经自动完成访问，并且最终响应的HTTP头已经收到
LOADING(3)：响应体正在接收
DONE(4)：数据传输完成或者传输产生错误
onreadystatechange：readyState改变时调用的函数
status：服务器返回的HTTP状态码（如，200， 404）
statusText:服务器返回的HTTP状态信息（如，OK，No Content）
responseText:作为字符串形式的来自服务器的完整响应
responseXML: Document对象，表示服务器的响应解析成的XML文档
abort():取消异步HTTP请求
getAllResponseHeaders(): 返回一个字符串，包含响应中服务器发送的全部HTTP报头。每个报头都是一个用冒号分隔开的名/值对，并且使用一个回车/换行来分隔报头行
getResponseHeader(headerName):返回headName对应的报头值
open(method, url, asynchronous [, user, password]):初始化准备发送到服务器上的请求。method是HTTP方法，不区分大小写；url是请求发送的相对或绝对URL；asynchronous表示请求是否异步；user和password提供身份验证
setRequestHeader(name, value):设置HTTP报头
send(body):对服务器请求进行初始化。参数body包含请求的主体部分，对于POST请求为键值对字符串；对于GET请求，为null
复制代码

sessionStorage,localStorage,cookie区别

都会在浏览器端保存，有大小限制，同源限制
cookie会在请求时发送到服务器，作为会话标识，服务器可修改cookie；web storage不会发送到服务器
cookie有path概念，子路径可以访问父路径cookie，父路径不能访问子路径cookie
有效期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效，localStorage长期有效，直到用户删除
共享：sessionStorage不能共享，localStorage在同源文档之间共享，cookie在同源且符合path规则的文档之间共享
localStorage的修改会促发其他文档窗口的update事件
cookie有secure属性要求HTTPS传输
浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。web storage大小支持能达到5M
复制代码

javascript跨域通信

同源：两个文档同源需满足

协议相同
域名相同
端口相同
跨域通信：js进行DOM操作、通信时如果目标与当前窗口不满足同源条件，浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法

如果是log之类的简单单项通信，新建<img>,<script>,<link>,<iframe>元素，通过src，href属性设置为目标url。实现跨域请求
如果请求json数据，使用<script>进行jsonp请求
现代浏览器中多窗口通信使用HTML5规范的targetWindow.postMessage(data, origin);其中data是需要发送的对象，origin是目标窗口的origin。window.addEventListener('message', handler, false);handler的event.data是postMessage发送来的数据，event.origin是发送窗口的origin，event.source是发送消息的窗口引用
内部服务器代理请求跨域url，然后返回数据
跨域请求数据，现代浏览器可使用HTML5规范的CORS功能，只要目标服务器返回HTTP头部Access-Control-Allow-Origin: *即可像普通ajax一样访问跨域资源
复制代码

javascript有哪几种数据类型

六种基本数据类型
undefined
null
string
boolean
number
symbol(ES6)(需要重点了解)
一种引用类型
Object
复制代码

什么闭包,闭包有什么用

闭包是在某个作用域内定义的函数，它可以访问这个作用域内的所有变量。闭包作用域链通常包括三个部分：

函数本身作用域。
闭包定义时的作用域。
全局作用域。
闭包常见用途：
创建特权方法用于访问控制
事件处理程序及回调
复制代码

javascript有哪些方法定义对象

对象字面量： var obj = {};
构造函数： var obj = new Object();
Object.create(): var obj = Object.create(Object.prototype);
复制代码

评价一下三种方法实现继承的优缺点,并改进

function Shape() {}

function Rect() {}

// 方法1
Rect.prototype = new Shape();

// 方法2
Rect.prototype = Shape.prototype;

// 方法3
Rect.prototype = Object.create(Shape.prototype);

Rect.prototype.area = function () {
  // do something
};
复制代码

数组去重: splice(0,1) slice数组的截取返回一个数组 var slice = Array.prototype.slice // 无法打印这些值 var myvar = "my value"; (function() { console.log(myvar); var myvar = "local value"; })();

//数组的方法 1.concat() 连接两个数组并返回一个新的数组。 2.join()将数组的所有元素连接成一个字符串。 3.push() 在数组末尾添加一个或多个元素，并返回数组操作后的长度。 4.pop() 从数组移出最后一个元素，并返回该元素。 5.shift() 从数组移出第一个元素，并返回该元素。 6.unshift() 在数组开头添加一个或多个元素，并返回数组的新长度。 7.slice(start_index, upto_index) 从数组提取一个片段，并作为一个新数组返回。 8.splice(index, count_to_remove, addElement1, addElement2, ...)从数组移出一些元素，（可选）并替换它们。 9.reverse() 颠倒数组元素的顺序：第一个变成最后一个，最后一个变成第一个。 10.sort() 给数组元素排序。 11.indexOf(searchElement[, fromIndex]) 在数组中搜索searchElement 并返回第一个匹配的索引。 12.lastIndexOf(searchElement[, fromIndex]) 和 indexOf差不多，但是是从结尾开始，并且是反向搜索。 13.forEach(callback[, thisObject]) 在数组每个元素项上执行callback。 14.map(callback[, thisObject]) 在数组的每个单元项上执行callback函数，并把返回包含回调函数返回值的新数组。 》译者注：也就是遍历数组，并通过callback对数组元素进行操作，并将所有操作结果放入数组中并返回该数组。 15.filter(callback[, thisObject]) 返回一个包含所有在回调函数上返回为true的元素的新数组。 》译者注：callback在这里担任的是过滤器的角色，当元素符合条件，过滤器就返回true，而filter则会返回所有符合过滤条件的元素。 16.every(callback[, thisObject]) 当数组中每一个元素在callback上被返回true时就返回true。 》译者注：同上，every其实类似filter，只不过它的功能是判断是不是数组中的所有元素都符合条件，并且返回的是bool值。 17.some(callback[, thisObject]) 只要数组中有一项在callback上被返回true，就返回true。 》译者注：同上，类似every，不过前者要求都符合筛选条件才返回true，后者只要有符合条件的就返回true。 18.reduce(callback[, initialValue]) applies callback(firstValue, secondValue) to reduce the list of items down to a single value. 19.reduceRight(callback[, initalvalue]) 和 reduce()相似，但是是从最后一个元素开始的。

一.对象的使用，这对程序的理解至关重要 1.for(var i in obj) { if(obj.hasOwnProperty(i)) { console.log(i); } } 2.判断对象是否有某个属性 从 ECMAScript 5 开始，有三种原生的方法用于列出或枚举对象的属性： 1.for...in 循环 该方法依次访问一个对象及其原型链中所有可枚举的属性。 2.Object.keys(o) 该方法返回一个对象 o 自身包含（不包括原型中）的所有属性的名称的数组。 3.Object.getOwnPropertyNames(o) 该方法返回一个数组，它包含了对象 o 所有拥有的属性（无论是否可枚举）的名称。 3.定义 getter 与 setter 一个 getter 是一个获取某个特定属性的值的方法。 一个 setter 是一个设定某个属性的值的方法。 你可以为预定义的或用户定义的对象定义 getter 和 setter 以支持新增的属性。 定义 getter 和 setter 的语法采用对象字面量语法。 4.你可以用 delete 操作符删除一个不是继承而来的属性。

一.支付宝的面试题 1.深浅拷贝 2.react 3.react-native 4.vue 5.原生的js 6.github 7.基本的数据类型: null undefined object string number boolean 8.null和undefined 9.数组的一些操作方法 push pop shift unshift slice splice indexof lastIndex 10.typeof null === object 11.instanceof 12.数据的操作方法 1.深浅拷贝(进行stringify和parse) var o = { x: 1, y: { z: [false, null, ''] } };

var s = JSON.stringify(o);

p = JSON.parse(s);

console.log(o, p);