强者没有winter

1. 便于对浏览器、搜索引擎解析；
2. 便于盲人浏览网页；
3. 便于阅读源代码的人对网站进行分开，维护和理解

<header>，<footer>，<<aside>，<nav>，<canvas>，<video>等

可以通过css3新增的的box-sizing属性进行设置：

/* 标准模型 */

box-sizing:content-box;

/IE模型/

box-sizing:border-box;

border-box 中，整个 div 的宽、高，包括 margin、padding、border。

content-box 中，整个 div 的宽、高，则不包括上面元素。

1:通配符：*

2:ID 选择器：#ID

3:类选择器：.class

4:元素选择器：p、a 等……

5:后代选择器：p span、div a 等……

6:伪类选择器：a:hover 等……

7:属性选择器：input[type="text"] 等……

8:子元素选择器：li:firth-child、p:nth-child(1) 等……

CSS 选择器权重

!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认

transform：旋转、缩放、移动或者倾斜

animation：动画

gradient：渐变

shadow：阴影

border-radius：圆角

防抖: 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行（有个输入框，输入之后会调用接口，获取联想词。但是，因为频繁调用接口不太好，所以我们在代码中使用防抖功能，只有在用户输入完毕的一段时间后，才会调用接口，出现联想词。）

节流：指定时间间隔内只会执行一次任务。 使用场景：

1. 懒加载要监听计算滚动条的位置，使用节流按一定时间的频率获取。
2. 用户点击提交按钮，假设我们知道接口大致的返回时间的情况下，我们使用节流，只允许一定时间内点击一次。

不防抖和节流会损害页面性能

具体步骤: 第一步:需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter 这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步:compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定 更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步:Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:

1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个update()方法

3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步:MVVM作为数据绑定的入口， 整合Observer、 Compile和Watcher三者， 通过Observer来监听自己的model 数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到 数据变化->视图更新;视图交互变化(input)->数据model变更的双向绑定效果。

详情步骤： 首先，通过compile编译器把template编译成AST语法树（abstractsyntaxtree即源代码的抽象语法结构的树状表现形 式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。

然后，AST会经过generate（将AST语法树转化成renderfuntion字符串的过程）得到render函数，render的返回值是 VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

2. 子-> 父: on+emit

3. 父<>子: on.sync(语法糖)来的

4. 兄弟 : event bus | vuex

<component:is='curremtView' keep-alive></component>

1-1：DNS解析

1-2:TCP三次握手

1-3:发送请求，分析url，设置请求报文（头，主题）

1-4:把请求回来的html代码 经过解析生成DOM树

1-5:解析css代码生成，生成样式树

1-6:结合DOM和style树生成渲染树

1. 意外的全局变量：无法被回收。

2.定时器：未被正确关闭，导致所引用的外部变量无法被释放。

3.事件监听：没有正确销毁（低版本浏览器可能出现）。

4.闭包：会导致父级中的变量无法被释放。

5.DOM 引用：DOM 被删除时，内存中的引用未被正确清空。

如何查看内存变化情况？

使用 Chrome 的 Timeline（新版本 Performance）进行内存标记，可视化查看内存的变化情况，找出异常点。

HTTPS：HTTPS（全称：Hypertext Transfer Protocol over Secure Socket Layer），是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版。即 HTTP 下加入 SSL 层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。 它是一个 URI scheme（抽象标识符体系），句法类同 http: 体系。用于安全的HTTP数据传输。https:URL 表明它使用了 HTTP，但 HTTPS 存在不同于 HTTP 的默认端口及一个加密/身份验证层（在 HTTP 与 TCP 之间）。这个系统的最初研发由网景公司进行，提供了身份验证与加密通讯方法，现在它被广泛用于万维网上安全敏感的通讯，例如交易支付方面。

1. 1**开头 - 信息提示
2. 2**开头 - 请求成功
3. 3**开头 - 请求被重定向
4. 4**开头 - 请求错误
5. 5**开头 - 服务器错误

然后，常见的状态码：

1. 200 - 请求成功，Ajax 接受到信息了。
2. 400 - 服务器不理解请求。
3. 403 - 服务器拒绝请求。
4. 404 - 请求页面错误。
5. 500 - 服务器内部错误，无法完成请求。