异步加载JS文件的⽅式
为什么要异步加载js文件？因为js的加载会阻塞浏览器的渲染。
第一种解决方法，将js文件写在body下面
第二种解决方案是用async,浏览器会开启一条的线程去下载js文件，同时操作html的渲染,但是等js一加载完就会就会去执行js文件，所以还是会有可能阻塞的。
第三种解决方案是用defer，它和async差不多，但是defer,加载完js以后会等待html的渲染完成再去执行js文件。
数组去重
第一种: ES6 Set
function unique (arr) {
return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
// 例一
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]
// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5第二种：双层for循环，用splice删除相同的。
function unique(arr){
for(var i=0; i<arr.length; i++){
for(var j=i+1; j<arr.length; j++){
if(arr[i]==arr[j]){ //第一个等同于第二个，splice方法删除第二个
arr.splice(j,1);
j--;
}
}
}
return arr;
}第三种：使用indexOf,indexOf会检索某个字符是否出现在数组中，如果没有出现的话就返回-1。有的话就会返回下标。includeds也是这样的
function unique(arr) { if (!Array.isArray(arr)) { console.log('type error!') return } var array = []; for (var i = 0; i < arr.length; i++) { if (array.indexOf(arr[i]) === -1) { array.push(arr[i]) } } return array;}
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
var array =[];
for(var i = 0; i < arr.length; i++) {
if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
array.push(arr[i]);
}
}
return array
}第四种：使用sort先对数组排序，然后在让左边和右边的比较是否相同。
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return;
}
arr = arr.sort()
var arrry= [arr[0]];
for (var i = 1; i < arr.length; i++) {
if (arr[i] !== arr[i-1]) {
arrry.push(arr[i]);
}
}
return arrry;
}怎么判断对象类型
基础数据类型 用typeof ， typeof x == 'string' typeof(x);
复杂数据类型 用instanceof ， var d = new String('test'); d instanceof String ==true;
Object类型 用Object.prototype.toString.call();
js前端事件流
事件的触发一般分为三个阶段：
1. window 往事件触发处传播，遇到注册的捕获事件会触发
2.传播到事件触发处时，触发注册的事件
3.从事件触发处往window传播，遇到注册的冒泡事件会触发
当一个li绑定了一个点击事件，我们点击这个li,执行机制时从window=>到div 到=>ul=>到li，依次向里捕获，直到li,如果在中途遇到注册事件比如ul上也有个点击事件，同样会触发。这是捕获事件。当捕获到事件触发处时，我们往回走，一次向外冒泡。这个过程叫做冒泡。
addEventListener用来注册事件的，第三个参数是个boolean值。它可以控制冒泡和捕获事件是否执行。当第三个参数设置为true就在捕获过程中执行，反之就在冒泡过程中执行处理函数。同时为false,就是默认冒泡地位更高,同时为true,按照顺序走,捕获在前。
<body> <div id="app"> <div id="wrapper"> 123 </div> </div> <script> var node = document.getElementById('app') // addEventListener第三个参数? node.addEventListener( 'click', function(event) { console.log('app'); }, false // 让捕获失效 默认false ) var Wrapper = document.getElementById('app') // addEventListener第三个参数? Wrapper.addEventListener( 'click', function(event) { event.stopImmediatePropagation() // 阻止所有 // event.stopPropagation() //阻止冒泡 console.log('wrapper'); }, true ) // 同时为false,就是默认冒泡地位更高,同时为true,按照顺序走,捕获在前 </script>事件委托
<body> <ul id="ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> let ul = document.querySelector('#ul') ul.addEventListener('click',function(event) { console.log(event.target.innerText); }) </script></body>利用冒泡机制，做事件委托，li的点击事件委托给了ul。
事件委托指的是，不在事件的（直接dom）上设置监听函数，而是在其父元素上设置监听函数。通过事件冒泡，父元素可以监听到子元素上事件的触发通过判断事件发生元素DOM的类型，来做出不同的响应。
图片预加载和懒加载
懒加载：
1.使用setTimeout 来控制图片的加载，我们先加载可视区域的图片然后用一个定时器再去加载剩下的图片。
2.监听滚动，我们先只加载可视区域，然后监听屏幕的滚动长度再去加载需要加载的图片。
3.条件加载，符合某种条件比如点击什么的事件在加载。
预加载：图片预先加载到本地缓存中，需要的时候直接从本地渲染。
方法一：用CSS和JavaScript实现预加载
第一步，我们获取使用类选择器的元素，并为其设置了background属性，以预加载不同的图片。第二步，我们使用addLoadEvent()函数来延迟preloader()函数的加载时间，直到页面加载完毕。
方法二：仅使用JavaScript实现预加载
方法三：使用Ajax实现预加载
两者的比较;
都是用来优化页面加载图片的，不过原理正好相反，懒加载是延迟加载，预加载是提前加载。
shift splice slice pop
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。(该方法会改变原始数组)
pop() 方法用于删除并返回数组的最后一个元素。该方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。
slice() 方法可从已有的数组中返回选定的元素。(该方法不会改变原始数组)
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。请注意，该方法不创建新数组，而是直接修改原有的 arrayObject。
HTML语义化
用正确的标签做正确的事。
优点：
- 使页面内容结构化。
- 便于浏览器的解析和SEO优化。
- 提高代码的可维护性和可重用性
函数声明式与函数表达式的区别
1.函数声明式回将整个函数提升，函数表达式也会将提升，不过只是回提升表达名。（函数的提升是优于变量的提升的。）
2.函数声明式能在函数声明之前执行，函数表达式则在函数声明之后执行
3.以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而函数表达式可以在任何地方声明。换句话说，函数声明不是一个完整的语句，所以不能出现在if-else,for循环，finally，try catch语句以及with语句中。
