- 综合排序
- 最热优先
- 最新优先
- 来自专栏Web技术庄园
前端智能化——图层抽象和优化
[设计稿转代码基本流程] 作为前端智能化的第一步，解析的UI数据关乎后续的代码还原质量，因此需要一套方案来保证解析阶段能输出通用而有效的UI节点。 [1240] 针对通用性和有效两个目标，我们将解析过程分为图层抽象和图层优化两个步骤。 解析后的图层往往包含一些无效的信息，比如图层冗余、图层零散的问题，我们需要通过数据预处理来优化UI节点信息，提高代码还原的精准度。 ，抽象过程是将不同设计软件图层解析为统一的数据结构，接着通过图层优化，清除冗余节点和合并零散节点，得到“干净”的UI节点集合。 更多关于前端智能化的课程，可以参考我之前分享的课程：https://ke.qq.com/course/2995626 文章传送：《前端智能化 ——从图片识别UI样式》https://zhuanlan.zhihu.com
98920发布于 2021-05-14 - 来自专栏Java技术栈
8条关于Web前端性能的优化建议
一般网站优化都是优化后台，如接口的响应时间、SQL优化、后台代码性能优化、服务器优化等。高并发情况下，对前端web优化也是非常重要的。 下面说说几种常见的优化措施。 另外一方面，如果是关于抽奖、摇一摇、秒杀等功能，可以限制发往后台的频率，如前端操作10次才往后端发一次请求，这样从前端就做到了后台的流量控制，把流量控制到访问的最外层是最好的，尽量不要让请求落到底层。 8、反向代理 常用的反向代理nginx除了负载均衡功能，它也可以通过配置缓存功能来加速请求响应速度，当用户第一次访问的时候静态资源就可以被缓存到反向代理服务器上，这样其他用户的请求就能直接从反向代理服务器直接获取返回 我大概列了这些，其实还有很多优化手段，大家有更好的建议的话，可以在下方留言。
1.4K50发布于 2018-03-30 - 来自专栏玩转大前端
前端优化
一、页面/文件级优化 1、减少HTTP请求数 解决方法： 1）设置缓存 2）css、js、img等静态资源合并压缩（vue的项目有压缩css和js） 3）懒加载图片（不是真正意义的减少请求数 8、避免跳转：有种现象会比较坑爹，看起来没什么差别，其实多次了一次页面跳转。比如当URL本该有斜杠（/）却被忽略掉时。 （未使用过） 7、减少DOM元素数量：减少DOM数量，就会减少浏览器的解析负担 8、需绑定到DOM上面的事件多的时候使用事件代理 9、使用<link>替代@import（@import 进来的样式在页面内容载入完毕后再加载 1、返回状态保持功能 2、针对移动端各种屏幕尺寸的适配方案 3、webpack优化 4、将请求接口代码和加载动画及错误弹出提示封装成公共函数 5、统一前端常用组件规范。 前端规范：不同样式的组件图片使用一个大文件夹统一存放，里面分各种子类，每次更换只需更改文件夹名称即可实现更改一整套组件的样式的效果；使用vue.js框架的，这些组件都统一写成可复用组件（无需每次重复编写代码
79220编辑于 2022-08-15 - 来自专栏Fantasy的技术小站
前端优化
前端优化是一个至关重要的过程，它不仅影响到网站的用户体验，还可能影响到网站的搜索引擎排名。 下面是一些常见的前端优化策略，以帮助提高页面的加载速度： 优化图片 压缩图片：使用工具或插件压缩图片，减小文件大小。 使用正确的格式：例如，使用 WebP 格式代替 JPEG 或 PNG。 优化 CSS：将关键路径的 CSS 内联在 head 中。 浏览器缓存 通过设置 HTTP 头信息，使浏览器缓存静态资源，减少重复加载。 优化字体 选择高效的字体格式：例如，WOFF2。 优化渲染路径 避免阻塞渲染的资源：例如，将脚本和样式表移到 HTML 文档的底部。 利用请求优先级：确保关键资源优先加载。 在进行优化时，建议使用性能分析工具来监控和测试优化效果，确保每一步的改进都是有效的。
43820编辑于 2023-10-18 - 来自专栏只喝牛奶的杀手
前端优化
Cookie Cookie Use Cokkie-free Domains for Components 对组件使用无Cookie的域名 Develop Smart Event Handlers 设计“智能 的访问次数 Choose <link> over@import @import使用< link >而非@import Avoid Filters 避免过滤器的使用 Optimize Images 优化图片 Optimize CSS Sprites 优化CSS Sprites
65120发布于 2019-08-26 - 来自专栏CSDNToQQCode
前端性能优化-图像优化
2) jpg: 使用有损压缩，将图片的每个像素分解成8*8的栅格，然后对每个栅格的数据进行压缩处理，通过特殊的算法用附近的颜色填充栅格。用户可以设置质量级别，从0到100，数字越小，图片质量越差。 png又分为png8、png24和png32，png8表示支持2^8个种颜色，通常png8是最通用的web图片格式。 2、图像优化 1) jpg or png 对于颜色较多的图像，使用jpg更好，因为png可以选择使用调色板颜色更多的png24，得到的图片比jpg大。 对于颜色简单对比强烈的图像，使用png更好，因为png使用调色板颜色最少的png8就可以满足显示效果，且得到的图片相对较小，而jpg是有损的，在清晰的颜色过渡周围会有大色块，影响显示效果。 2) 将png24|32转化为png8 某些png24|32图片的颜色较为简单，将其转变为png8的显示效果类似，但能明显减小图片的大小。
1.1K10编辑于 2022-11-29 - 来自专栏IT大咖说
面向前端开发者的V8性能优化
Type feedback V8引入了类型反馈技术。当我们进行二元运算的时候，V8会对所有运算的参数进行类型反馈，类型反馈给V8引擎。 ? 这就是V8使用的优化编辑器。 去优化Deoptimization 去优化就是生成一个未优化的帧，运算时，V8会把优化的帧去掉，调用的时候V8再重新进行优化。 当去优化并再次优化完成之后，最终会生成重新优化过的机器码。 如果要进行别的操作，V8还会进行优化操作。 要避免“去优化” 去优化的消耗大，主要是因为重新优化的消耗非常大。 如果我们不恰当的使用类型反馈信息，那么我们就会陷入去优化的怪圈：函数不停地去优化，然后再重新优化，直到我们达到了重优化的次数限制，这时我们的函数将再也不会被V8引擎优化。 我们用d8分析它的性能，如果没有 d8 我们可以使用 ndoe.js 代替。图上第一行进行了优化，并且写了原因small function。因为函数非常小，V8对它进行了内联操作。 混合相加 ?
1.6K100发布于 2018-04-03 - 来自专栏逸鹏说道
漫谈前端优化
大大出乎了当初从业者的预料，2010年前后中国还处于3G网时代，各种3G宣传铺天盖地，如果你稍稍回忆一下，那个时候中国几乎没有像样的移动站点；大约在12年左右，也就是iphone4s诞生的时代，在中国高级智能设备开始被普遍使用 ，4G的覆盖范围也越来越大，各种app、移动站点、Html5活动页面也逐渐火爆起来；随着行业的发展，对从业者及技术支持的要求也越来越高；对于前端，前端资源和页面优化是常见要求，对比移动端，移动端对前端优化的要求更高 ；而我今天跟大家聊的就是关于前端优化的内容； 话不多说，来看看有哪些选项； 1.引用资源部分优化： ·合并引用的css、javascript，并使用压缩模式，这个很好理解吧； ·合并页面引用的小图标 ，png8大于gif，常用png和jpg，而压缩方面有各种工具，比如gulp(个人多次实测压缩比率达20%左右，这个也可能和图片多少、格式有关系)、TinyPNG(熊猫站，性能比较高的，不便的是国外的， 上传下载太麻烦了，使用它们给的开发者接口，个人实测跟gulp差不多，比不上网站上的压缩，所以意义不大，而且限制次数，土豪冲会员也许给的接口性能会优越也说不定哈)还有其他各种网络压缩工具不一一说了，这些是针对前端使用的图片的
1.2K90发布于 2018-04-11 - 来自专栏我的专栏2
前端性能优化
前端性能优化是提升用户体验、提高页面加载速度和响应速度的关键步骤。以下是一些核心优化策略和具体实现方法：一、加载性能优化1. 优化网络请求减少 HTTP 请求： 合并小文件（如雪碧图、合并 CSS/JS）。使用内联关键 CSS/JS（避免阻塞渲染）。
23500编辑于 2025-06-23 - 来自专栏lpp的专栏
前端性能优化
4. 我们应该如何使用LLM？好好写prompt就行？还是不管三七二十一，有钱任性！买卡！训练！？
13200编辑于 2024-04-18 - 来自专栏javascript艺术
前端性能优化
前端性能优化 三大优化思维： 性能优化目标 用户体验 代价与权衡 八处优化落点： HTML层级优化 CSS层级优化 JavaScript层级优化 渲染层级优化 交互请求优化 数据结构优化 前端缓存优化 前端性能瓶颈 传统DOM操作对性能的影响 浏览器的渲染过程 重排、重绘 前端性能优化与重绘与回流有关系的原因是：频繁的触发重绘与回流，会导致UI频繁染，最终会导致js变慢，会导致页面性能变差 前端展示、后端处理的思维模式 前端主要负责展示，后端负责数据处理。Javascript是单线程的，而后端语言绝大多数都是多线程的。 采用轻量级数据交换格式 JSON 前后端联调对接那些事 前后端联调是前后端分离后的必然产物 前端和后端事先约定好固定的数据结构，前端通过Mock数据渲染，后端通过Postman等模拟前端请求。 MVVM框架 虚拟DOM Diff算法 移动端相关应用 骨架屏 PWA渐进式增强的Web应用 一个性能优良的Web前端产品，绝不是通过某一个或某几个优化方式就能达成的，它是一系列有意识的调整从量变到质变的一个过程
1.2K10发布于 2021-05-28 - 来自专栏Dawnzhang的开发者手册
前端性能优化
前言 本来想写一篇实用而又全面的性能优化文章，很多大佬已经写了非常好，我就不再造轮子了。我这篇文章就归纳整理一下吧，方便后续我或他人学习使用。 性能优化是把双刃剑，有好的一面也有坏的一面。 8、将 CSS 放文件头，JavaScript 文件底 所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染。如果这些 CSS 和 JS 需要加载和解析很久的话，那么页面就空白了。 arguments.callee, 25) } else { callback(arry) } }, 25) 如果有兴趣了解更多，可以查看一下高性能JavaScript第 6 章和高效前端 ：Web高效编程与优化实践第 3 章。 参考资料： web 前端图片懒加载实现原理 (2). 响应式图片 响应式图片的优点是浏览器能够根据屏幕大小自动加载合适的图片。
1.8K20编辑于 2022-05-10 - 来自专栏李白偷偷偷猪
前端性能优化
页面级优化 css雪碧图 使用cdn加速器 压缩合并代码（使用webpack可打包合并） 使用dns域解析器 代码级优化 减少Dom操作 不使用css表达式，使用<link>，不使用@import 减小
60810编辑于 2022-11-14 - 来自专栏娜姐聊前端
前端性能优化
之前写过一篇文章前端网络高级篇（六）网站性能优化，里面提到过13个性能优化的点： 减少HTTP请求 使用CDN 利用HTTP缓存 Gzip压缩 将样式表放在顶部 将JS脚本放在底部 避免CSS表达式 使用外部 DOM编程优化 用JS操作DOM，是比较慢的。为什么呢？首先，补充一下浏览器相关的知识。下图为浏览器结构： ? 重排的开销要远大于重绘 所以，我们的优化点就是： 尽可能减少DOM操作 尽可能减少重排 看看下面的例子吧。 例子1： 在container元素里面添加10000个“hello”。 CSS优化 CSS选择器是从右向左解析的，所以，尽可能直接用class作为选择器，减少查询时间。
1.2K30发布于 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 动画 图片与媒体优化
27600编辑于 2025-11-21 - 来自专栏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的大小减到最小。
91651编辑于 2022-11-29 - 来自专栏互联网杂技
前端各种优化
解决办法： 合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。 2. 通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上 8. 精简CSS和JS文件 基本原理： 有一条非常重要的准则一直没有提到，就是CSS和JavaScript的压缩，直接减少下载的文件体积。 我个人经常使用的方式是使用 YUI Compressor，它的特点是：移除注释；移除额外的空格；细微优化；标识符替换。 关于图片精灵(Sprite)技术就和我们工作直接相关，不管是在CSS中的图片还是在HTML结构中的图片都会产生HTTP请求，前端优化的第一条就是减少请求数，最直接有效的方法是使用图片精灵（CSS Sprite
1.2K80发布于 2018-04-02 - 来自专栏lpp的专栏
前端性能优化
4. 我们应该如何使用LLM？好好写prompt就行？还是不管三七二十一，有钱任性！买卡！训练！？
13200编辑于 2024-02-19 - 来自专栏grain先森
前端性能优化
本文主要考虑客户端性能、服务器端和网络性能，内容框架来自Yahoo Developer Network，包含 7 个类别共 35 条前端性能优化最佳实践，在此基础上补充了一些相关或者更符合主流技术的内容 以上数据更说明「加载时间就是金钱」，前端优化主要围绕提高加载速度进行。 一、页面内容 1. 减少HTTP请求数 Web 前端 80% 的响应时间花在图片、样式、脚本等资源下载上。 更多的标签，增加文件大小； 不易维护，无法适应响应式设计； 性能考量，默认的表格布局算法会产生大量重绘 8. 得益于Node.js的流行，开源社区涌现出许多高效、易用的前端优化工具，JavaScript 和CSS压缩类的，不敢说多如牛毛，多入鸡毛倒是一点不夸张，如[UglifyJS 2] (github.com 优化CSS Sprite 水平排列Sprite中的图片，垂直排列会增加图片大小； Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以适用PNG8格式； 不要在Spirite的图像中间留有较大空隙
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 动画图片与媒体优化懒加载
30510编辑于 2025-08-08
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号