- 综合排序
- 最热优先
- 最新优先
- 来自专栏玩转大前端
前端优化
一、页面/文件级优化 1、减少HTTP请求数 解决方法： 1）设置缓存 2）css、js、img等静态资源合并压缩（vue的项目有压缩css和js） 3）懒加载图片（不是真正意义的减少请求数 ，降低维护成本）12、利用css继承减少代码：有一部分CSS代码是可以继承的，如果父代元素已经设置了该样式，后代元素就不需要去设置该样式，例如文字的样式：font-size、color等 三、业务功能优化 1、返回状态保持功能 2、针对移动端各种屏幕尺寸的适配方案 3、webpack优化 4、将请求接口代码和加载动画及错误弹出提示封装成公共函数 5、统一前端常用组件规范。 前端规范：不同样式的组件图片使用一个大文件夹统一存放，里面分各种子类，每次更换只需更改文件夹名称即可实现更改一整套组件的样式的效果；使用vue.js框架的，这些组件都统一写成可复用组件（无需每次重复编写代码
78720编辑于 2022-08-15 - 来自专栏只喝牛奶的杀手
前端优化
的访问次数 Choose <link> over@import @import使用< link >而非@import Avoid Filters 避免过滤器的使用 Optimize Images 优化图片 Optimize CSS Sprites 优化CSS Sprites
64820发布于 2019-08-26 - 来自专栏Fantasy的技术小站
前端优化
前端优化是一个至关重要的过程，它不仅影响到网站的用户体验，还可能影响到网站的搜索引擎排名。 下面是一些常见的前端优化策略，以帮助提高页面的加载速度： 优化图片 压缩图片：使用工具或插件压缩图片，减小文件大小。 使用正确的格式：例如，使用 WebP 格式代替 JPEG 或 PNG。 优化 CSS：将关键路径的 CSS 内联在 head 中。 浏览器缓存 通过设置 HTTP 头信息，使浏览器缓存静态资源，减少重复加载。 优化字体 选择高效的字体格式：例如，WOFF2。 优化渲染路径 避免阻塞渲染的资源：例如，将脚本和样式表移到 HTML 文档的底部。 利用请求优先级：确保关键资源优先加载。 在进行优化时，建议使用性能分析工具来监控和测试优化效果，确保每一步的改进都是有效的。
42020编辑于 2023-10-18 - 来自专栏CSDNToQQCode
前端性能优化-图像优化
2、图像优化 1) jpg or png 对于颜色较多的图像，使用jpg更好，因为png可以选择使用调色板颜色更多的png24，得到的图片比jpg大。
1.1K10编辑于 2022-11-29 - 来自专栏逸鹏说道
漫谈前端优化
iphone4s诞生的时代，在中国高级智能设备开始被普遍使用，4G的覆盖范围也越来越大，各种app、移动站点、Html5活动页面也逐渐火爆起来；随着行业的发展，对从业者及技术支持的要求也越来越高；对于前端 ，前端资源和页面优化是常见要求，对比移动端，移动端对前端优化的要求更高，可以说要达到极致，虽然现在基本都有使用WIFI了，但一些地方还是要靠4G甚至3G、2G，极致的优化能争取更多的pv和更多的可能，如果你去观察一些大厂的项目和一些比较有名的站点 ，也会发现他们的优化是做的非常专业非常好的；而我今天跟大家聊的就是关于前端优化的内容； 话不多说，来看看有哪些选项； 1.引用资源部分优化： ·合并引用的css、javascript，并使用压缩模式 web图片优化应该是优化中的重头戏，内容型、展示型的站点图片规模很大，也许1%的优化作用就可以和其他的优化方式相媲美； ·使用css、svg、fonticon代替图片； ·压缩图片，重中之重，就图片本身格式而言 上传下载太麻烦了，使用它们给的开发者接口，个人实测跟gulp差不多，比不上网站上的压缩，所以意义不大，而且限制次数，土豪冲会员也许给的接口性能会优越也说不定哈)还有其他各种网络压缩工具不一一说了，这些是针对前端使用的图片的
1.2K90发布于 2018-04-11 - 来自专栏我的专栏2
前端性能优化
前端性能优化是提升用户体验、提高页面加载速度和响应速度的关键步骤。以下是一些核心优化策略和具体实现方法：一、加载性能优化1. 优化网络请求减少 HTTP 请求： 合并小文件（如雪碧图、合并 CSS/JS）。使用内联关键 CSS/JS（避免阻塞渲染）。
21200编辑于 2025-06-23 - 来自专栏lpp的专栏
前端性能优化
4. 我们应该如何使用LLM？好好写prompt就行？还是不管三七二十一，有钱任性！买卡！训练！？
12600编辑于 2024-04-18 - 来自专栏Dawnzhang的开发者手册
前端性能优化
前言 本来想写一篇实用而又全面的性能优化文章，很多大佬已经写了非常好，我就不再造轮子了。我这篇文章就归纳整理一下吧，方便后续我或他人学习使用。 性能优化是把双刃剑，有好的一面也有坏的一面。 所以我们需要将多个页面的公共代码抽离成单独的文件，来优化以上问题 。 arguments.callee, 25) } else { callback(arry) } }, 25) 如果有兴趣了解更多，可以查看一下高性能JavaScript第 6 章和高效前端 ：Web高效编程与优化实践第 3 章。 参考资料： web 前端图片懒加载实现原理 (2). 响应式图片 响应式图片的优点是浏览器能够根据屏幕大小自动加载合适的图片。
1.8K20编辑于 2022-05-10 - 来自专栏javascript艺术
前端性能优化
前端性能优化 三大优化思维： 性能优化目标 用户体验 代价与权衡 八处优化落点： HTML层级优化 CSS层级优化 JavaScript层级优化 渲染层级优化 交互请求优化 数据结构优化 前端缓存优化 前端性能瓶颈 传统DOM操作对性能的影响 浏览器的渲染过程 重排、重绘 前端性能优化与重绘与回流有关系的原因是：频繁的触发重绘与回流，会导致UI频繁染，最终会导致js变慢，会导致页面性能变差 前端展示、后端处理的思维模式 前端主要负责展示，后端负责数据处理。Javascript是单线程的，而后端语言绝大多数都是多线程的。 采用轻量级数据交换格式 JSON 前后端联调对接那些事 前后端联调是前后端分离后的必然产物 前端和后端事先约定好固定的数据结构，前端通过Mock数据渲染，后端通过Postman等模拟前端请求。 MVVM框架 虚拟DOM Diff算法 移动端相关应用 骨架屏 PWA渐进式增强的Web应用 一个性能优良的Web前端产品，绝不是通过某一个或某几个优化方式就能达成的，它是一系列有意识的调整从量变到质变的一个过程
1.2K10发布于 2021-05-28 - 来自专栏李白偷偷偷猪
前端性能优化
页面级优化 css雪碧图 使用cdn加速器 压缩合并代码（使用webpack可打包合并） 使用dns域解析器 代码级优化 减少Dom操作 不使用css表达式，使用<link>，不使用@import 减小
60110编辑于 2022-11-14 - 来自专栏娜姐聊前端
前端性能优化
之前写过一篇文章前端网络高级篇（六）网站性能优化，里面提到过13个性能优化的点： 减少HTTP请求 使用CDN 利用HTTP缓存 Gzip压缩 将样式表放在顶部 将JS脚本放在底部 避免CSS表达式 使用外部 DOM编程优化 用JS操作DOM，是比较慢的。为什么呢？首先，补充一下浏览器相关的知识。下图为浏览器结构： ? 重排的开销要远大于重绘 所以，我们的优化点就是： 尽可能减少DOM操作 尽可能减少重排 看看下面的例子吧。 例子1： 在container元素里面添加10000个“hello”。 CSS优化 CSS选择器是从右向左解析的，所以，尽可能直接用class作为选择器，减少查询时间。
1.1K30发布于 2020-09-22 - 来自专栏我的专栏2
前端性能优化
一、加载性能优化 测试腾讯云开发者社区 减少 HTTP 请求 合并文件（CSS/JS 合并） 使用雪碧图（CSS Sprites） 内联小资源（如 Base64 图片或小字体文件） 代码分割与懒加载 第三方库按需引入（如 Lodash 的 lodash-es） 预加载与预获取 preload：提前加载关键资源（如字体、核心 CSS/JS） prefetch：预取未来可能需要的资源（如非首屏图片） 服务端优化 ：多路复用、头部压缩、Server Push 边缘计算：Vercel/Cloudflare Workers 实现就近处理 异步加载脚本 使用 async 或 defer 属性避免渲染阻塞 二、渲染性能优化 offsetHeight 后修改样式） GPU 加速 will-change: transform 或 translateZ(0) 触发独立渲染层 合理使用 CSS 动画代替 JS 动画 图片与媒体优化
25400编辑于 2025-11-21 - 来自专栏lpp的专栏
前端性能优化
4. 我们应该如何使用LLM？好好写prompt就行？还是不管三七二十一，有钱任性！买卡！训练！？
12700编辑于 2024-02-19 - 来自专栏CSDNToQQCode
前端性能优化
1、什么是前端性能优化？ 从用户访问资源到资源完整展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。 2、为什么要做前端性能优化？ 在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利于网站访问速度的因素会产生，从而严重影响网站的性能，导致网站访问速度变慢，用户体验低下，最终导致用户流失 3、如何进行前端性能优化 性能黄金法则：只有10%-20%的最终用户响应时间花在接收请求的HTML文档上，剩下的80%-90%时间花在HTML文档所引用的所有组件(图片，script，css，flash yahoo前端性能团队总结的35条黄金定律请见：http://blog.csdn.net/zhouziyu2011/article/details/60468287 1) 内容层面 ① DNS解析优化 b. cookie优化 去除没有必要的cookie，如果网页不需要cookie就完全禁掉。 将cookie的大小减到最小。
91351编辑于 2022-11-29 - 来自专栏互联网杂技
前端各种优化
解决办法： 合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。 2. 如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。 我个人经常使用的方式是使用 YUI Compressor，它的特点是：移除注释；移除额外的空格；细微优化；标识符替换。 压缩图片和使用图片Sprite技术 基本原理: 注：其实压缩图片和图片精灵是两个方面的技术，可是既然都是关于图片的优化还是放到一块吧。 关于图片精灵(Sprite)技术就和我们工作直接相关，不管是在CSS中的图片还是在HTML结构中的图片都会产生HTTP请求，前端优化的第一条就是减少请求数，最直接有效的方法是使用图片精灵（CSS Sprite
1.2K80发布于 2018-04-02 - 来自专栏grain先森
前端性能优化
本文主要考虑客户端性能、服务器端和网络性能，内容框架来自Yahoo Developer Network，包含 7 个类别共 35 条前端性能优化最佳实践，在此基础上补充了一些相关或者更符合主流技术的内容 主流技术的内容 前端性能的一个重要指标是页面加载时间，不仅事关用户体验，也是搜索引擎排名考虑的一个因素。 以上数据更说明「加载时间就是金钱」，前端优化主要围绕提高加载速度进行。 一、页面内容 1. 减少HTTP请求数 Web 前端 80% 的响应时间花在图片、样式、脚本等资源下载上。 得益于Node.js的流行，开源社区涌现出许多高效、易用的前端优化工具，JavaScript 和CSS压缩类的，不敢说多如牛毛，多入鸡毛倒是一点不夸张，如[UglifyJS 2] (github.com 优化图片 尝试把GIF格式转换成PNG格式，看看是否节省空间。在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）。
2.4K41发布于 2019-03-28 - 来自专栏lpp的专栏
前端性能优化
一、加载性能优化adsgsdfgsdfgsdf // 生成最终签名 const sign = _this. 语法按需加载模块第三方库按需引入（如 Lodash 的 lodash-es）预加载与预获取preload：提前加载关键资源（如字体、核心 CSS/JS）prefetch：预取未来可能需要的资源（如非首屏图片）服务端优化 头部压缩、Server Push边缘计算：Vercel/Cloudflare Workers 实现就近处理异步加载脚本使用 async 或 defer 属性避免渲染阻塞 二、渲染性能优化 offsetHeight 后修改样式）GPU 加速will-change: transform 或 translateZ(0) 触发独立渲染层合理使用 CSS 动画代替 JS 动画图片与媒体优化懒加载
28410编辑于 2025-08-08 - 来自专栏企鹅号快讯
前端性能优化——桌面浏览器前端优化策略
作者：ouven https://my.oschina.net/zhangstephen/blog/1601382 摘要: 前端性能优化是一个很宽泛的概念，本书前面的部分也多多少少提到一些前端优化方法， 配合各种方式、手段、辅助系统，前端优化的最终目的都是提升用户体验，改善页面性能，我们常常竭尽全力进行前端页面优化，但却忽略了这样做的效果和意义。 先不急于探究前端优化具体可以怎样去做，先看看什么是前端性能，应该怎样去了解和评价前端页面的性能。 目前来看，前端优化的策略很多，如YSlow（YSlow是Yahoo发布的一款Firefox插件，可以对网站的页面性能进行分析，提出对该页面性能优化的建议）原则等，总结起来主要包括网络加载类、页面渲染类、 请分享给更多人 关注「前端大全」，提升前端技能
1.9K60发布于 2018-02-07 - 来自专栏程序员IT圈
前端性能优化 —— 前端性能分析
作者：ouven https://my.oschina.net/zhangstephen/blog/1601380 前端性能优化是一个很宽泛的概念，本书前面的部分也多多少少提到一些前端优化方法，这也是我们一直在关注的一件重要事情 配合各种方式、手段、辅助系统，前端优化的最终目的都是提升用户体验，改善页面性能，我们常常竭尽全力进行前端页面优化，但却忽略了这样做的效果和意义。 先不急于探究前端优化具体可以怎样去做，先看看什么是前端性能，应该怎样去了解和评价前端页面的性能。 可控等待延时可以理解为能通过技术手段和优化来改进缩短的部分，例如减小图片大小让请求加载更快、减少HTTP请求数等。 所以要知道的是，前端中的所有优化都是针对可控等待延时这部分来进行的，下面来了解一下如何获取和评价一个页面的具体性能。
2.7K120发布于 2018-03-05 - 来自专栏网络日志
前端性能优化系列 | 加载优化
如果能提前完后才能上述操作，那么就能带来更好的用户体验，与此同时，由于建立连接的大部分时间是消耗在等待的时间上，这样也能有效的优化宽度的使用情况。 图片懒加载 （1）什么是懒加载 懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。 懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。 首屏加载优化 随着Vue、React等框架的盛行，SPA单页面应用越来越多，多数的SPA应用的结构都很类似。 视频加载优化 （1）延迟加载视频 图片和视频这类静态资源资源占比都比较大。与图片一样，视频同样可以延迟加载，来达到优化性能的目的。
76610编辑于 2024-08-01
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号