【JS基础】页面加载，性能优化，前端安全

页面加载

加载资源的形式

1.输入url或跳转页面加载html
2.加载html中的静态资源

加载一个资源的过程

1.浏览器根据DNS服务器得到域名的IP地址
2.向这个IP的机器发送http请求
3.服务器收到、处理并返回http请求
4.浏览器得到返回内容

浏览器渲染页面的过程

1.根据HTML结构生成DOM TreeWalker
2.根据CSS生成CSSOM
3.将DOM和CSSOM整合成RenderTree
4.根据RenderTree开始渲染和展示
5.遇到时&＃xff0c;会执行并阻塞渲染

window.onload 和 DOMContentLoaded的区别&＃xff1f;

window.addEventListener(&＃39;load&＃39;, function () {// 页面的全部资源加载完才会执行&＃xff0c;包括图片、视频等
});document.addEventListener(&＃39;DOMContentLoaded&＃39;, function () {// DOM 渲染完即可执行&＃xff0c;此时图片、视频还可能没有加载完
});

性能优化

性能优化的原则

1.多使用内存、缓存或者其他方法
2.减少CPU计算&＃xff0c;减少网络

从哪里入手

1.加载页面和静态资源
2.页面渲染

加载资源优化

1.静态资源的压缩合并&＃xff0c;雪碧图
2.静态资源缓存
3.使用CDN让资源加载更快
4.使用SSR后端渲染&＃xff0c;数据直接输出到HTML中

渲染优化

CSS放前面&＃xff0c;JS放后面
懒加载&＃xff08;图片懒加载、下拉加载更多&＃xff09;
减少DOM查询&＃xff0c;对DOM查询做缓存
减少DOM操作&＃xff0c;多个操作尽量合并在一起执行
事件防抖和节流
尽早执行操作&＃xff08;如DOMContentLoaded&＃xff09;

前端安全

常见的两种网站攻击方式

1.XSS 跨站请求攻击
2.XSRF 跨站请求伪造

XSS 跨站请求攻击示例&＃xff1a;

在新浪博客写一篇文章&＃xff0c;同时偷偷插入一段
攻击代码中&＃xff0c;获取COOKIE&＃xff0c;发送到自己的服务器
发布博客&＃xff0c;有人查看博客内容
会把查看者的COOKIE发送到攻击者的服务器

解决办法&＃xff1a;前端替换关键字&＃xff0c;例如替换 <和 > &＃xff0c;替换成字符实体。建议后端替换&＃xff08;前端js执行效率低&＃xff0c;影响性能&＃xff09;

XSRF 跨站请求伪造示例&＃xff1a;

你已登录一个购物网站&＃xff0c;正在浏览商品
假如该网站付费接口是 xxx.com/pay?id&＃61;100 但是没有任何验证
然后你收到一封邮件&＃xff0c;隐藏着
你查看邮件的时候&＃xff0c;就已经悄悄的付费购买了

解决办法&＃xff1a;增加验证流程&＃xff0c;如验证指纹、输入密码、短信验证码