核心点
理解减少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请求过程 是前端性能优化的核心
