标签：执行 构建 申请 解析 延迟加载 dom ssi 网站 csr
存储 loaclaStorage sessionStorage cookie
loaclaStorage： 以键值对(Key-Value)的方式存储，永久存储，永不
失效，除非手动删除。
sessionstorage：关闭页面后即被清空，而 localStorage 则会一直保
存。
cookie：cookie是一小段文本信息，伴随着用户请求在web服务器和浏览
器之间传递。cookie 将信息存储于用户硬盘，因此可以作为全局变
量。由于cookie在http中是明文传递的，其中包含的数据都可以被他人访问
iframe
(1) 优势：解决第三方内容缓慢，并行加载脚本
(2) 缺点：组织页面onlaod时间，即使内容为空，加载也需要时间
网站优化：
（1）文件合并
（2）CDN托管，负载均衡，将用户的请求分配到最近的服务器上
（3）使用缓存
减少页面加载时间
（1）优化图片
（2）图片格式为GIP
（3）优化CSS
（4）写好宽度和高度，否则浏览器会一边下载，一边计算
（5）减少http请求
（6）少用全局变量
（7）存储DOM查询结果
（8）设置样式使用 class
JS延迟加载
（1）defer/ async
（2）动态创建DOM
（3）按需异步加载
内存泄露：
定义：任何对象不需要，仍然存在
（1）闭包
（2）setTimeout()
(3) 循环引用
页面渲染
为什么要了解：
了解浏览器如何加载，可以在引用外部JS，将其放入合适的位置，还可以构建DOM时候，选择CSS最优的写法，减少reflow，repaint。
(1) 发送一个http请求，浏览器开启一个线程，查询DNS，获取IP地址
(2) 浏览器服务器通过三次TCP握手，建立连接，包括一个同步报文，一个
同步应答报文，一个应答报文。
(3) TCP/IP连接建立，浏览器发送get请求，服务器找到资源，使用http
相应返回改资源，状态：200
(4) 请求返回以后，浏览器解析HTMl 生成DOM tree，其次会生成CSSTREE，Js根据DOM API操作DOM
（5）浏览器解析DOM树，深度遍历，CSS解析为 CSSRULE tree， 根据DOM树，构建Render tree
前端安全
(1) xss 跨站脚本攻击
向web页年注入js代码，然后浏览器解析之行
预防：页面渲染尽量使用AJAX，提交数据在html转义
（2）csrf 跨站请求伪造
首先登陆A网站，然后不关闭或者是cookie没有过期，登陆危险网站B
防止：加入token验证等等
reflow原因
(1) 页面初始化
（2）操作DOM
（3）某元素尺寸变大了
（4）css变化
（5）减少：不要一条条的修改DOm样式，使用class，不要打DOM属性放在循环
中，使用一个变量缓存
JS加载
载入后马上执行
会阻塞页面后续的内容，浏览器需要一个稳定的DOM结构
CSS优化
(1)压缩
(2)属性连写： font ：font-style font-weight font-size
(3)继承：font clolr
(4) CSS放入Head中，减少reflow repaint
Http https
1. HTTP协议以明文方式发送内容，不提供任何方式的数据加密
2. 为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超
文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加
入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器
之间的通信加密。
3. HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来
保证数据传输的安全；另一种就是确认网站的真实性。
4. HTTPS和HTTP的区别主要如下：
1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2、http是超文本传输协议，信息是明文传输，https则是具有安全性
的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，
前者是80，后者是443。
4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构
建的可进行加密传输、身份认证的网络协议，比http协议安全。
（1）客户使用https的URL访问Web服务器，要求与Web服务器建立SSL连接。
（2）Web服务器收到客户端请求后，会将网站的证书信息（证书中包含公
钥）传送一份给客户端。
（3）客户端的浏览器与Web服务器开始协商SSL连接的安全等级，也就是信息
加密的等级。
（4）客户端的浏览器根据双方同意的安全等级，建立会话密钥，然后利用网
站的公钥将会话密钥加密，并传送给网站。
（5）Web服务器利用自己的私钥解密出会话密钥。
（6）Web服务器利用会话密钥加密与客户端之间的通信。
标签：执行 构建 申请 解析 延迟加载 dom ssi 网站 csr
原文地址：https://www.cnblogs.com/felearn/p/qian-duan-zhi-shi-dian.html
