页面加载
从输入url到得到html并解析的详细过程
-
加载资源的形式
1、输入url（或跳转页面）加载html
2、加载html中的静态资源 eg: <script src = '/js/jquery.js'></script>
-
加载资源的过程
1、浏览器根据DNS服务器将域名转化为IP地址
2、浏览器向IP地址发送http请求
3、服务器收到、处理并返回http请求
4、浏览器得到返回内容
-
浏览器渲染页面的过程
1、根据HTML结构生成DOM Tree
2、根据CSS生成CSSOM
3、将DOM和CSSOM整合成RenderTree
4、根据RenderTree开始渲染和展示
5、遇到<script>时，会执行并阻塞渲染（因为<script>可以改变DOM的结构与内容）
window.onload 和 DOMContentLoaded 的区别
window.addEventListener('load',function(){
//页面全部资源加载完才会执行，包括图片、视频等
})
document.addEventListener('DOMContentLoaded',function(){
//DOM渲染完即可执行，此时图片、视频等可能还未加载完
}
性能优化
原则
- 多使用内存和缓存或者其他方法
- 减少CPU计算、减少网络请求
从何入手
加载资源优化
- 静态资源的压缩合并
- 静态资源缓存
- 使用CDN让资源加载更快
- 使用SSR后端渲染，数据直接输出倒HTML中
渲染优化
- CSS放head头部，js放在head尾部
- 懒加载（图片懒加载，下拉加载更多）
- 减少DOM查询，使用变量对DOM查询做缓存
- 减少DOM操作，多个操作尽量合并在一起执行
- 事件节流
- 尽早执行操作（如DOMContentLoaded）
安全性
XSS跨站请求攻击
- eg
在简书写一篇博客，同时偷偷插入一段<script>
攻击代码中，获取cookie，发送到自己的服务器
发布博客，有人浏览这篇博客
攻击代码会把查看者的coolie发送到自己的服务器上
- 解决方法
前端进行关键字替换，例如<替换为<之类的
后端进行替换
XSRF跨站请求伪造
- eg
你登录一个购物网站选购商品
该网站的付费接口是xxx.com/pay?id=110 没加其他验证信息
然后你收到一个邮件，里面隐藏着<img src='xxx.com/pay?id=110'>
你查看邮件的时候，就可能已经悄悄的付费购买了
- 解决方法
增加验证流程，如输入指纹，密码，短信验证码
