运行环境(页面加载、性能优化、安全性)

–浏览器可以通过访问链接来得到页面内容
–通过绘制和渲染，显示出页面最终样子
整个过程我们需要考虑

-页面加载
-性能优化
-安全性

页面加载

加载资源的形式
	-输入url（或页面跳转）加载html
	-加载html中静态资源（图片，视频，js，cdn，css...）
	
加载一个资源的过程
	-浏览器根据DNS服务器得到域名的IP地址
	-向这个IP的机器发送http（s）请求
	-服务器收到请求后处理并返回
	-浏览器拿到返回的内容进行渲染
	
浏览器渲染页面的过程
	-根据HTML结构生成DOM Tree
	-根据CSS生成CSSOM
	-将DOM和CSSOM整合生成RenderTree
	-根据RenderTree开始渲染和展示
	-遇到<script>时会执行并阻止渲染


window.onload和DOMContentLoaded
	-window.onload:页面全部资源加载完才会执行，包括图片、视频等
	-DOMContenLoaded:DOM渲染完即可执行，此时图片、视频可能还没有加载完

性能优化

从大方向原则来说
	-多使用内存、缓存等其他方法
	-减少CPU计算、减少网络

从哪里入手
	-加载页面和静态资源
		-静态资源的压缩合并
		-静态资源缓存
		-使用CDN让资源加载更快（CDN能找到就近的服务器去请求资源）
		-使用SSR后端渲染，数据直接加载到HTML中而不用去请求Ajax
		
	-页面渲染
		-CSS放前，JS放后面
		-懒加载（图片懒加载、下拉加载更多）
		-减少DOM查询，对DOM查询做缓存
		-减少DOM操作，多个操作尽量合并在一起执行
		-事件截流
		-尽早操作（如DOMContentLoaded）

-资源合并：
	如请求a.js、b.js、c.js合并请求abc.js (用构建工具)
-缓存
	通过链接名称控制缓存
-CDN
-SSR后端渲染（vue、React），其实jsp、php、asp都属于后端渲染
-懒加载
	如图片懒加载时，img的src放的是一个很小的图片（一次之后就缓存了），真正的地址在一		
	个自定义属性里面，当需要的时候img.src=img.getAttribute(自定义属性)
-缓存DOM查询
	
	未缓存
		for(let i = 0;i<document.getElementsByTagName('p').length;i++){
		}

	缓存
		let plist= document.getElementsByTagName('p')
		for(let i = 0;i<plist.length;i++){
		}

-合并DOM插入

-事件截流

-DOMContentLoaded

安全性

一般来说安全问题有专门人员做
前端安全问题头哪些？？

	-XXS跨站请求攻击
		-如在某博客写文章时偷偷插入一段<script>,代码中获取cookie发送到自己的服务器，别人查看文章时，该脚本就会执行，浏览者的cookie会发送到攻击者的服务器
		-解决：
			·前端替换关键字，例如<替换为&lt; >替换为&gt;
			·后端替换
			
	-XSRF跨站请求伪造
		-已登陆某购物网站，付费接口是xx.com/pay?id=100,且没有任何验证，然后收到一个邮件，隐藏了一个<img src='xx.com/pay?id=100'>,那么你查看是就已经付费了
		-解决
			·增加验证流程（指纹，密码，短信验证码...）