【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.遇到<script>时，会执行并阻塞渲染

window.onload 和 DOMContentLoaded的区别？

window.addEventListener('load', function () {
    // 页面的全部资源加载完才会执行，包括图片、视频等
});

document.addEventListener('DOMContentLoaded', function () {
    // DOM 渲染完即可执行，此时图片、视频还可能没有加载完
});

性能优化

性能优化的原则

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

从哪里入手

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

加载资源优化

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

渲染优化

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

前端安全

常见的两种网站攻击方式

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

XSS 跨站请求攻击示例：

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

解决办法：前端替换关键字，例如替换 < 和 > ，替换成字符实体。建议后端替换（前端js执行效率低，影响性能）

XSRF 跨站请求伪造示例：

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

解决办法：增加验证流程，如验证指纹、输入密码、短信验证码