前端面试题(CSS、JS)[ 1 ]

.parent {
      width: 600px;
      height: 600px;
      position: relative;
      border: 1px red solid;
    }
    .child {
      position: absolute;
      width: 200px;
      height: 200px;
      left: 50%;
      top: 50%;
      transform: translate(-100px,-100px);
      border: 1px red solid;
    }

（2）绝对定位 + clac属性

.parent {
      width: 600px;
      height: 600px;
      position: relative;
      border: 1px red solid;
    }
    .child {
      position: absolute;
      width: 200px;
      height: 200px;
      left: calc((600px - 200px) / 2);
      top: calc((600px - 200px) / 2);
      border: 1px red solid;
    }

（3）绝对定位 + margin

.parent{
    width: 600px;
    height: 600px;
    position: relative;
    border: 1px red solid;
  }
  .child {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 1px red solid;
  }

（4）flex布局

.parent{
      width: 600px;
      height: 600px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px red solid;
    }
    .child {
      width: 200px;
      height: 200px;
      border: 1px red solid;
    }

（5）css3新增 table-cell + vertical-align + margin

.parent{
      width: 600px;
      height: 600px;
      display: table-cell;
      vertical-align: middle;
      border: 1px red solid;
    }
    .child {
      width: 200px;
      height: 200px;
      margin: 0 auto;
      border: 1px red solid;
    }

（6）绝对定位 + 负margin

.parent {
      width: 600px;
      height: 600px;
      position: relative;
      border: 1px red solid;
    }
    .child {
      position: absolute;
      width: 200px;
      height: 200px;
      left: 50%;
      top: 50%;
      margin: -100px -100px;
      border: 1px red solid;
    }

3.两栏布局和三栏布局

（1）两栏布局（利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素））

.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  background: tomato;
}
.right {
  margin-left: 200px;
  width: auto;
  background: gold;
}

（2）两栏布局（利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠）

.left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
 }
 .right{
     height: 300px;
     background: blue;
     overflow: hidden;
 }

（3）两栏布局（利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1）

.outer {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  flex: 1;
  background: gold;
}

（4）三栏布局（利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值）

.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}

（5）三栏布局（利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1）

.outer {
  display: flex;
  height: 100px;
}

.left {
  width: 100px;
  background: tomato;
}

.right {
  width: 100px;
  background: gold;
}

.center {
  flex: 1;
  background: lightgreen;
}

4.BFC

（1）创建BFC的条件：1.要有根元素

2.设置除了none以外的浮动 float

3.overflow：hidden、scoll、auto

4.设置绝对定位：position：absolute、fixed

5.设置display属性

（2）BFC的作用： 1.解决高度塌陷

2.解决margin重叠问题

3.创建自适应两栏布局

5. css创建三角形

.outer {
      width: 0px;
      height: 0px;
      border-width: 10px;
      border-style: solid;
      border-color: red green blue brown;
    }

6. 闭包

（1）闭包是指：有权限访问另一个函数作用域中的变量的函数

用途:（1）闭包就是函数套函数，在闭包里面,内部的函数可以访问到外部函数作用域内的变量，但是外部的函数不能访问内部函数作用域内的变量

（2）在闭包函数里创建的变量不会被垃圾回收机制回收

6. var、let、const 三者的区别：

（1）是否存在作用域：var没有、let和const均存在作用域

（2）是否可以重复声明：var可以、let和const不行

（3）是否声明时赋值：var和let 可以不用、const不行

（4）是否存在暂时性死区：var没有、let和const均存在

（5）是否变量提升：var有、let和const没有

（6）给全局添加属性(全局变量)：var可以，let和const不行

（7）是否可以改变指针指向：var和let可以，const不行

7. 引用类型和基本类型

（1）引用类型的内存地址保存在堆中，内容保存在栈中(与基本类型一致)

（2）基本类型：Number、String、Boolean、Object、Symbol、Bigint、null、undefined

（3）BigInt是提供了一种方式表示大于 $2^{53}$ -1的整数，BigInt也可以表示任意大的整数

（4）symbol是一种新的原始数据类型，用来表示独一无二的值，一般用其来给对象的唯一属性名

8. null和undefined的区别

（1）undefined是指声明时未赋值，null是指空对象。使用typeof做判断时，undefined得出的是undefined，null得出的是object。两者在使用 == 进行比较的时候得出的是true，用 === 得出的是false

9. isNaN和Number.isNaN的区别

（1）isNaN会对传入的参数进行转换，任何不能被转换的值(包括非数值的值)都会返回true，会影响到NaN的判断

（2）Number.isNaN会对传入的参数先进行判断是否为数值，如果不是则在判断是否为NaN，这样不会影响NaN的判断

10. == 和 === 以及 Object.is的区别

（1）在使用 == 的时候，会将 == 两边的数值进行转化，转化成相同类型的在进行比较。使用 === 时会先进行类型的判断，如果类型不一样则会直接返回false。=== 用于判断NaN 和 +0、-0的时候前者返回false 后者返回 true。Object.is()的作用和 === 一致，但是处理了一些特殊情况，例如NaN 和 +0、-0，前者返回true，后者返回false

11. Javascript延迟加载的几种方式

（1）将script标签放在body标签后

（2）在JS脚本添加defer属性

（3）给JS脚本添加async属性

（4）使用setTimeout方法

（5）动态创建DOM对象

12. 深拷贝与浅拷贝

（1）浅拷贝： Object.assgin()、扩展运算符、Array.slice()、lodash的clone、Array.concat()

（2）深拷贝：lodash的cloneDeep、对象的extend、JSON.parse()、手写递归

（3）深拷贝与浅拷贝的区别：深拷贝出来的数组或者对象修改新对象或者数组，原数组或者对象不会改变。而浅拷贝出来的数组或者对象修改了新数组或者对象则原数组或者对象会发生改变

（4）Object.assgin()、扩展运算符的区别：

Object.assgin()第一个参数是一个对象，后面的参数均作为源对象合并到第一个对象中，触发了ES6的setter

扩展运算符：会将每一个数组或者对象里面的值抽离出来放进一个新数组或者对象，会赋值ES5的symbol属性

13. map和Object的区别

(1) 意外的键：map(Map默认不包含任意键，只包含显示插入的键) 、object(有一个原型、原型链的键名可能和自己在对象上设置的键名发生冲突)

（2）键的类型：map(Map键的类型是任意的)、object(键的类型是string和symbol)

（3）键的顺序：map(有序的)、object(无序的)

（4）size：map(Map的键值对可以通过size属性获取)、object(需要手动计算)

14. 创建AJAX的步骤：

（1）创建XML对象

（2）使用open方法创建一个链接

（3）为对象添加一些信息和监听函数(例如：setRequestHeader)

（4）使用send方法发送请求

15. for..in 和 for...of的区别：

（1）for..in 是ES3提出来的，适用于遍历对象，不适用于遍历数组。它遍历对象获取对象上的键名，而且在遍历的时候会去遍历对象的整个原型链，影响性能

（2）for..of 是ES6提出来的，可以遍历对象、数组、字符串等。它只会遍历当前对象，获取对象上的键值

16. forEach和map的区别：

（1）forEach可以对数组的每一个值进行操作，会改变原数组，并且没有返回值

（2）map不会改变原数组，返回一个新数组，返回数组的值是对其进行操作后的值

17. 原型和原型链

（1）原型：每一个引用类型都有一个_proto_属性，它是一个普通对象

每一个函数都有一个prototype属性，它是一个普通对象

每一个引用类型都有一个_proto_属性都指向它的构造函数的prototype

（2）原型链：当查找一个对象的属性时，会先去它的原型上查找，如果原型上查找不到，就会去它的_proto_原型上查找(构造函数的prototype属性上查找)，如果还是没有就会去其prototype._proto_属性上去查找，这样一层一层的查找就是原型链

18. call 、apply 、bind的区别

（1）call和apply的区别：参数的不同，两者的第一个参数都是修改this的指向，第二个参数call是可以传多个参数，apply中是一个数组或者类数组

（2）bind和apply类似，只不过bind返回的是一个函数，需要再次调用才可以执行

19. 垃圾回收机制和内存泄漏

（1）概念：垃圾回收机制是会定期针对那些已经声明的但是长期未使用的变量、或者已经使用完的变量进行清理。变量分为局部变量和全局变量，在全局变量中只有等界面卸载了全局变量才停止使用，而局部变量是指在函数从开始执行到结束后才停止使用。除了闭包以外，闭包里的变量不会被清理

（2）那些情况会导致内存溢出：使用闭包、页面卸载时未清理定时器和回调函数、全局变量

（3）有两种方法：标记清除和引用计数

（4）垃圾回收机制是通过垃圾回收算法来实现的：1.标记空间中的可达值(从根节点开始遍历--可以遍历的就是可达的--不可遍历的就是不可达的)、2.回收不可达的值所占据的内存、3.做内存整理

20. 防抖和节流

（1）防抖：是指触发一个高频函数在n秒内只执行一次，如果在n秒内再次触发就会重新计算时间

（2）节流：是指触发一个高频函数在n秒内只执行一次，并且在n秒内不可再次执行

21. 并发和并行

（1）并发：当我手上现在有任务A和任务B，在规定的时间内通过任务的切换完成的A、B任务叫做并发

（2）并行：当我手上现在有任务A和任务B，并且现在有2个CPU，能够同时处理两个任务，叫做并行

22. 什么是回调函数、作用、以及缺陷

（1）在函数里调用另一个函数，扩展函数的功能，解决异步函数不能立即获取返回值的问题，需要回调函数辅助返回。

（2）回调函数使用场景：AJAX

（3）回调函数导致的问题：回调地狱

（4）使用Promise解决

（5）Promise的特性：Promise是一个对象，也是一个构造函数。返回的是resolved、rejected。本身自带一个then方法

（6）Promise的缺点：代码量大，复杂

（7）解决：使用async await

23. Promise

（1）对Promise的理解：Promise是一个对象，可以获取到异步操作的消息，Promise里有统一的API来对各种异步操作进行处理。Promise有三种状态：pending、resolved、rejected。把一件事情交给Promise后状态就会变成pending，任务完成了状态就会变成 resolved，任务失败就会返回rejected。事情一旦开始执行外界无法改变其状态，并且事情执行的结果也无法改变

（2）Promise有五种常用方法：.then、.catch、.all、.race、finally

24. 宏任务和微任务

（1）宏任务队列有多个，微任务队列只有一个

（2）主线程上的第一个任务是宏任务

（3）会创建宏任务队列：setTimeOut、 setInterval、 requestAnimationFrame

（4）会创建微任务队列：Promise的回调

（5）每当执行完一个宏任务队列，就开始执行微任务队列，然后在执行宏任务队列，如此反复

（1）存储大小：cookie大小4K，localstorage、sessionstorage大小为5M

（2）生命周期：cookie(一般由服务器生成，时间可设定。在浏览器端生成关闭界面就失效)、localstorage是永久保存除非被清除、sessionstorage一关闭浏览器就失效

（3）cookie：每次都会携带在http头中，如果数据过多会影响性能。localstorage、sessionstorage只在客户端保存不影响到服务端

26. http状态码

（1）1开头：信息、 2开头：成功、3开头：重定向、4开头：请求错误、5开头：服务器错误

27. 同源策略

作用：为了保护用户信息的安全，防止恶意的网络窃取

同源：端口，域名，协议相同

28.ES6的Map和Set的区别、weakMap和weakSet

Map：是默认对象的表示方式 {} ，里面的内容是键值对，一个key只可以对应一个value，多次往一个key中存值会覆盖之前的值。

Set：是一组key的集合，与Map相似，唯一的区别是其不存储value，且key的值是唯一的。可以用做数组去重

weakMap：weakMap的键必须是对象，而且无法迭代，使用keys，values，entries方法

weakSet：WeakSet 只能添加对象，add，has 和 delete 方法，但不支持 size 和 keys()，并且不可迭代。

29.http和https的区别

http是超文本传输协议，信息是明文传输，端口用的是80且连接也是无状态的

https是具有更安全的ssl/tls加密传输协议，用的端口是443，也用来确认网站的真实性

30. 什么是http

http：超文本传输协议是一个简单的请求-响应协议，通常运行在TCP之上

http请求头中包含：General(基本信息)、Response Header(响应头)、Request Header(请求头)、Query String Parameters(请求参数)

31.get和post的区别

1. get是不安全的，因为在传输过程中数据都会放在url地址栏上。post的操作对用户来说都是不可见的

2.get传输数据较小，因为受到地址栏url的长度限制。而post不会

3.get是以utf-8的编码形式，post是任意编码形式即可

4.get的执行效率比post更快

5.get的请求参数会完整的保留在浏览器历史记录里，post的不会被保留

6.get发生回退时不会重新请求，post会

32.浏览器输入地址后发生了什么

1. 在url上输入地址

2. 浏览器根据域名去查找IP地址(浏览器缓存=》系统缓存=》路由器缓存=》递归查询)

3. 浏览器与服务器进行TCP连接(用户想服务器发出连接请求=》服务器接收到连接请求了并同意建立连接，向用户确认连接=》用户接受到了以后再次向服务器发送)

4. 浏览器通过http协议发送请求

5. 某些服务会进行重定向

6. 浏览器跟踪重定向地址

7. 服务器处理请求

8. 服务器发出HTML响应

9. 释放TCP连接

10.浏览器显示界面

重绘和回流：

重绘就是元素的样式发生改变但是布局不发生变化

回流就是元素的宽高布局发生改变就会引起

回流一定引起重绘，重绘不一定引起回流

33.浏览器的缓存机制

浏览器的缓存机制分为强制缓存和协商缓存。

强制缓存就是向浏览器缓存查找该请求结果，并根据该缓存结果的规则来决定是否使用该缓存结果的过程(控制其缓存的字段分别是Expires和Cache-Contorl，后者比前者优先级高)

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识来决定是否使用缓存标识的过程(当协商缓存生效后返回304，失败返回200)

34. cookie内存满了的情况

cookie只能存储4K，当cookie内存满了会返回400的错误，可使用ngnix配置来增大阈值

35. sass和less

sass和less都属于css的预处理器(用一种编程的语言，专门进行web样式的设置，在通过编译器转化为css样式)，两者可声明变量($,@),可以嵌套，可以继承，sass可以编写if语句判断

36.ES6新增语法

promise、扩展运算符、let/const、解构赋值、箭头函数、Set、Map、数组方法、剩余运算符、模板字符串

37. 一般前端面试基础算法题

判断是否回文、数组去重、递归阶乘、快速排序、找出字符串中出现最多的字母

38. rem和em

rem是根据html字体大小来决定的(可以使用媒体查询和rem做自适应)，em是根据使用它的元素字体大小来实现的

39.前端兼容性问题（不全）

1. HTML对象获取：

                FireFox：document.getElementById("idName");
                ie:document.idname或者document.getElementById("idName").
                解决办法：统一使用document.getElementById("idName");

2. const、let、var变量

                Firefox下,可以使用const、let关键字或var关键字来定义常量;
                IE10以下,只能使用var关键字来定义常量.
                解决方法：统一使用var关键字来定义常量.

3.event.x和event.y的问题

                IE下,event对象有x,y属性,但是没有pageX,pageY属性;
                Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
                解决方法：使用mX(mX  =   event.x   ?   event.x  :   event.pageX;)来代替IE下的event.x 或者Firefox下的event.pageX.

4.css中的cursor:hand和cursor:pointer

firefox不支持hand，但ie支持pointer
解决方法: 统一使用pointer

5. IE6图片下有空隙

设置img为display:block或设置vertical-align属为vertical-align:top/bottom/middle/text-bottom都可以解决.

40.数组的扁平化

1. 使用方法flat()

2. 使用reduce()

3. 使用递归

4. 使用正则

41.前端安全

预防XSS(跨站脚本攻击)和CSRF(跨站请求伪造)

XSS是注入恶意的HTML或者JS代码到用户浏览的网站上

CSRF是通过伪装来自受信任用户的请求来利用受信任的网站(用户鉴权、不在url上显示用户信息、用户的修改删除用post)

42.html5和CSS3的新特性

html5：语义化标签、音视频标签、增强型表单、canvas绘图、SVG绘图、地理定位、拖放API、webworker、webStorage、webscoket

css3：选择器、边框、过渡、动画、flex布局、媒体查询

43.判断数据类型的方法

（1）typeof，是一个操作符，用来判断基本数据类型的，用来判断引用类型都是object

（2）instanceof，检测的是原型，内部机制是通过判断对象的原型链中是否有类型的原型。

（3）Object.prototype.toString.call()，得到的结果[object，数据类型]

（4）constructor构造函数，但是不能判断null与 undefined (1).constructor === Number; //true，console.log(num.constructor == Number);//true

44.为什么typeof检测null会是object

在js中数据底层存储是采用二进制的，而二进制的前三位是代表数据类型，000是代表object类型也就是引用类型。null的二进制码000000

45.箭头函数和普通函数的区别

（1）箭头函数都是匿名函数

（2）箭头函数不能用作构造函数，不能使用new

（3）箭头函数的this指向不同

（4）箭头函数没有argument，都用扩展运算符代替

46.页面从输入url到渲染有哪些协议

DNS协议=》TCP协议=》HTTP协议

47.设计模式

设计模式可以分为三大类：结构型模式、创建型模式、行为型模式

结构型模式（外观模式、代理模式）、创建型模式（工厂模式、单例模式）、行为型模式（策略模式、迭代器模式、观察者模式、中介者模式、访问者模式）

48.TCP和UDP的区别

1.TCP是有链接的UDP是无连接的

2.TCP是字节流的UDP是数据报

3.TCP会确保数据的准确性UDP会丢包

4.TCP数据是有顺序的UDP是无序的

49.http1.0、1.1、2.0的区别

http1.0和1.1的区别：

（1）长连接：http1.1支持长连接和流水线处理，可以同时发送多个TCP的请求和响应。1.1版本默认开启长连接keep-alive，而1.0中需要在request中增加”Connection： keep-alive“

（2）节约带宽：1.1版本仅支持发送header信息(不包含body信息)，如果服务端确认客户端有权访问就会返回100，客户端接收到了再把body信息发送过去。如果返回的是401，客户端就不必在发送body信息

（3）缓存处理：1.0中使用header里的If-Modified-Since,Expires来做为缓存判断的标准，1.1中则引入了更多的缓存策略，比如If-Match, If-None-Match

（4）错误通知管理：1.1中新增了24个错误状态码

http1.1和2.0的区别

（1）多路复用：http2.0采用了多路复用技术，做到用一个连接可以并发处理多个请求

（2）头部数据压缩：1.1版本只会对消息主体进行压缩，而其他的则还是以文本类型传输。而2.0通过HPACK算法对header的数据进行压缩

50.websocket

（1）websocket是基于TCP建立的全双工通信协议，只需要一次握手(tcp底层的三次握手对于websocket是透明的)，支持两种统一的标识符ws和wss。数据格式较轻量，性能开销小。没有同源限制，客户端可以与任意服务器通信。可以发送文本，也可以发送二进制数据。

（2）通过Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== ；Sec-WebSocket-Protocol: chat, superchat； Sec-WebSocket-Version: 13来告诉服务器，发起的是websocket协议

51.http的三次握手和四次挥手以及TCP连接

TCP中Sequence Number是用来记录包的序号(解决乱序的问题)、Acknowledgement Number是用来确认序列号的(解决不丢包的问题)、TCP flag是包类型(用户操控TCP状态机)

三次握手就是建立一个TCP连接、客户端与服务端交互需要3个数据包。握手就是确认双方的接收和发送能力是否正常。

第一次握手：客户端发送SYN报文、并进入SYN_SENT状态，等待服务器确认；

第二次握手：服务端收到SYN报文后，会给客户端发送ACK确认报文、并且也会给客户端发送SYN报文。服务器进入SYN_RCVD状态

第三次握手：客户端收到SYN + ACK报文，向服务器发送确认包，客户端进入了ESTABLISHED状态。等待服务器收到客户端发送的ACK包也会进入ESTABLISHED状态。

为什么不能二次握手：(1)确认双方的收发能力(2)序列号的可靠同步(3)阻止重复历史连接的初始化

初始序列号(ISN)：是TCP发送方的字节数据编号的原点，如果ISN是固定的很容易被第三方猜到并且发送伪造的RST报文，因此ISN是动态的

什么是半连接队列？当服务器第一次收到客户端的SYN之后就会处于SYN_RCVD状态，此时双方还没有完全建立连接，被称为半连接队列

三次握手可以携带数据吗？第一第二次握手不可以携带数据，而第三次握手客户端已经处于连接状态了所以可以携带数据

第一次挥手：客户端发起一个FIN包(消耗一个序号)，客户端进入FIN_WAIT_1状态

第二次挥手：服务端收到FIN包，并发出ACK确认包，并带上了自己的序号seq=v，服务端进入了CLOSE_WAIT状态。(如果这个时候服务端有数据要发送，则客户端接收到ACK后进入了FIN_WAIT_2状态)

第三次挥手：服务端数据发送完毕后，向客户端发送FIN包，此时服务器进入了LAST_ACK状态

第四次挥手：客户端收到服务器的FIN包后，发出确认包，服务端就进入了TIME_WAIT状态。但是此时的TCP连接还没有释放，必须经过2*MSL后才进入CLOSED状态，而服务器收到客户端的确认包ACK后就进入了CLOSED状态

为什么建立连接握手是3次而关闭连接时需要的是四次呢？因为在握手的时候接收端发送的包是SYN和ACK的包是将SYN和ACK合并在了一起发送的

为什么TIME_WAIT状态需要经过2MSL才能返回CLOSED状态？MSL指的是报文在网络中最大的生存空间。在客户端发送对服务器的FIN的确认包ACK后，这个ACK包是有可能不可达的，而服务端收不到ACK的话就需要重新发送FIN包。所以客户端发送ACK后需要留出2MSL时间(ACK到达服务器 + 服务器发送FIN重传包)等待服务器端确实收到了ACK包

52.this指向

this的指向在函数定义的时候是确定不了的，只有在函数执行的时候才能确定this指向谁、函数的this最终都指向调用它的对象

53. ASO应用商店优化

简单的来说ASO就是在应用商店通过对关键词的搜索优化，使自己的APP在应用商店里排名靠前，从而使应用安装下载数量、用户数量得到提升。

影响ASO的情况可分为一下几种：

应用名称（标题和副标题）
应用描述
应用程序图标
应用界面
预览视频
评论评分
关键词
下载量

54. CSS书写顺序对性能的影响

减少浏览器的reflow(回流)，就可以提高浏览器渲染DOM的性能

浏览器的渲染过程：

1. 解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构

2. 构建生成render树：DOM树和CSS树合并之后形成的render树。

3. 排版布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。

4. 绘制渲染render树：按照计算出来的规则，通过显卡把内容画在屏幕上。

浏览器并不是一获取到css样式就立即解析，而是根据css样式的书写顺序，将其对应dom树的结构而分布render样式，与DOM树合并完成并生成render树，也就是上面的第2步。然后遍历render树每个结点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染。就会导致第3步占用的时间过长，直接影响到了第4步的显示。

书写顺序：

1. 定位属性：position、display、float、left、top、right、bottom、overflow、clear、z-index

2. 自身属性：width、height、padding、border、margin、background

3. 文本样式：font-family、font-size、font-style、font-weight、font-varient、color

4. 文本属性：text-align、vertical-align、text-wrap、text-transform、text-indent、text-decoration、letter-spacing、word-spacing、white-space、text-overflow

5. CSS3中新增属性：content、box-shadow、border-radius、transform(有content放在最前)

55. 从第二个数组中找出与第一个数组不同的对象

    var a = [{id:1},{id:2},{id:3},{id:4}]
    var b = [{id:1},{id:2},{id:3},{id:5}]

    function name(a,b) {
      return [...a,...b].filter(item=>(!(JSON.stringify(a).includes(JSON.stringify(item))) && JSON.stringify(b).includes(JSON.stringify(item))))
    }
    console.log(name(a,b));