1.浏览器缓存
浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，
若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，
协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，返回200，
重新返回资源和缓存标识，再存入浏览器缓存中；生效则返回304，继续使用缓存。
强缓存 1.Expires Expires: Wed, 22 Oct 2018 08:41:00 GMT
表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过期。（受限于本地时间，如果修改了本地时间，可能会造成缓存失效）
2.Cache-Control Cache-Control:max-age=300（超过300m，优先级高于expires）
协商缓存 协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求协商缓存生效，返回304和Not Modified
1. Last-Modified（以秒计时，本地打开缓存文件，不能命中缓存）
2. ETag（当前资源文件的一个唯一标识(由服务器生成)，要优于Last-Modified）
实际应用 不常变化的资源 （Cache-Control: max-age=31536000） 静态组件（Expires不过期）
频繁变动的资源 需要使用Cache-Control: no-cache 使浏览器每次都请求服务器， 配合 ETag 或者 Last-Modified 来验证资源是否生效
2.安全策略
1、跨站脚本攻击（XSS）
一种“HTML注入”，用户的数据被当成了HTML代码一部分来执行，从而产生了新的语义
XSS的防御
1、HttpOnly （浏览器禁止页面的Javascript访问带有HttpOnly属性的cookie）
2. 输入检查 输出检查（XSS Filter）转义字符，对于用户的输入应该是永远不信任的。最普遍的做法就是转义输 入输出的内容，对于引号、尖括号、斜杠进行转义
3、CSP CSP 本质上就是建立白名单，开发者明确告诉浏览器哪些外部资源可以加载和执行
1.设置 HTTP Header 中的 Content-Security-Policy
2.设置 meta 标签的方式
2、CSRF（跨站点请求伪造）
CSRF攻击是攻击者利用用户身份操作用户账户的一种攻击方式，攻击者构造出一个后端请求地址
1、验证码
2、由于Token的存在，攻击者无法再构造出一个完整的URL实施CSRF攻击
3、不让第三方网站访问到用户 Cookie
5.url请求到渲染，中间优化
1. 用户输入URL地址
2. 浏览器解析URL解析出主机名
3. 浏览器将主机名转换成服务器ip地址（浏览器先查找本地DNS缓存列表 没有的话 再向浏览器默认的DNS服务器 发送查询请求 同时缓存）
4. 浏览器将端口号从URL中解析出来
5. 浏览器建立一条与目标Web服务器的TCP连接（三次握手）
6. 服务端返回html
7.浏览器渲染（渲染进程是多线程的，GUI渲染线程，js引擎线程，事件触发线程，定时触发器线程，异步http请求线程）
- DOM树构建
- CSSOM树构建
- RenderObject树构建
- 布局
- 绘制
**使用DNS预解析**
DNS 在 一次请求中，DNS解析可以占到请求时间的三分之一左右（这点有待验证），所以如果可以缩短DNS解析时间，就可以加快页面的打开速度。 rel="dns-prefetch" 用以DNS预解析
减少DNS查找（例如原来有5个img server，分别为img1.xxx.com至img5.xxx.com，则现在可以减少到3个）
**请求**
1.尽量减少HTTP请求 （CSS sprites将背景图片合并成一个文件）多个接口合并
空的src和href都会导致多余的HTTP请求，虽然不影响加载时间，但是会对服务器产生不必要的流量和压力。浏览器仍然会向服务器发起一个 HTTP 请求
3.**避免重定向**3xx是重定向相关的HTTP响应代码，避免404浏览器找不到资源的情况发生
4.**使Ajax可缓存**我们可能希望`GET`请求不被缓存$.ajaxSetup({ cache: false });
5.减小cookie大小 减小cookie的大小，因为在发请求时浏览器会将cookie信息发送到server端，所以应该只在cookie中存必要的信息且越长度越小越好
6.利用浏览器缓存
**浏览器渲染**
1.压缩资源（webpack）
2.CSS放在顶部，JS放在底部`defer`和 `async` 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）
3.重排reflow与重绘repaint
只触发重绘不触发重排的一些CSS属性：js尽量少访问dom节点和css 属性，不要通过父级来改变子元素样式，最好 直接改变子元素样式，改变子元素样式尽可能不要影响父元素和兄弟元素的大小和尺寸，尽量通过class来设计元素 样式，切忌用style 多次操作单个属性
#### 代码部分
for循环、迭代、同步、重定向、阻塞请求，未删除重复、无用的代码，未加入Async异步机制
6.水平垂直居中，两边固定中间自适应布局
position transform
position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);
flex布局
display: flex;//flex布局 justify-content: center;//使子项目水平居中 align-items: center;//使子项目垂直居中
table-cell布局
.wp{display: table-cell;text-align: center;vertical-align: middle;}.box{display: inline-block;}
absolute + calc
.wp { position: relative;}.box { position: absolute;; top: calc(50% -50px); left: calc(50% -50px);}
两边固定中间自适应布局
1).绝对定位法
2).使用自身浮动法
3、css3新特性，使用flex
4.. 双飞翼布局
7.跨域，如何跨域，跨域图片如何处理
域名、协议、端口有一个不同就不是同源，三者均相同，这两个网站才是同源
浏览器会对上面提到的跨域请求作出限制。浏览器之所以要对跨域请求作出限制，是出于安全方面的考虑，因为跨域请求有可能被不法分子利用来发动 CSRF攻击。
JSONP
JSONP 本质上是利用