共计 1006 个字符，预计需要花费 3 分钟才能阅读完成。
页面加载
加载资源的形式
1. 输入 url 或跳转页面加载 html2. 加载 html 中的静态资源
加载一个资源的过程
1. 浏览器根据 DNS 服务器得到域名的 IP 地址 2. 向这个 IP 的机器发送 http 请求 3. 服务器收到、处理并返回 http 请求 4. 浏览器得到返回内容
浏览器渲染页面的过程
1. 根据 HTML 结构生成 DOM TreeWalker2. 根据 CSS 生成 CSSOM3. 将 DOM 和 CSSOM 整合成 RenderTree4. 根据 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″> 你查看邮件的时候，就已经悄悄的付费购买了
解决办法：增加验证流程，如验证指纹、输入密码、短信验证码
