前端项目之:项目优化相关

首页加载缓慢

一、同构解决方案
使用场景:通过虚拟DOM,操作DOM; 有SEO需求;

  1. 客户端渲染:首页白屏,慢
  2. 服务端渲染:首页快,但每次跳转需请求服务端,慢

同构:结合客户端和服务端渲染的优点,服务端先渲染一遍html(静态页面),客户端添加事件绑定。
解决首屏慢问题。
只首次访问请求服务端。

(1) 路由的处理

// 服务端渲染使用 静态路由
<StaticRouter></StaticRouter>

(2) 数据的脱水、注水
把从后台获取的数据储存起来,当客户端渲染时注入

二、前端预加载

(1) DNS 预解析 dns-prefetch

  • 场景:跨源获取数据

    浏览器无法自动预加载<script> 中的链接和动态插入的链接,此时需要在页面的头部 添加 dns-prefetch
    如:<head> <link ref="dns-prefetch" href="xxx.com"> </head>

  • 功能:执行dns查询

  • 缺点:过多的dns解析造成网络负担

  • 相关知识点:浏览器DNS缓存,不同浏览器的缓存时间不同,chrome(1分钟) chrome查看缓存

  • 过程:html下载完成后,解析页面包含链接的标签,提前查询对应的域名;访问过的页面,根据浏览器缓存列表,再次打开时html下载的同时去解析DNS。

    1. 自动解析
      https 不会自动解析(安全问题)
      开启自动解析功能: <meta http-equiv="x-dns-prefetch-control" content="on"> content 值 on
      关闭自动解析功能: <meta http-equiv="x-dns-prefetch-control" content="off"> content 值 off

    2. 手动解析

(2) preconnect

  • 场景:预先建立网络链接,加载资源提升用户体验
  • 功能:HTTP发起请求前预先执行 DNS解析、TLS协商、TCP握手
  • 缺点:(> 6-8 个)过多的网络链接,抢占资源造成网络负担。过多的预连接会损害浏览器其他域的连接。
  • 相关知识点:因浏览器对http连接有时间限制,预先建立连接在一定时间内未使用,会提前关闭连接。

(3) prefetch

  • 场景:预先获取或缓存资源,以供下一次页面加载时使用
  • 功能:提前获取到资源
  • 缺点:如果不确定使用,提前获取资源,占用网络资源造成网络负担

(4) preload (优先级更高)

  • 场景:预先下载和缓存资源, 如: video、audio、document、font、image、script、style、worker等,但不加载和执行脚本
  • 功能:以更高的优先级下载和缓存资源,当前页面可用
  • 注意:与prefetch 同时使用,造成二次下载 如:<Link ref = "prefetch" ...> <Link ref = "preload" ...> 会加载两次资源
    跨域加载资源需添加 crossorigin ,避免多次加载 <Link ref = "preload" crossorigin ...>
暂无评论

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇