React · 1/84
1. 为什么推荐将静态资源放到 CDN 上 2. Class 组件的局限性 3. Class 组件与函数组件 4. Composition API 与 Hooks 对比 5. Vue 中 computed 和 watch 的区别 6. 爬楼梯问题 7. createElement 执行过程 8. 限制构造函数只能通过 new 调用 9. 判断 React 组件类型 10. 受控与非受控组件 11. 自定义 Hook 开发 12. 什么是 DNS 劫持? 13. 判断对象是否是 React 元素 14. HOC 与 Render Props 15. React 中 Element、Component、Node、Instance 的区别 16. Hooks 使用规则 17. HTTP/2 多路复用原理 18. HTTP 报文结构 19. HTTPS 握手过程 20. Immutable 在 React 中的应用 21. 实现图片懒加载 22. JavaScript == 运算符的机制 23. JavaScript 数组的内存存储方式 24. JSX 本质 25. Immutable 在 React 中的应用 26. 最大子序和 27. React Router 的 Link 和 a 标签的区别 28. JSX语法糖本质 29. 父组件调用子组件方法 30. 移动端样式适配方案 31. Portal 中的事件冒泡机制 32. React 17 新特性 33. React 18 新特性与并发渲染 34. React 组件渲染流程 35. React 是什么 36. React元素$$typeof属性 37. React 组件通信方式 38. React 错误边界处理 39. React 核心概念 40. React 组件设计 41. React Fiber 架构 42. React Hooks 原理与规则 43. React 常用 Hooks 使用指南 44. React.memo 和 memoize 函数的区别 45. React 生命周期演变 46. React 性能优化实践 47. React 性能优化策略 48. React Portals 的使用场景 49. React 中的 ref 使用 50. React 和 React-DOM 的关系 51. React 为什么不直接使用 requestIdleCallback 52. React-Router 原理与工作方式 53. React 合成事件机制 54. React 服务端渲染实现 55. React 事务机制 56. setState 同步异步问题 57. setTimeout 为什么不能保证及时执行 58. Redux 工作流与中间件 59. React 服务端渲染实现 60. 单页应用如何提高加载速度 61. Source Map 的工作原理 62. TypeScript 中的命名空间与模块 63. Taro 多端框架实现原理 64. Taro 2.x 和 Taro 3 的区别 65. TypeScript 与 JavaScript 的区别 66. TCP 三次握手和四次挥手 67. useEffect 支持 async/await 68. useEffect 闭包陷阱 69. useMemo 和 useCallback 的使用场景 70. useContext 的使用方法 71. useReducer 与 Redux 对比 72. useState 连续调用 setState 导致值丢失 73. 实现 useTimeout Hook 74. useRef、ref 和 forwardRef 的区别 75. 虚拟DOM性能分析 76. 实现 useUpdate 强制组件重新渲染 77. Virtual DOM 的意义 78. 虚拟DOM的三个组成部分 79. Virtual DOM 与 Diff 算法 80. Vue 页面渲染流程 81. Vue 与 React 对比 82. Vue 与 React 的 Diff 算法差异 83. Vue2 数组变化检测的限制与解决方案 84. Vue3 实现 Modal 组件

为什么推荐将静态资源放到 CDN 上

了解 CDN 的工作原理和使用静态资源 CDN 的优势

问题

为什么推荐将静态资源放到 CDN 上?

解答

什么是静态资源

静态资源是指在不同请求中访问到的数据都相同的文件,例如图片、视频、CSS、JavaScript、字体文件、安装包等。

动态资源是指在不同请求中访问到的数据不相同的内容,例如 API 接口返回的数据、数据库查询结果、服务端渲染的页面等。

什么是 CDN

CDN(Content Delivery Network,内容分发网络)是由分布在不同区域的边缘节点服务器群组成的分布式网络。

CDN 加速的本质是缓存加速。它将服务器上的静态内容缓存在 CDN 节点上,用户访问时无需回源到服务器,就近访问 CDN 节点即可获取内容,从而达到加速效果,同时减轻源站压力。

需要注意的是,CDN 不适用于动态内容。因为动态内容每次都需要服务器实时生成,CDN 节点只能转发请求回源站,无法缓存。

CDN 的优势

1. 加速访问

CDN 覆盖全球线路,通过与运营商合作,在全国骨干节点部署边缘存储节点,解决跨运营商、跨地域访问慢的问题。

2. 提高安全性

CDN 的负载均衡和分布式存储技术可以防御大部分互联网攻击,为网站提供额外的安全保障。

3. 高可用性

当某个服务器故障时,系统会自动调用其他健康节点提供服务,实现接近 100% 的可靠性。

4. 节约成本

无需购买多地服务器和托管运维,无需配置服务器镜像同步,节省人力和财力成本。

5. 专注业务

CDN 厂商提供 7x24 运维监控支持,让开发者可以将更多精力投入到核心业务开发上。

CDN 工作原理

当用户访问使用了 CDN 的网站时,完整流程如下:

  1. 用户在浏览器输入网站域名
  2. 本地 DNS 将域名解析权交给 CDN 专用 DNS 服务器
  3. CDN DNS 返回全局负载均衡设备的 IP 地址
  4. 用户向全局负载均衡设备发起请求
  5. 全局负载均衡设备根据用户 IP 和请求内容,选择最合适的区域负载均衡设备
  6. 区域负载均衡设备综合考虑以下因素选择缓存服务器:
    • 距离用户最近的服务器
    • 拥有所需内容的服务器
    • 负载较低的服务器
  7. 返回最优缓存服务器的 IP 地址给用户
  8. 用户向缓存服务器请求内容
  9. 缓存服务器响应请求,如果没有缓存则向上级或源站拉取内容

没有 CDN 时的访问流程

传统的 B/S 架构访问流程:

  1. 用户在浏览器输入域名
  2. 浏览器向本地 DNS 请求解析
  3. 本地 DNS 返回缓存结果,或递归查询整个 DNS 系统
  4. 浏览器获得服务器 IP 地址
  5. 浏览器直接向源服务器请求内容
  6. 服务器返回内容给浏览器

这种方式下,所有用户都直接访问源站,距离远的用户访问慢,源站压力大。

关键点

  • CDN 通过缓存静态资源到边缘节点,实现就近访问,加速内容分发
  • CDN 只适用于静态资源,动态内容仍需回源到服务器
  • CDN 提供负载均衡和分布式存储,提高网站可用性和安全性
  • 使用 CDN 可以节省服务器成本,减轻源站压力
  • CDN 通过智能 DNS 解析和负载均衡,将用户请求分配到最优节点