- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端技术分享|前沿资讯|读书分享
前端技巧——性能优化篇
前端发展至此，前端性能随之变成了一个很有意思的话题。从入门级别的初级工程师，到高级别的专家，都离不开性能问题。那么前端性能该如何理解呢？ 总论 前端时间学习前淘宝前端总负责人winter的课程，受益颇深。前面三个性能比较的例子，在社区或者论坛中大家对此的讨论从未断过，也乐此不疲。 因此，性能优化不能局限于局部代码。用大佬winter的话来讲，就是一切没有profiling的性能都是耍流氓。凡是真正有价值的性能优化，必定是从端到端的业务场景建立体系来考虑的。 因此，性能优化一定是团队事件，而不是有着局限性的个人模块。 4. 执行 有了方案就要贯彻执行。一个良好的团队，一定有高强度执行力。当然，执行一样不简单。方案靠技术，那执行则靠工程了。 线上监控要做好，两个数据不可少： 数据采集 数据展现 总而言之 总而言之，性能的优化，应该基于公司实际业务和实际的用户需求体验而做的一种工程实施，而不是单纯的技术游戏。
85840发布于 2019-08-09 - 来自专栏程序员IT圈
前端性能优化 —— 前端性能分析
作者：ouven https://my.oschina.net/zhangstephen/blog/1601380 前端性能优化是一个很宽泛的概念，本书前面的部分也多多少少提到一些前端优化方法，这也是我们一直在关注的一件重要事情 配合各种方式、手段、辅助系统，前端优化的最终目的都是提升用户体验，改善页面性能，我们常常竭尽全力进行前端页面优化，但却忽略了这样做的效果和意义。 先不急于探究前端优化具体可以怎样去做，先看看什么是前端性能，应该怎样去了解和评价前端页面的性能。 所以要知道的是，前端中的所有优化都是针对可控等待延时这部分来进行的，下面来了解一下如何获取和评价一个页面的具体性能。 前端性能测试 获取和衡量一个页面的性能，主要可以通过以下几个方面：Performance Timing API、Profile工具、页面埋点计时、资源加载时序图分析。
2.8K120发布于 2018-03-05 - 来自专栏lpp的专栏
前端性能优化
4. 我们应该如何使用LLM？好好写prompt就行？还是不管三七二十一，有钱任性！买卡！训练！？
12900编辑于 2024-04-18 - 来自专栏javascript艺术
前端性能优化
前端性能优化 三大优化思维： 性能优化目标 用户体验 代价与权衡 八处优化落点： HTML层级优化 CSS层级优化 JavaScript层级优化 渲染层级优化 交互请求优化 数据结构优化 前端缓存优化 前端性能瓶颈 传统DOM操作对性能的影响 浏览器的渲染过程 重排、重绘 前端性能优化与重绘与回流有关系的原因是：频繁的触发重绘与回流，会导致UI频繁染，最终会导致js变慢，会导致页面性能变差 大中小图片方案及图片压缩 屏蔽开发时的调试、日志代码 其他层级优化 从输入一个URL到页面出现的过程（性能优化即是优化这些过程） DNS解析，把域名转成IP的过程 浏览器向目标主机发出请求 HTTP MVVM框架 虚拟DOM Diff算法 移动端相关应用 骨架屏 PWA渐进式增强的Web应用 一个性能优良的Web前端产品，绝不是通过某一个或某几个优化方式就能达成的，它是一系列有意识的调整从量变到质变的一个过程 其中非常关键的一点是编码习惯与思维方式，通过长期的业务逻辑的编写、代码的累积，性能可以变得更好，也可能会变得更糟，这种质变通过一任何优化方式基本都是无解的。
1.2K10发布于 2021-05-28 - 来自专栏Dawnzhang的开发者手册
前端性能优化
前言 本来想写一篇实用而又全面的性能优化文章，很多大佬已经写了非常好，我就不再造轮子了。我这篇文章就归纳整理一下吧，方便后续我或他人学习使用。 性能优化是把双刃剑，有好的一面也有坏的一面。 并且某些性能优化规则并不适用所有场景，需要谨慎使用 检查的方法 1、检查加载性能 一个网站加载性能如何主要看白屏时间和首屏时间。 白屏时间：指从输入网址，到页面开始显示内容的时间。 最后要说一句，据我查找的资料所得，CSS 选择器没有优化的必要，因为最慢和慢快的选择器性能差别非常小。 JavaScript第 6 章和高效前端：Web高效编程与优化实践第 3 章。 参考资料： web 前端图片懒加载实现原理 (2). 响应式图片 响应式图片的优点是浏览器能够根据屏幕大小自动加载合适的图片。
1.8K20编辑于 2022-05-10 - 来自专栏我的专栏2
前端性能优化
前端性能优化是提升用户体验、提高页面加载速度和响应速度的关键步骤。以下是一些核心优化策略和具体实现方法：一、加载性能优化1. 优化网络请求减少 HTTP 请求： 合并小文件（如雪碧图、合并 CSS/JS）。使用内联关键 CSS/JS（避免阻塞渲染）。
22900编辑于 2025-06-23 - 来自专栏娜姐聊前端
前端性能优化
之前写过一篇文章前端网络高级篇（六）网站性能优化，里面提到过13个性能优化的点： 减少HTTP请求 使用CDN 利用HTTP缓存 Gzip压缩 将样式表放在顶部 将JS脚本放在底部 避免CSS表达式 使用外部 DOM编程优化 用JS操作DOM，是比较慢的。为什么呢？首先，补充一下浏览器相关的知识。下图为浏览器结构： ? 重排的开销要远大于重绘 所以，我们的优化点就是： 尽可能减少DOM操作 尽可能减少重排 看看下面的例子吧。 例子1： 在container元素里面添加10000个“hello”。 CSS优化 CSS选择器是从右向左解析的，所以，尽可能直接用class作为选择器，减少查询时间。
1.1K30发布于 2020-09-22 - 来自专栏李白偷偷偷猪
前端性能优化
页面级优化 css雪碧图 使用cdn加速器 压缩合并代码（使用webpack可打包合并） 使用dns域解析器 代码级优化 减少Dom操作 不使用css表达式，使用<link>，不使用@import 减小
60510编辑于 2022-11-14 - 来自专栏我的专栏2
前端性能优化
一、加载性能优化 测试腾讯云开发者社区 减少 HTTP 请求 合并文件（CSS/JS 合并） 使用雪碧图（CSS Sprites） 内联小资源（如 Base64 图片或小字体文件） 代码分割与懒加载 第三方库按需引入（如 Lodash 的 lodash-es） 预加载与预获取 preload：提前加载关键资源（如字体、核心 CSS/JS） prefetch：预取未来可能需要的资源（如非首屏图片） 服务端优化 /2：多路复用、头部压缩、Server Push 边缘计算：Vercel/Cloudflare Workers 实现就近处理 异步加载脚本 使用 async 或 defer 属性避免渲染阻塞 二、渲染性能优化 offsetHeight 后修改样式） GPU 加速 will-change: transform 或 translateZ(0) 触发独立渲染层 合理使用 CSS 动画代替 JS 动画 图片与媒体优化
26600编辑于 2025-11-21 - 来自专栏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 动画图片与媒体优化懒加载
29610编辑于 2025-08-08 - 来自专栏lpp的专栏
前端性能优化
4. 我们应该如何使用LLM？好好写prompt就行？还是不管三七二十一，有钱任性！买卡！训练！？
12900编辑于 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的大小减到最小。
91551编辑于 2022-11-29 - 来自专栏grain先森
前端性能优化
本文主要考虑客户端性能、服务器端和网络性能，内容框架来自Yahoo Developer Network，包含 7 个类别共 35 条前端性能优化最佳实践，在此基础上补充了一些相关或者更符合主流技术的内容 主流技术的内容 前端性能的一个重要指标是页面加载时间，不仅事关用户体验，也是搜索引擎排名考虑的一个因素。 以上数据更说明「加载时间就是金钱」，前端优化主要围绕提高加载速度进行。 一、页面内容 1. 减少HTTP请求数 Web 前端 80% 的响应时间花在图片、样式、脚本等资源下载上。 得益于Node.js的流行，开源社区涌现出许多高效、易用的前端优化工具，JavaScript 和CSS压缩类的，不敢说多如牛毛，多入鸡毛倒是一点不夸张，如[UglifyJS 2] (github.com 条目虽然很多，但经过分类，可以发现，性能优化主要切入点可以从以下几个方面去考虑： 资源本身大小的压缩优化（想办法减少资源的体积） 网络请求的全过程（从url地址栏输入发送请求开始到返回响应包的每个环节）
2.4K41发布于 2019-03-28 - 来自专栏IMWeb前端团队
前端优化的技巧
其实抛去空间主机的装备要素不谈，咱们站长或许搜索引擎优化人员也能够从页面制造方面着手，然后从现有的资本上进步网站的拜访速度。 假如你还不知道如何才干优化网站来进步网站的拜访速度，那就看一下马海祥博客为你总结出来的六个小窍门吧，期望对你能有所协助! 3、精简和优化你的 js 和 CSS： 尽管有了缓存和gzip保驾护航，可是关于 js 和 css 的优化却也是有必要的。 诸如此类的优化东西有 YUI Compressor 和 Closure Compiler 。这两个东西都是根据 java 的，运用应当装置jdk而且设置 JAVA_HOME 。 6、优化你网站图像： 很多运用的图像和图标尽管能够给网站带来美轮美奂的作用，图文混编更是一种十分艳丽的博文展示方法。
1.3K20发布于 2019-12-03 - 来自专栏IMWeb前端团队
前端优化的技巧
其实抛去空间主机的装备要素不谈，咱们站长或许搜索引擎优化人员也能够从页面制造方面着手，然后从现有的资本上进步网站的拜访速度。 假如你还不知道如何才干优化网站来进步网站的拜访速度，那就看一下马海祥博客为你总结出来的六个小窍门吧，期望对你能有所协助! 3、精简和优化你的 js 和 CSS： 尽管有了缓存和gzip保驾护航，可是关于 js 和 css 的优化却也是有必要的。 6、优化你网站图像： 很多运用的图像和图标尽管能够给网站带来美轮美奂的作用，图文混编更是一种十分艳丽的博文展示方法。 为了削减图像体积到达最快的下载速度，每一张图像上载前应当优化一下体积。
1.3K00发布于 2017-12-28 - 来自专栏云前端
浅谈前端优化技巧
2.合并压缩静态资源 关于css、js的优化的话，一般情况下建议css和js采用外联式。 7.单页面应用性能与体验 无刷新修改链接地址和浏览历史，在我们给用户展示一个页面时候，用户在页面进行其他的操作以后，页面内容已经改变，当然访问的地址也应该改变，这个需要我们去给他改变，不然用户要是分享该页面 Download – 下载响应内容 页面渲染Timeline http://www.ghugo.com/chrome-timeline/ 这俩是可以看下我们请求的时间，js、css等各用了多久，具体分析具体优化
71711发布于 2020-06-15 - 来自专栏CSDNToQQCode
前端性能优化-图像优化
2、图像优化 1) jpg or png 对于颜色较多的图像，使用jpg更好，因为png可以选择使用调色板颜色更多的png24，得到的图片比jpg大。
1.1K10编辑于 2022-11-29 PHP 性能优化技巧
本篇博客将详细介绍 PHP 性能优化 的一系列技巧，包括 代码优化、缓存机制、数据库优化、文件操作优化 等方面，帮助你全面提升 PHP 应用的性能。 本文内容将以通俗易懂的语言讲解各种优化原理和实战技巧，让你能够轻松理解并应用于实际开发中。 一、PHP 性能优化的意义在 Web 开发中，性能优化的主要目标是 提高响应速度、减少服务器负载、提高系统吞吐量。 六、总结：全方位的 PHP 性能优化通过本文，我们详细介绍了 PHP 性能优化的多个方面，包括 代码优化、缓存机制、数据库优化、文件操作优化 等。 通过这些优化技巧，你可以显著提升 PHP 应用的性能，提供更快的响应速度、更低的服务器负载以及更高的系统吞吐量。希望这篇博客能够帮助你提升 PHP 应用的性能，打造更加高效的 Web 应用！
88600编辑于 2025-02-05- 来自专栏Linyb极客之路
MySQL 性能优化技巧
原本负责优化的同事有事请假回家，因此优化查询数据的问题落在笔者手中。笔者在查阅网上 SQL 优化的资料后成功解决了问题，在此从==全局角度==记录和总结 MySQL 查询优化相关技巧。 其中，返回的 State 的值是我们判断性能好坏的关键，其值出现如下内容，则该行记录的 SQL 语句需要优化： Converting HEAP to MyISAM # 查询结果太大时，把结果放到磁盘，严重 一般使用between、>、<情况 index：只遍历索引树 ALL：全表扫描，性能最差 注：前5种情况都是理想情况的索引使用情况。 如果该值为 NULL，说明没有使用索引，可以建立索引提高性能 7) key：显示 MySQL 实际使用的索引。 八、硬件选购和参数优化 硬件的性能直接决定 MySQL 数据库的性能。硬件的性能瓶颈，直接决定 MySQL 数据库的运行数据和效率。
94750发布于 2018-12-29 - 来自专栏芋道源码1024
接口性能优化技巧
作为一个优秀的后端程序员，这个数据肯定是不能忍的，我们马上就进入了漫长的接口优化之路。本文就是对我们漫长工作历程的一个总结。 这个跟 mysql 的 sql 优化有关，mysql 会在 sql 优化的时候自己选择合适的索引，很可能是 mysql 自己的选择算法算出来使用这个索引不会提升性能，所以就放弃了。 一般来说，不建议使用子查询，可以把子查询改成 join 来优化。同时，join 关联的表也不宜过多，一般来说 2-3 张表还是合适的。 比如说，我们要初始化一个列表，预置 12 个月的数据给前端： List<Model> list = new ArrayList<>(); for(int i = 0 ; i < 12 ; i ++) { 当我们实在是没有办法排查出问题，或者实在是没有优化空间的时候，可以尝试这种万金油的方式。
69930编辑于 2022-06-07
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号