区别

块级元素

CSS格式：display:block;
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

同源策略

同源定义：协议+域名+端口号。同源表示三者均相等。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

浏览器是从两个方面去做这个同源策略的，一是针对接口的请求，二是针对Dom的查询。

无同源策略的危害

1. 接口请求：从其他网站发起请求从而导致的CSRF攻击。
2. DOM查询：由于没有同源策略的限制，钓鱼网站可以直接拿到别的网站的Dom。从而更能轻易获取用户密码等隐私数据。

同源策略可以预防某些恶意行为，但实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的。

Canvas

基本用法

getContext()

描边和填充

strokeStyle：设置描边样式
fillStyle：设置填充样式
stroke()：描边
fill()：填充

匿名函数

通过函数表达式生成的函数为匿名函数，因为function关键字后面没有标识符。匿名函数的name属性是空字符串。
通过函数表达式生成的函数不会变量提升，但是通过函数声明的函数会变量提升，即可以在使用后声明。

arguments.callee是一个指向正在执行的函数的指针。可以在递归中使用

HTTPS

参见我的博客HTTPS

XSS

CSRF

CSRF(Cross Site Request Forgery, 跨站请求伪造)

A(黑客网站) –> 发起用户不知情的请求(附带浏览器中的token信息) –> B(银行网站)

防御策略

1. Referrer
2. token(url, 请求体)
3. 自定义请求头部

2017-09-06更新： 简要叙述客户端存储，indexdDB未完成

Cookie

客户端用于存储会话信息， cookie 是一小块可以客户端设置也可以在服务器端设置
的信息，每次发起请求时都会传送它。

在 JavaScript 中通过document.cookie可以访问 cookie。
cookie 的限制使其可以存储少量数据，然而对于大量数据效率很低。

HTTP请求头：Cookie: name=value
HTTP响应头：Set-Cookie: name=value

为什么使用Web缓存

1. 减少网络带宽消耗
2. 降低服务器压力
3. 减少网络延迟，加快页面打开速度

Web缓存类型

数据库数据缓存

Web应用，特别是SNS类型的应用，往往关系比较复杂，数据库表繁多，如果频繁进行数据库查询，很容易导致数据库不堪重荷。为了提供查询的性能，会将查询后的数据放到内存中进行缓存，下次查询时，直接从内存缓存直接返回，提供响应效率。

浏览器主要部件

浏览器主要部件图：

User Interface
用户接口。浏览器中的地址栏、前进后退、书签菜单等。除了网页显示区域以外的都是。
Brower engine
浏览器引擎。查询与操作渲染引擎的接口。
Rendering engine
渲染引擎。负责显示请求的内容
Data Persistence
持久层。HTML5规定了完整的浏览器中的数据库：web database
Networking
网络。用于网络请求，例如HTTP请求。
JavaScript Interpreter
用于解析执行JavaScript代码
UI Backend
绘制基础原件，比如组合框、窗口。

this

参见我的博客this对象

javascript对象

参见你不懂JS: this 与对象原型–第三章：对象

JS 中的对象拥有字面形式（比如 var a = { .. }）和构造形式（比如 var a = new Array(..)）。字面形式几乎总是首选，但在某些情况下，构造形式提供更多的构建选项。

许多人声称“Javascript 中的一切都是对象”，这是不对的。对象是六种（或七中，看你从哪个方面说）基本类型之一。对象有子类型，包括 function，还可以被行为特化，比如 [object Array] 作为内部的标签表示子类型数组。

Javascript单线程原因

JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。

事件循环原理

事件循环可视化描述：

栈：执行栈
堆：存储对象
队列：消息队列或任务队列