1.常见排序算法的时间复杂性和空间复杂性

(1)插入排序(排序插入已排序):
直接插入排序(插入后从后到前找到合适的位置)

时间复杂：n²
空间复杂度：1

插入法插入排序
(遍历数组，将待排序放在已排序的前面)

// 从数组的第二个数开始向前看   for (int i = 1; i < arr.length; i ) { 
            int left = 0;    int right = i - 1;    int middle = 0;    int tmp = arr[i]; // 新遍历的值等待插入前面的有序数组     // 找到新遍历值应该插入的正确位置——跳出下面的循环，left的值就是要找的新位置    while (left <= right) { 
             middle = (left   right) / 2;     if (arr[middle] < tmp) { 
              left = middle   1;     } else { 
              right = middle - 1;     }    }    // 将left到i-1之间的数量向后移动一个位置-请注意，如果插入的数量大于前排，则不会进入该循环    // 此时将不会有数移动位置    for (int j = i - 1; j >= left; j--) { 
             arr[j   1] = arr[j];    }    ///把待排序的数字放在left位置    arr[left] 
       
        = tmp
        ; 
        } 
       

	时间复杂度：n^2^
	空间复杂度：1

(2)、选择排序：选择最值交换排序排序
　　直接选择排序（找最小放前面）：在要排序的一组数中，选出最小的一个数与第一个位置的数交换；然后在剩下的数当中再找最小的与第二个位置的数交换，如此循环到倒数第二个数和最后一个数比较为止。
　　
时间复杂度：n²
空间复杂度：1

堆排序(最大放后面)：具有n个元素的序列 （h1,h2,…,hn),当且仅当满足（hi>=h2i,hi>=2i+1）或（hi<=h2i,hi<=2i+1） (i=1,2,…,n/2)时称之为堆。考虑第一种情况，先建堆，堆顶（第一位）就是最大的值，与最后一位交换位置，再将前面n-1个数建堆找出最大值与倒数第二位交换位置，以此类推。（看开始序列号，开始是1，子节点是2i、2i+1;开始是0，子节点是2i+1、2i+2）
　　
建堆：从位置最大的堆顶往前依次判断，先判断存在（左）节点，再判断存在右节点，找出两个子节点中的较大者 与堆顶比较

时间复杂度：nlog₂n
空间复杂度：1

(3)、交换排序：
　　冒泡排序：每次遍历比较相邻的两个数可以确定一个最大值，遍历n次
　　
时间复杂度：n²
空间复杂度：1
　　
　　快速排序（交换low high指针的值）:以第一个值为基准，与low、high指针的值比较并把值放入应该的位置，如此循环　

时间复杂度：nlog₂n
空间复杂度：nlog₂n
　　(4)、归并排序：将两个排好序的数组合并，从前往后一次比较放入新数组
　　

时间复杂度：nlog₂n
空间复杂度：n

2.前端需要注意哪些 SEO
合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可
语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页
重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
重要内容不要用 js 输出：爬虫不会执行 js 获取内容
少用 iframe：搜索引擎不会抓取 iframe 中的内容
非装饰性图片必须加 alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标
3.web 开发中会话跟踪的方法有哪些
https://blog.csdn.net/weixin_43299180/article/details/116199611
用途：确定访问不同页面的是同一个用户

token:token 服务端生成的一串字符串，作为客户端进行请求的一个令牌；第一次登录后，服务器生成一个 token 并返回给客户端，以后客户端只需带上这个 token 前来请求数据即可。tokens 是多用户下处理认证的最佳方式.最简单的 token 组成（uid time sign）：uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign(签名，使用 hash/encrypt 压缩成一定长的十六进制字符串，可以防止恶意第三方拼接token请求服务器)。

cookie:cookie 是服务器生成，发送给浏览器，并以键值对的形式保存在某个目录下的文本文件内，会在浏览器下次向服务器发起请求时被携带并发送给服务器。由于 cookie 是存在客户端的，所以服务端需要加入一些限制确保 cookie 不会被恶意使用；每一个域的 cookie 数量是有限的。

session:session 是有状态的， 存储于服务器或者硬盘中，可以理解为一个状态列表，拥有一个唯一识别符号 sessionID ，客户端通常存放于 cookie 中。服务器收到 cookie 后解析出 sessionID ，再去 session 列表中查找，才能找到相应 session。依赖cookie，如果 cookie 被禁用也可以放在 url 中。
用户认证流程：
1、第一次请求服务器，服务器根据用户信息创建 session 并返回对应的 sessionID 给浏览器。
2、浏览器接收到 sessionID 并保存到 Cookie 里，同时 Cookie 记录 sessionID 属于哪一个域名。
3、用户再次向服务器发起请求时，请求会自动判断此域名下是否存在 Cookie 信息，如果存在会自动将 Cookie 信息也发送给服务端，服务端会从 Cookie 中获取 sessionID，再根据 sessionID 查找对应的 session 信息，如果没有找到说明用户没有登录或者登录失效，如果找到 session 证明用户已经登录可执行后面操作。
4、如果web服务器做了负载均衡，那么下一个操作请求到了另一台服务器的时候 session 会丢失。

url 重写：客户程序在每个 URL 的尾部添加一些额外数据。这些数据标识当前的会话，服务器将这个标识符与它存储的用户相关数据关联起来。 URL 重写是比较不错的会话跟踪解决方案，即使浏览器不支持 cookie 或在用户禁用 cookie 的情况下，这种方案也能够工作。

隐藏 input（提交表单时附带隐藏的用户信息，如有这么一句代码：。通过给type属性赋值为hidden值来实现隐藏，这样用户在浏览的时候看不到这行代码的数据，但是当用户通过查看源代码还是可以看到的。）

session和cookie的区别（位置、大小、安全、数据类型） session和token的区别（定义、存储、跨域）

rfc2616中进行了定义：

首行是状态行包括：HTTP 版本，状态码，状态描述，后面跟一个 CRLF
首行之后是若干行响应头，包括：通用头部，响应头部，实体头部
响应头部和响应实体之间用一个 CRLF 空行分隔
最后是一个可能的消息实体 响应报文例子如下：
HTTP/1.1 200 OK
Date: Tue, 08 Jul 2014 05:28:43 GMT
Server: Apache/2
Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT
ETag: “40d7-3e3073913b100”
Accept-Ranges: bytes
Content-Length: 16599
Cache-Control: max-age=21600
Expires: Tue, 08 Jul 2014 11:28:43 GMT
P3P: policyref=“http://www.w3.org/2001/05/P3P/p3p.xml”
Content-Type: text/html; charset=iso-8859-1

{“name”: “qiu”, “age”: 25}

https://blog.csdn.net/huangpb123/article/details/72774098
content 方面
减少 HTTP 请求：合并文件、CSS 精灵、inline Image（把图像文件的内容内置在 HTML 文件中，后面的base64编码）（https://blog.csdn.net/chiliaohu6526/article/details/100855753/）
将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量。不超过2到4个域。
减少 DNS 查询：DNS 查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS 缓存、将资源分布到恰当数量的主机名，平衡并行下载和 DNS 查询
避免重定向：多余的中间访问
使Ajax请求可缓存
非必须组件延迟加载：（页面刚开始加载）如果js代码或者库是用来实现拖拽，动画效果的（在用户某个行为之后的才出现的内容），那么就可以等待加载
未来所需组件预加载：（页面初始加载完成）
减少 DOM 元素数量：减少数量并且语义化标签
减少 iframe 数量：https://m.php.cn/article/418104.html
不要 404：向搜索引擎提交新页面
HTTP压缩

Server 方面
使用 CDN：分散静态内容到分布在多个地点的web服务器，选择拥有最少网络跳转或者最快响应速度的服务器。
添加 Expires 或者 Cache-Control 响应头
对组件使用 Gzip 压缩：
浏览器发送Http request 给Web服务器, request 中有Accept-Encoding: gzip。 (告诉服务器， 浏览器支持gzip压缩)
Web服务器接到request后， 生成原始的Response, 其中有原始的Content-Type和Content-Length。
Web 服务器通过Gzip，来对Response进行编码， 编码后header中有Content-Type和Content-Length(压缩后的大小)， 并且增
加了Content-Encoding:gzip. 然后把Response发送给浏览器。
浏览器接到Response后，根据Content-Encoding:gzip来对Response 进行解码。 获取到原始response后， 然后显示出网页。

配置 ETag
Flush Buffer Early 让服务器发送部分准备好的html响应给浏览器，然后当后端正在处理html页面的其余部分时，浏览器可以开始获取内容。刷新缓存的最佳位置是在HEAD标签之后，因为HTML页面的head通常更容易产生，而且它可以引入任何CSS和JS文件，这样当后端还在处理时，浏览器也可以开始并行的下载引用文件。

Ajax 使用 GET 进行请求？post请求发两个包（没有请求体？），get发一个
避免空 src 的 img 标签：会有多余的请求

Cookie 方面
减小 cookie 大小
引入资源的域名不要包含 cookie

css 方面
将样式表放到页面顶部
不使用 CSS 表达式
使用不使用@import
不使用 IE 的 Filter

Javascript 方面
将脚本放到页面底部
将 javascript 和 css 从外部引入
压缩 javascript 和 css
删除不需要的脚本
减少 DOM 访问
合理设计事件监听器

图片方面
优化图片：根据实际颜色需要选择色深、压缩
优化 css 精灵
不要在 HTML 中拉伸图片
保证 favicon.ico 小并且可缓存

移动方面
保证组件小于 25k
Pack Components into a Multipart Document

渐进增强是指在 web 设计时强调可访问性、语义化 HTML 标签、外部样式表和脚本。保证所有人都能访问页面的基本内容和功能同时为高级浏览器和高带宽用户提供更好的用户体验。

核心原则如下:
所有浏览器都必须能访问基本内容
所有浏览器都必须能使用基本功能
所有内容都包含在语义化标签中
通过外部 CSS 提供增强的布局
通过非侵入式、外部 javascript 提供增强功能
end-user web browser preferences are respected

参考RFC 2616

1XX：信息状态码
**100 Continue：**客户端应当继续发送请求。这个临时相应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。客户端应当继续发送请求的剩余部分，或者如果请求已经完成，忽略这个响应。服务器必须在请求完成后向客户端发送一个最终响应
101 Switching Protocols：服务器已经理解 le 客户端的请求，并将通过 Upgrade 消息头通知客户端采用不同的协议来完成这个请求。在发送完这个响应最后的空行后，服务器将会切换到 Upgrade 消息头中定义的那些协议。
2XX：成功状态码
200 OK：请求成功，请求所希望的响应头或数据体将随此响应返回
201 Created：
202 Accepted：
203 Non-Authoritative Information：
204 No Content：
205 Reset Content：
206 Partial Content：
3XX：重定向
300 Multiple Choices：
301 Moved Permanently：
302 Found：
303 See Other：
304 Not Modified：
305 Use Proxy：
306 （unused）：
307 Temporary Redirect：
4XX：客户端错误
400 Bad Request:
401 Unauthorized:
402 Payment Required:
403 Forbidden:
404 Not Found:
405 Method Not Allowed:
406 Not Acceptable:
407 Proxy Authentication Required:
408 Request Timeout:
409 Conflict:
410 Gone:
411 Length Required:
412 Precondition Failed:
413 Request Entity Too Large:
414 Request-URI Too Long:
415 Unsupported Media Type:
416 Requested Range Not Satisfiable:
417 Expectation Failed:
5XX: 服务器错误
500 Internal Server Error:
501 Not Implemented:
502 Bad Gateway:
503 Service Unavailable:
504 Gateway Timeout:（网关超时）
505 HTTP Version Not Supported:

通用选择器：选择所有元素，不参与计算优先级，兼容性 IE6+
#X id 选择器：选择 id 值为 X 的元素，兼容性：IE6+
.X 类选择器： 选择 class 包含 X 的元素，兼容性：IE6+
X Y 后代选择器： 选择满足 X 选择器的后代节点中满足 Y 选择器的元素，兼容性：IE6+
X 元素选择器： 选择标所有签为 X 的元素，兼容性：IE6+
:link，:visited，:focus，:hover，:active 链接状态： 选择特定状态的链接元素，顺序 LoVe HAte，兼容性: IE4+
X + Y 直接兄弟选择器：在X 之后 第一个兄弟节点中选择满足 Y 选择器的元素，兼容性： IE7+
X > Y 子选择器： 选择 X 的子元素中满足 Y 选择器的元素，兼容性： IE7+
X ~ Y 兄弟： 选择X 之后所有兄弟节点中满足 Y 选择器的元素，兼容性： IE7+
[attr]：选择所有设置了 attr 属性的元素，兼容性 IE7+
[attr=value]：选择属性值刚好为 value 的元素
[attr~=value]：选择属性值为空白符分隔，其中一个的值刚好是 value 的元素
[attr|=value]：选择属性值刚好为 value 或者 value-开头的元素
[attr^=value]：选择属性值以 value 开头的元素
[attr$=value]：选择属性值以 value 结尾的元素
[attr=value]*：选择属性值中包含 value 的元素
[:checked]：选择单选框，复选框，下拉框中选中状态下的元素，兼容性：IE9+
X:after, X::after：after 伪元素，选择元素虚拟子元素（元素的最后一个子元素），CSS3 中::表示伪元素。兼容性:after 为 IE8+，::after 为 IE9+
:hover：鼠标移入状态的元素，兼容性 a 标签 IE4+， 所有元素 IE7+
:not(selector)：选择不符合 selector 的元素。不参与计算优先级，兼容性：IE9+
::first-letter：伪元素，选择块元素第一行的第一个字母，兼容性 IE5.5+
::first-line：伪元素，选择块元素的第一行，兼容性 IE5.5+
:nth-child(an + b)：伪类，选择前面有 an + b - 1 个兄弟节点的元素，其中 n >= 0， 兼容性 IE9+
:nth-last-child(an + b)：伪类，选择后面有 an + b - 1 个兄弟节点的元素 其中 n >= 0，兼容性 IE9+
X:nth-of-type(an+b)：伪类，X 为选择器，解析得到元素标签，选择前面有 an + b - 1 个相同标签兄弟节点的元素。兼容性 IE9+
X:nth-last-of-type(an+b)：伪类，X 为选择器，解析得到元素标签，选择后面有 an+b-1 个相同标签兄弟节点的元素。兼容性 IE9+
X:first-child：伪类，选择满足 X 选择器的元素，且这个元素是其父节点的第一个子元素。兼容性 IE7+
X:last-child：伪类，选择满足 X 选择器的元素，且这个元素是其父节点的最后一个子元素。兼容性 IE9+
X:only-child：伪类，选择满足 X 选择器的元素，且这个元素是其父元素的唯一子元素。兼容性 IE9+
X:only-of-type：伪类，选择 X 选择的元素，解析得到元素标签，如果该元素没有相同类型的兄弟节点时选中它。兼容性 IE9+
X:first-of-type：伪类，选择 X 选择的元素，解析得到元素标签，如果该元素 是此此类型元素的第一个兄弟。选中它。兼容性 IE9+

概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。
优点：
减少 HTTP 请求数，极大地提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
缺点：
图片合并麻烦
维护麻烦，修改一个图片可能需要重新布局整个图片，样式

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

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

原理：不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的兼容性问题。
https://www.xp.cn/b.php/106034.html
常见的 hack 有 1）属性 hack。2）选择器 hack。2）IE条件注释

IE 条件注释：适用于[IE5, IE9]常见格式如下

/***** Selector Hacks ******/

/* IE6 and below */

• html #uno {
  color: red;
  }

/* IE7 */
*:first-child + html #dos {
color: red;
}

/* IE7, FF, Saf, Opera */
html > body #tres {
color: red;
}

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro {
color: red;
}

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco {
color: red;
}

/* Safari 2-3 /
html[xmlns=‘’] body:last-child #seis {
color: red;
}

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete {
color: red;
}

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {
color: red;
}

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
#diez {
color: red;
}
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis {
color: red;
}
}

/* Safari 2 - 3.1 /
html[xmlns=‘’]:root #trece {
color: red;
}

/* Safari 2 - 3.1, Opera 9.25 */
|html[xmlns=‘’] #catorce {
color: red;
}

/* Everything but IE6-8 */
:root * > #quince {
color: red;
}

/* IE7 */

• • html #dieciocho {
    color: red;
    }

/* Firefox only. 1+ */
#veinticuatro,
x:-moz-any-link {
color: red;
}

/* Firefox 3.0+ */
#veinticinco,
x:-moz-any-link,
x:default {
color: red;
}

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { color: blue; / or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 /
#veinte { color/**/: blue\9; }

/* IE6, IE7 – acts as an !important /
#veintesiete { color: blue !ie; } / string after ! can be anything */

https://zhuanlan.zhihu.com/p/20844838

specified value: 计算方法如下：
如果样式表设置了一个值，使用这个值
如果没有设值，且这个属性是继承属性，从父元素继承
如果没有设值，并且不是继承属性，则使用 css 规范指定的初始值

computed value: 以 specified value 根据规范定义的行为进行计算，通常将相对值计算为绝对值，例如 em 根据 font-size 进行计算。一些使用百分数并且需要布局来决定最终值的属性，如 width，margin。百分数就直接作为 computed value。line-height 的无单位值也直接作为 computed value。这些值将在计算 used value 时得到绝对值。computed value 的主要作用是用于继承

used value：属性计算后的最终值，对于大多数属性可以通过 window.getComputedStyle 获得，尺寸值单位为像素。以下属性依赖于布局，
background-position
bottom, left, right, top
height, width
margin-bottom, margin-left, margin-right, margin-top
min-height, min-width
padding-bottom, padding-left, padding-right, padding-top
text-indent

link是 HTML 方式， @import是 CSS 方式
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
link可以通过rel="alternate stylesheet"指定候选样式
浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
@import必须在样式规则之前，可以在 css 文件中引用其他文件
总体来说：link 优于@import

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决定 6.浮动或绝对定位时会转换为block 7.vertical-align属性生效(???没用)

参考资料： 选择正确的图片格式
GIF:
8 位像素，256 色
无损压缩
支持简单动画
支持 boolean 透明
适合简单动画

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

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

关于文字排版的属性如：
font
word-break
word-spacing
letter-spacing
white-space
text-align
text-rendering（文本渲染控制）
text-indent缩进
text-transform（转换大小写）
text-shadow
line-height
color
visibility
cursor（鼠标样式）

IE6 不支持 min-height，解决办法使用 css hack：
.target {
min-height: 100px;
height: auto !important;
height: 100px; // IE6下内容高度超过会自动扩展高度
}
ol内li的序号全为 1，不递增。解决方法：为 li 设置样式display: list-item;

未定位父元素overflow: auto;，包含position: relative;子元素，子元素高于父元素时会溢出。解决办法：1）子元素去掉position: relative;; 2）不能为子元素去掉定位时，父元素position: relative;

aaaa bbbbbDDDDDDDDDDDd aaaa lkjlkjdf j

IE5-8 不支持opacity，解决办法：
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 /
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”; / for IE 8*/
}
IE6 在设置height小于font-size时高度值为font-size，解决办法：font-size: 0;
IE6 不支持 PNG 透明背景，解决办法: IE6 下使用 gif 图片
IE6-7 不支持display: inline-block解决办法：设置 inline 并触发 hasLayout
display: inline-block;
*display: inline;
*zoom: 1;
IE6 下浮动元素在浮动方向上与父元素边界接触元素的外边距会加倍。解决办法： 1）使用 padding 控制间距。 2）浮动元素display: inline;这样解决问题且无任何副作用：css 标准规定浮动元素 display:inline 会自动调整为 block
通过为块级元素设置宽度和左右 margin 为 auto 时，IE6 不能实现水平居中，解决方法：为父元素设置text-align: center;

容器元素闭合标签前添加额外元素并设置clear: both
父元素触发块级格式化上下文(见块级可视化上下文部分)
设置容器元素伪元素进行清理推荐的清理浮动方法
/**

• 在标准浏览器下使用
• 1 content内容为空格用于修复opera下文档中出现
• contenteditable属性时在清理浮动元素上下的空白
• 2 使用display使用table而不是block：可以防止容器和
• 子元素top-margin折叠,这样能使清理效果与BFC，IE6/7
• zoom: 1;一致
  **/

.clearfix:before,
.clearfix:after {
content: " "; /* 1 /
display: table; / 2 */
}

.clearfix:after {
clear: both;
}

/**

• IE 6/7下使用
• 通过触发hasLayout实现包含浮动
  **/
  .clearfix {
  *zoom: 1;
  }

Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。解决方法：把样式表放到文档的head

https://blog.csdn.net/weixin_43581952/article/details/120535484
创建规则：
根元素（html???）
浮动元素（float不是none）
绝对定位元素（position取值为absolute或fixed）
display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素
overflow不是visible的元素

作用：
可以包含浮动元素
不被浮动元素覆盖
阻止父子元素的 margin 折叠

如果display为 none，那么 position 和 float 都不起作用，这种情况下元素不产生框
否则，如果 position 值为 absolute 或者 fixed，框就是绝对定位的，float 的计算值为 none，display 根据下面的表格进行调整。
否则，如果 float 不是 none，框是浮动的，display 根据下表进行调整
否则，如果元素是根元素，display 根据下表进行调整
其他情况下 display 的值为指定值 总结起来：绝对定位、浮动、根元素都需要调整display display转换规则

毗邻的两个或多个margin会合并成一个 margin，叫做外边距折叠。规则如下：

两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠
浮动元素/inline-block 元素/绝对定位元素的 margin 不会和垂直方向上的其他元素的 margin 折叠
创建了块级格式化上下文的元素，不会和它的子元素发生 margin 折叠
元素自身的 margin-bottom 和 margin-top 相邻时也会折叠

https://blog.csdn.net/bjl008/article/details/107602296
包含块大致分为以下几种情况
根元素的包含块：
根元素的包含块也成为初始包含块，在HTML中根元素就是html标签，个别浏览器也可能是body。在大多数浏览器中初始包含块的大小就是一个视窗大小的矩形

浮动元素：
包含块为最近的块级祖先元素

**对于一个非根元素，如果其position值是relative或者是static
包含块由最近的块级框，**表单元格或行内块祖先框的内容边界构成

对于一个非根元素，如果其position为fixed
包含块为视口大小的矩形

对于一个非根元素，如果其position为absolute
包含块是最近开启定位的祖先元素的
a、如果包含块是块级元素 包含块大小是内边距以内区域
b、如果包含块是内敛元素
c、如果没有祖先元素，包含块则为初始包含块

如果是行内元素，为父元素设置text-align: center,子元素line-height的值等于父元素的height（不考虑替换元素如图片，input，这种适用于块级元素定位）
如果是块元素：
一、 1）给定子元素高度 2）margin:auto 3）子绝父相 4）top:0;right:0;bottom:0;left:0;
二、1）子绝父相 2）偏移量top left 设置为 50%，3）transform:translate(-50%,-50%)
三、1）父元素display:flex 2)justify-content:center 3)align-items:center

如果需要水平居中的元素为常规流中 block 元素，1）为元素设置宽度，2）设置左右 margin 为 auto。3）IE6 下需在父元素上设置text-align: center;,再给子元素恢复需要的值

z 轴上的默认层叠顺序如下（从下到上）：
根元素的边界和背景
常规流中的元素按照 html 中顺序
浮动块
positioned 元素按照 html 中出现顺序

如何创建 stacking context：
根元素
z-index 不为 auto 的定位元素（z-index只对定位元素有效）
z-index 不是 ‘auto’ 的flex元素
opacity 小于 1 的元素
在移动端 webkit 和 chrome22+，z-index 为 auto，position: fixed 也将创建新的 stacking context

e.getAttribute()，是标准 DOM 操作文档元素属性的方法，具有通用性可在任意文档上使用，返回元素在源文件中设置的属性
e.propName 通常是在 HTML 文档中访问特定元素的特性，浏览器解析元素后生成对应对象（如 a 标签生成 HTMLAnchorElement），这些对象的特性会根据特定规则结合属性设置得到，对于没有对应特性的属性，只能使用 getAttribute 进行访问
e.getAttribute()返回值是源文件中设置的值，类型是字符串或者 null（有的实现返回""）
e.propName 返回值可能是字符串、布尔值、对象、undefined 等
大部分 attribute 与 property 是一一对应关系，修改其中一个会影响另一个，如 id，title 等属性
一些布尔属性的检测设置需要 hasAttribute 和 removeAttribute 来完成，或者设置对应 property
像link中 href 属性，转换成 property 的时候需要通过转换得到完整 URL
一些 attribute 和 property 不是一一对应如：form 控件中对应的是 defaultValue，修改或设置 value property 修改的是控件当前值，setAttribute 修改 value 属性不会改变 value property

offsetWidth/offsetHeight 返回值包含content + padding + border，效果与 e.getBoundingClientRect()相同
clientWidth/clientHeight 返回值只包含content + padding，如果有滚动条，也不包含滚动条
scrollWidth/scrollHeight 返回值包含content + padding + 溢出内容的尺寸

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

mouseover/mouseout 是标准事件，所有浏览器都支持；mouseenter/mouseleave 是 IE5.5 引入的特有事件后来被 DOM3 标准采纳，现代标准浏览器也支持
mouseover/mouseout 是冒泡事件；mouseenter/mouseleave不冒泡。需要为多个元素监听鼠标移入/出事件时，推荐 mouseover/mouseout 托管，提高性能

例子：鼠标从 div#target 元素移出时进行处理，判断逻辑如下：

都会在浏览器端保存，有大小限制，同源限制
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

同源：两个文档同源需满足
协议相同
域名相同
端口相同

跨域通信：js 进行 DOM 操作、通信时如果目标与当前窗口不满足同源条件，浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法
如果是 log 之类的简单单向通信，新建,

六种基本数据类型
undefined
null
string
boolean
number
symbol(ES6)
一种引用类型
Object

闭包是一个函数，引用了另一个函数作用域中的变量。通常在嵌套函数中实现。闭包作用域链通常包括三个部分：
函数本身作用域。
闭包定义时的作用域。
全局作用域。
闭包常见用途：
避免污染全局变量，引用其他函数里的变量，延长变量寿命
事件处理程序及回调

函数声明表达式
function 操作符
Function 构造函数
ES6:arrow function

localStorage 有效期为永久，sessionStorage 有效期为顶层窗口关闭前
同源文档可以读取并修改 localStorage 数据，sessionStorage 只允许同一个窗口下的文档访问，如通过 iframe 引入的同源文档。？？
Storage 对象通常被当做普通 javascript 对象使用：通过设置属性来存取字符串值，也可以通过setItem(key, value)设置，getItem(key)读取，removeItem(key)删除，clear()删除所有数据，length 表示已存储的数据项数目，key(index)返回对应索引的 key
localStorage.setItem(‘x’, 1); // storge x->1
localStorage.getItem('x); // return value of x

// 枚举所有存储的键值对
for (var i = 0, len = localStorage.length; i < len; ++i ) {
var name = localStorage.key(i);
var value = localStorage.getItem(name);
}

localStorage.removeItem(‘x’); // remove x
localStorage.clear(); // remove all data

cookie 是 web 浏览器存储的少量数据，最早设计为服务器端使用，作为 HTTP 协议的扩展实现。cookie 数据会自动在浏览器和服务器之间传输。
通过读写 cookie 检测是否支持
cookie 属性有名，值，max-age，path, domain，secure；
cookie 默认有效期为浏览器会话，一旦用户关闭浏览器，数据就丢失，通过设置max-age=seconds属性告诉浏览器 cookie 有效期
cookie 作用域通过文档源和文档路径来确定，通过path和domain进行配置，web 页面同目录或子目录文档都可访问
通过 cookie 保存数据的方法为：为 document.cookie 设置一个符合目标的字符串如下
读取 document.cookie 获得’; '分隔的字符串，key=value,解析得到结果
document.cookie = ‘name=qiu; max-age=9999; path=/; domain=domain; secure’;

document.cookie = ‘name=aaa; path=/; domain=domain; secure’;
// 要改变cookie的值，需要使用相同的名字、路径和域，新的值
// 来设置cookie，同样的方法可以用来改变有效期

// 设置max-age为0可以删除指定cookie

//读取cookie，访问document.cookie返回键值对组成的字符串，
//不同键值对之间用’; '分隔。通过解析获得需要的值
cookieUtil.js：自己写的 cookie 操作工具

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

如果两个值不是相同类型，它们不相等
如果两个值都是 null 或者都是 undefined，它们相等
如果两个值都是布尔类型 true 或者都是 false，它们相等
如果其中有一个是NaN，它们不相等
如果都是数值型并且数值相等，他们相等， -0 等于 0
如果他们都是字符串并且在相同位置包含相同的 16 位值，他它们相等；如果在长度或者内容上不等，它们不相等；两个字符串显示结果相同但是编码不同和=都认为他们不相等
如果他们指向相同对象、数组、函数，它们相等；如果指向不同对象，他们