前言页面的性能优化对于前端来说永远是离不开的课题，前端性能优化一直也不是作为一个单独的问题存在，它往往需要开发者结合计算机网络、浏览器相关技术、前端框架、构建工具以及开发者自己的代码等多层面去思考优化的方案，所以前端性能不应该是前端领域的一个孤岛⛱️，而需要作为串联起前端技术的零件🔩。如何去进行性能优化？一说到前端性能优化，可能大家一开始的想法就是压缩页面产
......
50
0
0
2024-10-30
引言Web 网站性能优化在社区中已经是老生常谈的话题了，社区内有非常多优秀的文章和大家分享关于 Css、Js 等静态资源的极限压缩、预加载以及拆包等等优化手段。可是，大多数 Web 应用站点的性能瓶颈除了静态资源的加载外通常存在大量的数据交互请求。要想我们的 Web 站点拥有良好的用户体验，除了静态资源的优化外，对于数据交互方面的优化也一定是必不可少。今天这
......
157
0
0
2024-08-21
前面我们讲了很多前端应用内部的性能优化，实际上除了前端自身，我们还可结合容纳 Web 页面本身的客户端一起做优化。首先，本文中提到的容器，基本上都是指 Web 页面的宿主，比如浏览器、APP 客户端、小程序，它们提供了 WebView 环境来运行 Web 应用。容器性能优化由于 Web 应用本身只运行在 WebView 中，而 WebView 的能力又依赖于
......
269
0
0
2024-04-23
如果页面中存在耗时较长的计算任务，那么卡顿也是需要关注的一个性能优化点。前面我有给大家整体地讲过《前端性能优化--归纳篇》，其实里面已经囊括了大多数场景下的一些性能优化的方向。当我们开始讨论卡顿时，往往意味着页面中有较大的逻辑运算，该计算任务耗时太长，阻塞了浏览器的主线程，导致用户的一些操作无法及时响应。因此，我们今天卡顿优化的重点在于如何优化耗时较长的计算
......
251
0
0
2024-04-21
对于内容复杂和变更频繁的前端应用，页面渲染也常常是性能优化的核心场景。前面我有给大家整体地讲过《前端性能优化--方案归纳篇》，其实里面已经囊括了大多数场景下的一些性能优化的方向。关于加载流程相关的优化，也有在《前端性能优化--加载流程篇》一文中进行详细的介绍。本文主要围绕页面渲染相关的内容，来进行性能优化分析。首屏渲染说到页面渲染，首屏的渲染显然是最首要的。
......
210
0
0
2024-04-15
对于前端应用的性能优化，大多数时候我们都是从加载流程开始优化起。前面我有给大家整体地讲过《前端性能优化--归纳篇》，其实里面已经囊括了大多数场景下的一些性能优化的方向。越是交互复杂、用户量大的业务，对性能的要求就越是严格。大多数的前端性能优化，都是从页面的启动和加载流程开始梳理和定位，对于功能复杂的业务来说，这样的梳理尤为重要。注意：前面说过性能优化分为时间
......
226
0
0
2024-04-09
对于网站来说，一个良好的页面性能能够有效的提升用户体验、增加用户留存率，并对网站的SEO排名和转化率带来积极的作用。而前端性能监控则可以帮助我们实时监测和分析页面加载速度、交互性和视觉稳定性等指标，通过定位和解决性能问题，进一步提升页面的加载速度和用户体验。而前端性能监控可以收集页面加载次数、完全加载耗时、慢加载占比、JS 错误次数等关键指标数据。这些数据可
......
263
0
0
2024-02-05
不论是什么样的前端面试，总会问到的一个问题：前端性能优化。相信如果这个问题没有答好，在面试中会很被动。于是，趁着这个天天宅的时期，好好的整理了一番。Start~一、HTML优化渲染顺序1、CSS样式表置于头部，CSS会一边加载一边渲染2、JS脚本置于尾部，JS在未加载完成之前，会阻塞渲染3、使用外部的样式表和脚本，优先加载出HTML结构4、关键JS、CSS代
......
341
0
0
2023-01-08
性能检测概述网站应用的实际性能表现通常是高度可变的，因为它会受到许多因素的影响，比如用户使用的设备状况、当前网络的连接速度等，因此若想通过性能检测来得到较为客观的优化指导，就不能仅依赖一次检测的数据，而需要在不同环境下收集尽量多的数据，然后以此来进行性能分析。若想通过检测来进行有效的性能优化改进，就需要从尽可能多的角度对网站性能表现进行考量，同时保证检测环境
......
528
0
0
2022-12-30
01减少http请求，使用 HTTP2 ：HTTP1.1 如果要同时发起多个请求，就得建立多个 TCP 连接，因为一个 TCP 连接同时只能处理一个 HTTP1.1 的请求。在 HTTP2 上，多个请求可以共用一个 TCP 连接，这称为多路复用。同一个请求和响应用一个流来表示，并有唯一的流 ID 来标识。多个请求和响应在 TCP 连接中可以乱序发送，到达目的
......
369
0
0
2022-12-10
Chrome 浏览器有意改变<link rel="stylesheet">的加载方式，当其出现在<body>中时，这一变化将更加明显。笔者决定在本文中进行详细说明这种改变可能带来影响与好处。一.目前CSS文件的加载方式<head>
<link rel="stylesheet" href="/all-of-my-st
......
428
0
0
2022-09-27
您希望加快网页的加载速度吗？了解如何通过缩短加载时间来改善拨号上网用户的浏览体验，在某些情形下，加载时间最多可缩短 80%。下面介绍二十五中网速方法和技巧。一、使用良好的结构可扩展 HTML (XHTML) 具有许多优势，但是其缺点也很明显。XHTML 可能使您的页面更加符合标准，但是它大量使用标记（强制性的 <start> 和 <end&
......
410
0
0
2022-07-08
内容来源：2017年5月13日，徐辛承在“H5梦工厂”进行《前端开发配置化方案》演讲分享。IT大咖说作为独家视频合作方，经主办方和讲者审阅授权发布。阅读字数：2017 | 9分钟阅读摘要前端开发的主要职能就是把网站的界面更好地呈现给用户，它涵盖的知识面非常广，既有具体的技术，又有抽象的理念。百度外卖高级前端工程师徐辛承，为我们带来关于百度外卖前端开发配置化方
......
444
0
0
2022-06-05
原文转载自：https://juejin.im/post/59e481b6f265da431522f6d1众所周知，JS的加载和执行会阻塞浏览器渲染，所以目前业界普遍推荐把script放到之前，以解决js执行时找不到dom等问题。但随着现代浏览器的普及，浏览器为我们提供了更多强大的武器，合理利用，方可大幅提高页面加载速度。理解渲染过程（HTML Parser
......
419
0
0
2022-05-04