Skip to content

核心点

理解减少HTTP请求数量减少请求资源大小 两个优化要点

掌握压缩与合并原理

掌握在线网站和fis3两种实现压缩与合并的方法

CS架构GUI软件的开发与部署

开发 -> 发布 (APK) -> 运行

BS架构的开发与部署过程

开发 -> 发布 -> webServer CDN 运行 通过HTTP动态增量地访问静态资源的过程

浏览器的一个请求从发送到返回经历了什么

1 在浏览器的地址栏上输入URL -> 回车

2 浏览器将 URL进行拆分,解析 domain -> DNS服务器 -> 返回ip

3 IP地址打在协议中 -> 发送到网络 (经过局域网 -> 交换机 -> 路由器 -> 主干网络 -> 服务端)

4 服务端返回我们要的资源(GET请求)这里假定是html,浏览器进行render

5 render -> DOM树 -> CSSOM -> 下载并加载css js img等资源 -> reflow repaint

那么从上面几点,我们可以做哪些优化呢?

在DNS服务上, 我们可以做资源缓存 ~ 减少初次请求次数及时间

网络请求上,通过CDN 来解决网络请求与缓存问题 (CDN域名不与主站域名一样,这样不会带上主站的cookie) 使用CDN能解决静态资源、网络选择及缓存问题,但对于接口无法用CDN

接口 -> 浏览器中的缓存策略 (相同资源、接口 在浏览器中读取缓存)

带宽 减少HTTP请求大小

网络损耗 减少HTTP请求次数

浏览器端渲染 vue react 走框架代码渲染数据,而不是直出HTML(该过程对首屏有损耗,不利于性能)

业界主流的方案: 服务端渲染 SSR 整个HTML直出到浏览器端


请求过程中一些潜在的性能优化点

  • DNS是否可以通过缓存减少DNS查询时间?

  • 网络请求的过程中走最近的网络环境?

  • 相同的静态资源是否可以缓存?

  • 能否减少请求HTTP请求大小

  • 减少HTTP请求数

  • 服务端渲染

深入理解 HTTP请求过程 是前端性能优化的核心

共 20 个模块,1301 篇 Markdown 文档。