这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战
一、页面加载
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）防抖和节流
三、安全
1.安全主要分为两个方面：XSS注入和XSRF跨域请求攻击。
2.XSS注入就是在原本的代码中插入一段JS代码，来执行一些恶意的操作，预防的方法就是<写为<,而>写为>，如此script代码就会在页面直接展示而不是执行了。
3.XSRF跨域请求攻击，一般就是伪造请求，我们可以使用POST并且添加一些额外的验证手段即可！
