likes
comments
collection
share

谈到首屏优化，都能说些什么

作者站长头像
站长
· 阅读数 42

前言

好久不见，年底的我又来勤奋加更了

今天带来的依旧是一道场景八股题，很常问，也很重要：

  • 如何进行首屏优化

看到这里如果你脑子里突然出现了第一、第二....首先、其次....等词的时候，大佬，请收下我的膝盖！

如果没出现，那就慢慢听我道来..

说到首屏优化，我们大家对于性能优化还是要有一个基本认识的，如何进行性能优化，该从何下手呢？

我的答案是：让加载更快，让渲染更快

举个例子：我们在搭建博客的时候会使用到配图，图片非常多的时候，我们进入博客的时候是不是会转圈转很久？

那么我们这里是如何解决的？ 是不是大部分人都会用到CDN啊，就是使得图片的加载更快，达到了我们优化的目的。

接下来我们一起看看首屏优化可以使用什么方法吧

如果你有更好的方法或者我的说法哪里有误，欢迎在评论区指出 or 提出，希望可以同大家一起进步！

正文

路由懒加载 适用于SPA应用

路由懒加载，即按需加载或延迟加载，要将路由进行拆分，优先保证首页加载。

由于Vue是SPA（单页面）应用，他在打包之后会有一个巨大的js包，我们进入首页的时候为了加载资源就会造成一个白屏的情况，即使是做了加载动画，添加了Loading，用户的体验也不是很好，会觉得网站很卡，所以我们将其进行拆分，用到的时候，让他加载，没有用到的时候，就不用加载，这样加载的资源少了，速度自然就提高了。

我们之前在vue中写路由的时候可能是这么写的：

routes: [ 
            { 
                path: '/',
                name: 'Ned', 
                component: Ned 
             }
        ]

现在我们可以这样：

routes: [ 
            { 
                path: '/',
                name: 'Ned', 
                component: ()=>import("@/components/Ned")
             }
        ]

我们这么写只是进行了组件的注册，但没有进行加载，只有等到需要这个组件的时候，才会加载执行。

这里其实跟import有点关系，大家可以搭配一下这个来理解：模块方法 | webpack 中文文档

服务端渲染 SSR

这里可以了解一下，浏览器端渲染（CSR）和服务器端渲染（SSR）都分别是什么。

  • CSR: 页面上的内容是我们加载的js文件渲染出来的，js文件运行在浏览器上面，服务端只返回一个html模板
  • SSR：页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html就可以了

那么为什么首屏加载要使用SSR呢？

我们在浏览器渲染的时候，我们会依次的去下载资源，我们想要成功看见页面，就需要将app.js这种文件下载到本地，在此之前我们看见的都会是白屏，而服务端渲染则不同，它返回的直接就是一个完整的html网页，可以直接显示在浏览器上。

导致浏览器渲染在首屏加载上弱于服务端渲染的原因就在于：控制页面的js文件没加载出来之前，我们是看不见页面的

但是服务端渲染是有成本的，所以大家要具体情况具体分析，当然面试的时候我们是可以说出来这点的

这里给大家推荐一篇文章：服务端渲染SSR及实现原理 - 政采云

预加载技术

就是用户还没用呢，我先去下载过来，当用户使用的时候，就会瞬间打开，贼快！

但是这个跟首屏（指的是首页，第一页）优化好像没什么关系，这个的场景可以说是公众号的文章列表，或者浏览器导航类网页，去加速后续页面的读取速度

当用户进入导航类页面的时候，会在服务器端进行一个预下载的配置，去下载静态资源，完后当用户点击到已经下载的应用链接的时候，就会瞬间打开

我预判了你的预判！

分页

当我们的表单数据有非常多时，我们可以将其进行分页，默认出现在首页的只有第一页的数据，想看到另外的数据可以让用户触发下滑之类的操作，再去加载另外的数据

这跟如何一次性在页面渲染十万条数据我觉得有相同之处，当后端给我们一次性返回十万条数据让我们进行渲染的时候（不要犹豫，抄家伙）

我们可以对数据进行分片，配合setTimeout让数据分批次进行加载，后续可以使用window.requestAnimationFrame()函数减少重排，也可以用文档碎片document.createDocumentFragment()的方式进行再度优化

图片懒加载

首先我们需要让我们 html 中需要懒加载的 img 标签的 src 设置缩略图或者不设置 src，然后自定义一个属性，值为真正的图片或者原图的地址（比如 data-src），并且定义一个类名，表示该图片是需要懒加载的（比如lazy-img），这有两个作用：

  • 为以后获取需要懒加载图片的 img 元素
  • 可以给这个类名设置背景图片，作为图片未加载前的过度图片，比如显示为 loading 的图片。
<img data-src="真实地址" class="lazy-img">

页面加载完后，我们需要获取所有需要懒加载的图片的元素集合，判断是否在可视区域，如果是在可视区域的话，设置元素的 src 属性值为真正图片的地址。

当用户滚动窗口的时候，遍历所有需要懒加载的元素，通过每个元素的 BoundingClientRect 属性来判断元素是否出现在可视区域内，判断方法同之前一步一样。

document.addEventListener('scroll', inViewShow)

这里我们还可以优化下，可以通过函数节流优化滚动事件的处理函数

可以看这个文章：节流是不是也应该了解一下

还有要注意的就是要提前设置图片尺寸，尽量只重绘，不重排

注意

我们在做性能优化的时候，要积极配合统计分析，要得出优化结果，不管是在晋升还是在面试上，都要体现在文本上，例如从10s优化到了1s等等，另外还要让用户有体验感，如骨架屏，loading动画等

其次针对于不同形式有不同的优化方式，不要一股脑的全部堆上去，有可能会适得其反。

面试专栏往期内容

【基础巩固📔】- 带你搞懂CSS盒模型

对于宏任务和微任务，你知道多少？

两个盒子，左边固定宽，右边自适应，你能想到几种方法？

结束啦

首屏优化是面试常考的一个考点，无论是面试还是实际应用都是非常重要的，所以快来学习吧！

梳理好每一个知识点，稳扎稳打，才不会被面试官问倒😰~

如果文章有误欢迎在评论区指出，感谢指正🔔

这是我面试专栏的第四篇文章，后续会陆陆续续继续整理的，欢迎大家关注📢

👉专栏地址：Ned的面试加油站👈

如果您觉得以上的内容还不错，不妨点个赞支持一下哦~~😇

我们下期再见👋

转载自:https://juejin.cn/post/7182853075378372669
评论
请登录