- 综合排序
- 最热优先
- 最新优先
- 来自专栏玩转大前端
前端优化
一、页面/文件级优化 1、减少HTTP请求数 解决方法： 1）设置缓存 2）css、js、img等静态资源合并压缩（vue的项目有压缩css和js） 3）懒加载图片（不是真正意义的减少请求数 6、避免使用CSS表达式：举个css表达式的例子 font-color: expression( (new Date()).getHours()%3 ? ，降低维护成本）12、利用css继承减少代码：有一部分CSS代码是可以继承的，如果父代元素已经设置了该样式，后代元素就不需要去设置该样式，例如文字的样式：font-size、color等 三、业务功能优化 1、返回状态保持功能 2、针对移动端各种屏幕尺寸的适配方案 3、webpack优化 4、将请求接口代码和加载动画及错误弹出提示封装成公共函数 5、统一前端常用组件规范。 前端规范：不同样式的组件图片使用一个大文件夹统一存放，里面分各种子类，每次更换只需更改文件夹名称即可实现更改一整套组件的样式的效果；使用vue.js框架的，这些组件都统一写成可复用组件（无需每次重复编写代码
79220编辑于 2022-08-15 - 来自专栏Fantasy的技术小站
前端优化
前端优化是一个至关重要的过程，它不仅影响到网站的用户体验，还可能影响到网站的搜索引擎排名。 下面是一些常见的前端优化策略，以帮助提高页面的加载速度： 优化图片 压缩图片：使用工具或插件压缩图片，减小文件大小。 使用正确的格式：例如，使用 WebP 格式代替 JPEG 或 PNG。 优化 CSS：将关键路径的 CSS 内联在 head 中。 浏览器缓存 通过设置 HTTP 头信息，使浏览器缓存静态资源，减少重复加载。 优化字体 选择高效的字体格式：例如，WOFF2。 使用 HTTP/2 或 HTTP/3 利用这些协议的多路复用特性，允许单一连接上并行请求多个资源。 在进行优化时，建议使用性能分析工具来监控和测试优化效果，确保每一步的改进都是有效的。
43720编辑于 2023-10-18 - 来自专栏只喝牛奶的杀手
前端优化
的访问次数 Choose <link> over@import @import使用< link >而非@import Avoid Filters 避免过滤器的使用 Optimize Images 优化图片 Optimize CSS Sprites 优化CSS Sprites
65120发布于 2019-08-26 - 来自专栏CSDNToQQCode
前端性能优化-图像优化
3) png：使用无损压缩，将图片出现的颜色进行索引，保留在调色板上，在显示图像时会调用调色板的颜色去填充相应位置。 2、图像优化 1) jpg or png 对于颜色较多的图像，使用jpg更好，因为png可以选择使用调色板颜色更多的png24，得到的图片比jpg大。
1.1K10编辑于 2022-11-29 - 来自专栏我的专栏2
前端性能优化
前端性能优化是提升用户体验、提高页面加载速度和响应速度的关键步骤。以下是一些核心优化策略和具体实现方法：一、加载性能优化1. 优化网络请求减少 HTTP 请求： 合并小文件（如雪碧图、合并 CSS/JS）。使用内联关键 CSS/JS（避免阻塞渲染）。
23400编辑于 2025-06-23 - 来自专栏逸鹏说道
漫谈前端优化
近几年，移动端站点和app、手游井喷式的发展，大大出乎了当初从业者的预料，2010年前后中国还处于3G网时代，各种3G宣传铺天盖地，如果你稍稍回忆一下，那个时候中国几乎没有像样的移动站点；大约在12年左右 iphone4s诞生的时代，在中国高级智能设备开始被普遍使用，4G的覆盖范围也越来越大，各种app、移动站点、Html5活动页面也逐渐火爆起来；随着行业的发展，对从业者及技术支持的要求也越来越高；对于前端 ，前端资源和页面优化是常见要求，对比移动端，移动端对前端优化的要求更高，可以说要达到极致，虽然现在基本都有使用WIFI了，但一些地方还是要靠4G甚至3G、2G，极致的优化能争取更多的pv和更多的可能，如果你去观察一些大厂的项目和一些比较有名的站点 ，也会发现他们的优化是做的非常专业非常好的；而我今天跟大家聊的就是关于前端优化的内容； 话不多说，来看看有哪些选项； 1.引用资源部分优化： ·合并引用的css、javascript，并使用压缩模式 Dom渲染优化： ·使用简洁的html标签结构，避免复杂嵌套； ·使用css3书写动画，减少jsdom操作； ·适当使用svg、canvas； ·避免最下级元素书写页面class 4.图片优化
1.2K90发布于 2018-04-11 - 来自专栏lpp的专栏
前端性能优化
3. LLM为什么起作用？为什么大模型如此牛逼？是科技还是玄学？4. 我们应该如何使用LLM？好好写prompt就行？还是不管三七二十一，有钱任性！买卡！训练！？5. LLM的未来方向是什么? 3. LLM为什么起作用？为什么大模型如此牛逼？是科技还是玄学？4. 我们应该如何使用LLM？好好写prompt就行？还是不管三七二十一，有钱任性！买卡！训练！？5. LLM的未来方向是什么? 3. LLM为什么起作用？为什么大模型如此牛逼？是科技还是玄学？4. 我们应该如何使用LLM？好好写prompt就行？还是不管三七二十一，有钱任性！买卡！训练！？5. LLM的未来方向是什么?
13200编辑于 2024-04-18 - 来自专栏javascript艺术
前端性能优化
前端性能优化 三大优化思维： 性能优化目标 用户体验 代价与权衡 八处优化落点： HTML层级优化 CSS层级优化 JavaScript层级优化 渲染层级优化 交互请求优化 数据结构优化 前端缓存优化 前端性能瓶颈 传统DOM操作对性能的影响 浏览器的渲染过程 重排、重绘 前端性能优化与重绘与回流有关系的原因是：频繁的触发重绘与回流，会导致UI频繁染，最终会导致js变慢，会导致页面性能变差 3.首次加载耗时较多，需加载大量的资源 4.导航不可用，由于单页Web应用在一个页面中显示所有 的内容，所以不能使用浏览器的前进后退功能 5.对搜索引擎（SEO）不友好 假如页面很多，是否需要将业务分成几个模块 3、preload用来声明当前页面的关键资源，强制浏览器尽快加载；而prefetch用来声明将来可能用到的资源，在浏览器空闲时进行加载。 充分利用硬件GPU加速 CSS3变换属性会触发GPU加速：translate、rotate、scale、opacity、filter 新技术对性能的提升 即时通信 Socket技术 订阅-发布模式的
1.2K10发布于 2021-05-28 - 来自专栏Dawnzhang的开发者手册
前端性能优化
前言 本来想写一篇实用而又全面的性能优化文章，很多大佬已经写了非常好，我就不再造轮子了。我这篇文章就归纳整理一下吧，方便后续我或他人学习使用。 性能优化是把双刃剑，有好的一面也有坏的一面。 arguments.callee, 25) } else { callback(arry) } }, 25) 如果有兴趣了解更多，可以查看一下高性能JavaScript第 6 章和高效前端 ：Web高效编程与优化实践第 3 章。 参考资料： web 前端图片懒加载实现原理 (2). 响应式图片 响应式图片的优点是浏览器能够根据屏幕大小自动加载合适的图片。 尽可能利用 CSS3 效果代替图片 有很多图片使用 CSS 效果（渐变、阴影等）就能画出来，这种情况选择 CSS3 效果更好。因为代码大小通常是图片大小的几分之一甚至几十分之一。 (6).
1.8K20编辑于 2022-05-10 - 来自专栏李白偷偷偷猪
前端性能优化
页面级优化 css雪碧图 使用cdn加速器 压缩合并代码（使用webpack可打包合并） 使用dns域解析器 代码级优化 减少Dom操作 不使用css表达式，使用<link>，不使用@import 减小
60810编辑于 2022-11-14 - 来自专栏我的专栏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 动画 图片与媒体优化
27600编辑于 2025-11-21 - 来自专栏娜姐聊前端
前端性能优化
之前写过一篇文章前端网络高级篇（六）网站性能优化，里面提到过13个性能优化的点： 减少HTTP请求 使用CDN 利用HTTP缓存 Gzip压缩 将样式表放在顶部 将JS脚本放在底部 避免CSS表达式 使用外部 DOM编程优化 用JS操作DOM，是比较慢的。为什么呢？首先，补充一下浏览器相关的知识。下图为浏览器结构： ? 重排的开销要远大于重绘 所以，我们的优化点就是： 尽可能减少DOM操作 尽可能减少重排 看看下面的例子吧。 例子1： 在container元素里面添加10000个“hello”。 offsetHeight、 scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight 3. CSS优化 CSS选择器是从右向左解析的，所以，尽可能直接用class作为选择器，减少查询时间。
1.2K30发布于 2020-09-22 - 来自专栏lpp的专栏
前端性能优化
3. LLM为什么起作用？为什么大模型如此牛逼？是科技还是玄学？4. 我们应该如何使用LLM？好好写prompt就行？还是不管三七二十一，有钱任性！买卡！训练！？5. LLM的未来方向是什么? 3. LLM为什么起作用？为什么大模型如此牛逼？是科技还是玄学？4. 我们应该如何使用LLM？好好写prompt就行？还是不管三七二十一，有钱任性！买卡！训练！？5. LLM的未来方向是什么?
13100编辑于 2024-02-19 - 来自专栏CSDNToQQCode
前端性能优化
1、什么是前端性能优化？ 从用户访问资源到资源完整展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。 2、为什么要做前端性能优化？ 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的大小减到最小。 3) 渲染阶段 ① js放底部，CSS放顶部 将js脚本置底，可以让网页渲染所需要的内容尽快加载显示给用户。
91651编辑于 2022-11-29 - 来自专栏互联网杂技
前端各种优化
解决办法： 合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。 2. 3. 请减少对DOM的操作 基本原理： 对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。 天生就慢。 我个人经常使用的方式是使用 YUI Compressor，它的特点是：移除注释；移除额外的空格；细微优化；标识符替换。 现在由于工作的细分，专业的前端工程师已经少有机会去切图了，可是关于图片压缩还是得略微了解，一般图片压缩的方式有： 1.缩小图片分辨率； 2.改变图片格式； 3.降低图片保存质量。 关于图片精灵(Sprite)技术就和我们工作直接相关，不管是在CSS中的图片还是在HTML结构中的图片都会产生HTTP请求，前端优化的第一条就是减少请求数，最直接有效的方法是使用图片精灵（CSS Sprite
1.2K80发布于 2018-04-02 - 来自专栏grain先森
前端性能优化
本文主要考虑客户端性能、服务器端和网络性能，内容框架来自Yahoo Developer Network，包含 7 个类别共 35 条前端性能优化最佳实践，在此基础上补充了一些相关或者更符合主流技术的内容 以上数据更说明「加载时间就是金钱」，前端优化主要围绕提高加载速度进行。 一、页面内容 1. 减少HTTP请求数 Web 前端 80% 的响应时间花在图片、样式、脚本等资源下载上。 3. 避免重定向 HTTP重定向通过301/302状态码实现。 3. 启用Gzip 前端工程师可以想办法明显地缩短通过网络传输HTTP请求和响应的时间。毫无疑问，终端用户的带宽速度，网络服务商，对等交换点的距离等等，都是开发团队所无法控制的。 得益于Node.js的流行，开源社区涌现出许多高效、易用的前端优化工具，JavaScript 和CSS压缩类的，不敢说多如牛毛，多入鸡毛倒是一点不夸张，如[UglifyJS 2] (github.com
2.5K41发布于 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 动画图片与媒体优化懒加载
30410编辑于 2025-08-08 - 来自专栏企鹅号快讯
前端性能优化——桌面浏览器前端优化策略
作者：ouven https://my.oschina.net/zhangstephen/blog/1601382 摘要: 前端性能优化是一个很宽泛的概念，本书前面的部分也多多少少提到一些前端优化方法， 配合各种方式、手段、辅助系统，前端优化的最终目的都是提升用户体验，改善页面性能，我们常常竭尽全力进行前端页面优化，但却忽略了这样做的效果和意义。 先不急于探究前端优化具体可以怎样去做，先看看什么是前端性能，应该怎样去了解和评价前端页面的性能。 目前来看，前端优化的策略很多，如YSlow（YSlow是Yahoo发布的一款Firefox插件，可以对网站的页面性能进行分析，提出对该页面性能优化的建议）原则等，总结起来主要包括网络加载类、页面渲染类、 3．不要在HTML中直接缩放图片 在HTML中直接缩放图片会导致页面内容的重排重绘，此时可能会使页面中的其他操作产生卡顿，因此要尽量减少在页面中直接进行图片缩放。
1.9K60发布于 2018-02-07 - 来自专栏程序员IT圈
前端性能优化 —— 前端性能分析
作者：ouven https://my.oschina.net/zhangstephen/blog/1601380 前端性能优化是一个很宽泛的概念，本书前面的部分也多多少少提到一些前端优化方法，这也是我们一直在关注的一件重要事情 配合各种方式、手段、辅助系统，前端优化的最终目的都是提升用户体验，改善页面性能，我们常常竭尽全力进行前端页面优化，但却忽略了这样做的效果和意义。 先不急于探究前端优化具体可以怎样去做，先看看什么是前端性能，应该怎样去了解和评价前端页面的性能。 所以要知道的是，前端中的所有优化都是针对可控等待延时这部分来进行的，下面来了解一下如何获取和评价一个页面的具体性能。 参考资料：https://www.w3.org/TR/resource-timing/。
2.8K120发布于 2018-03-05 - 来自专栏网络日志
前端性能优化系列 | 加载优化
（3）预提取 前面所说的预解析和预连接都是试图更快的获取关键的资源，而接下来要说的预提取则是利用机会让某些非关键资源提前获取。 懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。 （3）Intersection Observer实现 Intersection Observer是HTML5新增的API，可以用来实现图片懒加载。 3. 首屏加载优化 随着Vue、React等框架的盛行，SPA单页面应用越来越多，多数的SPA应用的结构都很类似。 视频加载优化 （1）延迟加载视频 图片和视频这类静态资源资源占比都比较大。与图片一样，视频同样可以延迟加载，来达到优化性能的目的。
86210编辑于 2024-08-01
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号