Javascript基础知识体系化学习总结（十一）运行环境
一、页面加载
1.运行环境这里统称为浏览器。
2.页面加载的内容：
（1）html代码；
（2）媒体文件（如图片、音频等）；
（3）js、css
3.页面加载的过程：
（1）DNS解析即域名解析成IP地址；
（2）发起TCP连接；
（3）发送http请求给服务器；
（4）服务器根据http请求返回报文，接收到这些报文后渲染整个页面；
（5）结束连接
4.页面渲染的过程：
（1）根据html代码渲染成DOM树；
（2）根据css代码渲染出CSSOM树；
（3）将两棵树整合成渲染树Render树；
（4）根据渲染树渲染整个页面；
（5）遇到script标签则先执行js代码再进行渲染；
（6）渲染完成
5.页面加载和渲染举例：
（1）css代码应该放在head标签里面执行；
（2）js代码应该放在body的最后；
（3）图片加载不会阻塞页面的加载和渲染；
（4）执行js代码的时机最好选择在DOMContentLoaded，此刻DOM渲染已经完成，没有必要等到其它资源都加载完成再执行（即loaded）
二、性能优化
1.性能优化没有正确的答案，一般是依据以空间换时间的原则尽可能的全面。大体上分为加载的时候更快和渲染的时候更快两方面入手。
2.加载更快：
（1）减少资源的体积：压缩代码，例如webpack进行代码的打包压缩再上线、雪碧图；
（2）减少访问次数：合并代码、SSR服务端渲染、缓存；
（3）使用更快的网络：CDN
3.渲染更快：
（1）css代码写在head，js代码放在最后；
（2）尽早开始执行js代码，用DOMContentLoaded触发；
（3）图片懒加载/预加载；
（4）对DOM查询的结果进行缓存；
（5）频繁的DOM操作，合并到一起一次性操作；
（6）防抖和节流
4.防抖和节流演示：
<!DOCTYPE html>
<html>
<head>
<title>防抖和节流</title>
</head>
<body>
<div>
<input type="text" id="input1">
</div>
<div id="div1" draggable = "true">
可拖拽
</div>
<script type="text/javascript">
function debounce(fn, delay = 500) { // 防抖函数，即在delay这个时间段没有输入内容我们才会执行fn！
let timer = null // 定义在函数返回值外面，实现闭包，外面访问不到timer，无法修改之，保证稳定执行
return function () {
if(timer) { // 已经有定时任务的时候就清除掉重新赋值
clearTimeout(timer)
}
timer = setTimeout(()=>{ // 重新赋值一个定时任务，并且指定延时的时间
fn.apply(this, arguments)
timer = null
},delay)
}
}
let input1 = document.getElementById('input1')
input1.addEventListener(
'keyup',
debounce(
function() {
console.log(input1.value)
},
400
)
)
function throttle(fn, delay = 500) { // 节流，就是在这个delay的时间段内有任务就继续当前任务，后来者直接不管
let timer = null
return function () {
if(timer) {
return
}
timer = setTimeout(()=>{
fn.apply(this,arguments)
timer = null
},delay)
}
}
const div1 = document.getElementById('div1')
div1.addEventListener('drag',throttle(function(e){
console.log(e.offsetX, e.offsetY)
},1000))
</script>
</body>
</html>
三、安全
1.安全主要分为两个方面：XSS注入和XSRF跨域请求攻击。
2.XSS注入就是在原本的代码中插入一段<script>代码，来执行一些恶意的操作，预防的方法就是<写为<,而>写为>，如此script代码就会在页面直接展示而不是执行了。
3.XSRF跨域请求攻击，一般就是伪造请求，我们可以使用POST并且添加一些额外的验证手段即可！
好了，这就是第11个模块也是最后一个模块了，js的基础知识体系总结到这里也就结束了，很高兴有机会和大家一起分享自己的学习经历，那么我是O5，我们有缘的话，下次再见！