前端性能优化

2024年2月20日 166次阅读来源: 掘金

优化向：单页应用多路由预渲染指南

Ajax 技术的出现，让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用。在一个单页应用中，往往只有一个 html 文件，然后根据访问的 url 来匹配对应的路由脚本，动态地渲染页面内容。单页应用在优化了用户体验的同时，也给我们带来了许多问题，例如 S…

浏览器的渲染：过程与原理

内容说明本文不是关于浏览器渲染的底层原理或前端优化具体细节的讲解，而是关于浏览器对页面的渲染——这一过程的描述及其背后原理的解释。这是因为前端优化是一个非常庞大且零散的知识集合，一篇文章如果要写优化的具体方法恐怕只能做一些有限的列举。然而…

JavaScript性能优化技巧：概述

在这篇文章中，涵盖了很多广泛而又多变的环境。我们将尽量坚持“使用工具，而不是规则”的原则，把JS的流行词汇保持在最低限度。由于我们无法在2000字的文章中涵盖与 JS 性能表现相关的所有内容，所以请确保你阅读文中提到的引用资料，并在之后你自己进行了相应的研究。

从Chrome源码看浏览器如何加载资源

对浏览器加载资源有很多不确定性，例如： css/font的资源的优化级会比img高，资源的优化级是怎么确定的呢？
资源优先级又是如何影响加载的先后顺序的？
有几种情况可能会导致资源被阻止加载？
通过源码可以找到答案。此次源码解读基于Chromium 64。

浏览器性能优化-渲染性能

在浏览器渲染过程与性能优化一文中（建议先去看一下这篇文章再来阅读本文），我们了解与认识了浏览器的关键渲染路径以及如何优化页面的加载速度。在本文中，我们主要关注的是如何提高浏览器的渲染性能（浏览器进行布局计算、绘制像素等操作）与效率。很多网页都使用了看起来效果非常酷炫的动画与用…

使用 Skeleton Screen 提升用户感知体验

一直以来，无论是web还是iOS、android的应用中，为了提升应用的加载等待这段时间的用户感知体验，各种奇门遁甲之术层出不穷。其中，菊花图以及由它衍生各种加载动画是一个非常大的流派，如下图所示：在很多的应用的交互中，这种菊花的加载的设计已然要一统江湖了。不过，现在对于加…

[[V8]找出可能影响性能的代码（模式）](https://juejin.im/entry/59f95…

现在你很可能会遇到不止一个响应迟钝的 app 或加载缓慢的页面。已经是 2017 年了，我们当然希望一切变的很快，但我们仍然会体验到恼人的延时。怎么会这样呢？难道我们的网络连接不是逐年变快的么？我们的浏览器性能不是也变的更好？我们将在下文中讨论这些。事实上，浏览器和引擎越来越…

「前端那些事儿」② 极限性能优化

然而前端优化策略却是一件老生常谈的问题，百度一把大量的博文，曾拜读过张成文大大的《现代前端技术解析》，关于前端知识体系与架构思维的一本书，里面有一章讲到前端优化策略，前人总结的较为全面，自知能补充的内容也不多，索性添添简简做一个优化速查列表，以便后期回读，同大家分享。 PC端优…

谈谈关于前端的缓存的问题

我们都知道对页面进行缓存能够有利于减少请求发送，从而达到对页面的优化。不过在我前端工作的生涯中一直以为前端就是写写页面，写写交互，就已经很了不起，这种没有志向的想法发导致我日后的工作一直处于瓶颈。做人嘛总要有梦想嘛，不然跟一条咸鱼有什么区别。最近我一直在关于前端优化的问题，原来…

前端性能优化之加载技术

在这个前端用户体验越来越重要的时代，你的页面稍微有点卡顿，都难以挽留用户。而作为一名有追求的前端，势必要力所能及地优化我们前端页面的性能。今天，就来谈一谈那些前端性能优化的加载技术，利用这些技术可以很好地提高网站的响应速度和用户体验。页面渲染在理解真正的优化技术之前，我们需要…

[[web前端性能优化]性能优化只有三步，你了解吗](https://juejin.im/entry/5a201…

关于前端的性能优化，每次提到这个词大家都有很多idea。现在静下来思考下我们用到的各种手段最终可以归纳为三步这里主要是因为要完成一整个页面的输出后端需要处理很多个任务，我们可以将这些多个任务进行分块，谁先完成谁就先输出，最终通过JS回填的方式输出DOM节点。这种方式主要解决了…

浅谈前端中的过早优化问题

过早优化是万恶之源。 —— Donald Knuth 还记得大四的软件优化课上，课的主题虽然是关于各种优化手段的，但老师讲的第一门课的 PPT 里依旧给这句话留了独立的一页。在近期的工作中，我就碰到了不少因为“过早优化”带来的麻烦。稍微整理了一下思绪，便有了这篇短文。

什么是关键 CSS ？

网络速度很慢，但是有一些简单的策略可以使网站变快。其中之一就是将关键的css内联插入到网页的<head>标签, 但是，如果您的网站包含数百页，甚至更糟糕的是包含数百种不同的模板，那么你该怎么做呢？你不能手动做这件事。

浏览器缓存篇

缓存的分类有很多种，CDN缓存、数据库缓存、代理服务器缓存和浏览器缓存。本篇将来讲解一下Web开发中的浏览器缓存。这个在实际开发环境中往往也会被问到，或者使用到。如何去准确认清楚缓存的概念，是前端必须要去学习的。如果你喜欢我的文章，欢迎评论，欢迎Star~。欢迎关注我的gith…

浏览器渲染过程与性能优化

大家都知道万维网的应用层使用了HTTP协议，并且用浏览器作为入口访问网络上的资源。用户在使用浏览器访问一个网站时需要先通过HTTP协议向服务器发送请求，之后服务器返回HTML文件与响应信息。这时，浏览器会根据HTML文件来进行解析与渲染（该阶段还包括向服务器请求非内联的CSS文…

LINE漫画：通过Page Stack实现流畅的页面切换

该文章介绍了LINE内web应用「LINE漫画」如何实现流畅的页面切换。

分享17点PC浏览器前端优化策略——网络加载篇

PC端优化的策略很多，如 YSlow（YSlow 是 Yahoo 发布的一款 Firefox 插件，现 Chrome 也可安装，可以对网站的页面性能进行分析，提出对该页面性能优化的建议）原则，或者 Chrome 自带的 Audits 等，总结起来主要包括网络加载类、页面渲染类、…

JS中图片压缩的一般方法

其中，file参数传入一个File（Blob）类型文件；quality参数传入一个0-1的number类型，表示图片压缩质量；fn为回调方法，包含一个Blob类型文件的参数。这样的话，图片压缩上传就能轻松地搞定了，以上的8个方法我已经封装好放到github上了，喜欢的话可以使…

前端感官性能的衡量和优化实践

我们为什么需要关注站点的性能，性能为什么如此重要呢？如今任何互联网产品首先重要的都是流量，流量最终会转换为商业价值。所以在互联网产品中，流量、转化率和留存率基本上是产品经理或者业务非常关注的几个因素，而性能则会直接影响到用户的转化和留存（在一定阶段之后影响较大，产品初期功能的因…

如何打造一个全满分网站

作为一个全栈互联网工程师，我们的目标决不仅仅满足于功能的实现，而且要包括性能、安全、易用性等等各方面的考量。那么是否有一些可以公开评测的标准，使我们能够准确地知道目前我们网站的质量水平在全行业中处于什么样的水平呢？随着技术水平的不断进步，网站评测方面的各种工具也在不断演进。
工…

图片加载优化

图片是界面显示效果很重要的组成部分，图片加载关系到用户体验、应用性能，优化图片加载的常用策略为：预加载和懒加载。

[[译]JavaScript 的时间消耗](https://juejin.im/entry/5a23e…

随着我们的网站越来越依赖 JavaScript, 我们有时会(无意)用一些不易追踪的方式来传输一些(耗时的)东西. 在这篇文章中, 我会介绍一些能让你的网站在移动设备上快速加载且可交互的方式.

懒加载和预加载

懒加载也就是延迟加载。
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
很多页面，内容很丰富，页…

网页性能分析不完全指南

经常能在博客或者论坛上看到很多有关前端性能优化的文章，但是却很少看到如何分析一个网页的性能的文章。到底什么样的指标（或者说是标准）代表这个网页性能好或者不好，通过什么方式来得到这些指标呢？因此，本文来讲述下如何分析一个网页的性能的好与差。本文用到的工具：chrome浏览器。下面…

Web 性能优化 – TCP

TCP 负责在不可靠的传输信道之上提供可靠的抽象层，向应用层隐藏了大多数网络通信的复杂性能，比如丢包重发、按需发送、拥塞控制及避免、数据完整，等等。采用 TCP 数据流可以确保发送的所有字节能够完整地被接收到，而且客户端的顺序也一样。
但是 TCP 设计并未过多顾及时间，由此给…

认识Skeleton Screen【屏幕加载骨架】

Web前端性能优化——如何有效提升静态文件的加载速度

Web 前端性能优化 : 如何有效提升静态文件的加载速度

此文总结了笔者在Web静态资源方面的一些优化经验。用户在访问网页时，最直观的感受就是页面内容出来的速度，我们要做的优化工作，也主要是为了这个目标。那么为了提高页面加载（或者渲染）速度呢？一般来说有三个方面： 1、代码逻辑：优秀的代码逻辑结构可以有效减少渲染页面使用的内存和…

前端性能优化之 DOM 篇

前端性能优化，不止于前端。

Web静态资源缓存及优化

服务器上静态资源更新时请求服务器最新资源，加载又飞快。静态资源加载速度引出了我们今天的主题，因为最直接的方式就是将静态资源进行缓存。页面渲染速度建立在资源加载速度之上，但不同资源类型的加载顺序和时机也会对其产生影响，所以也留给了我们更多的优化空间。当然除了速度，缓存还有另外…

浏览器缓存篇

在前端开发中，缓存有利于加快网页的加载速度，同时缓存能够被反复利用，所以可以减少流量和带宽的开销。

前端感官性能的衡量和优化实践

如今任何互联网产品首先重要的都是流量，流量最终会转换为商业价值。所以在互联网产品中，流量、转化率和留存率基本上是产品经理或者业务非常关注的几个因素，而性能则会直接影响到用户的转化和留存。

前端性能JQuery篇之选择器优化

JQuery有非常多的选取节点的方法，但是采用这些方法选取节点时所影响到的性能是完全不一样的，用更合适的选择器去选取节点，是使用JQuery时优化浏览器性能的一个可考虑方向。首先，我们的建立一个有着复杂样式的无序列表。我们采用选取循环50000次的无序列表中的一个方法，来测…

使用合适的设计模式一步步优化前端代码

现在业务迭代，需要我们在page.init()初始化代码块的最后增加一些功能，同时不影响原先的功能。按照正常的写法，我们可能会像下面这样写：这样写是可以解决我们的需求，但是这样的代码是具有侵略性的，我们不得不在原先的代码的合适位置新增我们需要的代码。但我们思考一个问题，如果我…

CSS 写作建议和性能优化小结

WebP 在减少图片体积和流量上的效果如何？—— WebP 技术实践分享

不论是 PC 还是移动端，图片一直占据着页面流量的大头，在图片的大小和质量之间如何权衡，成为了长期困扰开发者们的问题。而 WebP 技术的出现，为解决该问题提供了好的方案。本文将为大家详细介绍 WebP 技术，同时也会分享该技术在 MIP 项目)中的实践。 WebP 是由 Go…

前端性能优化之图片篇

前端性能优化，不止于前端。

javascript性能优化技巧 – 缓存与函数重载实战

所谓缓存，通俗点讲就是把已经做过的事情结果先暂时存起来，下次再做同样的事情，不用再重新去做，只要把之前的存的结果拿出来用即可，很明显大大提升了效率。他的应用场景非常广泛。如： 1、缓存ajax结果，大多数网站都会有产品推荐功能，比如按热销推荐，简单低效的做法，每次点击切换的时候…

服务端渲染 vs 客户端渲染

服务端渲染，客户端渲染，同构

鸟瞰前端 , 再论性能优化

1.0时代没什么说的，html、css打天下的时代，那个时候你会用js开发个计算器就牛逼到不行。2.0时代是最好的时代，新技术、新思想蓬勃发展，堪称前端的工业革命，前端人员的地位得到了充分认可，门槛也有一定的提升。前端性能优化的涉及点从服务器到协议再到宿主环境本身都要有比较深刻…

[[译] 网络现状：性能提升指南](https://juejin.im/entry/59c4b…

互联网正在爆发式地增长，我们创建的 Web 平台也是如此。我们通常都没有考虑到用户网络的连通性和使用情景。即使是万维网现状的一瞥，也可以看出我们还没有建立起同理心和对形势变化的认知，更不用说对性能的考虑了。地球上 74 亿人口中，只有 46% 的人能够上网，平均网络速度为 7…