面试官 : 首屏加载速度慢怎么优化?

首屏加载速度慢怎么优化?

1: 在回答这个问题之前 首屏 -- > 当进入该网页并且发送网络请求获取到资源以后 网页从没有内容到内容第一次渲染的时间 (当然是可以没有内容的)称为 首屏

答:

我认为 优化首屏 速度 可以从 两个方面去 优化

1:网络

当我们网络请求较多时 , 浏览器会增加首屏渲染速度 ,如果 大量的数据请求慢 这样会导致 页面 渲染也随之较慢,减少网络请求

减少网络请求

例如 : 使用图片懒加载形式 , 只发送用户视口可见的数据请求 这样可以大大增加 请求速度 从而进一步提高渲染速度。

使用缓存

与后端配合 进行 资源缓存 ,如长期不变的 logo 或者 定量更新的资源可以采用缓存的形式 来处理,也可以优化首屏渲染时间

使用 CDN 进行 加速

对资源进行托管,保证服务器的响应速度

2:加载资源方面

路由懒加载

使用 路由懒加载的形式,进行资源处理,当我们需要用到该资源时再进行资源加载,可以将大量的加载时间空出来留给首屏渲染。

script 标签资源异步加载

当一些 不影响系统环境资源的加载时 我们可以考虑使用 async 和 defer 加载

xml 复制代码
<script defer async ><script>

webpack splitChunks 代码分割

利用webpack 代码分割 进行优化,可以将 js进行分片 ,首次加载文件体积大量减少,以及资源异步加载

css 压缩 js压缩 html压缩 image压缩 gzip压缩

css 可以通过 minicssExtracPlugin 进行 css压缩

js 可以通过 TerserWebpackPlugin | uglifyJsPlugin 进行资源压缩

html 可以通过 HtmlMinimizerWebpackPlugin 进行压缩

图片可以通过 ImageMinimizerWebpackPlugin 进行压缩

css 样式书写规范

css 代码 写得好更有利于 浏览器的解析,还有说什么transform3d 能够硬件加速,我不这么认为,当你开启了一个

transform3d 相当于是在网页上多开了一个图层 , 当你的图层达到一定数量的时候,未免性能能好过普通的 transform translate

服务端渲染提高首屏

服务端渲染 ,后台将你需要绘制的页面结构以及数据全局准备好了,然后直接将 资源文件返回给前端,前端只需要渲染即可。

体验方面

1:增加骨架屏

2: 增加loading动画效果

总结

能回答到这些,想必面试应该已经够用了,主要还是大家要把每一点讲细,讲清楚,就能得到面试官的认可,一起加油吧

相关推荐
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀3 小时前
html初学者第一天
前端·html
脑袋大大的4 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络6 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘6 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way6 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689977 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽8 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头8 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github