一、同源策略
同源是指协议，域名，端口均一致。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
Cookie、LocalStorage、IndexDB无法读取；
DOM无法获得；
AJAX请求不能发送；
二、前后端如何通信
AJAX,WebSocket,CORS
三、创建Ajax
XMLHttoRequest对象的工作流程
兼容性处理
事件的触发条件
事件的触发顺序
四、跨域通信的几种方式
- JSONP
- Hash
- postMessage
- WebSocket
- CORS
五、前端安全
- CSRF
跨站请求伪造（Cross—Site Request Forgery）
- CSRF攻击攻击原理及过程如下：
- 用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A；
- 在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发送请求到网站A；
- 用户未退出网站A之前，在同一浏览器中，打开一个TAB页访问网站B；
- 网站B接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点A；
- 浏览器在接收到这些攻击性代码后，根据网站B的请求，在用户不知情的情况下携带Cookie信息，向网站A发出请求。网站A并不知道该请求其实是由B发起的，所以会根据用户C的Cookie信息以C的权限处理该请求，导致来自网站B的恶意代码被执行。
- 防御措施
- Token验证
- Referer验证
- 隐藏令牌
https://blog.csdn.net/xiaoxinshuaiga/article/details/80766369
- XSS
跨域脚本攻击（cross-site scripting）
1、类型：
（1）持久型跨站：最直接的危害类型，跨站代码存储在服务器（数据库）。
（2）非持久型跨站：反射型跨站脚本漏洞，最普遍的类型。用户访问服务器-跨站链接-返回跨站代码。
（3）DOM跨站（DOM XSS）：DOM（document object model文档对象模型），客户端脚本处理逻辑导致的安全问题。
2、防御方法
https://baike.baidu.com/item/XSS%E6%94%BB%E5%87%BB/954065?fr=aladdin
https://www.cnblogs.com/tugenhua0707/p/10909284.html
六、渲染机制
1、DOCTYPE及其作用
DTD (document type definition,文档类型定义)是一系列的语法规则，用来定 义XML或(X)HTML的文件类型。浏览器会使用它 来判断文档类型，决定使用何种协 议来解析,以及切换浏览器模式。
DOCTYPE是用来声明文档类型和DTD规范的，- -个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析 时便会出一些差错
2、DOCTYPE类型
HTML5
<!DOCTYPE html>
HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
三、浏览器渲染过程
DOM Tree：浏览器将HTML解析成树形的数据结构。
CSS Rule Tree：浏览器将CSS解析成树形的数据结构。
Render Tree: DOM和CSSOM合并后生成Render Tree。
layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个 节点在屏幕中的位置。
painting: 按照算出来的规则，通过显卡，把内容画到屏幕上。
https://www.cnblogs.com/slly/p/6640761.html
reflow重排
DOM结构中的各个元素都有自己的盒子(模型)，这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的 位置，这个过程称之为reflow。
触发Reflow的条件：
当你增加、删除、修改DOM结点时，会导致Reflow或Repaint
当你移动DOM的位置，或是搞个动画的时候
当你修改CSS样式的时候
当你Resize窗口的时候(移动端没有这个问题)，或是滚动的时候
当你修改网页的默认字体时
repaint重绘
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。
触发Repaint的条件：
DOM改动；
CSS改动；
https://segmentfault.com/a/1190000002629708
七、页面性能
题目:提升页面性能的方法有哪些?
1、资源压缩合并，减少HTTP请求
2、非核心代码异步加载+ 异步 加载的方式+ 异步加载的区别
3、利用浏览器缓——缓存的分类 ——缓存的原理
4、使用CDN
5、预解析DNS
<meta http-equiv= "x-dns-prefetch-control" content: ="on">
<dink rel="dns-prefetch" hef-=//host name_ to_ prefetch.com">
异步加载
方式：动态脚本加载； defer; async;
区别：
defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行；
async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关；
<script src="./defer1.js" charset="utf-8" defer></script>
<script src="./defer2.js" charset="utf-8" defer></script>
<script src="./acync1.js" charset="utf-8" async></script>
<script src="./async2.js" charset="utf-8" async></script>
浏览器缓存
分为强缓存和协商缓存