Question

页面加载过程

从输入 url 到渲染出页面的整个过程

加载过程：

• DNS 解析：域名 -> ip 地址
• 浏览器根据 ip 地址向服务器发送 http 请求
• 服务器处理 http 请求，返回给浏览器

渲染过程：

• 根据 HTML 代码生成 DOM Tree
• 根据 CSS 代码生成 CSSOM
• 将 DOM Tree 和 CSSOM 整合形成 Render Tree
• 根据 Render Tree 渲染页面
• 遇到 \<script\> 则暂停渲染，优先加载并执行 js 代码，完成再继续</script\>
• 直至把 Render Tree 渲染完成

window.onload 和 DOMContentLoaded 的区别

• window.onload: 资源全部加载完才能执行，包括视频、图片等
• DOMContentLoaded: DOM 渲染完即可执行，此时图片、视频可能还没加载完

性能优化

性能优化原则

• 多使用内存、缓存或其他方法
• 减少 CPU 计算量，减少网络加载耗时
• 适用于所有编程的性能优化 - 空间换时间

从何入手

• 让加载更快
• 让渲染更快

让加载更快

• 减少资源体积：压缩代码
• 减少访问次数：合并代码、SSR、缓存
• 使用更快的网络：CDN

让渲染更快

• CSS 放在 head，JS 放在 body 最下面
• 尽早开始执行 JS，用 DOMContentLoaded 触发
• 懒加载（图片懒加载，上滑加载更多）
• 对 DOM 查询进行缓存
• 频繁 DOM 操作，合并到一起插入 DOM 结构
• 节流 throttle、防抖 debounce

防抖 debounce

• 用户输入结束或暂停时，才会触发 change 事件

function debounce(fn, delay = 500) {
  let timer = null;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = null;
    }, delay);
  };
}

节流 throttle

• 无论拖拽速度多快，都会每隔 delay 触发一次

function throttle(fn, delay = 500) {
  let timer = null;
  return function () {
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = null;
    }, delay);
  };
}

安全

常见的 web 前端攻击方式有哪些

xss 跨站请求攻击：

• 一个博客网站，我发表一篇博客，其中嵌入 \<script\> 脚本</script\>
• 脚本内容：获取 cookie（document.cookie），发送到我的服务器
• 发布这篇博客，有人查看它，我轻松收割访问者的 cookie

xss 预防：

• 替换特殊符号，如 < 变为 < > 变为 >
• \<script\> 变为 <script>，直接显示，而不会作为脚本执行</script\>
• 前端要替换，后端也要替换，都做总不会错

xsrf 跨站请求伪造：

• 你正在购物，看中了某个商品，商品 id 是 100
• 付费接口是 xxx.com/pay?id=100，没有任何验证
• 我是攻击者，看中了一个商品，id 是 200
• 我向你发送一封邮件，邮件标题很吸引人
• 邮件正文隐藏着
• 你一查看邮件，就帮我购买了 id 是 200 的商品

xsrf 预防：

• 使用 post 接口
• 增加验证，例如指纹、短信验证码等