前端性能优化的整理笔记(二)

简介: 前端性能优化的整理笔记(二)

前端性能优化的整理笔记(一):https://developer.aliyun.com/article/1414333

CSS对性能的影响

1.降低CSS对渲染的阻塞

尽早的完成下载,譬如优先完成首屏的样式加载

2.利用GPU进行完成动画

对 transform 和 opacity 这样的属性,进行优化,单独建立一个层。不进行布局和重绘。

3.使用 contain 属性

contain 属性,大大降低了布局的时间。浏览器不会重新计算,同级其他元素。

.news li {
    contain: layout;
}
复制代码

4.使用font-display属性

font-display属性在@font-face声明时使用。

借助它,我们可以通过一行简单的CSS来控制字体的显示方式,而不需要使用基于JavaScript的解决方案。这意味着我们的网页可以减小体积,提高性能。

以Vue项目举例,代码优化

1.代码模块化

封装组件,代码复用。通过css预加载处理器,定义css变量和混入mixin。

2.for循环设置key值

for循环,数据遍历渲染的时候,每一项设置唯一的值。

为了让Vue内部核心代码能更快地找到该条数据,当旧值和新值取对比的时候,可以更快的定位到diff

3.Vue路由懒加载

当首屏渲染的时候,能够加快渲染速度。

4.更加理解Vue的生命周期

不要造成内存泄漏,使用过后的全局变量在组件销毁后重新置为null

5.可以使用keep-alive

keep-alive是Vue提供的一个比较抽象的组件,用来对组件进行缓存,从而节省性能。

第四章 资源优化

资源的压缩和合并

一直以来,资源的压缩和合并,都是最为有效的优化方案。

1.减少http请求数量

2.减少请求资源的大小

HMTL压缩

1.使用在线工具进行压缩

html-minifier.bchrt.com/

2.使用 html-minifier 等npm工具

github.com/kangax/html…

CSS压缩

1.使用在线工具进行压缩

css-minifier.bchrt.com/

2.使用 clean-css 等 npm 工具

github.com/clean-css/c…

JS压缩与混淆

1.使用在线工具进行压缩

2.使用Webpack对JS在构建时压缩

CSS JS 文件合并

1.若干小文件。这种情况,可以采用

2.无冲突,服务相同的模块。这种情况, 优先考虑

3.优化加载。这种情况,不考虑

图片优化的方案

图片格式的比较

💎 JPG格式:压缩比高,画质可以很好的保存,色彩感好

使用场景,譬如首页轮播图

缺陷:边缘粗糙,logo一般不会使用 JPG

💎 PNG格式:体积比较大,一般用来做图标和logo

github.com/imagemin/im…

💎 WebP 谷歌提出的新的图片格式

JPG一样的质量,压缩比更高

图片加载的优化

💎 图片的懒加载

1.原生的图片懒加载方案

<img src="./example.jpg" loading="lazy" alt="zhangxinxu">
复制代码

2.第三方图片懒加载方案

💎使用渐进式图片

渐进式图片的解决方案

💎 使用响应式图片

srset 属性,设置多个图片源,根据屏幕宽度,挑选合适的图片

sizes 属性,视窗宽度的百分比

根据设备的 dpi 和视窗大小,显示合适的图片

字体优化

字体未下载完成时,浏览器隐藏或自动降级,导致字体闪烁

使用 font-display 属性

第五章 构建优化

项目构建的时候,通过配置,进行优化。

  • webpack的优化配置
  • 代码拆分
  • 代码压缩
  • 持久化缓存
  • 监测与分析
  • 按需加载

这次不展开讲,先挖个坑。

第六章 传输加载优化

在 nginx上 配置 Gzip 压缩

对传输资源,进行体积压缩,可高达 90%

如何配置 nginx 启用 Gzip

gzip  on;
gzip_min_length 1k;
gzip_buffers 16 64k;
gzip_http_version 1.1;
gzip_comp_level 9;
gzip_types text /plain  application /x-javascript  text /css  application /xml ;
gzip_vary on;
复制代码

启用Keep Alive

Keep Alive是在TCP中一个可以检测死连接的机制,可以保持tcp长连接不被断开,属于 tcp 层功能。

HTTP1.1协议默认开启 keepa-live 保持长连接,主要作用是:

提高对 tcp 连接的复用率,减少创建连接过程给系统带来的性能损耗。

HTTP标准中的一部分,默认是开启的。

相关参数的配置,到达最优的体验。

Request Headers 请求头中 Connection: keep-alive 表示开启了 Keep Alive

HTTP资源缓存

官方文档 developer.mozilla.org/zh-CN/docs/…

Service Worker实现渐进式应用

Service Worker作用

1.加速重复访问

2.离线支持

使用 service-worker 可以缓存静态文件

Service Worker注意

1.延长了首屏时间,但页面总加载时间减少

2.兼容性

service worker 在浏览器和移动端的兼容性如下图所示:

3.只能在localhost或https下使用

HTTP/2加速传输

HTTP/2优势

1.二进制传输

HTTP/1是基于文本的,效率比较低,而且不安全

HTTP/2二进制编码,安全而且提供了传输效率

2.请求响应,多路复用

简而言之:多个http请求可以共用同一个TCP连接。

3.Server push 服务端主动推送

html 页面包含 script.js 和 style.css 资源文件。客户端只需要请求page.html,

服务端发现html页面中包含资源文件,会主动推送给客户端。减少客户端请求的次数。

nginx开启HTTP2支持

listen       443 ssl http2;
server_name  www.orzr3.com;
复制代码

搭建HTTP/2服务

1.HTTP/2只能工作在HTTPS下

需要创建签名证书

2.适合较高的请求量,比较高的请求量,才能发挥他最大的作用

SSR加速渲染

SSR:server side render

服务端渲染SSR的好处

服务器把需要的组件或页面渲染成 HTML 字符串,

然后把它返回给客户端。客户端拿到手的,是可以直接渲染然后呈现给用户的 HTML 内容

1.加速首屏加载

2.改善SEO 搜索引擎优化

是否使用SSR?

1.架构大型项目,动态页面,面向公众用户

2.搜索引擎排名很重要

第七章 其他的解决方案

IconFont

通过 iconfont 字体引入图标

阿里矢量图库

www.iconfont.cn/

从 PNG 到 iconfont 的优点:

1.多个图标 =》 一套字体,减少获取时的请求数量和体积。

2.矢量图形,可伸缩

3.直接通过 CSS 修改样式(颜色,大小等)

缺点:

单色彩

SVG 解决方案

从 IconFont 到 SVG 的优点:

1.保持了图片能力,支持多色彩

2.独立的矢量图形,不像iconfont需要下载整套字体

3.XML语法

使用 FlexBox 优化布局

display: flex;
flex-flow: row wrap;
复制代码

页面渲染 rendering 和 painting 节省了不少时间,性能明显提升。

FlexBox 的优势

1.更高性能的实现方案

2.容器有能力决定子元素的大小,顺序,对齐,间隔等。

3.双向布局,横向 row 和纵向 column

大厂面试题分享 面试题库

后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库

预加载

优化资源加载的顺序

资源优先级

1.浏览器默认安排,资源加载优先级

先有 html 解析头部,加载js和样式,然后解析图片等资源。

2.使用 preload 和 prefetch 调整优先级

preload 优先加载

举例,通过 link 标签,可以预加载图片

1. <head>
2.     <metacharset="UTF-8"><title>Water</title><linkrel="preload"href="img/product2.svg"as="image" /></head>复制代码

prefetch 空闲加载,后面会用到的东西。

<link rel="prefetch"as="style" href="product-font.css />
复制代码

preload 和 prefetch 使用场景

1.preload 提前加载较晚出现,但是对当前页面非常重要的资源,譬如图片和字体。

2.prefetch 加载完当前页面之后,提前加载后面路由需要的资源,优先级低。

预渲染

预渲染的作用

1.大型单页应用的性能瓶颈:JS下载+解析+执行

2.SSR的主要问题:牺牲TTFB 请求过程,来补救首次加载 First Paint 实现起来,也很复杂

3.Pre-rendering 打包时提前渲染页面,没有服务端参与

vue 预渲染

npm install prerender-spa-plugin -D  
复制代码

配置 vue.config.js 和 修改main.js

修改 vue.config.js

const path = require('path')
// 预渲染插件constPrerenderSPAPlugin = require('prerender-spa-plugin')
constRenderer = PrerenderSPAPlugin.PuppeteerRenderermodule.exports = {
    configureWebpack: {
        plugins: [
            newPrerenderSPAPlugin({
                // 生成文件的路径,与webpack打包一致即可staticDir: path.join(__dirname, 'dist'),
                // 需要预渲染的路由routes: ['/', '/mine'],
                renderer: newRenderer({
                    inject: {
                        foo: 'bar'
                    },
                    headless: false,
                    renderAfterDocumentEvent: 'render-event',
                })
            })
        ]
    }
}
复制代码

修改 main.js

newVue({
    router,
    mounted() {
        document.dispatchEvent(newEvent('render-event'))
    },
    render: h =>h(App)
}).$mount('#app')
复制代码

修改路由模式为history

构建成功后 dist 目录下:

根路径和需要预渲染的路径,都生成了 index.html 文件。

当浏览器访问这时,服务器返回的就是对应 html 文件的内容。

骨架组件

使用骨架组件,减少布局移动(Layout Shift)

1.占位

2.提升用户感知性能

最后的话

大厂面试题分享 面试题库

后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库

相关文章
|
16天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
31 0
|
2天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
15 7
|
1天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
7 2
|
8天前
|
缓存 前端开发 JavaScript
前端性能优化:打造流畅用户体验的秘籍
【10月更文挑战第20天】前端性能优化:打造流畅用户体验的秘籍
20 3
|
7天前
|
存储 缓存 算法
前端算法:优化与实战技巧的深度探索
【10月更文挑战第21天】前端算法:优化与实战技巧的深度探索
9 1
|
7天前
|
缓存 前端开发 JavaScript
如何优化前端资源
如何优化前端资源
|
8天前
|
监控 前端开发 JavaScript
前端性能优化:打造流畅用户体验的秘籍
【10月更文挑战第20天】前端性能优化:打造流畅用户体验的秘籍
17 2
|
16天前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
16天前
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
|
8天前
|
前端开发 JavaScript UED
前端性能优化:打造流畅用户体验的秘诀
【10月更文挑战第20天】前端性能优化:打造流畅用户体验的秘诀
16 0