写在前面，很久没有整理面试，笔试题了，这次准备了2个月的题，理论来讲是一天3道，一共是180道题，我们这篇文章会自动跳过一些之前说过的题，尽量挑重要的整理

src、href、link的区别是什么？

src：指的是指向资源，比如srcipt和img标签使用src来表达资源路径
href：指的是指向路径，比如a标签，表达了跳转的路径
link：指的是css中的link，用来表达层叠样式表的资源路径

这三者都不受同源限制影响

多维数组扁平化

1. arr.toString().split(",");
2. arr.flat(Infintity); // 多维转换，参数表示正无穷，写1就是只转换一维，写2转换2维......

3. return arr.reduce((prev, current) => {
    return prev.concat(Array.isArray(current) ? 递归函数(current) : current)
},[])

有用过HTML5的webSQL和IndexedDB吗？说说你对它们的理解

没有用过，但是websql是被废弃的，现在大多数都使用indexedDB，空间大，存储多，可以异步存储，支持键值对，也支持js对象

怎样把一个div居中？怎样把一个浮动元素居中？怎样把绝对定位的div居中？

margin 0 auto
transform
margin-left clac(50% - width/2)
position: absolute left: 0 top: 0 bottom 0 top 0 ; margin 0 auto
flex
grid
table

写一个方法获取图片的原始高度和宽度

用异步，new image对象，监听onload并取naturalWidth和naturalHeight即可,记得赋值src给img

有使用过html5的拖放API吗？简单说一下

简单使用过，img标签默认可拖拽，其他标签需要开启拖拽开关drage=true
h5提供了一系列元素的监听事件，可以用拖拽事件来做出一些有趣的效果

有用过HTML5的WebWork吗？它主要解决了什么问题？

js是单线程语言，webwork允许我们注册一个服务，让这个服务在一个单独的线程进行处理，不会影响到主线程，大大提高了js的
复杂业务执行效率
但是在这个线程中，

1. 必须是和主线程是同源
2. 没有parent，window，document不能更改dom，navigator和location是可以用的
3. woker和主线程必须通过消息进行传递
4. 没有alert等，可以发送ajax请求
5. 不能加载本地文件，资源必须来源于网络

说说你对同构和SSR的理解（理解，简单过一下）

同构，就是一套代码能在客户端允许也能在服务端允许
ssr就是为了爬虫的需要/框架初始化/单页面的卡顿，在service端把数据处理好返回给页面
优点：首页加载快，seo好，请求次数减少

ssr和spa不是相对概念
spa和mpa是相对概念，多页应用在以前非常火，有多个前端入口，路由后端控制等，比如php和jsp都是经典的mpa应用

说说position的absolute和fixed共同与不同点分别是什么？

都脱离了文档流
一个是可以相对父元素，一个是相对于浏览器

举例子说明javascript的变量声明提升和函数声明提升

var a = funtion a(){
    console.log(4)
}
funtion a(){
    console.log(5)
}

console.log(a()) // 4

html直接输入多个空格为什么只能显示一个空格？

该行为由css的white-space控制，默认值normal会把多个空格压缩成一个空格

HTML5如果不写<! DOCTYPE html> ，页面还会正常工作么？

可以，只不过浏览器会以自己默认的规则进行加载网页，每个浏览器的规则都有区别
所以会造成多个浏览器不兼容的情况

元素竖向的百分比设置时相对容器的高度吗？

不是，如果是的话，那么高度是相对高度，父元素根据子元素的高度会自动撑开，然后子元素
知道父元素撑开为了百分比要去弥补这个差距，会造成一个死循环

所以是相对容器的宽度不是高度

请写出唤醒拔打电话、发送邮件、发送短信的例子

<a href="tel: 110">拨号</a>
<a href="sms: 110">发短信</a>
<a href="emilto: 1018715564@qq.com">邮箱</a>

写个例子说明HTML5在移动端如何打开APP？

原理deeplink
使用a标签中的href="应用名称（问具体开发）://"

css和动画和js动画区别

1. 性能不差
2. 部分场景下优于js
3. 比较多的兼容问题

怎样禁止表单记住密码自动填充？

autocomplate="off"

请说说*{box-sizing: border-box;}的作用及好处有哪些？

怪异盒模型，会把border，padding算在盒子的宽，比较符合人类的认知

对base64的理解

上传图片可以用base64上传
url参数加密也可以用base64

html的a标签属性rel='nofollow'有什么作用

告诉爬虫不要爬链接中的内容了

Ajax请求中get和post方式有什么区别呢？分别在哪些场景下使用？

get参数内存小，因为是通过url传参，浏览器的url参数有限制
get请求参数会暴漏在用户表面
get请求可以被历史记录

get请求通常是获取一个仅读资源

怎么在IE8及以下实现HTML5的兼容？

使用这个插件html2shiv， 原理就是创建element

写一个字符串重复的repeat函数

repeat函数
使用array.join()；
循环拼接变量，然后循环完毕返回
循环放入数组，输入变成字符串返回

在实际编写css中你有遇到过哪些浏览器兼容性的问题？怎么解决的？

低版本得IE的CSS特效等

postcss autoprefixer，browerlist

移动端点击事件为什么会有延迟？有哪些方法可以解决？

因为早期的浏览器规定的就是，点击一下，如果300ms之内又点了第二下会放大屏幕

那么解决办法就是不让他放大，设置meta标签，禁止缩放
还有就是使用fastclick这个库，原理：可以在点击的第一下上生成一个div并且触发点击事件然后把默认事件屏蔽掉

在a标签上的四个伪类执行顺序是什么？

link visited hover active 记忆法：lvha（lv好）

说说你对!important的理解，一般在哪些场景使用？

不建议使用，提高css样式的最高权重，非常不利用维护

写一个方法随机生成指定位数的字符串

Math.random().toString(36).substr(2); .// 生成一个随机字符串

请你解释下什么是浮动和它的工作原理是什么？同时浮动会引起什么问题？

浮动会脱离标准文档流， 浮动元素会互相紧贴，可能会造成高度塌陷

js中=、==、===三个的区别是什么？并说明它们各自的工作过程

=赋值操作
== 比较值，会隐式转换，简单比较
=== 不仅会比较值，还会比较内存地址，复杂比较

transition、animation、transform三者有什么区别？

1. 过渡：无非就是图像元素在做偏移/变化时，过渡动画能更好的让用户接受，不再生硬
2. 自定义动画：可以让开发者逐帧操控动画，可玩度更高
3. 图像转换移动： 2d,3d移动，放大缩小等等都是经典的场景

请写出如下代码运行的结果并解释为什么？[代码]

代码是这个：

var type = 'images';
var size = {width: 800, height: 600};
var format = ['jpg', 'png'];

function change(type, size, format){
    type = 'video';
    size = {width: 1024, height: 768};
    format.push('map');
}
change(type, size, format);
console.log(type, size, format);

change中的更改几个变量，都是更改的行参的值，而传递的format，push更改了原数据，所以只有数组增加了，其他都没变化

你在工作中有用到过websocket吗？用它来解决什么问题？

用到过，聊天的时候做过，兼容不太好，但是有解决方案，用于客户端和服务端进行互相推送的功能，解决了传统的推送传输耗费性能

遇到overflow: scroll不能平滑滚动怎么解决？

ios： -weibit-overflow-scorlling:touch;

举例说明数组和对象的迭代方法分别有哪些？

es5: for,forEach,some,reduce,reduceRight,map,for-in,every,filter
es6: for-of,find,findIndex
对象：
es5: for-in,Object.keys()
es6: Object.entries(); Object.values();

请快速答出此题的答案并解释：var x, y = 1; x + y = ?

NaN, y是等于1 ,x只是定义了没赋值 undefined+1=NaN

HTML5的应用程序缓存与浏览器缓存有什么不同？

浏览器缓存提供的就是单个文件的缓存，而HTML5的PWA中的离线缓存技术是整站缓存，即没有存在网络也可以访问网站，基于service-woker标准实现

说说你对BEM规范的理解，同时举例说明常见的CSS规范有哪些？

指的是css命名规范，bem认为所有的网页是一个一个块组成的，block，element，modifier（修饰语）
header-button-primary 类似于这样

举例说明什么是IIFEs？它有什么好处？

立即执行函数

(funtion(){
    // code something
})();

也可以这样哦!function(){}()， ~function(){}()  let a = function(){}()

节约变量，独立作用域，立即运行

简述下HTML的快捷键属性是哪个？并举例说明有什么用？

accesskey，h5支持每个元素都可以注入accesskey，搭配浏览器快捷组合键，实现快速访问的功能

这无疑推广了无障碍的发展，让更多不健全的人也能更方便使用web网页

举例说明什么是decodeURI()和encodeURI()是什么？

对内容进行解码，对内容进行加码

你有用过HTML5的Device API吗？说说它都有哪些应用场景？

没有用过，听说过，是html5的一种规范api，可以监听手机屏幕亮度，电量，振动，打电话之类的‘

js实现99乘法表

function nine(num){
for(var i = 1;i<=num;i++){//控制行
var expression = "";
for(var j = 1;j<=i;j++){//j<=i 控制每行的个数
expression +=`${j}*${i}=${i*j}`;
}
console.log(expression)
}
}
nine(9);

在新窗口打开链接的方法是什么？那怎么设置全站链接都在新窗口打开？

target="_blank";

a标签下的href =“ javascript：void（0）”实现了什么作用？说说你对javascript：void（0）的理解？

void是js的一个关键字，表示没返回值，这句代码主要是不让a链接产生跳转（默认行为）

如何理解同源策略

同源策略就是浏览器的一种安全策略，避免和不安全的资源进行通信

1. 不同协议
2. 不同域名
3. 不同端口

解决办法： cors jsonp proxy代理等

怎么让body高度自适应屏幕？为什么？

html,body{height: 100%} 把html带上是因为，如果只给body加不是真正的高自适应，因为会继承html的高度，html高度未必是100%，所以两个都要加100%
body{height: 100vh} vh不会继承父类，直接是视口的高度

js延迟加载的方式有哪些？

async defer setTimeout 动态绑定src 动态创建script标签

display有哪些值？分别说明他们的作用是什么？

table
flex
grid
inlie-block
none
block

把Script标签放在页面最底部的之前和之后有什么区别？浏览器会如何解析它们？

肯定是一个优先解析，一个等文档加载完再执行，在body前，script标签加载的js文件会阻塞html的渲染，所以一般会写在body后，或者给标签加入async 或者 defer 或者type="module"来异步加载js文件

写出几个初始化CSS的样式，并解释说明为什么要这样写

padding 0 margin 0 outline: none;
文档有默认的外边距和内边距，需要清除，还有点击按钮的时候会有点击的边框，a标签的默认样式，列表的默认样式等等

请写一个sleep（暂停）函数

function sleep(ms) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, ms);
      });
}

说说你对CSS样式覆盖规则的理解

关键词： ICE公式 特指度
有一个概念叫做特指度，也就是平时所说的权重大小，每一个选择器都有一个权重值，id=100 class=10 标签是1，这个公式叫做ICE，
通配符最小
最高权重是important，通常在项目中蛮少使用到，因为维护性很差

判断instanceof的结果并解释原因 [代码]

代码如下：

function test(){
   return test;
}
new test() instanceof test;

instanceof 的运行原理是右边的priototype去左边的原型上去找，左边的原型链找完还没有就返回false，这段代码new出来的构造函数结果就是构造函数本身，因为有继承，所以继承了所有的
test方法的属性，所以test.protype并不在test()上存在，所以返回false

CSS的overflow属性定义溢出元素内容区的内容会如何处理呢

visble 超出将会显示元素外面
scorll 超出显示滚动条
hidden超出部分不显示
auto 内容溢出时候是scroll

请描述下null和undefined的区别是什么？这两者分别运用在什么场景？

null和undefined都不是对象
null是空
undefined 变量已定义未被赋值

一般初始化变量会初始化成null，因为undefind的情况很多，而且根据代码语义，未被定义不符合标准
因为未被定义的变量就是undefined，赋值undefined是一个多此一举的事情

解释下为什么{} + [] === 0为true？

{} 是混淆项，不参与运算，+[] === 0是true  那么{}被认定为语法块
+[] === 0 是类型转换


console.log包裹{}会被解析成一个对象，不会解析成一个语法块

在不固定高度的情况下水平垂直居中的方法？

万能定位法
定位50% 通过margin或者transform移动-50%
flex

js的函数有哪几种调用形式？

fn()
fn.apply call bind
new fn();

obj.fn();

当一个元素被设置为浮动后，它的display值变为什么呢？

变为block，设置浮动看样子是inline-block，其实是block
可以通过getComputedStyle查看属性

写出js的交集并集补集差集

/** *交集 * * @param {*} arr1 * @param {*} arr2 */function intersection (arr1, arr2) {
  return arr1.filter(v => arr2.includes(v))
}


/** *差集 * * @param {*} arr1 * @param {*} arr2 */function difference (arr1, arr2) {
  return arr1.filter(v => !arr2.includes(v))
}


/** *并集 * * @param {*} arr1 * @param {*} arr2 */function union (arr1, arr2) {
  return [...arr1, ...arr2]
}


/** *补集 * * @param {*} arr1 * @param {*} arr2 */function complement (arr1, arr2) {
  return difference(union(arr1, arr2), intersection(arr1, arr2))
}

Doctype有什么作用？你知道有多少种Doctype文档类型吗？（理解）

声明文档类型，告诉浏览器以什么标准进行解析，如果不提供，浏览器将会自动根据厂商标准去补充

一般会使用
<! doctype html>

html4则有3种：

Strict，Transitional和Frameset；

写例子说明如何给li绑定事件（ul下有1000+个li）？

利用事件委托

function handleClick(event){
    if(event.target.tagName === "LI"){
        // do something
    }
}

监听ul的点击事件即可

移动端微信页面有哪些兼容性问题及解决方案是什么？

1. rem方案，需要使用reset.js
2. video标签层级最高，解决是获取了video的第一帧图片作为预览图，替换video

说说你理解的同步和异步的区别是什么？

1.    上一个任务结束才能进行下一个任务。比如alert弹窗，不点击确定永远在哪里，阻塞了下面的所有同步js代码
2.    可以按顺序开始，但是不一定按顺序返回，比如img加载图片就是典型的异步

如何让大小不同的图片等比缩放不变形显示在固定大小的div里？写个例子

object-fit这个属性非常好用
设置宽高定位

如何让大小不同的图片等比缩放不变形显示在固定大小的div里？写个例子

读分2种，一种是看，一种是读取里面的信息

看：chorme有自带的pdf预览插件，直接src
读：读pdf，二进制数据，根据pdf的规则去解析（pdf是开源格式）,然后再根据解析出来的通过html或者canvas去渲染（难点），然后pdf中的图片可以使用二进制提取然后bloburl
做为链接
pdf.js的原理

行内元素、块级元素、空(void)元素分别有哪些？

    1. span a input img b strong select button em
    2. div video selection header footer article h1-h6 table form
    3. img input br hr

准确说出'1,2,3,4'.split()的结果是什么（包括类型和值）？

["1,2,3,4"] 如果split没传参数，会返回调用值为第一个数的数组

进程与线程有什么区别？JS的单线程带来哪些好处？

一个程序必定包含一个进程，一个进程必定包含一个线程
一个进程必定包含一个线程

进程之间不能共享内存，而线程可以

js最早是面向浏览器的脚本语言，开发者在对dom做处理时，如果是多个线程，引擎就不知道时哪个线程做了操作，这样的程序会很紊乱
因此js是要和用户实时交互的，所以是单线程

在一些复杂业务中，我们也可以使用web-woker来做计算处理，但是它不能操作dom

请列举出多种减少页面加载时间的方法（答案来源于github某网友）

• 缓存利用： 缓存 Ajax，使用 CDN、外部 JavaScript 和 css 文件缓存，添加 Expires 头，在服务器端配置 Etag，减少 DNS 查找等。
• 请求数量．合并样式和脚本，使用 css 图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
• 请求带宽：压缩文件，开启 GZIP 。
• css 代码：避免使用 css 表达式、高级选择器、通配选择器 。
• JavaScript 代码：用散列表来优化查找，少用全局变量，用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 JavaScript 性能，用 setTimeout 避免页面失去响应，缓 存 DOM 节点查找的结果，避免使用 with (with 会创建自己的作用域， 增加作用域链的 长度），多个变量声明合并。
• HTML 代码：避免图片和 iFrame 等 src 属性为空 。 src 属性为空，会重新加载当前页面 ， 影响速度和效率 ， 尽量避免在 HTML 标签中写 Style 属性。

怎么实现移动端的边框0.5px？

伪元素+缩放，宽高是原dom的百分之200，然后缩小.5可以实现
兼容高分辨率的屏幕

border.css的原理

写个方法，找出指定字符串中重复最多的字符及其长度

const str = "啦啦啦哈哈哈哈";
let result = {}; // 存放全部的结果集的数组

function test1(box = []){
// 转换数组
let array = str.split("");
array.forEach(v => {
if(typeof result[v] === "undefined"){
// 添加对应的属性
result[v] = 1;
}else{
result[v] ++;
}
})
}

test1();
console.log(result);

网站的TDK该怎么设置？它有什么作用？

TDK： 标题 & 介绍 & 关键词
seo的最重要的三要素，网站如果设置好这三要素将会提升被蜘蛛抓到更多的内容，有更多的曝光

请描述下js的原型和原型链的理解以及它们之间的关系

js的继承就是原型的继承
每一个对象都有原型，而这个原型分为隐式原型和显式原型
比如Function的prototype，指向的就是函数的原型，而原型中的 constructor即构造函数指的就是函数本身
对象的原型是_proto_即隐式原型，指的是创建该对象的函数的原型

原型是原型链的一部分，每一个对象都有原型，都会有共同的属性，如果直到原型是null，说明是最顶层的原型，那原型链即如此

请描述下什么是原型模式？它主要运用在哪些场景？（理解）

原型模式是一种设计模式，就是创建一个共享的原型实例，通过拷贝这些原型创建新的对象，也就是创建一个对象作为另一个对象的Prototype属性。

优点：用于创建重复的对象，可以提升性能。
结合优点，可以运用在以下几种场景：
1、类初始化需要消耗很多资源
2、有多个调用者调用且每个调用者会修改其值，相当于保存一份原有的对象拷贝相同对象进行修改，即保护性拷贝
3、通过new对象时需要很多繁琐的准备或访问权限

请详细描述AJAX的工作原理（答案来源于github网友）

AJAX是用于网页和服务器进行异步通信的技术。
基本原理是，通过XMLHttpRequest向服务器发送异步请求，获得服务器返回的数据，利用js更新页面。
其核心功能在于XMLHttpRequest对象。
创建一个ajax的步骤大致可以分为以下几步

• 创建XHMHttpRequest对象
• 打开链接 （指定请求类型，需要请求数据在服务器的地址，是否异步i请求）
• 向服务器发送请求（get类型直接发送请求，post类型需要设置请求头）
• 接收服务器的响应数据（需根据XMLHttpRequest的readyState属性判定调用哪个回调函数）
• 更新页面

HTML如何创建分区响应图？

什么是分区相应图：

一张图片，可以把它分割成多个区域，点击图片的不同区域就会跳转到不同的url，这就是分区相应图
这种功能开发中应该很常见，尤其是APP中的引导页，当只有一张整素材的时候，需要前端确定用户点击了某处的按钮，我称之为幽灵按钮
但是通过分区相应图可以很快的实现这种效果

通过map和area实现

<p><img src="blue.png" usemap="#myMap" alt="Blue Map"/>3 </p>4 
<map name="myMap">5   
 <area href="area1.html" shape="rect" coords="5,8,30,32" alt="area1" />6    
 <area href="area2.html" shape="rect" coords="34,8,50,32" alt="area2" />7   
 <area href="other.html" shape="default" alt="default"/>8 
</map>

使用js编写一个红绿灯的程序：

function sleep (t) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, t)
  })
}


/** * 循环显示红绿灯 * @param {number} green 绿灯显示毫秒数 * @param {number} yellow 黄灯显示毫秒数 * @param         {number} red 红灯显示毫秒数 */async function light (green = 15000, yellow = 3000, red = 10000) {
  let status = 'green'
  while (true) {
    await sleep(green).then(() => {
      status = 'yellow'
      console.log(status)
    })
    await sleep(yellow).then(() => {
      status = 'red'
      console.log(status)
    })
    await sleep(red).then(() => {
      status = 'green'
      console.log(status)
    })
  }
}


light(3000, 1000, 1000)

从技术手段上提高打包速度

跟上技术的迭代（升级node，npm或者yarn），因为webpack是基于node的，node的升级对webpack性能也会有提升，npm中很多的依赖包存在升级，那么对打包的速度也是有提高的
在尽可能少的模块上应用loader，loader的使用会对更多的文件去解析，所以在配置文件中，比如要把node_modules中的文件进行排除，因为可能依赖项已经被打包过，再打包一遍会更浪费事件
关于plugins的使用，尽量使用社区/官方推荐或者非常流行的插件，因为通常这类插件的稳定性和易用性得到了大多数人的认可，而第三方公司或者私人的插件可能会造成对项目优化不友好的地方
所以尽量避免使用plugins

通过resolve配置来提升打包速度

webpack中的resolve可以帮助我们引入第三方模块或者组件的时候，可以能够更方便的引入，比如通常在写vue的时候

import commonHeader from "../components/commonHeader"

不用指定其组件的后缀“vue”就可以找到，那么vue-cli是如何做到的呢，webpack配置就是如下：

resolve: {
    extensions: ["vue", "js", "jsx"]
}

可以通过这样简单配置，如果在目录下，没有找到对应的文件，那么就会再次遍历去寻找配置项指定后缀文件，但是这样的配置如果我们配置的过多的话，比如像这样

["jpg", "png", "json"]

一股脑地全部配上，这样就会在webpack打包中增加压力，延缓打包速度（因为要多次遍历查询）

所以一般的解决方案是：“只配置逻辑文件，如jsx，js，vue”等

如果我们引入配置的时候，引入的路径是这样的

import common from "./common/"

会发现，当组件的名称如果叫index.**时，这句代码是正确的，如果是其他名称，就‘

会报错，是因为webpack的默认项会把index当作主文件，那么我们也可以通过这样的配置进行更改：

mainFiles: ["index", "common"]

resolve中也还有其他常用的配置

比如alias（别名）,比如我要这样引入

import common from "shenhao"

我们可以设置一个别名

alias: {
    shenhao: path.resolve(__dirname, ../src/common)
}

然后我们就可以使用alias进行引入，感觉通过这样的描述会感觉这个属性非常鸡肋，其实并不然，比如非常复杂的目录结构，要引入一个包要写很长的路径

如果写过vue的开发者来讲，@符号就表示src下的根目录，那么这个@就是一个别名

但是为了webpack的打包性能，尽量不要使用过多的配置alias和上面的extensions，配置项目中最常用的即可哟

使用DllPlugin提高打包速度

我们尝试使用一个babel打包一个react的程序，如图：

import React, { Component } from 'react';
import ReactDom from 'react-dom';
import _ from 'lodash';


class App extends Component {
    render() {
        return (
            <div>
                <div>{_.join([1,2,3,4,5], "...")}</div>
            </div>
        )
    }
}


let haha = document.createElement("div");
document.body.appendChild(haha);
ReactDom.render(<App />, haha);

经过多次打包，速度平均稳定在

那么问题来了，我们每一次打包都会分析react,react-dom等库，我们可以尝试把这些库只分析一次，之后的打包读这些分析过的文件即可

首先我们需要额外的分析这些第三方库

新建webpack.dll.js

const path = require("path");


module.exports = {
    mode: "production",
    entry: {
        vendors: ["react", "react-dom", "lodash"]
    },
    output: {
        path: path.resolve(__dirname, 'dll'),
        filename: '[name].dll.js',
        library: "[name]"
    }
}

我们向外暴漏一下全局变量，然后我们则要让打包后的index.html去引入这个第三方库编译后的js
ps: 要让打包后的index.html自动引入，则需要add-asset-html-webpack-plugin这个插件，做一个简单配置即可（必须）

但是我们在main.js中的引入

根本引入的不是我们编译好的js文件，还是引入的是node_modules中的

2. 让main.js引入的文件映射到编译过的第三方库文件中

首先配置一下，webpack.dll.js中我们增加一句代码

plugins: [new webpack.DllPlugin({
    name: "[name]",
    path: path.resolve(__dirname, "dll/[name].manifest.json")
})]

引入了webpack之后，使用了webpack中的DllPlugin模块，生成的分析文件的name就是暴漏的全局变量，path就是分析文件的地址

我们将使用全局变量+分析文件来做映射，让代码中的import这样的语句，映射到我们分析的js文件中，而不是引入node_modules中

所以在webpack.config.js中加入

new webpack.DllReferencePlugin({
   manifest: path.resolve(__dirname, "dll/vendors.manifest.json")
})

这边我们传递参数的内容就是生成出来的映射文件，这个时候我们重新打包会发现，打包速度会少200-300毫秒（根据电脑性能不同）

流程梳理：

将不会变更的库进行单独打包，并且暴漏一个全局变量（核心）
打包之后使用DllPlugin进行分析，生成一个映射文件，条件是必须有一个全局变量
在打包main.js中，webpack会对引入的模块进行查询，而common.js使用了DllReferencePlugin这个插件，会在对应的映射文件中查询如果对应的单独库js文件存在引入的模块，那么main.js将直接把单独库js文件中的对应的内容为自己所用，就不会在去node_modules中去寻找模块，通过这一系列，将减少打包时间

那么在大型项目中，需要拆分很多很多的dll.js和manifest.json，那么如何做到“智能的”让webpack使用DllReferencePlugin和add-asset-html-webpack-plugin呢，在看这个问题之前，我们来尝试一下传统方法

不智能的做法：

entry: {
        vendors: ["lodash"],
        react: ["react", "react-dom"]
    },

我们假设要生成2个分析文件

那么我们在webpack.config.js需要这样做

plugins: [new HtmlWebpackPlugin({
        filename: 'index.html'
    }), new AddAssetsHtmlPlugin({
        filepath: path.resolve(__dirname, "dll/vendors.dll.js")
    }),new AddAssetsHtmlPlugin({
        filepath: path.resolve(__dirname, "dll/react.dll.js")
    }), new webpack.DllReferencePlugin({
        manifest: path.resolve(__dirname, "dll/vendors.manifest.json")
    }),new webpack.DllReferencePlugin({
        manifest: path.resolve(__dirname, "dll/react.manifest.json")
    })]

居然要配置2遍插件

每个被分析的js都要暴漏一个全局变量，这个之前也说过，需要把每一个文件添加到html中，有了全局变量之后，才能让webpack去用json去查询模块

那么我们假象一下，一个项目如果需要规定上10个，上100个的入口模块，那么就要配置200次（100次添加js到html，100次查询json依赖文件）

这显然是不可取的，所以我们可以用相对智能的方式去做哟，需要用到node一点东西哟；

智能的做法：

思路1： 在运行之前，肯定是解析过了dll.js的，所以运行webpack.config.js之前，项目中应该会有100个.dll.js , 100个.manifest.json
我们抽象一下webpack.config.js中的plugins，定义一个数组

const fs = require("fs");
const plugins = []; // 抽象plugins数组
// 读取dll目录下的数据
let readFileList = fs.readdirSync(path.resolve(__dirname, "dll"));
console.log(readFileList);

// 打印结果：
[ 'react.dll.js',
  'react.manifest.json',
  'vendors.dll.js',
  'vendors.manifest.json' ]

循环这个数组

const files = fs.readdirSync(path.resolve(__dirname, '../dll'));
files.forEach(file => {
    if(/.*\.dll.js/.test(file)) {
        plugins.push(new AddAssetHtmlWebpackPlugin({
            filepath: path.resolve(__dirname, '../dll', file)
        }) )
    }
    if(/.*\.manifest.json/.test(file)) {
        new webpack.DllReferencePlugin({
            manifest: path.resolve(__dirname, "dll", file)
        }) )
    }
})

判断循环的当前file名称是不是dll.js，如果是dll.js，就在数组中添加对应的AddAssetHtmlWebpackPlugin 插件，反之就DllReferencePlugin 添加这个插件

大功告成，所以每当有一个新的入口时候，只需要

entry: {
        vendors: ["lodash"],
        react: ["react", "react-dom"]
    },

在webpack.dll.js随意配置即可， 但是每次打包之前，必须要先生成dll.js和manifest.json文件

控制包文件大小

在日常写代码的时候，一些引入的模块，没有用到，那么可以借助treeshaking和codesplit一些代码分割的插件，来控制包大小

多线程打包

webpack基于node的，是单线程进行打包，我们可以在单页应用使用thread-loader来对单页应用进行多线程进行打包，多页应用则使用parallel-webpack进行打包，还有一个是happypack

合理使用soucemap

合理选用适合项目的soucemap模式，过细的soucemap会增大打包压力，所以根据调整soucemap也可以调优

结合stats

一些第三方的网站可以分析webpack的打包文件，分析出打包的文件，哪个文件大，哪个文件慢，从而达到目的性的调优

开发环境内存编译

在开发环境时，使用的webpack-dev-server就是通过内存存储打包后的文件，所以内存的读写一定比硬盘读写快，所以使用内存编译的方式，打包速度也会加快

开发环境无用插件剔除

开发环境下，不需要过多的插件进行压缩等等，所以剔除无用插件也可以达到调优目的；

这段时间一直没有更新文章，实在是有点忙，所以以后基本都会每周周更，文章其实就是自己学习的一个成果展示，并不是什么科普文章哟

今天我们来聊聊reduce，之前呀我们在写业务的时候，循环非常喜欢forEach, for in,map等循环api，但是reduce和这些有什么区别呢，其实reduce循环和刚刚提到这几个循环作用都是一样，但是适用于场景也不一样，它能干其他循环干的了的，也能干其他循环干不了的，还有一个很好的优点就是：很装逼~~， 而且reduce毕竟是高阶函数，在公司中合适的用到它，也能适当提示代码质量。

我喜欢用例子去解决一个知识点，所以我们从例子出发

let arr = [1, 2, 3, 4, 5];
let result1 = arr.reduce((prev, current, index, arr) => {
  console.log(prev, current, index, arr);
  return prev + current;
});
console.log("最后结果:" + result1);

这是一个数组值求和的例子，result1就是结果

下来描述一下reduce的用法： reduce为数组提供遍历方法，每一次遍历都会执行一次回调函数；

prev: 上一次回调函数返回的值
current: 当前遍历的数组元素
index: 循环当前索引
arr: 调用reduce函数的数组

reduce方法除了回调函数的四个参数，还有一个参数叫做initialValue，字面意思： 初始化值，那么设置这个初始化值有什么用呢？

上面的那个图片例子中的第三个参数分别是1，2，3，4，只循环了4次，执行了4次回调函数，这并不符合常理，但是如果我们把initialValue设置成0，会如何呢？

设置了初始值，我们就从0开始了，可见如果不设置初始值，reduce会自动跳过第一个直接进行第二次循环；

那么数组为空，我们看会造成什么？

浏览器会提示我们当数组为空，如果不设置初始值会报错，所以我们在循环的时候，为了代码严谨和安全：

务必要设置initialValue

reduce：简单场景

1. 数组求和

    let arr = [1,2,3,4];
    let sum = arr.ruduce((pre,cur) => pre*cur);
   

reduce: 高级场景

1. 统计数组中的元素出现的次数

    let arr = ["昊儿", "王航", "范冰冰", "王航"];
    let result1 = arr.reduce((prev, current, index, arr) => {
      if (current in prev) {
       // 如果存在，就加一
       prev[current]++;
      } else {
       prev[current] = 1;
      }
      return prev;
    }, {});
   
    console.log(result1);
   

结果：

2. 数组去重复

    let arr = ["昊儿", "王航", "范冰冰", "王航"];
    let result1 = arr.reduce((prev, current, index, arr) => {
      if (!prev.includes(current)) {
    // 如果不存在
    prev.push(current);
      }
      return prev;
    }, []);
    console.log(result1);
   

3. 二维数组转换为一维数组

    let arr = ["昊儿", "王航", "范冰冰", "王航", [1, 2, 3]];
    let result1 = arr.reduce((prev, current, index, arr) => {
      return prev.concat(current);
    }, []);
    console.log(result1);
   

4. 多维数组转换为一维数组

    let arr = ["昊儿", "王航", "范冰冰", "王航", [1, 2, 3, [2, 3, 4]]];
   
    let test = function(cur) {
      return cur.reduce((prev, current, index, arr) => {
    return prev.concat(Array.isArray(current) ? test(current) : current);
      }, []);
    };
    console.log(test(arr));
   

看完这些例子，我会说：真香...哈哈哈

今天是周天，本来周五晚上就想写这一篇总结，但是每周分享的题总结还没结束，只能结束之后新写这一个文章。
其实，昨天在逛github的时候给我推荐了几个不错的仓库博客，类似于《一周攻克一个前端难点》，我也会有时间去学习，并且把学习到的干货分享到博客上来。

关于这边《ECMAScript 6 入门》，我没有买这个书而是看阮一峰老师的电子开源书籍，周五看了第一章关于let和const，然后加深了我对于作用域，死区的理解，然后在书中也有非常多的demo例子，这些例子在笔试中还是高频率的出现的，一些前端开发者在面试（入行不深的程序员）选择google出来的答案，背下来....

但是这非常不实用，因为你不了解这种题如何做，在工作中如何避免bug。
在新专栏的开始之前，我想多说几句，和大家分享一下我的学习方法，我也是入行不深，仅仅只有半年多而已，但是写代码即将2年多，
我学习前端的方法也非常简单，项目实战（有利于能接触到更多的场景）-》刷题（渣渣程序员只能从语言角度上刷题，涉及不到算法数据结构的题）-》笔记和博客（每天总结笔记，每一段时间总结博客）要养成良好的习惯，不管多忙，在地铁和公交车上一定要把笔记写完，随手复习，工作中可以翻阅；

正题开始............

es6是前端开发者必须掌握的一个知识点，不管是培训结构还是某些大学的前端课程，传授的es6都相对非常浅，没有去认真的一篇一篇去消化巩固，作者也是这样的，所以现在开始我们将一起一步一步精读阮一峰老师的这本非常棒的书籍，把es6完全消化，能够让你在工作中面试中杀出一条血路。

首先我们来快速了解一下let；

Let

我们尝试写这样一段代码：

{
    let a = 1;
    var b = 10;
}

console.log(a); // Uncaught ReferenceError: a is not defined
console.log(b); // 10

这个例子说明了let只会在声明它的代码块中生效，而var则相反

我们一起再看一个例子：

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[1](); // 10

这个循环中的i是一个全局变量，每一次循环全局的变量i都会发生改变，所以尽管它循环100次，数组中console.log中的i永远指向全局变量即100，最后一次循环的赋值；

但是如果把上面的var换成let就不一样，let只在自己的块中存在，所以每次循环都会重新let一次i变量，所以每次输出的console.log中的i指的是当前循环到的i

但是你肯定会说：

既然是重新let一次i，那么每次它应该都是0呀，为什么还能记忆上次的i值呢？这不科学...

那是因为js引擎会记住上一次i的值，为下次循环做运算，这一部分是js帮助开发者做好的。

js的for循环还有一个特别之处：设置循环变量的是一个父作用域，而循环体是一个子作用域

for (let i = 0; i < 10; i++) {
    let i = '123';
    console.log(i) // 123
}

正确运行，并且成功赋值打印新的值；

Let - 关于变量提升

js中的var是存在变量提升的，什么是变量提升呢？

console.log(i); // undefined
var i = "I love you"

在变量未被附值的时候，js解析代码会变成下面这个样子：

var i;
console.log(i);
i = "I love you"

但是let并非这样，它没有所谓的变量提升，只要在声明前使用，则会报错；

console.log(a); // Uncaught ReferenceError: a is not defined
let a = "yes";

所以var会让变量提前声明，而let不会提前声明，如果声明前用到了它，就会报错Uncaught ReferenceError；

Let - 暂时性死区

文章的开头我们降到了死区这个概念，之前呀，我也不太懂这个死区，以为是一个很难的概念，没想到和let有关系，非常简单；

var a = "123";
{
    a = "125";
    let a = "456";
}

ES6明确规定，let和const声明了一个变量，那么会和当前作用域块进行绑定，如果在声明前使用到了变量，那么就会报错；
这在代码中我们称之为 "暂时性死区"

那么如果我们不向变量赋值会不会报错呢？ 事实证明typeof也不是一个正确的操作

typeof x; // Uncaught ReferenceError
let x;

如果我们检测一个不存在的变量

typeof notfound; // undefined

所以说这也意味着我们编写代码的时候要在声明之后使用它；

在阮一峰老师的文章中也提到了不常见的死区的案例：

function test(x = y, y = 2){

}

test();

x的默认值是还未声明的y，所以会报错；

var x = x;  // 不报错
let x = x; // 报错

其实上面这个代码，之前就解释过了，var出来的变量即已对变量进行初始化，所以等号右边的x就是undefined
而let出来的变量没有变量提升，然后又在变量x声明之前使用到了x，这显然是错误的，因为之前使用的就是死区；

因此死区的触发有很多，检测，赋值，使用， 等等等；

Let - 不允许同时声明在同作用域中

{
    var a = 1;
    let a = 1;
}

或者

{
    let a = 1;
    let a = 1;
}

又或者

funtion test(arg){
    let arg = "123";
}

这些都会报错，但是在不同作用域中是可以的

funtion test1(arg){
    {
        let arg = "12";
    }
}

it is ok!!

关于块级作用域

面试中经常会被问到作用域， 全局作用域，函数作用域，在es6中新的概念就是块级作用域，之前面试过其他的前端开发者谈到块级作用域解决了什么问题，和let，const的关系，他们也是没有一个很准确的答案；

这边用阮一峰老师的2个demo例子：

var temp = new Date();
function test(){
    console.log(temp);
    if(true){
        var temp = "hello"
    }
}

test(); // undefined

上面这个例子之所以输入未定义，是var变量会造成变量提升，即var temp; 内层的temp替换掉了new Date的那个变量，提升到了函数作用域的顶级；

还有一种场景就是，我们在用循环的时候，使用var，导致循环结束var的变量依然存在，造成变量泄露；

事实上，let和const就是块级作用域，因为我们知道在前面的内容讲到let只能在当前作用域下使用，和其他的作用域不相干，这就是形成了块级作用域；

let a = 1;
if(true){
    let a = "1111"
}
console.log(a); // 1

ES6允许我们块级作用域嵌套

{{{{{
    console.log(1)
}}}}}

即内层的可以读取到外层同名变量，外层不能读取内层的同名变量；

块级作用域和函数声明

ES5规定，块级作用域里面不能写函数声明语句，但是浏览器为了兼容以前的旧代码，没有遵守这个规定；
但是ES6明确规定，块级作用域下可以写函数声明，但是函数声明类似于let，在作用域之外不能使用；

看一下下面这个demo：

function f() { console.log('I am outside!'); }
(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());

如果是在ES5中写这个函数，那么最终会输出 "I am inside!" ，因为会变量提升提前到函数顶部，所以会输出inside
但是如果在ES6中声明，理论来讲会输出outside，因为es6规定了函数声明相当于let，只在自己作用域生效，不会影响其他作用域，也没有变量提升，但是如果在ES6中就会输出undefined；

为什么呢？说好的规定呢？说好的let呢？

原来浏览器又有自己实现的一套方法，输出undefined的原因还是被提升了

var f = undefined;

所以我们在作用域中写函数，不要用函数声明，要使用函数表达式，这样最稳妥...

const

ES6新增的常量，我喜欢叫它常量，因为它不可改变；

const a = 1;
a = 12; // TypeError: Assignment to constant variable.

且不能这样写

const a;

不能像var和let一样先定义再赋值；

const和let一样，只能在声明的块级作用域有效
const和let一样，也有死区
const和let一样，也不能重复声明

const的本质其实并不是const的变量值不能被改变，而是指针（地址）是固定的；

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。
---------------《ECMAScript 6 入门》

所以我们可以改变const的数据结构

const props = {};
props.name = "1";
props.age = "12";
props = "12"; // 报错

结束咯，喜欢这篇总结，就收藏起来吧~~
原文阮一峰老师地址： http://es6.ruanyifeng.com/#docs/let

写在前面： 本文章的答案可能不是很完整，因为毕竟是面试/笔试回答，如果单领一个知识都能凑一篇文章，所以回答仅供参考，大家一起学习~~

BOM和DOM的区别

首先BOM > DOM，前者是后者的集合，BOM是浏览器对象，宿主是浏览器存在的对象，浏览器提供了很多自己的api供js调用，而dom是文档结构对象，提供了文档相关的API，dom和bom在node中没有这个概念，浏览器下才有

如何让字体变得更细更清晰

选用字体更清晰的font-family / ，图片，或者使用谷歌属性抗锯齿font-smoothing，但是这个兼容性不好

说说你对HTML元素的显示优先级的理解

frameset元素层级最高；
有窗口的比没窗口的高； video，audio等
表单元素比非表单元素高；input
z-index能提升同等级元素的高度，不能跨等级；

说下line-height5种赋值方式有何区别？

• 默认行高
• 设置数字，是父元素的font-size倍数
• 固定行间距，固定的值
• % 父元素的font-size百分比
• 继承inherit

造成内存泄漏的操作有哪些？

递归，闭包，定时器没clear等

html和html5有什么区别呢？

标准的区别： HTML是基于SGML的，HTML5不是，SGML是标记语言的集合，xml和html都是基于它的标准来的，所以html要写DTD规范，是因为SGML的要求需要告诉浏览器以哪种标准来渲染；
语义化的区别，在机器和人类阅读来讲，HTML5的新增语义化标签会更友好
SEO的区别：SEO支持更好
功能区别：CANVAS和音频媒体的支持，使得H5不仅仅可以做网页，可以做游戏甚至是可穿戴设备
全面拥抱移动端 nice

用CSS绘制一个三角形

原理： 利用了border切口处是三角形的这个特性，宽高为0，将二边隐藏透明色，一边扩大border的宽度即可

说说你对this的理解

这边简单提一下，因为this这个概念还是要说一个比较大的篇幅的
this指的是当前运行时的上下文，this是会发生改变的，比如apply，call,bind
非严格模式下，全局this是window
函数this是谁调用了它，谁就是this

Standards模式和Quirks模式有什么区别？

浏览器的执行模式，一个是标准模式一个是怪异模式
标准模式是w3c规定的标准模式
怪异模式是为了兼容各个浏览器以前不标准的时候提出的解决方案
标准模式下的宽度，是内容宽度
怪异模式下的是border+padding即宽度
可以使用border-box: border-box来使用怪异模式。content-box是标准模式。

浏览器是怎样判断元素是否和某个CSS选择器匹配？

如果我没记错的话，有一个集合的概念，浏览器解析文档的时候，会把最后一个索引的元素集合到一个集合中，这个索引指的是

.class .red div {}

会把最后一个索引（div）的所有元素放在一个集合中，然后选择器从右到左进行查找，根据集合中的元素从下往上去查找，如果通过匹配父类不成功的元素会从这个集合中消失，直到整个集合留下最后一个成功的，就进行渲染，当然不同的浏览器还会有其他的优化，这一块也不是特别了解。

如何用div写出类似textArea的效果？

主要利用

contentedittable="true"这个属性进行div可编辑，可以利用以下css进行调整：

resize: both;width: 300px;
height: 200px;
padding: 5px;
border: solid 1px #ccc;
resize: both;
overflow:auto;

使用flex实现三栏布局

太过于简单面试题，讲一个思路就可以了，首先最中间肯定是写最前面的，因为优先渲染；
利用flex布局，左右两边flex: 0 0 auto; 中间： flex: 1 1 auto; 利用order排序即可

请你解释一个为什么10.toFixed(10)会报错？

浏览器在解析js中出现了扰乱，小数点在js中也有调用方法的作用，那么10是整数，js以为10后面跟的小数点是小数，没想到是直接调用了方法，让引擎执行代码中出现了冲突；

如果是0.1.toFixed不会报错；
解决办法：

10..toFixed(10);
(10).toFixed(10);

讲一下前端性能有哪些方面可以优化？

这个非常多，从很多方面来简单说一下；

雪碧图，websocket（不要使用轮询和长轮询）,图片服务器，data属性，CDN，代码分割，减少dom操作次数，避免重排，懒加载，预加载

webpack方向：

treeshaking，preload,prefetch，异步加载模块（非常重要）；

PWA： 离线存储，service-work

HTML与XHTML有什么区别？

XHTML中必须正确嵌套，必须小写，必须闭合标签

写出主流浏览器内核私有属性的css前缀

• -webkit- 谷歌和sa
• -0- 欧朋
• -ms- ie
• -moz- 火狐

关于前端安全

讲真不太了解，大概知道一点点的概念；

• XSS跨站脚本攻击：

一般是sql文件或者js文件，对用户输入的东西不要信任，服务端返回的也不要信任，全部需要转义，要带上请求头和cookie等

• csrf跨站请求伪造

这种防御系数很高，防御资料很少，一定程度来讲比XSS防范程度要高，把持久化的验证方式转换为瞬时验证方式，比如给form表单添加隐藏的信息等等

语义化标签有哪些？

header footer menu section article aside main nav等等

找到字符串中最长的单词，并返回它的长度

function test1(str){
    str = str.split(" ");
    return str.reduce((start, end) => {
        return start.length > end.length ? start : end;
    })
}

cookie和session的区别

cookie主要是客户端产生，体积很小只有4k，服务端也可以设置，可以设置时间等
session是服务端生成的，通常给客户端返回sessionid，前端存储在cookie中进行鉴权等操作；

说说你对eval的理解

一个小型的语言解释器，括号内填写js代码字符串，但是不宜与维护，而且不安全，非常不建议使用；
但是某些场景下，比如webpack中的soucemap就使用到了eval

你知道网页三剑客指的是什么吗？你有用过Dreamwear吗？

dw（不是那个手表，是dreamwear），firework，flash

title与h1、b与strong、i与em的区别分别是什么？

title是网页标题是在head中，h1是网页中的大标题加粗，类似于word中的h1，有很高的seo权重
b和strong都是加粗，但是strong会有警告的作用
i和em是html网页物理标记，告诉浏览器以什么格式渲染

写出你知道的CSS水平和垂直居中的方法

flex就不写了
定位和margin，百分之50减去自身高度宽度的一半
transform同理
不考虑兼容性可以使用calc函数

说说你对模块化理解

前端工程化的到来，尤其是node的兴起，模块化已经离不开我们，在日常的开发中，模块化有利于我们的代码维护，代码修正，代码复用等等，AMD,ES,COMMON，几个常用的模块方式已经非常流行，组件化的开发也得到了数以万计的项目的证实，确实是符合现代化工程（本人胡说一通）

只要答准amd，common，es等，这些历史，如何使用，项目中是如何分配的，讲区别就可以了；

html5都有哪些新的特性？移除了哪些元素？

新增了表单的type类型，对画布的支持，对存储的支持data-，对媒体的支持
移除了center，frame，frameset标签

怎么才能让图文不可复制？

-webit-user-select: none;

为什么会有跨域，解决办法是什么？

浏览器的同源策略，也是为了web应用的安全，不受信任的服务之间的信息传递
同源概念： 不同协议，不同端口，不同域名
主要解决方案有好几个
jsonp 只能get请求
cors 需要后端配合
proxy： 代理转发
禁止浏览器跨域安全策略

如何兼容websocket ？

websokect是一种协议，它是新特性，不兼容低版本的浏览器
有轮询，即在一定时间进行请求，服务端有新请求则返回，缺点：请求次数会非常多，并发压力
有长轮询，即服务端返回结果，再发起下一次请求，缺点： 对服务器的有并行压力
SSE也是可以，eventsouce对象，仅仅是知道，没用过

如何让英文单词的首字母大写？

text-transform: uppercase;

说说你对IIFE的理解

立即执行函数，为了形成闭包，其中的变量不会和全局变量进行污染
立即执行函数的几个必要条件：

1. 必须是函数表达式 2. 声明之后必须()立即调用它
   一般我们见到的是这样的：

   (function(){}()) 或者 (function(){})()
   他们是等价的，同理它们也是一样的：
   !function(){}() 或者 ?funtcion(){}()
   前面的特殊符号只为了把函数声明转换为表达式

写重置css有什么用？

重置业务相关的css，利于还原设计图，进行多个浏览器的不同样式校对

window对象和document对象有什么区别？

这个很像第一题，它们是一个题

如何让元素固定在页面底部？有哪些比较好的实践？

position fixed boottom: 0;
还有粘性定位，不过兼容太差，不建议使用

说说video标签中预加载视频用到的属性是什么？

prderload="preload"

手写一个品字布局的方案

第一行居中
第二行简单来讲可以用flex，space-around
也可以用其他方式，非常简单

深拷贝实现

递归实现

function deepclone(obj){
let _obj = {};
for(let key in obj){
    if(obj[key] && typeof obj[key] === 'object'){
        _obj[key] = deepclone(obj[key]);
    }else{
        _obj[key] = obj[key]
    }
}
return _obj;
}

xml与html有什么区别？

XML和html都属于SGML标准中
XML要求必须闭合标签，而且主要是存储数据的，多个空格不会读成一个空格
html反之

你知道的等高布局有多少种？写出来

top和bottom是0
padding-bottom: 9999999999px; margin-top:-99999999999999px;使用浮动再 清除浮动，即等高
flex默认就是盛满父盒子

写出几种创建对象的方式，并说说他们的区别是什么？

字面量
let obj = {};
new一个构造
let obj = new Object();
Object创建
let obj = Object.create(); // 这个可以设置原型

页面中怎么嵌入Flash？有哪些方法？写出来

object标签，embed标签

说说你对媒体查询的理解

根据业务的不同，进行宽度高度等其他因素的调整，要用到媒体查询，目前最流行的就是css3的媒体查询，
在一定程度上可以满足所有的设备，实现一套代码多端运行的效果

写一个使2个整数交换的方法

let [a,b] = [b,a];

HTML5如何使用音频和视频？

video标签和audio标签

你是怎样抽离样式模块的？

样式模块分为几种，公用样式，业务样式，重置样式，通过css分离，将业务组件中的代码和其他组件的样式
进行分离互不干扰；可以高效利用css预编译工具中的函数等封装一些高频出现的样式

请说说你对事件冒泡机制的理解？

事件分为几个阶段，第一个是捕获阶段-》第二个是目标阶段-》第三个是冒泡阶段
冒泡是从内而外进行传递的，当点击子元素的事件，那么相应的父级元素的事件也会触发
冒泡可以使用event.stop*,一个方法，我忘记了。。。
但是一些业务场景来讲，比如列表，我们没必要去给每一列去绑定事件，可以在父级上定义事件，通过事件对象的排查，确定是第几个元素点击了click，那么这将是优化长列表的一种常见的手段

说说你对WEB标准和W3C的理解与认识？

web标准是web最正规的标准，以前的代码时js,css,html混在一起，为了模块化，web标准规范了这一点；
w3c是web标准之上进行调整强化的一套标准，比如标签名小写，正确嵌套，语义化等等

你知道全屏滚动的原理是什么吗？它用到了CSS的哪些属性？

全屏滚动的原理其实和轮播图很类似，只不过搭配了一些css，比如高度和宽度沾满了整个屏幕，overflow: hidden; 然后监听js的滑动事件，进行dom的切换

你对事件循环有了解吗？说说看！

事件循环对象之前专门写了一个文章说了，说到事件循环，不得不提到几个关联的知识点，就是任务队列，事件循环，宏观任务和微观任务，单线程等等

这边做一个简单的复习

js是一个单线程的脚本语言，但是不代表它只有一个线程，它处理同步任务的线程只有一个，叫做主线程，所有的微观任务都将产生一个回调函数，全部放在了任务队列中，当主线程任务结束的时候，会从任务队列中去查询有没有异步任务返回，如果有返回就会把异步任务转换为同步任务，放在主线程处理，那么去一遍遍的查询任务队列中是否有可用异步任务的这个动作称之为事件循环

说说你对target="_blank"的理解？有啥安全性问题？如何防范？

安全性问题就是，目标页面可以通过document.referer查询到源路径，解决办法就是在a中加noreferer；

假如设计稿使用了非标准的字体，你该如何去实现它？

协商/换图片/引入字体（字蛛）

Ajax与Flash的优缺点分别是什么？

ajax是异步请求，更新页面的方案，flash现在在与时代脱轨，但是仍有不少直播网站使用flash

列举CSS优化、提高性能的方法

• 尽量少使用通配符和元素选择器
• 少使用嵌套
• 压缩css
• 减少页面重排
• 使用link，而不是import

请写出一个函数求出N的阶乘（即N!）

function test1(n){
    if(n > 1){
        return n * test1(n-1);
    }
    return n;
}

Form表单是怎么上传文件的？你了解它的原理吗？

在html表单中，使用input file上传图片，比如设置methods是post且enctype是multipart/form-data
浏览器才知道是使用了二进制发送表单数据
原理略

字符串相连有哪些方式？哪种最好？为什么？

es6的模板字符串，传统加号拼接兼容性更好些

From表单提交时为什么会刷新页面？怎么预防刷新？

在原来的web开发中，通常是form表单提交之后，后端返回一个新的页面，这种方式也被web程序员所接受，所以浏览器也是默认了这个规范，避免刷新只能监听submit，然后使用ajax请求发送

要是position跟display、overflow、float这些特性相互叠加后会怎么样？

display: none;之后所有内容不可见
定位之后，浮动无效

什么是事件委托？它有什么好处？能简单的写一个例子吗？

上面提到过冒泡，列表点击事件那个例子，就是事件委托，通过冒泡，父元素监听是谁委托
我把上面的复制一遍：

事件分为几个阶段，第一个是捕获阶段-》第二个是目标阶段-》第三个是冒泡阶段
冒泡是从内而外进行传递的，当点击子元素的事件，那么相应的父级元素的事件也会触发
冒泡可以使用event.stop*,一个方法，我忘记了。。。
但是一些业务场景来讲，比如列表，我们没必要去给每一列去绑定事件，可以在父级上定义事件，通过事件对>象的排查，确定是第几个元素点击了click，那么这将是优化长列表的一种常见的手段

web workers有用过吗？能帮我们解决哪些问题？

上一个问题讲过了，js是单线程的脚本语言，来处理同步任务，但是一些IO读取等同步任务可能会同步任务执行缓慢，为了利用多核cpu，webwoker允许我们把任务放在里面，不影响主线程的任务进行；

解决：复杂的io读取，或者大量计算，有利于运用多核CPU，来更高效的执行任务

如何使用自定义字体，有啥注意事项

@font-face有兼容问题，而且字体过大在app端可能运行失败，需要使用字蛛

document的onload和onready的区别

js中没有提供ready方法，但是jquery提供了，ready的意思是文档已经加载完毕，但是加载完毕并不代表资源全部加载完毕，ready后可以对dom进行操作；但是load指的是所有的资源（图片媒体等）全部加载完毕

HTML5的地理定位

navigator.getloction，不好用，定位不准确

css3的:nth-child和:nth-of-type的区别是什么？

查找父元素的第几个子元素，后者是根据类型来查找
()里面可以写数字即第几个，也可以写表达式等

写一个函数找出给定数组中的最大差值

这个很多

function test1(arr){
    return arr.sort(); // 排序，然后第一个减去最后一个
}
Math.max(...arr); // 求最大数
Math.min(...arr); // 最小数
然后相减即可

HTML5中新添加的表单属性有哪些？

placeholder，type类型中也添加了很多新属性，比如date，url，email

什么是视差滚动？如何实现视差滚动的效果？

视觉差滚动是今年来非常流行的web表现方式，通常是滑动页面，然后对应的元素进行偏移，这种效果我们称之为视觉滚动，通常会有很多库来实现它

写出4个使用this的典型例子

*.call(this);
funtion test1(){
    this.a = funtion(){
        return this.b
    }
    this.b = "test"
}
let a = 1;
console.log(this.a)
funtion test1(){
    a = funtion(){
        return this.b
    }
    b = "test"
}

渐进式渲染是什么？

web应用做兼容，先把最基础的兼容好，再做增强

margin和padding的使用场景有哪些？

margin：外部盒子与其他元素的距离
padding：内部盒子与内容的距离

JSONP的原理，解决了什么问题

解决了浏览器同源策略问题
缺点: 只支持get请求
原理：创建script标签，回调函数挂载到全局，给脚本设置url，并设置回调，脚本加载的回调会自动给全局变量，监听onload，加载之后移除script标签

function jsonp(url,parmas.callback){
  var script = document.createElement("script");
    script.url = url + parseObjParmas({...parmas, callback: "jsonp"});
    document.appendChild(script);
    window.jsonp = callback;
    srcipt.onload = () => {
    document.removeChild(script);
    }
}

你了解download属性吗？

h5新增下载功能，兼容不好，必须和href搭配，用于描述下载说明

inline、block、inline-block这三个属性值有什么区别？

规定了盒子的排列方式
inline: inline-inline;
block: block-block
inline-block

盒子分为内盒子和外盒子，而这些属性就控制着页面布局方式和内容布局方式

写一个方法，使得sum(x)(y)和sum(x,y)返回的结果相同

函数柯里化

console.log(sum(x)(y));
function sum(){
    let arg= arguments;
    return funtion(){
        let arr = [];
        arr.push(...arg, ...arguments);
        return arr.reduce((total, current) => {
            total += current;
        },0)
    }
}

HTML5相对于HTML4有哪些优势？

1. 语义化
2. 声明简洁
3. 媒体画布
4. 更好的被机器解码
5. 全面拥抱移动端

box-sizing常用的属性有哪些？分别有什么作用？

border-box content-box
用于浏览器切换标准模式和怪异模式的
标准模式的盒子宽度是内容宽度不算padding和border，怪异模式是算在里面的，显然后者符合人类思维
所以一般会写border-box

请说下你对__proto__和prototype的理解

隐式原型和显式原型
每一个函数都有一个prototype指向函数原型，原型中的construtor指向构造函数
每一个对象都有一个_proto_指向构造这个对象的原型对象

隐式对象不可打印（谷歌和火狐可以）

有用过WebGL吗？说说你对它的理解

一种js的api，用来绘制2d,3d的图形

用过哪些css框架？

antdesign bootstrap layui