前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端测试题:(解析)关于Vue首屏加载优化,说法不正确的是?

前端测试题:(解析)关于Vue首屏加载优化,说法不正确的是?

作者头像
舒克
发布2021-03-16 10:59:45
7170
发布2021-03-16 10:59:45
举报
文章被收录于专栏:迈向前端工程师

考核内容: 前端性能优化

题发散度: ★★

试题难度:

看看大家的选择

看样子大家在CD选择比较纠结,下面我们来分析一下

解题:

Vue (读音 /vjuː/,类似于 view)

是一套用于构建用户界面的渐进式JAVASCRIPT框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.

vue首屏加载优化(要使用NODE环境下,webpack支持)

1.异步路由加载,不打包库文件

首屏加载慢,主要是打包后的js文件过大,阻塞加载所致。那么如何减小js的体积呢?

那就是把库文件单独拿出来加载,不要参与打包。

2. 如果使用的是前端的样式框架ElementUI,可以通过exports模块导出所需样式及变量

3. 如果首屏的图片比较大,可以进行压缩处理,减小首屏图片大小;如果图比较多,可以使用懒加载

4.浏览器缓存策略,其实浏览器早就为我们提供了一份缓存机制,我们完全可以利用浏览器缓存机制来巨幅提高加载速度,而不是清空浏览器缓存;

首先我们来聊一下缓存的优先级:

当客户端需要请求一个服务端资源的时候,会率先检查浏览器中是否有缓存,

  • 没有则直接调取接口.
  • 若有,则会检查缓存是否过期,判断是否过期的方法有以下两种.

一, Expires(到期时间)(http1.0规则下的响应头)

二, Cache-Control(缓存控制)(http1.1规则下的响应头)

Cache-Control同样是服务端返回的一个响应头,他有几个选项可供使用:

而以上两种缓存方式,被总称为强缓存,且Cache-Control的优先级要优于Expires

缓存都是缓存在哪里?

  • 1.内存缓存(memory cache) 一般将脚本,图片,字体等常常和页面产生交互的部分存放在内存中,原因也很简单,比较利于性能提升.
  • 2.磁盘内存(disk cache) 一般将css等这些不经常变动的数据放在磁盘中进行缓存.

在线测试:

答案:

代码语言:javascript
复制
 D. 清空浏览器缓存
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-02-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 迈向前端工程师 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档