- 综合排序
- 最热优先
- 最新优先
- 来自专栏京程一灯
快速优化 Web 性能的10 个手段
// 每日前端夜话 第388篇 // 正文共：2700 字 // 预计阅读时间：10 分钟 ? 优化网站的性能需要花费大量的时间，并且如果要根据自己的需求进行优化则花费的时间可能更多。 在本文中，我将向你展示 10 个快速优化 Web 性能的手段，能在 5 分钟内用于你自己的网站。这些捷径对你的代码库或服务器配置几乎没有什么影响。 它们简单且容易实现，无需详细了解它们的原理，并且能够对你的性能产 生重大影响。 1. 使用文本压缩 使用文本压缩，可以最大程度地减少通过网络传输的字节数。有几种压缩算法。 可以在 Github 中查看演示代码[10]。 总结 在本文中，我向你介绍 10 个快速优化 Web 性能的手段，能在 5 分钟内用于你自己的网站。你可以在 GitHub 中找到相关资源[27]。 ---- ?
2.3K30发布于 2020-09-01 - 来自专栏java一日一条
Web性能优化系列：10个JavaScript性能提升的技巧
但 Javascript 性能优化绝不是一种书面的技术，Nicholas 的技术演进列出了10条建议，帮助你写出高效的 JS 代码。 1. 因此with()语句同时给局部变量和全局变量的性能带来负面影响，最终使我们优化JavaScript性能的计划破产。 3. 小心使用闭包 虽然你可能还不知道“闭包”，但你可能在不经意间经常使用这项技术。 在考虑优化时，数值和变量的性能差不多，并且速度显著优于对象属性和数组元素。 因此当你多次引用一个对象属性或者数组元素的时候，你可以通过定义一个变量来获得性能提升。 在循环时将控制条件和控制变量合并起来 提到性能，在循环中需要避免的工作一直是个热门话题，因为循环会被重复执行很多次。所以如果有性能优化的需求，先对循环开刀有可能会获得最明显的性能提升。 一种优化循环的方法是在定义循环的时候，将控制条件和控制变量合并起来，下面是一个没有将他们合并起来的例子： for ( var x = 0; x < 10; x++ ) { }; 当我们要添加什么东西到这个循环之前
1.3K20发布于 2018-09-19 - 来自专栏北京马哥教育
Web性能优化：图片优化
从性能优化的角度看，图片也绝对是优化的热点和重点之一，Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段，本文覆盖了Web图片优化的方方面面，从基本的图片格式选择 Google Web Fundamentals的说法我很喜欢： 图片优化既是一门艺术，也是一门科学，图片优化是一门艺术，是因为单个图片的压缩不存在最好的特定性方案，而图片优化之所以是一门科学，是因为许多开发得很出色的方法和算法可以明显减小图片的大小 即使只有长和宽都只有10px被浪费，但是当图片足够大时，这部分也将产生很大影响。 响应式图片 上面提到“恰好”显示客户端所需大小的图片，听上去很容易不是吗？ 我建议参考百度EFE团队的这篇文章： 实战响应式图片 响应式图片虽然尚未成为标准，但这是Web图片优化的一柄利器，一旦被广泛支持，再没有比缩小图片尺寸更有效的优化方法了。 这是我在写文章时最常用到的工具，把网站用到的图片拖进去，优化就完成了~ Kraken (Web) 主页：https://kraken.io/ 在免费模式下可以上传图片，优化后打包下载，
3.6K70发布于 2018-05-02 - 来自专栏Linyb极客之路
web前端性能优化
除了后台需要在性能上做优化外，其实前端的页面更需要在性能优化上下功夫，只有这样才能给我们的用户带来更好的用户体验。 不仅仅如此，如果前端优化得好，他不仅可以为企业节约成本，他还能给用户带来更多的用户，因为增强的用户体验。说了这么多，那么我们应该如何对我们前端的页面进行性能优化呢？ 一般说来，web前端指网站业务逻辑之前的部分，包括浏览器加载、网站视图模型、图片服务、CDN服务等，主要优化手段有浏览器访问、使用反向代理才、CDN等。 使用浏览器缓存策略的网站在更新静态资源时，应采用逐量更新的方法，比如需要更新10个图标文件，不宜把10个文件一次全部更新，而是应该一个文件一个文件逐步更新，并有一定的间隔时间，以免用户浏览器忽然大量缓存失效 10、CSS选择符优化 在大多数人的观念中，都觉得浏览器对 CSS选择符的解析式从左往右进行的，例如 #toc A { color: #444; }这样一个选择符，如果是从右往左解析则效率会很高，因为第一个
1.6K20发布于 2018-08-16 - 来自专栏漫漫前端路
Web 性能优化 - TCP
Web 性能优化 - TCP TCP 负责在不可靠的传输信道之上提供可靠的抽象层，向应用层隐藏了大多数网络通信的复杂性能，比如丢包重发、按需发送、拥塞控制及避免、数据完整，等等。 但是 TCP 设计并未过多顾及时间，由此给浏览器 Web 性能带来了挑战。 三次握手 所有 TCP 连接一开始都必须经过三次握手。 每个 TCP 连接都要经过三次握手，倘若客户端与服务器距离过长，会造成非常大的性能影响。因而，提升 TCP 性能关键在于想办法重用连接。 TFO 网络拥塞 拥塞：即对供不应求，对资源的需求超过了可用的资源，网络性能下降，整个网络的吞吐量随之负荷的增大而减小，甚至会发生拥塞崩溃的现象。 cwnd 最初的值只有一个 TCP 段，1999年提升至 4 个 TCP 段，2013年，提升至 10 个 TCP 段。 发送端向接受端发送 TCP 段后，停下来，等待确认。
63220编辑于 2023-06-09 - 来自专栏linjinhe的专栏
Web性能优化小结
下载性能 消灭重定向 域名收敛，减少DNS解析 减少文件数量（减少TCP连接数） 压缩文件体积 CDN 客户端缓存 渲染性能 CSS放顶部 JS放底部 心理性能 进度条 有效提示 转“
93760发布于 2018-06-06 - 来自专栏前端技术开发
web性能优化指南
前端性能优化，是每个前端必备的技能，优化自己的代码，使自己的网址可以更加快速的访问打开，减少用户等待，今天就会从几个方面说起前端性能优化的方案， 看下面的一张图，经常会被面试官问，从输入URL到页面加载完成 返回的HTTP响应 5.浏览器收到首屏html,开始渲染， 6.解析html位dom 7.解析css为css-tree 8.dom+css生成render-tree绘图 9.加载script的js文件 10 应用程序和web页面，收集关于开发人员最佳实践的现代性能指标和见解，让开发人员根据生成的评估页面，来进行网站优化和完善，提高用户体验。 ，把每一个页面图层转换为像素，并对所有的媒体文件进行解码 5.最后一步浏览器会合并各个图层，讲数据有CPU输给GPU最终绘制在屏幕上，(复杂的视图会给这个阶段GPU计算带来一些压力，在实际中是为了优化动画性能 以上就是所总结的常见的前端性能优化，如有不足，希望大佬多多指点指点
1.3K10发布于 2019-12-20 - 来自专栏九彩拼盘的叨叨叨
Web 前端性能优化概要
优化方向 页面加载速度。 代码运行速度。 优化的方法 指定优化目标。目标需要是具体的，可度量的。比如，在 50Kb 每秒的网络环境下，加载首屏所用时间少于 2 秒。 从大头去优化。 如果提高页面加载速度，考虑优化加载时间最长的资源。如果要提高代码运行速度，考虑优化最耗时的操作。 制定和实施优化策略。 验证。 提升页面加载速度 HTTP 的缓存。 强缓存。 协商缓存。 提升代码运行速度 JS 优化耗时的循环。 缓存一些耗性能的中间结果。 将耗时的任务交给 worker 来做。 防止内存泄漏。 算法改进。 选择器优化。 避免使用 CSS 表达式。 HTML 尽量不要用 iframe。 减少 DOM 数量。 工具 YSlow 分析网站，提出提升网站性能的建议。 阿里测 网站在不同地区的访问情况。
65510发布于 2018-08-24 - 来自专栏web前端记录
web前端之性能优化
、协商缓存），vue中使用keep-alive 3、利用CDN 4、按需加载资源 5、非核心代码异步加载（defer，async） 6、懒加载（页面/组件/图片） 7、节流和防抖（渲染完成后的页面交互优化 ） 8、减少重排和重绘 9、SSR服务器端渲染（利于SEO优化） 10、图片优化（使用svg，雪碧图，小图片使用iconfont或是转base64）
55740发布于 2021-04-25 - 来自专栏JavaScript高阶应用
Web前端性能优化（三）
+ e.total) } }}SessionStorage 会话级别的浏览器存储；存储大小为 5M 左右；仅在客户端使用，不和服务端进行通信；接口封装较好；对于表单信息的维护虽然 Web Storage 对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太有用，而 IndexDB 是一种低级 API，用于客户端存储大量结构化数据，该 API 使用索引来实现对该数据的高性能搜索 Apps) 是一种 Web App 新模型，并不是具体指某一种前沿的技术或者某一个单一的知识点，我们从英文缩写来看就能看出来，这是一个渐进式的 Web App，是通过一系列新的 Web 特性，配合优秀的 UI 交互设计，逐步的增强 Web App 的用户体验PWA 的主要特点包括下面三点：可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现；体验 - 快速响应，并且有平滑的动画响应用户的操作；粘性 - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面通过性能检测工具 Lighthouse，可以检测网站是否符合 PWA，还能查看网站的可靠性、速度等性能优化指标，安装该插件需翻墙Service
90030编辑于 2024-03-19 - 来自专栏JavaScript高阶应用
Web前端性能优化（二）
在某些场景下会获取渲染的结果，若 JS 线程和 UI 线程是在并行执行的，那有可能获取不到我们预期的结果，所以这两个线程是互斥的，当一个线程在解析或渲染时，另一个线程则被冻结，所以我们就能够知道 CSS 的性能会让 DOM 元素设置 transform:translateZ(0); 或 will-change: transform; 属性，将其变成新的独立图层，而每一个图层会消耗大量的时间和运算量，直接导致了页面崩溃优化用
1.1K21编辑于 2024-03-20 - 来自专栏JavaScript高阶应用
Web前端性能优化（一）
文件里的空格、制表符、换行符进行压缩，并剔除所有注释将 CSS 文件里的空格、制表符、换行符进行压缩，无效代码删除，CSS 语义合并将 JS 文件压缩与混乱，无效字符的删除，剔除注释，代码语义的缩减和优化 文件后加一个 MD5 戳，用来唯一标识该 JS 文件是否被更改，若是合并前的任一个文件有改动，那么合并后的整个文件缓存都会失效文件合并的方式同样可通过在线网站或 NodeJS 进行合并，在此不再复述图片优化我们一般所用到的图片格式为 就是讲网站上用到的一些 icon 整合到一张单独图片中，通过 background-position 属性来显示相对应的图片，使用雪碧图的优点为，减少你的网站 HTTP 请求数量，相对而言，加载比较慢同样推荐几个图片优化的在线网站
1.6K41编辑于 2024-03-19 - 来自专栏前端儿
Web 前端性能优化准则
我们知道重定向是如何损伤性能的，为了实现更好的效率，可以使用Referer日志来跟踪内部流量去向。 准则09、图像优化 gif: 适用于动画效果，例如提示的滚动条图案 ? 使用smushit.it在线无损化压缩 png格式将图像信息保存在“块”中，对于web显示来说，大部分的“块”都并非必要，所以优化策略可以将它们安全地删除。 雅虎的YSlow提供了一个在线的无损化压缩工具smushit.it，不过基本上假如已经将图片转变为png8，使用smushit.it能压缩的空间已经很小了，不过对于追求极致性能的web来说，还是值得一试的 准则10、Cookie优化 什么是Cookie Cookie是存储在客户端的一小段文本信息，伴随着用户请求在浏览器和服务器之间传递。
1.4K10发布于 2018-09-03 - 来自专栏ThoughtWorks
Web前端性能优化思路
本文旨在整理常见Web前端性能优化的思路，可供前端开发参考。因为力求精简，限于篇幅，所以并未详述具体实施方案。 针对上述两种耗时的情况，常见的优化方向有： 缩短请求耗时； 减少重排重绘； 改善JS性能。 1 缩短请求耗时 网络资源是Web应用运行的基础，改善网络资源加载速度会显著改善前端性能。 3.3 Web Assembly 总体原则：将复杂的计算逻辑编译为Web Assembly，避免JS类型推断过程中的性能开销，可用于性能的极限优化。 可以有针对性地对性能瓶颈进行分析和处理，同时也需要避免引入不必要的优化措施，以确保最终优化效果。 ---- - 相关阅读 - WEB前端安全自查和加固 前端不止：Web性能优化 - 关键渲染路径以及优化策略 点击【阅读原文】可至洞见网站查看原文&加粗字体部分的相关链接。
2K20编辑于 2022-03-04 - 来自专栏终身学习者
仅需 5 分钟，快速优化 Web 性能的10 个手段
在这篇文章中，主要介绍10种快速提高网站性能的方法，你只需5分钟内就可以将它应用到你的网站上，废话不多说，让我们进入正题吧 ?。 1. 文件压缩 文件压缩，可以减少网络传输的字节数。有几种压缩算法。 8.使用资源提示优化性能 HTML5的资源提示(Resource Hints)可以简单地理解为预加载，浏览器根据开发者提供的后续资源的提示进行有选择性的加载和优化。 但是如果错误地使用了预拉取，那么浏览器就会下载额外不需要的资源，影响页面性能，并且造成网络资源浪费。 &display=swap"/></noscript> 10. 使用 service worker 缓存资源 service worker是浏览器在后台运行的脚本。 总结 在这篇文章中，展示了 10 种快速的网络性能，你可以在5分钟内应用到你的网站，以提高你的网站速度。 感谢大家的观看与支持，我们下期再见，不要忘了三连哦。
1.1K20发布于 2020-10-28 - 来自专栏Web 技术
【Web性能】Javascript 代码性能优化条目（一）
浏览器在解析HTML页面的过程中每遇到一个script标签，都会因执行脚本而导致一定的延时，因此最小化延迟时间将会明显改善页面的总体性能。 考虑到HTTP请求会带来额外的性能开销，因此下载单个100KB的文件将比下载4个25KB的文件更快。所以，减少页面中外链脚本文件的数量将会改善性能。 ---- 无阻塞脚本 减少JS文件大小并限制HTTP请求数仅仅是创建响应迅速的Web应用的第一步。尽管下载单个较大的JS文件只会产生一次HTTP请求，但这么做会锁死浏览器一大段时间。 大型Web应用通常不会采用XHR脚本注入方式。 本篇对javascript脚本优化的介绍先暂时到这里，下一篇中我们将从作用域方面继续介绍。
71320编辑于 2022-07-29 - 来自专栏GreenLeaves
Web性能优化之雅虎军规
自己是做前端开发的，在性能方面，根据Yahoo的调查，后台只占5%，而前端高达95%之多，其中有88%的东西是可以优化的。 ? 以上是一张web2.0页面的生命周期图。 今天听了淘宝小马哥的一个对yahoo开发团队对web性能研究的 一个讲座，感觉收获很大，想在blog上做个分享。 相信很多人都听过优化网站性能的14条规则。 所以我们应该尽快让css加载完毕 顺着这层意思，如果我们再细究的话，其实还有可以优化的地方。 不仅从性能优化上会这么做，用代码易于维护的角度看也应该这么做。把css和js写在页面内容可以减少2次请求，但也增 大了页面的大小。如果已经对css和js做了缓存，那也就没有2次多余的http请求了。 在inforQ上找到一篇解释得比较详细的说明《使用ETags减少Web应用带宽和负载》，有兴趣的同学可以去看看。
1.4K100发布于 2018-01-24 - 来自专栏乱码李
Web 性能优化-缓存-HTTP 缓存
浏览器缓存 HTTP 缓存通常要配合客户端（浏览器）使用才能发挥效果，所以又被称之为浏览器缓存，是 Web 性能优化的一大利器。 缓存类型 浏览器缓存分为强缓存和协商缓存。 web 服务器收到请求后发现 Header 中有 If-Modified-Since 则与被请求资源的最后修改时间进行比对。 If-None-Match 表示当资源过期时（超过 max-age），发现资源有 Etag 声明，向 web 服务器发送请求时带上 If-None-Match （Etag 值）。 web 服务器收到请求后发现 Header 中带有 If-None-Match 则与被请求资源的相应校验串进行对比，决定返回 200 或者 304。 参考资料 HTTP Headers 浅谈浏览器http的缓存机制 Web缓存相关知识整理 浅谈Web缓存 详谈Web缓存
77730发布于 2021-11-26 - 来自专栏乱码李
Web 性能优化-缓存-DNS 缓存
这个域名服务器一般在城市某个角落，并且性能较好，当拿到域名后，首先也是从缓存中查找，看是否有匹配的结果。 还记得之前Web 性能优化-页面重绘和回流（重排）中提到的 Google 1s 终端首屏渲染标准，假如 DNS 解析出现问题，那可能几秒甚至几十秒都首屏不了了。 而且国内牛 X 的运营商的品质你也是知道的，随便劫持一下 DNS 就让你的 web 应用不见天日。 DNS-over-HTTPS 参考资料 DNS域名解析过程 无线性能优化：域名收敛 提升页面访问速度的前端优化大法：DNS预解析 也谈 HTTPS - HTTPDNS + HTTPS
3.6K11发布于 2021-11-26 JavaScript 中的 Web 性能优化
Web 性能优化是提高用户体验、提升网站转化率的重要环节。本文将探讨 JavaScript 在 Web 性能优化方面的策略和实践，帮助开发者打造更快、更流畅的 Web 应用。 Web 性能优化的意义Web 性能优化可以减少页面加载时间、提高交互响应速度，从而提升用户体验，降低跳出率，增加网站转化率。在移动端网络环境相对较差的情况下，性能优化尤为重要。 这样可以减少事件监听器的数量，提高性能。性能监测与优化使用性能监测工具（如 Chrome DevTools）分析代码的执行时间和内存占用情况，找出性能瓶颈，针对性地进行优化。 Web 性能优化的实践以下是一个简单的 Web 性能优化实践案例：使用 Webpack 进行代码压缩和混淆。 开发者应掌握 JavaScript 性能优化的策略和实践，不断优化代码，为用户提供更快、更流畅的 Web 应用。
52600编辑于 2024-08-11
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号