前端最新知识库每日更新

ICE--

已于 2022-02-10 15:13:00 修改

阅读量298

点赞数

分类专栏：个人学习个人经验分享文章标签：前端 javascript html5 vue.js

于 2022-01-06 09:29:13 首次发布

本文链接：https://blog.csdn.net/weixin_44217710/article/details/122336521

版权

个人经验分享同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

个人学习

7 篇文章 0 订阅

订阅专栏

知识目录

大纲

大纲

1.一个可能让你的页面渲染速度提升数倍的CSS属性 content-visibility

.class {
  content-visibility: auto;
}

如果一个元素具有 auto 这个属性，如果当前元素没有出现在屏幕上，浏览器就不会渲染它和它的子元素；当元素接近用户的可视区域时，浏览器就会解除限制，并开始进行渲染；这可以保证元素会及时被用户看到。
在这里插入图片描述

看看上面的例子，在将 content-visibility: auto 设置到一些小的模块之后，渲染时间直接从232ms提升到了30ms，性能提升了7倍。
如果我们给可视区域外的元素增加了 content-visibility: auto 属性，那么当滚动条滚动到这个元素之后，如果这个元素很大有一定高度，那么滚动条的长度就会发生变化，页面可能就会发生抖动的现象。

解决这个问题，可以先使用 contains-intrinsic-size 提前给元素设置自然高度的大小，比如 1000px ，这样元素提前占用了一些高度，就不会发生抖动现象。

2. for forEach map 的区别

性能比较：for > forEach > map 在chrome 62 和 Node.js v9.1.0环境下：for 循环比 forEach 快1倍，forEach 比 map 快20%左右。

原因分析for：for循环没有额外的函数调用栈和上下文，所以它的实现最为简单。forEach：对于forEach来说，它的函数签名中包含了参数和上下文，所以性能会低于 for 循环。map：map 最慢的原因是因为 map 会返回一个新的数组，数组的创建和赋值会导致分配内存空间，因此会带来较大的性能开销。

如果将map嵌套在一个循环中，便会带来更多不必要的内存消耗。当大家使用迭代器遍历一个数组时，如果不需要返回一个新数组却使用 map 是违背设计初衷的。在我前端合作开发时见过很多人只是为了遍历数组而用 map 的

跳出循环
for 可以用break跳出循环 forEach不行,但是也是有办法的可以用try/catch:

try {
    var arr = [1, 2, 3, 4];
    arr.forEach(function (item, index) {
        //跳出条件
        if (item === 3) {
            throw new Error("LoopTerminates");
        }
        //do something
        console.log(item);
    });
} catch (e) {
    if (e.message !== "LoopTerminates") throw e;
};

3. 首页秒开实践指南

前端性能优化一直是衡量一个团队和一个前端的各方面水平，呈现快速的加载，是给人最直观，成就感也最足的一个感受，而且对用户体验是第一重要的概念，所以这个相当重要，现就来结合美团的实践方案来讨论一下。

以下一段转载自：美团技术团队分享
自JavaScript诞生以来，前端技术发展非常迅速。移动端白屏优化是前端界面体验的一个重要优化方向，Web 前端诞生了 SSR 、CSR、预渲染等技术。前端服务端渲染、后端服务端渲染等。

在美团支付的前端技术体系里，通过预渲染提升网页优化，从而优化了白屏问题，提升用户体验，并形成了最佳实践。

在前端渲染领域，主要有以下几种方式可供选择：
在这里插入图片描述
通过对比，同构方案集合 CSR 与 SSR 的优点，可以适用于大部分业务场景。

结合到我们团队负责的支付业务场景里，在保证系统稳定性的前提下，还需要保障用户体验，所以采用了预渲染的方式。

那么究竟什么是预渲染呢？我们先从最常见的 CSR 开始说起。

以 Vue 举例，常见的 CSR 形式如下：
在这里插入图片描述
一为什么会首屏白屏
浏览器渲染包含 HTML 解析、DOM 树构建、CSSOM 构建、JavaScript 解析、布局、绘制等等，大致如下图所示：

在这里插入图片描述

要搞清楚为什么会有白屏，就需要利用这个理论基础来对实际项目进行具体分析。通过 DevTools 进行分析：

在这里插入图片描述

等待 HTML 文档返回，此时处于白屏状态。

对 HTML 文档解析完成后进行首屏渲染，因为项目中对加了灰色的背景色，因此呈现出

灰屏。

进行文件加载、JS 解析等过程，导致界面长时间出于灰屏中。

当 Vue 实例触发了 mounted 后，界面显示出大体框架。

由此得出，因为要等待文件加载、CSSOM 构建、JS 解析等过程，而这些过程比较耗时，导致用户会长时间出于不可交互的首屏灰白屏状态，从而给用户一种网页很“慢”的感觉。
2 优化思路
在User-centric Performance Metrics一文中，共提到了4个页面渲染的关键指标：
在这里插入图片描述
基于这个理论基础，再回过头来看看之前项目的实际表现：
可见在 FP 的灰白屏界面停留了很长时间，用户不清楚网站是否有在正常加载，用户体验很差。

通过对比 FP、FCP、FMP 这三个时期 DOM 的差异，发现区别在于：
在这里插入图片描述

FP：仅有一个 div 根节点。

FCP：包含页面的基本框架，但没有数据内容。

FMP：包含页面所有元素及数据。

仍然以 Vue 为例，在其生命周期中，mounted 对应的是 FCP，updated 对应的是 FMP。那么具体应该使用哪个生命周期的 HTML 结构呢？
在这里插入图片描述
通过以上的对比，最终选择在 mounted 时触发构建时预渲染。
三
构建时预渲染方案
构建时预渲染流程：

配置读取
由于 SPA 可以由多个路由构成，需要根据业务场景决定哪些路由需要用到预渲染。因此这里的配置文件主要是用于告知编译器需要进行预渲染的路由。

在我们的系统架构里，脚手架是基于 Webpack 自研的，在此基础上可以自定义自动化构建任务和配置。
在这里插入图片描述
触发构建
项目中主要是使用 TypeScript，利用 TS 的装饰器，我们封装了统一的预渲染构建的钩子方法，从而只用一行代码即可完成构建时预渲染的触发。

TS的装饰器：
在这里插入图片描述
使用：

为了提高构建效率，并行对配置的多个页面或路由进行预渲染构建，保证在 5S 内即可完成构建，流程图如下：在这里插入图片描述
四我们梳理一下简化后的项目上线过程
开发 -> 编译 -> 上线

构建时预渲染研发流程及效果

最终，构建时预渲染研发流程如下：
开发阶段：

通过 TypeScript 的装饰器单行引入预渲染构建触发的方法。

发布前修改编译构建的配置文件。

发布阶段：

先进行常规的项目构建。

若有预渲染相关配置，则触发预渲染构建。

通过预渲染得到最终的文件，并完成发布上线动作。

完整的用户请求路径如下：
在这里插入图片描述
通过构建时预渲染在项目中的使用，FCP 的时间相比之前减少了 75%。

从此我们再也不受第一屏很慢的困扰了。并且可行性很好，也可以让其他有需求的一起实践。

4 推荐 12 个好用的 CSS 的开源项目

1 animate
强大的跨平台的预设 css3 动画库，也是前端圈非常有名的动画库。
内置了很多典型的 css3 动画，兼容性好使用方便。
https://github.com/animate-css/animate.css
2 tailwindcss
无需离开您的HTML，即可快速建立现代网站。

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

https://github.com/tailwindlabs/tailwindcss
3 bulma
基于 Flexbox 的现代 CSS 框架。

Bulma 是一个免费、开源的 CSS 框架，它提供了易于使用的前端的组件，您可以轻松地组合这些组件来构建响应式 Web 界面。

无需懂得 CSS，有了它，即使完全不懂 CSS，也可以轻而易举做出美观的网页。

Bulma 框架最大的特点，就是简单好用。所有样式都基于 class，只需为 HTML 元素指定class，样式立刻生效。

https://github.com/jgthms/bulma

4 styled-components
styled-components 是一个针对 React 的 css in js 类库。

它的优点在于：

贯彻 React 的 everything in JS 理念，降低 js 对 css 文件的依赖
组件的样式和其他组件完全解耦，有效避免了组件之间的样式污染
https://github.com/styled-components/styled-components
5 Hover
Hover.css 是一款非常简单实用的纯 CSS3 鼠标滑过特效动画库。

有 100 多种效果可以选择，包括：2D 动画、背景动画、边框动画、图标动画、发光渐变、阴影、对话框、折角等 100 多种特效。

https://github.com/IanLunn/Hover
6. postcss
是一个用 JavaScript 工具和插件转换 CSS 代码的工具。

https://github.com/postcss/postcss
7 pure
https://github.com/pure-css/pure
8 SpinKit
SpinKit 是一套网页动画效果，包含 8 种基于 CSS3 实现的很炫的加载动画。

借助 CSS3 Animation 的强大功能来创建平滑，易于定制的动画，SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。

https://github.com/tobiasahlin/SpinKit
9 uikit
一款轻量级、模块化的前端框架，可快速构建强大的 web 前端界面。

UIKit 提供了全面的 HTML、CSS 及 JS 组件，它们使用简单，容易定制和扩展。

https://github.com/uikit/uikit
10 30-seconds-of-css
满足您所有开发需求的简短 CSS 代码片段。

CSS 片段集合包含 CSS3 的实用程序和交互式示例。它包括用于创建常用布局、样式和动画元素的现代技术，以及用于处理用户交互的片段。

https://github.com/30-seconds/30-seconds-of-css
11 solved-by-flexbox
曾经仅靠 CSS 很难或不可能解决的问题，现在通过 Flexbox 变得简单了。

https://github.com/philipwalton/solved-by-flexbox
12 emotion
Emotion 是一个用 JavaScript 编写 css 样式的库，下一代 CSS-in-JS 。

它提供了强大的、可预测的样式组合，还为开发人员提供了丰富的特性体验，如源映射、标签和测试实用程序。

同时支持字符串和对象样式。

https://github.com/emotion-js/emotion

ICE--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端最新知识库每日更新

知识目录大纲1.一个可能让你的页面渲染速度提升数倍的CSS属性 content-visibility2. for forEach map 的区别3. 首页秒开实践指南4 推荐 12 个好用的 CSS 的开源项目大纲**1.一个可能让你的页面渲染速度提升数倍的CSS属性 content-visibility**.class { content-visibility: auto;}如果一个元素具有 auto 这个属性，如果当前元素没有出现在屏幕上，浏览器就不会渲染它和它的子元素；当元素接近用
复制链接

扫一扫