前端性能优化的几种方案

2024-05-16 08:55:25

前端进行性能优化的方案很多，这里只列举部分。在实际应用中不要贪多，想着都用上，要对网站的主要用户群体进行针对性优化。

1、降低请求量

① 合并资源，减少http请求数量。

② lazyLoad，如图片懒加载。分批加载，每次只加载一部分。

③ 使用字体图标或CSS绘制，来代替部分图片。

2、加快请求速度

① 预解析DNS

② 使用HTTP2.0

③ 并行加载

④ CDN 分发

⑤ webP，对图片进行压缩，减少图片体积。

⑥ minify/gzip 压缩，对css、js等文件进行压缩（去除空格、回车等），减少文件体积

补充知识：

webP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且图像质量几乎无差异。同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀。

Minify把 CSS 和 JS 压缩和削减(Minify：去掉空格回车符等)，以及把多个CSS，JS文件整合到一个文件里。

3、缓存

① HTTP协议缓存请求

② 离线缓存 manifest

③ 本地缓存 localStorage

补充知识：

GET请求可以缓存，POST请求不能缓存。GET请求后退/刷新无害，POST后退/刷新则会致使重新提交数据

4、渲染

① JS优化，如防抖、节流、事件委托、减少重排重绘等。

② CSS优化，如提取公共样式减少代码量、减少选择器嵌套层数、精灵图等。

③ 服务器端渲染

④ 使用Web Workers

⑤ CSS写在文件头部，JS写在文件底部。

补充知识：

客户端渲染: 获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。

服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML，使首屏渲染快，SEO（搜索引擎优化）好。

前端性能优化的几种方案相关推荐

前端性能优化的七种方法
前端性能优化主要有七种方法,包括减少请求数量.减少资源大小.优化网络连接.优化资源加载.减少重绘回流.使用性能更好的API和webpack优化 1.减少请求数量 1.1 图片处理 1.1.1 雪碧图 ...
Android性能优化的5种方案
指标量化性能的指标有很多,但最重要的就是以下5种: 包大小响应时间内存 CPU 耗电量优化性能就是可以从以上5点入手. 包大小优化顾名思义就是减少apk包体积大小,apk大小主要取决于res ...
java字符串分割性能_String字符串性能优化的几种方案
反编译后的代码: 1 //Decompiled by Jad v1.5.8g. Copyright 2001 Pavel Kouznetsov.2 //Jad home page:http://www ...
前端的图片优化的6种方案
前端的图片优化的6种方案 1.使用base64编码代替图片场景:适用于图片大小小于2KB,页面上引用图片总数不多的情况原理:将图片转换为base64编码字符串inline到页面或css中优势:减 ...
全链路前端性能优化方案
通常来讲前端性能优化是指从用户开始访问我们的网站到整个页面完整的展现出来的过程中,通过各种优化策略和优化方法让页面加载的更快,让用户的操作响应更及时,给用户更好的使用体验. 这里我们介绍的是前端性能优 ...
前端性能优化方法与实战17 横向对比：百度、阿里云、美团性能方案对比
前面我介绍了性能优化实践及在 Hybrid下的进阶优化方案,这是我们目前的做法,那么,业界是什么样的情况呢?在这里我就挑选三家互联网公司--百度.阿里云.美团,一起来看看他们是怎么做的? 为什么选它们 ...
前端性能优化的重要方案：图片懒加载
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的前端性能优化的重要方案:图片懒加载,主要包括其原理,我们常用的一些插件,及编写源码实现图片懒加载功能等,图片懒加载是项目比较常见的 ...
CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
前端页面性能优化的几种方式
前端页面性能优化的几种方式提升页面性能优化的常见方式: 资源压缩合并,减少http请求非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别利用浏览器缓存 --> ...
深度讲解：web前端性能优化
一.课程简介: 1.课程大纲涉及到的分类网络层面构建层面浏览器渲染层面服务端层面涉及到的功能点资源的合并与压缩图片编解码原理和类型选择浏览器渲染机制懒加载预加载浏览器存储缓存机 ...

最新文章

热门文章