let、const、var的区别
（1）块级作用域： 块作用域由 { }包含，let和const具备块级作用域，var不存在块级作用域。块级作用域解决了ES5中的两个问题：
- 内层变量可能笼罩外层变量
- 用来计数的循环变量泄露为全局变量
（2）变量晋升： var存在变量晋升，let和const不存在变量晋升，即在变量只能在申明之后应用，否在会报错。
（3）给全局增加属性： 浏览器的全局对象是window，Node的全局对象是global。var申明的变量为全局变量，并且会将该变量增加为全局对象的属性，然而let和const不会。
（4）反复申明： var申明变量时，能够反复申明变量，后申明的同名变量会笼罩之前申明的遍历。const和let不容许反复申明变量。
（5）暂时性死区： 在应用let、const命令申明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。应用var申明的变量不存在暂时性死区。
（6）初始值设置： 在变量申明时，var 和 let 能够不必设置初始值。而const申明变量必须设置初始值。
（7）指针指向： let和const都是ES6新增的用于创立变量的语法。 let创立的变量是能够更改指针指向（能够从新赋值）。但const申明的变量是不容许扭转指针的指向。
| 区别 | var | let | const |
|---|---|---|---|
| 是否有块级作用域 | × | ✔️ | ✔️ |
| 是否存在变量晋升 | ✔️ | × | × |
| 是否增加全局属性 | ✔️ | × | × |
| 是否反复申明变量 | ✔️ | × | × |
| 是否存在暂时性死区 | × | ✔️ | ✔️ |
| 是否必须设置初始值 | × | × | ✔️ |
| 是否扭转指针指向 | ✔️ | ✔️ | × |
深浅拷贝
浅拷贝：只思考对象类型。
function shallowCopy(obj) { if (typeof obj !== 'object') return let newObj = obj instanceof Array ? [] : {} for (let key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = obj[key] } } return newObj}复制代码简略版深拷贝：只思考一般对象属性，不思考内置对象和函数。
function deepClone(obj) { if (typeof obj !== 'object') return; var newObj = obj instanceof Array ? [] : {}; for (var key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key]; } } return newObj;}复制代码简单版深克隆：基于简略版的根底上，还思考了内置对象比方 Date、RegExp 等对象和函数以及解决了循环援用的问题。
const isObject = (target) => (typeof target === "object" || typeof target === "function") && target !== null;function deepClone(target, map = new WeakMap()) { if (map.get(target)) { return target; } // 获取以后值的构造函数：获取它的类型 let constructor = target.constructor; // 检测以后对象target是否与正则、日期格局对象匹配 if (/^(RegExp|Date)$/i.test(constructor.name)) { // 创立一个新的非凡对象(正则类/日期类)的实例 return new constructor(target); } if (isObject(target)) { map.set(target, true); // 为循环援用的对象做标记 const cloneTarget = Array.isArray(target) ? [] : {}; for (let prop in target) { if (target.hasOwnProperty(prop)) { cloneTarget[prop] = deepClone(target[prop], map); } } return cloneTarget; } else { return target; }}复制代码什么是中间人攻打？如何防备中间人攻打？
两头⼈ (Man-in-the-middle attack, MITM) 是指攻击者与通信的两端别离创立独⽴的分割, 并替换其所收到的数据, 使通信的两端认为他们正在通过⼀个私密的连贯与对⽅直接对话, 但事实上整个会话都被攻击者齐全管制。在两头⼈攻打中，攻击者能够拦挡通信双⽅的通话并插⼊新的内容。
攻打过程如下:
- 客户端发送申请到服务端，申请被两头⼈截获
- 服务器向客户端发送公钥
- 两头⼈截获公钥，保留在⾃⼰⼿上。而后⾃⼰⽣成⼀个伪造的公钥，发给客户端
- 客户端收到伪造的公钥后，⽣成加密hash值发给服务器
- 两头⼈取得加密hash值，⽤⾃⼰的私钥解密取得真秘钥,同时⽣成假的加密hash值，发给服务器
- 服务器⽤私钥解密取得假密钥,而后加密数据传输给客户端
对浏览器的缓存机制的了解
浏览器缓存的全过程：
- 浏览器第一次加载资源，服务器返回 200，浏览器从服务器下载资源文件，并缓存资源文件与 response header，以供下次加载时比照应用；
- 下一次加载资源时，因为强制缓存优先级较高，先比拟以后工夫与上一次返回 200 时的时间差，如果没有超过 cache-control 设置的 max-age，则没有过期，并命中强缓存，间接从本地读取资源。如果浏览器不反对HTTP1.1，则应用 expires 头判断是否过期；
- 如果资源已过期，则表明强制缓存没有被命中，则开始协商缓存，向服务器发送带有 If-None-Match 和 If-Modified-Since 的申请；
- 服务器收到申请后，优先依据 Etag 的值判断被申请的文件有没有做批改，Etag 值统一则没有批改，命中协商缓存，返回 304；如果不统一则有改变，间接返回新的资源文件带上新的 Etag 值并返回 200；
如果服务器收到的申请没有 Etag 值，则将 If-Modified-Since 和被申请文件的最初批改工夫做比对，统一则命中协商缓存，返回 304；不统一则返回新的 last-modified 和文件并返回 200；
很多网站的资源前面都加了版本号，这样做的目标是：每次降级了 JS 或 CSS 文件后，为了避免浏览器进行缓存，强制扭转版本号，客户端浏览器就会从新下载新的 JS 或 CSS 文件 ，以保障用户可能及时取得网站的最新更新。
代码输入后果
f = function() {return true;}; g = function() {return false;}; (function() { if (g() && [] == ![]) { f = function f() {return false;}; function g() {return true;} } })(); console.log(f());复制代码输入后果： false
这里首先定义了两个变量f和g，咱们晓得变量是能够从新赋值的。前面是一个匿名自执行函数，在 if 条件中调用了函数 g()，因为在匿名函数中，又从新定义了函数g，就笼罩了内部定义的变量g，所以，这里调用的是外部函数 g 办法，返回为 true。第一个条件通过，进入第二个条件。
第二个条件是[] == ![]，先看 ![] ，在 JavaScript 中，当用于布尔运算时，比方在这里，对象的非空援用被视为 true，空援用 null 则被视为 false。因为这里不是一个 null, 而是一个没有元素的数组，所以 [] 被视为 true, 而 ![] 的后果就是 false 了。当一个布尔值参加到条件运算的时候，true 会被看作 1, 而 false 会被看作 0。当初条件变成了 [] == 0 的问题了，当一个对象参加条件比拟的时候，它会被求值，求值的后果是数组成为一个字符串，[] 的后果就是 '' ，而 '' 会被当作 0 ，所以，条件成立。
两个条件都成立，所以会执行条件中的代码， f 在定义是没有应用var，所以他是一个全局变量。因而，这里会通过闭包拜访到内部的变量 f, 从新赋值，当初执行 f 函数返回值曾经成为 false 了。而 g 则不会有这个问题，这里是一个函数内定义的 g，不会影响到内部的 g 函数。所以最初的后果就是 false。
有哪些可能引起前端平安的问题?
- 跨站脚本 (Cross-Site Scripting, XSS): ⼀种代码注⼊⽅式, 为了与 CSS 辨别所以被称作 XSS。晚期常⻅于⽹络论坛, 起因是⽹站没有对⽤户的输⼊进⾏严格的限度, 使得攻击者能够将脚本上传到帖⼦让其余⼈浏览到有歹意脚本的⻚⾯, 其注⼊⽅式很简略包含但不限于 JavaScript / CSS / Flash 等；
- iframe的滥⽤: iframe中的内容是由第三⽅来提供的，默认状况下他们不受管制，他们能够在iframe中运⾏JavaScirpt脚本、Flash插件、弹出对话框等等，这可能会毁坏前端⽤户体验；
- 跨站点申请伪造（Cross-Site Request Forgeries，CSRF）: 指攻击者通过设置好的陷阱，强制对已实现认证的⽤户进⾏⾮预期的个⼈信息或设定信息等某些状态更新，属于被动攻打
- 歹意第三⽅库: ⽆论是后端服务器应⽤还是前端应⽤开发，绝⼤少数时候都是在借助开发框架和各种类库进⾏疾速开发，⼀旦第三⽅库被植⼊恶意代码很容易引起平安问题。
一个 tcp 连贯能发几个 http 申请？
如果是 HTTP 1.0 版本协定，个别状况下，不反对长连贯，因而在每次申请发送结束之后，TCP 连贯即会断开，因而一个 TCP 发送一个 HTTP 申请，然而有一种状况能够将一条 TCP 连贯放弃在沉闷状态，那就是通过 Connection 和 Keep-Alive 首部，在申请头带上 Connection: Keep-Alive，并且能够通过 Keep-Alive 通用首部中指定的，用逗号分隔的选项调节 keep-alive 的行为，如果客户端和服务端都反对，那么其实也能够发送多条，不过此形式也有限度，能够关注《HTTP 权威指南》4.5.5 节对于 Keep-Alive 连贯的限度和规定。
而如果是 HTTP 1.1 版本协定，反对了长连贯，因而只有 TCP 连接不断开，便能够始终发送 HTTP 申请，继续一直，没有下限； 同样，如果是 HTTP 2.0 版本协定，反对多用复用，一个 TCP 连贯是能够并发多个 HTTP 申请的，同样也是反对长连贯，因而只有一直开 TCP 的连贯，HTTP 申请数也是能够没有下限地继续发送
li 与 li 之间有看不见的空白距离是什么起因引起的？如何解决？
浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。为了好看，通常是一个<li>放在一行，这导致<li>换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。
解决办法：
（1）为<li>设置float:left。有余：有些容器是不能设置浮动，如左右切换的焦点图等。
（2）将所有<li>写在同一行。有余：代码不美观。
（3）将<ul>内的字符尺寸间接设为0，即font-size:0。有余：<ul>中的其余字符尺寸也被设为0，须要额定从新设定其余字符尺寸，且在Safari浏览器仍然会呈现空白距离。
（4）打消<ul>的字符距离letter-spacing:-8px，有余：这也设置了<li>内的字符距离，因而须要将<li>内的字符距离设为默认letter-spacing:normal。
介绍下 promise 的个性、优缺点，外部是如何实现的，入手实现 Promise
1）Promise根本个性
- 1、Promise有三种状态：pending(进行中)、fulfilled(已胜利)、rejected(已失败)
- 2、Promise对象承受一个回调函数作为参数, 该回调函数承受两个参数，别离是胜利时的回调resolve和失败时的回调reject；另外resolve的参数除了正常值以外， 还可能是一个Promise对象的实例；reject的参数通常是一个Error对象的实例。
- 3、then办法返回一个新的Promise实例，并接管两个参数onResolved(fulfilled状态的回调)；onRejected(rejected状态的回调，该参数可选)
- 4、catch办法返回一个新的Promise实例
- 5、finally办法不论Promise状态如何都会执行，该办法的回调函数不承受任何参数
- 6、Promise.all()办法将多个多个Promise实例，包装成一个新的Promise实例，该办法承受一个由Promise对象组成的数组作为参数(Promise.all()办法的参数能够不是数组，但必须具备Iterator接口，且返回的每个成员都是Promise实例)，留神参数中只有有一个实例触发catch办法，都会触发Promise.all()办法返回的新的实例的catch办法，如果参数中的某个实例自身调用了catch办法，将不会触发Promise.all()办法返回的新实例的catch办法
- 7、Promise.race()办法的参数与Promise.all办法一样，参数中的实例只有有一个率先扭转状态就会将该实例的状态传给Promise.race()办法，并将返回值作为Promise.race()办法产生的Promise实例的返回值
- 8、Promise.resolve()将现有对象转为Promise对象，如果该办法的参数为一个Promise对象，Promise.resolve()将不做任何解决；如果参数thenable对象(即具备then办法)，Promise.resolve()将该对象转为Promise对象并立刻执行then办法；如果参数是一个原始值，或者是一个不具备then办法的对象，则Promise.resolve办法返回一个新的Promise对象，状态为fulfilled，其参数将会作为then办法中onResolved回调函数的参数，如果Promise.resolve办法不带参数，会间接返回一个fulfilled状态的 Promise 对象。须要留神的是，立刻resolve()的 Promise 对象，是在本轮“事件循环”（event loop）的完结时执行，而不是在下一轮“事件循环”的开始时。
- 9、Promise.reject()同样返回一个新的Promise对象，状态为rejected，无论传入任何参数都将作为reject()的参数
2）Promise长处
①对立异步 API
- Promise 的一个重要长处是它将逐步被用作浏览器的异步 API ，对立当初各种各样的 API ，以及不兼容的模式和手法。
②Promise 与事件比照
- 和事件相比拟， Promise 更适宜解决一次性的后果。在后果计算出来之前或之后注册回调函数都是能够的，都能够拿到正确的值。 Promise 的这个长处很天然。然而，不能应用 Promise 解决屡次触发的事件。链式解决是 Promise 的又一长处，然而事件却不能这样链式解决。
③Promise 与回调比照
- 解决了回调天堂的问题，将异步操作以同步操作的流程表达出来。
- ④Promise 带来的额定益处是蕴含了更好的错误处理形式（蕴含了异样解决），并且写起来很轻松（因为能够重用一些同步的工具，比方 Array.prototype.map() ）。
3）Promise毛病
- 1、无奈勾销Promise，一旦新建它就会立刻执行，无奈中途勾销。
- 2、如果不设置回调函数，Promise外部抛出的谬误，不会反馈到内部。
- 3、当处于Pending状态时，无奈得悉目前停顿到哪一个阶段（刚刚开始还是行将实现）。
- 4、Promise 真正执行回调的时候，定义 Promise 那局部实际上曾经走完了，所以 Promise 的报错堆栈上下文不太敌对。
4）简略代码实现
最简略的Promise实现有7个次要属性, state(状态), value(胜利返回值), reason(错误信息), resolve办法, reject办法, then办法
class Promise{ constructor(executor) { this.state = 'pending'; this.value = undefined; this.reason = undefined; let resolve = value => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; } }; let reject = reason => { if (this.state === 'pending') { this.state = 'rejected'; this.reason = reason; } }; try { // 立刻执行函数 executor(resolve, reject); } catch (err) { reject(err); } } then(onFulfilled, onRejected) { if (this.state === 'fulfilled') { let x = onFulfilled(this.value); }; if (this.state === 'rejected') { let x = onRejected(this.reason); }; }}5）面试够用版
function myPromise(constructor){ let self=this; self.status="pending" //定义状态扭转前的初始状态 self.value=undefined;//定义状态为resolved的时候的状态 self.reason=undefined;//定义状态为rejected的时候的状态 function resolve(value){ //两个==="pending"，保障了了状态的扭转是不不可逆的 if(self.status==="pending"){ self.value=value; self.status="resolved"; } } function reject(reason){ //两个==="pending"，保障了了状态的扭转是不不可逆的 if(self.status==="pending"){ self.reason=reason; self.status="rejected"; } } //捕捉结构异样 try{ constructor(resolve,reject); }catch(e){ reject(e); } }myPromise.prototype.then=function(onFullfilled,onRejected){ let self=this; switch(self.status){ case "resolved": onFullfilled(self.value); break; case "rejected": onRejected(self.reason); break; default: }}// 测试var p=new myPromise(function(resolve,reject){resolve(1)}); p.then(function(x){console.log(x)})//输入16）大厂专供版
const PENDING = "pending"; const FULFILLED = "fulfilled"; const REJECTED = "rejected";const resolvePromise = (promise, x, resolve, reject) => { if (x === promise) { // If promise and x refer to the same object, reject promise with a TypeError as the reason. reject(new TypeError('循环援用')) } // if x is an object or function, if (x !== null && typeof x === 'object' || typeof x === 'function') { // If both resolvePromise and rejectPromise are called, or multiple calls to the same argument are made, the first call takes precedence, and any further calls are ignored. let called try { // If retrieving the property x.then results in a thrown exception e, reject promise with e as the reason. let then = x.then // Let then be x.then // If then is a function, call it with x as this if (typeof then === 'function') { // If/when resolvePromise is called with a value y, run [[Resolve]](promise, y) // If/when rejectPromise is called with a reason r, reject promise with r. then.call(x, y => { if (called) return called = true resolvePromise(promise, y, resolve, reject) }, r => { if (called) return called = true reject(r) }) } else { // If then is not a function, fulfill promise with x. resolve(x) } } catch (e) { if (called) return called = true reject(e) } } else { // If x is not an object or function, fulfill promise with x resolve(x) }}function Promise(excutor) { let that = this; // 缓存以后promise实例例对象 that.status = PENDING; // 初始状态 that.value = undefined; // fulfilled状态时 返回的信息 that.reason = undefined; // rejected状态时 回绝的起因 that.onFulfilledCallbacks = []; // 存储fulfilled状态对应的onFulfilled函数 that.onRejectedCallbacks = []; // 存储rejected状态对应的onRejected函数 function resolve(value) { // value胜利态时接管的终值 if(value instanceof Promise) { return value.then(resolve, reject); } // 实际中要确保 onFulfilled 和 onRejected ⽅办法异步执⾏行行，且应该在 then ⽅办法被调⽤用的那⼀一轮事件循环之后的新执⾏行行栈中执⾏行行。 setTimeout(() => { // 调⽤用resolve 回调对应onFulfilled函数 if (that.status === PENDING) { // 只能由pending状态 => fulfilled状态 (防止调⽤用屡次resolve reject) that.status = FULFILLED; that.value = value; that.onFulfilledCallbacks.forEach(cb => cb(that.value)); } }); } function reject(reason) { // reason失败态时接管的拒因 setTimeout(() => { // 调⽤用reject 回调对应onRejected函数 if (that.status === PENDING) { // 只能由pending状态 => rejected状态 (防止调⽤用屡次resolve reject) that.status = REJECTED; that.reason = reason; that.onRejectedCallbacks.forEach(cb => cb(that.reason)); } }); } // 捕捉在excutor执⾏行行器器中抛出的异样 // new Promise((resolve, reject) => { // throw new Error('error in excutor') // }) try { excutor(resolve, reject); } catch (e) { reject(e); }}Promise.prototype.then = function(onFulfilled, onRejected) { const that = this; let newPromise; // 解决理参数默认值 保障参数后续可能持续执⾏行行 onFulfilled = typeof onFulfilled === "function" ? onFulfilled : value => value; onRejected = typeof onRejected === "function" ? onRejected : reason => { throw reason; }; if (that.status === FULFILLED) { // 胜利态 return newPromise = new Promise((resolve, reject) => { setTimeout(() => { try{ let x = onFulfilled(that.value); resolvePromise(newPromise, x, resolve, reject); //新的promise resolve 上⼀一个onFulfilled的返回值 } catch(e) { reject(e); // 捕捉前⾯面onFulfilled中抛出的异样then(onFulfilled, onRejected); } }); }) } if (that.status === REJECTED) { // 失败态 return newPromise = new Promise((resolve, reject) => { setTimeout(() => { try { let x = onRejected(that.reason); resolvePromise(newPromise, x, resolve, reject); } catch(e) { reject(e); } }); }); } if (that.status === PENDING) { // 期待态// 当异步调⽤用resolve/rejected时 将onFulfilled/onRejected收集暂存到汇合中 return newPromise = new Promise((resolve, reject) => { that.onFulfilledCallbacks.push((value) => { try { let x = onFulfilled(value); resolvePromise(newPromise, x, resolve, reject); } catch(e) { reject(e); } }); that.onRejectedCallbacks.push((reason) => { try { let x = onRejected(reason); resolvePromise(newPromise, x, resolve, reject); } catch(e) { reject(e); } }); }); }};说一说SessionStorage和localStorage还有cookie
共同点：都是保留在浏览器端、且同源的不同点： 1.cookie数据始终在同源的http申请中携带（即便不须要），即cookie在浏览器和服务器间来回传递。 cookie数据还有门路（path）的概念，能够限度cookie只属于某个门路下 sessionStorage和localStorage不会主动把数据发送给服务器，仅在本地保留。 2.存储大小限度也不同，cookie数据不能超过4K，sessionStorage和localStorage能够达到5M 3.sessionStorage：仅在以后浏览器窗口敞开之前无效； localStorage：始终无效，窗口或浏览器敞开也始终保留，本地存储，因而用作持久数据； cookie：只在设置的cookie过期工夫之前无效，即便窗口敞开或浏览器敞开 4.作用域不同 sessionStorage：不在不同的浏览器窗口中共享，即便是同一个页面； localstorage：在所有同源窗口中都是共享的；也就是说只有浏览器不敞开，数据依然存在 cookie: 也是在所有同源窗口中都是共享的.也就是说只有浏览器不敞开，数据依然存在复制代码二分查找--工夫复杂度 log2(n)
题目形容:如何确定一个数在一个有序数组中的地位
实现代码如下:
function search(arr, target, start, end) { let targetIndex = -1; let mid = Math.floor((start + end) / 2); if (arr[mid] === target) { targetIndex = mid; return targetIndex; } if (start >= end) { return targetIndex; } if (arr[mid] < target) { return search(arr, target, mid + 1, end); } else { return search(arr, target, start, mid - 1); }}// const dataArr = [1, 2, 3, 4, 5, 6, 7, 8, 9];// const position = search(dataArr, 6, 0, dataArr.length - 1);// if (position !== -1) {// console.log(`指标元素在数组中的地位:${position}`);// } else {// console.log("指标元素不在数组中");// }复制代码对 CSSSprites 的了解
CSSSprites（精灵图），将一个页面波及到的所有图片都蕴含到一张大图中去，而后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。
长处：
- 利用
CSS Sprites能很好地缩小网页的http申请，从而大大提高了页面的性能，这是CSS Sprites最大的长处； CSS Sprites能缩小图片的字节，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
毛病：
- 在图片合并时，要把多张图片有序的、正当的合并成一张图片，还要留好足够的空间，避免板块内呈现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易呈现背景断裂；
CSSSprites在开发的时候相对来说有点麻烦，须要借助photoshop或其余工具来对每个背景单元测量其精确的地位。- 保护方面：
CSS Sprites在保护的时候比拟麻烦，页面背景有少许改变时，就要改这张合并的图片，无需改的中央尽量不要动，这样防止改变更多的CSS，如果在原来的中央放不下，又只能（最好）往下加图片，这样图片的字节就减少了，还要改变CSS。
两栏布局的实现
个别两栏布局指的是右边一栏宽度固定，左边一栏宽度自适应，两栏布局的具体实现：
- 利用浮动，将右边元素宽度设置为200px，并且设置向左浮动。将左边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。
.outer { height: 100px;}.left { float: left; width: 200px; background: tomato;}.right { margin-left: 200px; width: auto; background: gold;}复制代码- 利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样左边就触发了BFC，BFC的区域不会与浮动元素产生重叠，所以两侧就不会产生重叠。
.left{ width: 100px; height: 200px; background: red; float: left; } .right{ height: 300px; background: blue; overflow: hidden; }复制代码- 利用flex布局，将右边元素设置为固定宽度200px，将左边的元素设置为flex:1。
.outer { display: flex; height: 100px;}.left { width: 200px; background: tomato;}.right { flex: 1; background: gold;}复制代码- 利用相对定位，将父级元素设置为绝对定位。右边元素设置为absolute定位，并且宽度设置为200px。将左边元素的margin-left的值设置为200px。
.outer { position: relative; height: 100px;}.left { position: absolute; width: 200px; height: 100px; background: tomato;}.right { margin-left: 200px; background: gold;}复制代码- 利用相对定位，将父级元素设置为绝对定位。右边元素宽度设置为200px，左边元素设置为相对定位，右边定位为200px，其余方向定位为0。
.outer { position: relative; height: 100px;}.left { width: 200px; background: tomato;}.right { position: absolute; top: 0; right: 0; bottom: 0; left: 200px; background: gold;}复制代码New操作符做了什么事件?
1、首先创立了一个新对象2、设置原型，将对象的原型设置为函数的prototype对象3、让函数的this指向这个对象，执行构造函数的代码（为这个新对象增加属性）4、判断函数的返回值类型，如果是值类型，返回创立的对象。如果是援用类型，就返回这个援用类型的对象复制代码Canvas和SVG的区别
（1）SVG： SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩大标记语言XML形容的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，能够为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器可能主动重现图形。
其特点如下：
- 不依赖分辨率
- 反对事件处理器
- 最适宜带有大型渲染区域的应用程序（比方谷歌地图）
- 复杂度高会减慢渲染速度（任何适度应用 DOM 的利用都不快）
- 不适宜游戏利用
（2）Canvas： Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其地位产生扭转，就会从新进行绘制。
其特点如下：
- 依赖分辨率
- 不反对事件处理器
- 弱的文本渲染能力
- 可能以 .png 或 .jpg 格局保留后果图像
- 最适宜图像密集型的游戏，其中的许多对象会被频繁重绘
注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连贯的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具备色彩、形态、轮廓、大小和屏幕地位等属性。
iframe 有那些长处和毛病？
iframe 元素会创立蕴含另外一个文档的内联框架（即行内框架）。
长处：
- 用来加载速度较慢的内容（如广告）
- 能够使脚本能够并行下载
- 能够实现跨子域通信
毛病：
- iframe 会阻塞主页面的 onload 事件
- 无奈被一些搜索引擎索辨认
- 会产生很多页面，不容易治理
画一条0.5px的线
- 采纳transform: scale()的形式，该办法用来定义元素的2D 缩放转换：
transform: scale(0.5,0.5);复制代码- 采纳meta viewport的形式
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>复制代码这样就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。viewport只针对于挪动端，只在挪动端上能力看到成果
display:inline-block 什么时候会显示间隙？
- 有空格时会有间隙，能够删除空格解决；
margin正值时，能够让margin应用负值解决；- 应用
font-size时，可通过设置font-size:0、letter-spacing、word-spacing解决；