- 综合排序
- 最热优先
- 最新优先
- 来自专栏玩转大前端
前端优化
一、页面/文件级优化 1、减少HTTP请求数 解决方法： 1）设置缓存 2）css、js、img等静态资源合并压缩（vue的项目有压缩css和js） 3）懒加载图片（不是真正意义的减少请求数 2）使用display:none隐藏元素 3）尽量不要计算元素 4）能用重绘解决的就不要用回流解决 4、减少作用域查找 解决方法： 1）如for循环里面的：（var i = ，降低维护成本）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。 优化渲染路径 避免阻塞渲染的资源：例如，将脚本和样式表移到 HTML 文档的底部。 利用请求优先级：确保关键资源优先加载。 在进行优化时，建议使用性能分析工具来监控和测试优化效果，确保每一步的改进都是有效的。
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
前端性能优化-图像优化
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，并使用压缩模式 ： ·使用简洁的html标签结构，避免复杂嵌套； ·使用css3书写动画，减少jsdom操作； ·适当使用svg、canvas； ·避免最下级元素书写页面class 4.图片优化： 插一句，
1.2K90发布于 2018-04-11 - 来自专栏lpp的专栏
前端性能优化
4. 我们应该如何使用LLM？好好写prompt就行？还是不管三七二十一，有钱任性！买卡！训练！？5. LLM的未来方向是什么?1 什么是LLM？铺天盖地的LLM新资讯，LLM到底是什么？3. 4. 我们应该如何使用LLM？好好写prompt就行？还是不管三七二十一，有钱任性！买卡！训练！？5. LLM的未来方向是什么?1 什么是LLM？铺天盖地的LLM新资讯，LLM到底是什么？ 4. 我们应该如何使用LLM？好好写prompt就行？还是不管三七二十一，有钱任性！买卡！训练！？5. LLM的未来方向是什么?1 什么是LLM？铺天盖地的LLM新资讯，LLM到底是什么？
13200编辑于 2024-04-18 - 来自专栏Dawnzhang的开发者手册
前端性能优化
所以这时候要做的事情，就是使用上述 23 条建议尽情地去优化你的网站，加油！ 4、构建结果输出分析 Webpack 输出的代码可读性非常差而且文件非常大，让我们非常头疼。 这样一算：客户端渲染的网站需要加载 4 个文件和 HTML 文件才能完成首页渲染，总计大小为 4M（忽略 HTML 文件大小）。 [一步一步的了解webpack4的splitChunk插件]( 其他优化 1、 图片优化 (1)图片资源懒加载 对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载 参考资料： web 前端图片懒加载实现原理 (2). 响应式图片 响应式图片的优点是浏览器能够根据屏幕大小自动加载合适的图片。 所以，我们可以用两张图片来实行优化。一开始，只加载缩略图，当用户悬停在图片上时，才加载大图。还有一种办法，即对大图进行延迟加载，在所有元素都加载完成后手动更改大图的 src 进行下载。 (4).
1.8K20编辑于 2022-05-10 - 来自专栏javascript艺术
前端性能优化
前端性能优化 三大优化思维： 性能优化目标 用户体验 代价与权衡 八处优化落点： HTML层级优化 CSS层级优化 JavaScript层级优化 渲染层级优化 交互请求优化 数据结构优化 前端缓存优化 前端性能瓶颈 传统DOM操作对性能的影响 浏览器的渲染过程 重排、重绘 前端性能优化与重绘与回流有关系的原因是：频繁的触发重绘与回流，会导致UI频繁染，最终会导致js变慢，会导致页面性能变差 3.首次加载耗时较多，需加载大量的资源 4.导航不可用，由于单页Web应用在一个页面中显示所有 的内容，所以不能使用浏览器的前进后退功能 5.对搜索引擎（SEO）不友好 假如页面很多，是否需要将业务分成几个模块 采用轻量级数据交换格式 JSON 前后端联调对接那些事 前后端联调是前后端分离后的必然产物 前端和后端事先约定好固定的数据结构，前端通过Mock数据渲染，后端通过Postman等模拟前端请求。 MVVM框架 虚拟DOM Diff算法 移动端相关应用 骨架屏 PWA渐进式增强的Web应用 一个性能优良的Web前端产品，绝不是通过某一个或某几个优化方式就能达成的，它是一系列有意识的调整从量变到质变的一个过程
1.2K10发布于 2021-05-28 - 来自专栏李白偷偷偷猪
前端性能优化
页面级优化 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”。 4. CSS优化 CSS选择器是从右向左解析的，所以，尽可能直接用class作为选择器，减少查询时间。
1.2K30发布于 2020-09-22 - 来自专栏lpp的专栏
前端性能优化
4. 我们应该如何使用LLM？好好写prompt就行？还是不管三七二十一，有钱任性！买卡！训练！？5. LLM的未来方向是什么?1 什么是LLM？铺天盖地的LLM新资讯，LLM到底是什么？3. 4. 我们应该如何使用LLM？好好写prompt就行？还是不管三七二十一，有钱任性！买卡！训练！？5. LLM的未来方向是什么?1 什么是LLM？铺天盖地的LLM新资讯，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的大小减到最小。 4) 脚本执行阶段 ① 减少节点的操作（innerHTML） 避免多次操作节点，构建好后再一次性添加到文档中去，而不是循环添加每一行 ② 事件委托 采用事件委托机制，在父级元素上添加一个事件监听，来替代在每一个子元素上添加事件监听
91651编辑于 2022-11-29 - 来自专栏互联网杂技
前端各种优化
解决办法： 合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。 2. 如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。 4. 使用JSON格式来进行数据交换 基本原理： JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。 我个人经常使用的方式是使用 YUI Compressor，它的特点是：移除注释；移除额外的空格；细微优化；标识符替换。 关于图片精灵(Sprite)技术就和我们工作直接相关，不管是在CSS中的图片还是在HTML结构中的图片都会产生HTTP请求，前端优化的第一条就是减少请求数，最直接有效的方法是使用图片精灵（CSS Sprite
1.2K80发布于 2018-04-02 - 来自专栏grain先森
前端性能优化
本文主要考虑客户端性能、服务器端和网络性能，内容框架来自Yahoo Developer Network，包含 7 个类别共 35 条前端性能优化最佳实践，在此基础上补充了一些相关或者更符合主流技术的内容 主流技术的内容 前端性能的一个重要指标是页面加载时间，不仅事关用户体验，也是搜索引擎排名考虑的一个因素。 以上数据更说明「加载时间就是金钱」，前端优化主要围绕提高加载速度进行。 一、页面内容 1. 减少HTTP请求数 Web 前端 80% 的响应时间花在图片、样式、脚本等资源下载上。 4. 缓存Ajax请求 最重要的的优化方式是缓存响应结果。有尚未过期的Expires或者Cache-Control 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插件，可以对网站的页面性能进行分析，提出对该页面性能优化的建议）原则等，总结起来主要包括网络加载类、页面渲染类、 4．减少DOM元素数量和深度 HTML中标签元素越多，标签的层级越深，浏览器解析DOM并绘制到浏览器中所花的时间就越长，所以应尽可能保持DOM元素简洁和层级较少。
1.9K60发布于 2018-02-07 - 来自专栏程序员IT圈
前端性能优化 —— 前端性能分析
作者：ouven https://my.oschina.net/zhangstephen/blog/1601380 前端性能优化是一个很宽泛的概念，本书前面的部分也多多少少提到一些前端优化方法，这也是我们一直在关注的一件重要事情 配合各种方式、手段、辅助系统，前端优化的最终目的都是提升用户体验，改善页面性能，我们常常竭尽全力进行前端页面优化，但却忽略了这样做的效果和意义。 先不急于探究前端优化具体可以怎样去做，先看看什么是前端性能，应该怎样去了解和评价前端页面的性能。 可控等待延时可以理解为能通过技术手段和优化来改进缩短的部分，例如减小图片大小让请求加载更快、减少HTTP请求数等。 所以要知道的是，前端中的所有优化都是针对可控等待延时这部分来进行的，下面来了解一下如何获取和评价一个页面的具体性能。
2.8K120发布于 2018-03-05 - 来自专栏网络日志
前端性能优化系列 | 加载优化
如果能提前完后才能上述操作，那么就能带来更好的用户体验，与此同时，由于建立连接的大部分时间是消耗在等待的时间上，这样也能有效的优化宽度的使用情况。 图片懒加载 （1）什么是懒加载 懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。 懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。 首屏加载优化 随着Vue、React等框架的盛行，SPA单页面应用越来越多，多数的SPA应用的结构都很类似。 4. 视频加载优化 （1）延迟加载视频 图片和视频这类静态资源资源占比都比较大。与图片一样，视频同样可以延迟加载，来达到优化性能的目的。
86210编辑于 2024-08-01
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号