一、页面加载
题目：
1.从输入url到得到html的详细过程？
见下面知识点2
2.window.onload和DOMContentLoaded的区别？
window.onload 是页面全部资源（包含图片、视频）加载完后才会执行； DOMContentLoaded 是DOM渲染完即可执行（此时图片、视频还可能没有加载完）。 附加：img是异步加载，可以直接渲染，不会阻塞DOM结构。
知识点：
1.加载资源的形式？
答：2种。一种是输入url(或跳转页面)加载html页面，如http:coding.m.imooc.com。另一种是加载html种静态资源的，如加载js、jq等等。
2.加载一个资源的过程？
答：首先浏览器根据DNS服务器得到域名的IP地址，紧接着向这个IP的机器发送http请求，然后服务器收到、处理返回http请求，最后浏览器得到返回内容。
3.浏览器渲染页面的过程？
答：
1.根据HTML结构生成DOM Tree
2.根据CSS生成CSSOM
3.将DOM和CSSOM整合形成RenderTree
4.根据RenderTree开始渲染和展示
5.遇到<script>时，会执行并阻塞渲染
4.css样式和js样式的位置问题 css样式放在head里面好处？
保证先加载css，接着渲染，不然要渲染两次，用户体验会差。 js放在body最下面好处：不会阻塞渲染过程，提高性能优化。
二、性能优化
性能优化 - 优化策略
多使用内存、缓存或者其他方法
减少cpu计算、较少网络
加载资源优化
1.静态资源的压缩合并
2.静态资源缓存
3.使用 cdn 让资源加载更快
4.使用SSR后端，数据直接输出到 HTML 中
渲染优化：
1. css 放前面，js放后面
2. 懒加载 （图片懒加载、下拉加载更多）
3. 减少 DOM 操作，对DOM查询做缓存
4. 减少DOM 操作，多个操作尽量合并在一起执行
5. 事件节流
6. 尽早执行操作 （如 DOMContentLoaded）
实例：
一、资源合并 把三个js文件合并成一个文件，一般公司都会有这样子的合并工具。
二、缓存
1.通过链接名称控制缓存 如src="a1.js"
2.只有内容改变的时候，链接名称才会改变 如src="a2.js"
三、CDN 使用cdn的速度比你在服务器上使用cdn快，cdn可以网上搜索。
四、使用SSR后端渲染
1.可以直接后端渲染，输入到前端页面
五、懒加载（就是图片src属性先用其他属性代替，最后通过setAttribute去设置）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>原生js懒加载-不是我不想加载，只是我想慢点加载</title> <style> *{ margin: 0; padding: 0; } ul,li{ list-style: none; } #main{ width:1000px; margin:0 auto; } #main ul li{ width:200px; height: 300px; border:1px solid #ccc; float: left; margin-left: 20px; margin-top: 20px; } #main ul li img{ width: 100%; height:100%; } </style> </head> <body> <div id="main"> <ul> <li><img src="" alt="" data-src="img/01.jpg"></li> <li><img src="" alt="" data-src="img/02.jpg"></li> <li><img src="" alt="" data-src="img/03.jpg"></li> <li><img src="" alt="" data-src="img/04.jpg"></li> <li><img src="" alt="" data-src="img/05.jpg"></li> <li><img src="" alt="" data-src="img/06.jpg"></li> <li><img src="" alt="" data-src="img/07.jpg"></li> <li><img src="" alt="" data-src="img/08.jpg"></li> <li><img src="" alt="" data-src="img/09.jpg"></li> <li><img src="" alt="" data-src="img/10.jpg"></li> <li><img src="" alt="" data-src="img/11.jpg"></li> <li><img src="" alt="" data-src="img/12.jpg"></li> <li><img src="" alt="" data-src="img/13.jpg"></li> <li><img src="" alt="" data-src="img/14.jpg"></li> <li><img src="" alt="" data-src="img/15.jpg"></li> <li><img src="" alt="" data-src="img/16.jpg"></li> <li><img src="" alt="" data-src="img/17.jpg"></li> <li><img src="" alt="" data-src="img/18.jpg"></li> <li><img src="" alt="" data-src="img/19.jpg"></li> <li><img src="" alt="" data-src="img/20.jpg"></li> </ul> </div> <script> //可视区高度 var insight = document.documentElement.clientHeight; var oImg = document.querySelectorAll("img"); window.onload = window.onscroll = function(){ //卷起高度document.body.scrollTop用于搜狗，document.documentElement.scrollTop用于谷歌 var oScroll = document.body.scrollTop || document.documentElement.scrollTop; for(var i = 0;i < oImg.length;i++){ //如果图片距离页面顶端高度<滚动条高度+可视区的高度，那么图片显示，反之不显示 if(oImg[i].offsetTop < oScroll + insight){ oImg[i].src = oImg[i].getAttribute("data-src"); } } } /* 懒加载 在h5的标准下 oDiv.offsetWidth //获取div宽度 oDiv.offsetHeight //获取div高度 oDiv.offsetTop //距离网页上面宽度 oDiv.offsetLeft //距离网页左面宽度 document.documentElement.clientHeight //可视区高度 document.documentElement.clientWidth //可视区宽度 配合 window.onscroll = function(){ document.title = document.body.scrollTop //卷起高度 }去用 */ </script> </body> </html>六、缓存DOM查询 截图里，第一种每次都要进行DOM查询，第二种先存储DOM查询
七、合并DOM插入，减少DOM操作，将原本插入10次DOM通过frag片段变成1次DOM插入。
八、事件节流 在快速打字操作时候，我们不要去停止示例(截图中是在100毫秒内不要停止)，当什么时候停止打字操作了，我们就去停止示例(截图种超出100毫秒时停止)，这样子可以可以减少很多cpu的计算次数。
就是说100mm内不打字九停止，100内不停止
三、XSS
XSS夸站请求攻击：插入一段script,获取cookie,获取进入的用户者信息 防止手段： 1,前端替换关键字，例如<为<>为> 2,后端替换
四、XSRF
XSRF跨站请求伪造 解决方法 1，增加验证流程，如指纹验证，密码，短信验证码等
