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跨站请求伪造
例如:一些字符接口连接通过邮件 信息一类的信息 用户访问的时候 直接暗中调取支付接口让浏览者不知不觉中产生支付的行为
解决:增加验证流程 如指纹 密码短信验证等一些二次确认操作