1.页面的加载过程
1.从输入url到得到HTML的过程
浏览器根据DNS服务器得到解析后的ip地址
向这个ip的机器发送http请求
服务器收到 处理并返回http请求
浏览器得到返回的数据--进行下面的页面渲染
2.浏览器渲染页面的过程
根据HTML结构生成DOM Tree
根据css生成CssDOM
将DOM和cssDOM整合成RenderTree
根据RenderTree进行页面的渲染以及展示
遇到<script>时 会执行阻塞渲染
解析 ----阻塞的主要原因---js有权利改变Dom结构---页面渲染过程中遇到js会优先级执行js然后再接着渲染页面
3.window.onload 和DOMContentLoaded的区别
window.onload页面的全部资源加载完成才会执行，包含图片，视频等
DOMContentLoaded渲染完即可执行，此时图片，或者视频等还没有加载完成
2.性能优化
1.原则
多使用内存，缓存或者其他方法
减少cpu计算，较少网络请求
2.加载资源的优化
（1）静态资源的压合并
（2）静态资源的缓存 ----浏览器的自主缓存
（3）使用cdn让资源加载更快一些（不同区域的网络请求）
解析：会根据用户连接不同的地区 就近请求该地区存在的cdn静态文件 而不需要所有 的 资源都转到请求资源存放地进行请求 减少请求的时间
（4）ssr后端渲染 数据直接输出到html中
3.渲染优化
（1）css前面js放后面
解析：首先加css形成cssTree后渲染body的时候可以根据设定好的cssTree 进行渲染 避免默认渲染再次根据cssTree进行渲染
（2）懒加载（图片懒加载，上拉加载更多）
（3）减少dom操作，对dom查询做缓存
（4）减少dom操作，多个集合尽量合并到一起执行
（5）事件节流
（6）尽早执行操作DOMContentLoaded渲染完即可执行
3.安全性
1.xss跨站请求攻击
例如：在木一个网站 评论里面插入一段script攻击代码 获取其他浏览者的cookie的数据发送到自己的服务器
解决：前端替换关键字 例如把<> 符号进行替换
后端：一般这类问题后端为主 前端为辅
2.xsrf跨站请求伪造
例如：一些字符接口连接通过邮件 信息一类的信息 用户访问的时候 直接暗中调取支付接口让浏览者不知不觉中产生支付的行为
解决：增加验证流程 如指纹 密码短信验证等一些二次确认操作
网友评论