展开

关键词

2020前端性能优化清单(三)

原文地址:https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages[1] 翻译:龙朝忠 本翻译仅做学习交流使用,转载请注明原处 本文是性能优化清单系列第三篇,可以先看看前边的文章: 2020前端性能优化清单(一) 2020前端性能优化清单(二) 构建优化 22 设置优先事项。 不久前,我们发表了一篇文章“ 改善 Smashing 杂志的性能 [2] ”,其中详细介绍了这些内容。 我们要根据优先事项来优化性能。首先加载核心体验,然后加载增强体验,最后加载额外体验。 例如,如何调试 React 性能[23]和消除常见 React 性能问题的方法[24],还有改善 Angular 性能的方法[25]。通常,大多数性能问题来自启动应用程序的初始化时间。 ://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages [2] 改善 Smashing 杂志的性能

53620

2020前端性能优化清单(二)

原文地址:https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages[1] 翻译:陈隆德 本翻译仅做学习交流使用,转载请注明原处 本文是性能优化清单系列第二篇,可以先看看前面的文章: 2020前端性能优化清单(一) 资源优化 17 使用 Brotli 进行纯文本压缩 2015 年,Google Katie Hempenius 和 Addy Osmani 在他们的性能提升:网络性能优化建议和技巧[39]文章中分享了更多这方面的观点 您可以配置在“Pull Request”中自动图像压缩[40], Doug Sillars 撰写的详细的背景视频性能优化指南[72],在这种情况下可能会有所帮助。(谢谢,Guy Podjarny!)。 :网络性能优化建议和技巧: https://youtu.be/YJGCZCaIZkQ?

52610
  • 广告
    关闭

    腾讯云+社区系列公开课上线啦!

    Vite学习指南,基于腾讯云Webify部署项目。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    2020前端性能优化清单(三)

    构建优化 22 设置优先事项。 最好先了解你要处理的内容。 盘点出所有资源的清单( JavaScript 、图片、字体、第三方脚本和页面上开销较大的模块,例如轮播、复杂的信息图和多媒体内容),然后将它们按组细分。 可以根据以下方式设置分组。 不久前,我们发表了一篇文章“ 改善 Smashing 杂志的性能 [2] ”,其中详细介绍了这些内容。 我们要根据优先事项来优化性能。首先加载核心体验,然后加载增强体验,最后加载额外体验。 参考资料 [1] https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages: https ://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages [2] 改善 Smashing 杂志的性能

    44410

    2020前端性能优化清单(六)

    你也可以用一个谷歌电子表格驱动 WebPageTest[55],并可以使用 Lighthouse CI 把可访问性,性能和搜索引擎优化分数[56]导入到你的 Travis 设置,或直接导入 Webpack 下载清单(PDF,Apple Pages) 牢记此清单,您应该为任何类型的前端性能项目做好准备。 79](.pages,275 KB) 下载 MS Word 中的清单[80](.docx,151 KB) 如果您需要替代方案,您还可以查看 Dan Rublic 编写[81]的前端[82]清单[83], 某些优化可能超出了您的工作或预算范围,或者考虑到您必须处理的遗留代码,这些优化可能过于简单。没关系!将此清单用作一般(希望是全面的)指南,并创建适用于您的情况的问题清单。 https://calendar.perfplanet.com/2014/driving-webpagetest-from-a-google-docs-spreadsheet/ [56] 可访问性,性能和搜索引擎优化分数

    45320

    2020前端性能优化清单(一)

    本翻译仅做学习交流使用,转载请注明原处 本文是性能优化清单系列第一篇 简介 让2020年变得更...快些吧! 这是一份年度前端性能优化清单,包含了当下创建web快速体验所需的一切。这份清单自2016年开始已经持续更新了5年。 这份清单得到了LogRocket的大力支持,LogRocket是一个前端性能监视解决方案,可帮助重现错误并更快地解决问题。 web性能是一头狡猾的野兽让人难以琢磨和处理,不是吗? 因此,如果我们要建立了一个包含性能优化所有要点的清单(从研发开始到网站最终上线),该清单会是什么样的呢? 您会在下面找到一份(希望它是没有偏见的和客观的)** 2020前端性能优化清单** — 它包含您可能需要考虑性能的场景和优化手段的简介,以达到快速的响应时间,流畅的用户互动,以及网站不会浪费用户的带宽

    1.6K51

    2020前端性能优化清单(五)

    优化渲染性能 使用 CSS 容器[102]隔离耗性能的组件 — 例如,限制浏览器样式的作用域,如用于画布外导航的布局和绘制工作,或者第三方小组件。 首先,请参阅 Paul Lewis 关于浏览器渲染优化的免费 Udacity 课程[106],以及 Georgy Marchuk 关于浏览器绘图和 web 性能思考的文章[107]。 Anna Migas 在她关于调试 UI 渲染性能[111]的演讲中也提供了很多实用的建议。 51. 你优化过渲染体验吗? 参考资料 [1] https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages: https ://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages [2] 代价是 IE 9 及 9 以下版本中运行的脚本可能会被破坏

    63720

    2020前端性能优化清单(四)

    构建优化 34 使用针对目标 JavaScript 引擎的优化。 研究哪些 JavaScript 引擎在你的用户群中占主导地位,然后探索对其进行优化的方法。 最终决定必须由应用程序的性能决定。 因此,自托管通常更可靠,更安全,并且性能也更好。 37 限制第三方脚本的影响。 在所有性能优化的情况下,我们经常无法控制来自业务需求的第三方脚本。 参考资料 [1] https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages: https ://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages [2] 脚本流: https://blog.chromium.org

    62020

    前端性能优化 24 条建议(2020

    性能优化是把双刃剑,有好的一面也有坏的一面。好的一面就是能提升网站性能,坏的一面就是配置麻烦,或者要遵守的规则太多。 JavaScript第 6 章和高效前端:Web高效编程与优化实践第 3 章。 合理使用规则,避免过度优化 性能优化主要分为两类: 加载时优化 运行时优化 上述 23 条建议中,属于加载时优化的是前面 10 条建议,属于运行时优化的是后面 13 条建议。 所以在做性能优化之前,最好先调查一下网站的加载性能和运行性能。 检查加载性能 一个网站加载性能如何主要看白屏时间和首屏时间。 白屏时间:指从输入网址,到页面开始显示内容的时间。 参考资料: performance.timing.navigationStart 其他参考资料 性能为何至关重要 高性能网站建设指南 Web性能权威指南 高性能JavaScript 高效前端:Web高效编程与优化实践

    46820

    前端性能优化 —— 前端性能分析

    作者:ouven https://my.oschina.net/zhangstephen/blog/1601380 前端性能优化是一个很宽泛的概念,本书前面的部分也多多少少提到一些前端优化方法,这也是我们一直在关注的一件重要事情 配合各种方式、手段、辅助系统,前端优化的最终目的都是提升用户体验,改善页面性能,我们常常竭尽全力进行前端页面优化,但却忽略了这样做的效果和意义。 先不急于探究前端优化具体可以怎样去做,先看看什么是前端性能,应该怎样去了解和评价前端页面的性能。 所以要知道的是,前端中的所有优化都是针对可控等待延时这部分来进行的,下面来了解一下如何获取和评价一个页面的具体性能前端性能测试 获取和衡量一个页面的性能,主要可以通过以下几个方面:Performance Timing API、Profile工具、页面埋点计时、资源加载时序图分析。

    917120

    前端性能优化

    前言 本来想写一篇实用而又全面的性能优化文章,很多大佬已经写了非常好,我就不再造轮子了。我这篇文章就归纳整理一下吧,方便后续我或他人学习使用。 性能优化是把双刃剑,有好的一面也有坏的一面。 并且某些性能优化规则并不适用所有场景,需要谨慎使用 检查的方法 1、检查加载性能 一个网站加载性能如何主要看白屏时间和首屏时间。 白屏时间:指从输入网址,到页面开始显示内容的时间。 最后要说一句,据我查找的资料所得,CSS 选择器没有优化的必要,因为最慢和慢快的选择器性能差别非常小。 JavaScript第 6 章和高效前端:Web高效编程与优化实践第 3 章。 参考资料: web 前端图片懒加载实现原理 (2). 响应式图片 响应式图片的优点是浏览器能够根据屏幕大小自动加载合适的图片。

    5410

    前端性能优化

    前端性能优化 ? 三大优化思维: 性能优化目标 用户体验 代价与权衡 八处优化落点: HTML层级优化 CSS层级优化 JavaScript层级优化 渲染层级优化 交互请求优化 数据结构优化 前端缓存优化 ? ? 前端性能瓶颈 传统DOM操作对性能的影响 浏览器的渲染过程 ? 重排、重绘 前端性能优化与重绘与回流有关系的原因是:频繁的触发重绘与回流,会导致UI频繁染,最终会导致js变慢,会导致页面性能变差 单一页面完成复杂交互(SPA) 单页面应用(SPA---- 其他层级优化 从输入一个URL到页面出现的过程(性能优化即是优化这些过程) ?

    22710

    前端性能优化

    之前写过一篇文章前端网络高级篇(六)网站性能优化,里面提到过13个性能优化的点: 减少HTTP请求 使用CDN 利用HTTP缓存 Gzip压缩 将样式表放在顶部 将JS脚本放在底部 避免CSS表达式 使用外部 DOM编程优化 用JS操作DOM,是比较慢的。为什么呢?首先,补充一下浏览器相关的知识。下图为浏览器结构: ? 重排的开销要远大于重绘 所以,我们的优化点就是: 尽可能减少DOM操作 尽可能减少重排 看看下面的例子吧。 例子1: 在container元素里面添加10000个“hello”。 CSS优化 CSS选择器是从右向左解析的,所以,尽可能直接用class作为选择器,减少查询时间。

    18330

    前端性能优化

    本文主要考虑客户端性能、服务器端和网络性能,内容框架来自Yahoo Developer Network,包含 7 个类别共 35 条前端性能优化最佳实践,在此基础上补充了一些相关或者更符合主流技术的内容 主流技术的内容 前端性能的一个重要指标是页面加载时间,不仅事关用户体验,也是搜索引擎排名考虑的一个因素。 以上数据更说明「加载时间就是金钱」,前端优化主要围绕提高加载速度进行。 一、页面内容 1. 减少HTTP请求数 Web 前端 80% 的响应时间花在图片、样式、脚本等资源下载上。 得益于Node.js的流行,开源社区涌现出许多高效、易用的前端优化工具,JavaScript 和CSS压缩类的,不敢说多如牛毛,多入鸡毛倒是一点不夸张,如[UglifyJS 2] (github.com 条目虽然很多,但经过分类,可以发现,性能优化主要切入点可以从以下几个方面去考虑: 资源本身大小的压缩优化(想办法减少资源的体积) 网络请求的全过程(从url地址栏输入发送请求开始到返回响应包的每个环节)

    45841

    【腾讯云前端性能优化大赛】前端性能优化最佳实践

    优化能够让页面加载得更快、对用户的操作响应的更及时,能够给用户提供更为良好的体验。 当脚本或者样式表在不同页面中使用时需要做不同的修改,这可能会相对麻烦点,但即便如此也要把这个方法作为改善页面性能的重要一步。 【JavaScript的优化】 在JavaScript中,作用域分为函数作用域和词法作用域。当我们执行了某个函数时,会创建一个执行环境。 从性能方面思考,如果将某个变量放在全局作用域下,那么读写到该变量的时间会比局部变量多很多。变量在作用域中的位置越深,访问所需时间就越长。 在优化性能时,向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。例如,CDN可能选择网络阶跃数最小的服务器,或者具有最短响应时间的服务器。

    24661

    【腾讯云前端性能优化大赛】前端首屏性能优化

    1、前言 网站的性能一直是前端工程师努力的方向之一,更加流畅的体验,更加快速的页面呈现,都是好的web网站的指标之一。 这次,就以我的个人博客为例子,从最开始的荒芜状态,向业界网站性能标准“秒开”做一次系统性的性能优化。 以下为初始数据,数据来源使用腾讯云RUM性能监控。 --维基百科 简单的理解就是把你需要加载的资源不是放在你自己的服务器上,而是放在一个托管的服务器上,这个托管的服务器有着更好的性能,更稳定的服务,可以为用户提供更快的访达。 6、结尾 经过好几天的优化,在没有上终极首屏优化方案(SSR)之前,网站已经达到了一个还不错的速度: [image-20211223153335103.png] 这里的数据都只是取得首页的数据,不同页面打开的速度可能会有些差别 后续还可以使用SSR方案进行进一步的优化,不过这个方案需要项目整体重构,一时半会儿搞不出来。

    26140

    前端性能优化篇一:webpack性能优化

    所以优化webpack性能成为了不可或缺的一部分。下面我们一起来探讨webpack性能优化细节。 影响webpack性能的因素 如果我们在构建项目中使用了大量的loader和第三方库,会使我们构建项目的时间过长,打包之后的代码体积过大。 于是乎,就遇到了webpack 的优化瓶颈,总结webpack影响性能主要是两个方面: 1 webpack 的构建过程太花时间 2 webpack 打包的结果体积太大 webpack 优化解决方案 针对影响 webpack性能的因素,有了对应的解决方案。 总结 希望读过此篇文章的朋友们,都能在实际的项目中,试着用这些方法去优化项目,提高用户体验,具体实践还需我们在项目中不断摸索和尝试。敢迈出第一步显得至关重要。

    59520

    前端性能优化总结

    //npm i -D compression-webpack-plugin 安装插件依赖 configureWebpack: config => { const...

    9830

    前端性能优化指南

    这次我们来聊聊大家可能都比较关心的话题:「性能优化」。 一说到页面的性能优化,大家可能都会想起雅虎军规、2-5-8原则、3秒钟首屏指标等规则,这些规则在开发过程中不是强制要求的,但是有时候为了追求页面性能的完美和体验,就不得不对原有的代码进行修改和优化。 《雅虎前端优化35条规则翻译》。 ,此规则作为一种开发指导思路,针对浏览器页面的性能优化。 结语 「❤️关注+点赞+收藏+评论+转发❤️」,原创不易,鼓励笔者创作更好的文章 「关注公众号IQ前端,一个专注于CSS/JS开发技巧的前端公众号,更多前端小干货等着你喔」

    54850

    相关产品

    • 前端性能监控

      前端性能监控

      腾讯云前端性能监控(RUM)是一站式前端监控解决方案,用户只需要安装 sdk 到自己的项目中,通过简单配置化,即可实现对用户页面质量的全方位守护,真正做到了低成本使用和无侵入监控。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券