前端性能优化

补充元象二面

防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。
Redstone Monstrosity·2024-09-16 05:46

前端性能优化

要做性能优化，首先我们得知道用户从开始访问站点到看结果的这一段时间到底后花在了哪些地方。这就设计到一个经典问题。在游览器输入地址按下回车键之后到用户看到结果经历了哪些过程，这里简单说一下大的几个过程。（假设是输入的一个域名而非IP）1.通过DNS解析获得网址的对应IP地址2.浏览器拿到IP地址与远程web服务器通过TCP三次握手协商来建立一个TCP/IP连接3.浏览器通过HTTP接发送请求4.服务
EdmundChen·2024-09-15 00:16

vue前端性能优化之cdn的使用

优化原因项目中首页加载过慢，原因是js,css静态资源第一次加载的时间长vue.config.js'usestrict'......constcdn={js_cdn:['https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js','https://unpkg.com/[email protected]/dist/vue.js','https://unpkg
不cong明的亚子·2024-09-12 11:36

前端性能优化-CSS性能优化

文章目录一、内联首屏关键CSS二、异步加载CSS异步加载的几种方式1.js动态创建样式表link元素，并插入到DOM中。2.设置media属性3.设置rel属性4.rel="preload"三、文件压缩四、去除无用CSS五、有选择地使用选择器六、减少使用昂贵的属性七、优化重排与重绘1.减少重排2.避免不必要的重绘八、让元素及其内容尽可能独立于文档树的其余部分九、避免使用@import十、开启GPU
LYFlied·2024-08-31 16:46

浏览器缓存机制

浏览器缓存机制是前端性能优化中至关重要的一环，它通过缓存之前请求过的文件，以提高页面再次访问时的加载速度。一、浏览器缓存的作用减少数据传输：缓存减少了不必要的数据传输，节省了带宽。
开发小途·2024-08-28 02:40

前端性能优化(三)——浏览器九大缓存方法

4、cookiecookie指的就是会话跟踪技术。一般指网站为了辨别用户身份，进行session跟踪而而存储在用户本地终端上的数据，cookie一般通过http请求头发送到服务器。cookie主要特点有：跨域限制，同一个域名下可多个网页内使用。cookie可以设置有效期，超出有效期自动清除。cookie存储大小在4K以内。cookie的存储不能超过50个cookie。只能存储字符串类型。cooki
2401_84097658·2024-08-27 19:54

面试前端性能优化八股文十问十答第二期

面试前端性能优化八股文十问十答第二期作者：程序员小白条，个人博客相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！⭐点赞⭐收藏⭐不迷路！⭐1）如何优化动画？
程序员小白条·2024-02-23 21:41

面试前端性能优化八股文十问十答第一期

面试前端性能优化八股文十问十答第一期作者：程序员小白条，个人博客相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！⭐点赞⭐收藏⭐不迷路！
程序员小白条·2024-02-23 20:10

前端性能优化笔记1 第一章

1.HelloWorldHelloWorldwindow.LOAD_DATA=(data)=>{const{title,url}=datadocument.body.innerHTML=`${title}`}consttag=document.createElement('script')tag.src='https://cdn.jsdelivr.net/gh/xcodebuild/perfdem
沿着路走到底·2024-02-20 21:36

前端工程化面试题 | 07.精选前端工程化高频面试题

前端性能优化是
ai_todo·2024-02-14 16:19

前端性能优化 - Gzip压缩

什么是Gzip压缩？gzip是GNUzip的缩写，是一种文件的压缩格式（也可以说是若干种文件压缩程序），类似的压缩格式还有compress，deflate等。web上使用gzip编码格式传输有几个要点：浏览器和服务器都需要支持gzip编码采用LZ77算法与Huffman编码来压缩文件，是一种无损压缩算法压缩比率在3-10倍左右（纯文本），可以大大节省服务器的网络带宽是否前端所有资源都需要Gzip压
·2024-02-12 10:36

2021-10-04 前端性能优化方法

文章目录前言1、GZIP1.1、使用步骤2、CDN2.1、使用步骤3、缓存3.1、使用步骤4.组件4.1、注意事项5.其它5.1、减少HTTP请求5.2、懒加载总结前言随着代码数量越来越多，如何加快项目浏览器中的运行速度，减少用户的等待时间便成为了很重要的一个方面，以下是我经过实践后的几个方法1、GZIPGZIP可以对文件进行压缩，压缩比例到3到10左右，是很实用的压缩方法1.1、使用步骤因为我们
weixin_43160044·2024-02-11 20:40

前端性能优化：提升网站加载速度的终极指南

目录一、引言二、问题分析三、优化方案1.减少HTTP请求次数：方法一：合并文件方法二：CSSSprites方法三：使用CSS和JavaScript工具2.使用CDN加速：方法：示例：引入CDN提供的jQuery库：引入CDN提供的BootstrapCSS文件：引入CDN提供的FontAwesome图标库：图片资源使用CDN加速：3.设置缓存策略：通过设置合适的缓存方法：示例：使用Cache-Con
喔的嘛呀·2024-02-10 05:14

next项目页面性能调优

扩展参考链接：前端性能优化24条建议Webpack4进阶–从前的日色变得慢，一下午只够打一次包Webpack分包优化首屏加载参考指标FCP（FirstContentfulPaint）：首次内容绘制时间，
sasaraku.·2024-02-08 07:22

前端性能优化

一、速度为什么很重要？1.效果关乎留存用户BBC发现其网站的加载速度每增加一秒，就会额外损失10%的用户。2.效果关乎转化次数的增加速度较快的网站可以提高转化率并改善业务成果。3.性能关乎用户体验对网页加载速度延迟的压力反应类似于观看恐怖电影或解决数学问题，并且比在零售店排队等候的压力更大。二、HTML性能的一般注意事项该HTML的初始请求需要经历多个步骤，每一步都需要一些时间。减少在每个步骤上花
润清·2024-02-08 07:08

前端性能优化 - 首屏渲染优化实现及其必要性

前端性能优化，不得不提的就是这个首屏渲染优化首屏渲染优化其实更具体点，应该是：首次加载首屏渲染优化，原因是某些应用，比如微信有缓存机制，首次加载了，第二次进入都会先加载本地缓存。
叶叶叶同学·2024-02-05 14:26

前端开发中性能优化的常用方法

前端性能优化是在网页加载速度、页面渲染速度、交互响应速度等方面进行改进，以提升用户体验和网站的整体性能。
Itmastergo·2024-02-02 14:32

1个月uni-app微信小程序开发上线实战专栏介绍

作者介绍：国服第二切图仔——资深前端开发工程师，具有六年以上的前端开发经验，曾在多家知名企业任职，CSDN、阿里云、华为云等平台优质创作者，擅长前端性能优化，前端复杂交互逻辑处理，精通网页开发、后台管理系统
国服第二切图仔·2024-01-31 13:11

关于前端性能优化的一些总结

前端性能优化的目的:从用户角度而言:优化能够让页面加载得更快、对用户的操作响应的更及时，能够给用户提供更为良好的体验。
轨迹·2024-01-30 21:23

提升用户体验的艺术：前端性能优化详解

因此，前端性能优化不仅是技术挑战，更是商业需求。本文将深入探讨前端性能的重要性，介绍提高性能的策略，并通过案例分析展示这些策略的实际应用效果。
tester Jeffky·2024-01-28 22:18

SpringMVC:企业级解读（二）

的开发效率和代码质量九.构建卓越用户体验：Themes与UI组件集成1.主题与CSS预处理器1.1定义主题1.2动态切换主题2.与前端UI组件库集成2.1选择合适的UI组件库2.2主题定制与样式覆盖3.前端性能优化
星光闪闪k·2024-01-28 14:19

记2018前端面试之旅

面试一日期：20180420前端性能优化？
weixin_33896069·2024-01-26 10:27

JavaScript中的数据缓存与内存泄露：解密前端性能优化与代码健康

个人主页：前端青山系列专栏：JavaScript篇人终将被年少不可得之物困其一生依旧青山,本期给大家带来JavaScript篇专栏内容:JavaScript-数据缓存与内存泄露目录说说你对事件循环的理解一、是什么二、宏任务与微任务微任务宏任务三、async与awaitasyncawait四、流程分析说说JavaScript中内存泄漏的几种情况？一、是什么二、垃圾回收机制标记清除引用计数小结三、常见
前端青山·2024-01-23 05:12

Web前端性能优化-综合篇

chrome开发者工具使用performance性能监控rendering>ftpmeter动画性能监控，60fps正常，越高越好合并与压缩合并：把css、js分别合并为一个文件，减少http请求压缩：把html、css、js的空格注释去掉，减少请求大小图片优化减少请求大小、数量，优化加载速度jpg：压缩率高，大部分不需要透明图片的场景png：支持透明，大部分需要透明图片的场景webp：压缩成度更
visitor009·2024-01-22 09:38

前端性能优化 之 首屏预渲染

本文介绍一种优化首屏访问速度的技术：前端预渲染，并封装自定义的Reacthook，解决预渲染中的数据初始化问题。一、首屏速度慢的问题如果网站页面首屏访问比较慢，应该怎么优化呢？这要结合实际情况，有非常多的手段可以提升首屏访问速度，今天我们来聊一聊其中一种技术：前端预渲染。先上效果图image.pngimage.png上面是一个前端刷题网站：灵题库（https://www.lingtiku.com，
刷题刷到手抽筋·2024-01-21 23:55

前端笔试题（三）

1.常见的前端性能优化的方式分五大模块：加载优化，执行优化，渲染优化，脚本优化、代码优化分五大模块加载优化减少HTTP请求、缓存资源、压缩代码、无阻塞、首屏加载、按需加载、预加载、压缩图像、减少Cookie
哎亚亚哎亚亚·2024-01-21 06:35

前端性能优化——图片篇

选择合适的图片格式JPEGJPEG是由JointPhotographicExpertsGroup所开发出的一种图片。它最大的特点是有损压缩。这种高效的压缩算法使它成为了一种非常轻巧的图片格式。另一方面，即使被称为“有损”压缩，JPG的压缩方式仍然是一种高质量的压缩方式：当我们把图片体积压缩至原有体积的50%以下时，JPG仍然可以保持住60%的品质。此外，JPG格式以24位存储单个图，可以呈现多达1
安之素年·2024-01-21 03:35

前端性能优化1-从输入url到页面展现发生了什么

从输入url到页面展现发生了什么DNS其实也是一个网络协议DNS有个递归查询的逻辑，TCPHTTP/SSL有序到达响应解析（SPA，SSR）浏览器渲染howbrowserworksurl=>dns获取ip=>建立tcp=>发起http=>解析响应=>浏览器的渲染ip寻址之上有两个很重要的协议TCP（可靠协议，三次握手，四次挥手，慢启动，滑动窗口协议，确保每个包都有序的传过去，不容易丢包，有重复策略
瘾_95f1·2024-01-17 02:23

前端性能优化

前端性能优化可以从以下几个方面来看:一、打包体积方面:—体积小可以减少网络传输时间vite:https://www.duidaima.com/Group/Topic/Vue/12079https://blog.csdn.net
和科比合砍81分·2024-01-16 04:58

【前端性能优化】如何取消http请求

文章目录需要取消http请求的3种经典场景原生XMLHttpRequest取消http请求fetch取消http请求axios取消http请求哪些情况需要取消HTTP请求取消http请求能带来哪些性能提升需要取消http请求的3种经典场景场景一：有一个实时搜索功能，每当用户输入内容改变的时候，就会去调用一个接口，返回搜索结果数据，如果第二次响应的速度可能会比第一次快，页面的内容先变成第二次的内容，
全栈弄潮儿²⁰²⁴·2024-01-15 05:42

CSR、SSR、NSR、ESR傻傻分不清楚，一文帮你理清前端渲染方案！

关于前端性能优化有非常多的最佳实践可以参考，这篇文章会重点介绍前端渲染的方案及其优劣。02CSRv
小生方勤·2024-01-13 06:20

前端性能优化：Add Expires headers

前端性能优化：AddExpiresheadersExpiresheaders是什么？Expiresheaders：直接翻译是过期头。
weixin_30376453·2024-01-13 01:57

前端性能优化之数据存取，存储以及缓存技术

无论是哪种计算机语言，说到底它们都是对数据的存取与处理。若能在处理数据前，更快地读取数据，那么必然会对程序执行性能产生积极的作用。一般而言，js的数据存取有4种方式。直接字面量:字面量不存储在特定位置也不需要索引，仅仅代表自身。它们包括布尔值，数字，字符串，对象，数组，函数，null，undefined以及正则表达式。变量:通过关键字const/let/var定义的数据存储单元。数组元素:存储在数
hzulwy·2024-01-11 08:47

前端性能优化的方式

原则：多使用内存、缓存或其他方法减少CPU计算量，减少网络加载耗时（适用于所有编程的性能优化-空间换时间）从何入手：让加载更快，让渲染更快「让加载更快」1.减少资源体积：压缩代码：webpack配置mode:'production'图片压缩2.减少访问次数：合并代码：js文件css文件图片（雪碧图）SSR：服务端渲染：将网页和数据一起加载，一起渲染如早先的JSPASPPHP,现在的vueReact
loushumei·2024-01-11 02:40

什么是防抖和节流，如何实现防抖和节流【有例子】

节流（Throttling）和防抖（Debouncing）都是用于控制函数调用频率的前端性能优化技术。
K I N G·2024-01-09 17:20

前端必看：前端性能优化之Gzip压缩

什么是Gzip压缩？gzip是GNUzip的缩写，是一种文件的压缩格式（也可以说是若干种文件压缩程序），类似的压缩格式还有compress，deflate等。web上使用gzip编码格式传输有几个要点：浏览器和服务器都需要支持gzip编码采用LZ77算法与Huffman编码来压缩文件，是一种无损压缩算法压缩比率在3-10倍左右（纯文本），可以大大节省服务器的网络带宽是否前端所有资源都需要Gzip压
雾岛听风来·2024-01-08 18:55

前端性能优化之图像优化

图像优化问题主要可以分为两方面：图像的选取和使用，图像的加载和显示。图像基础HTTPArchive上的数据显示，网站传输的数据中，60%的资源都是由各种图像文件组成的，当然这些是将各类型网站平均的结果，单独只看电商类网站，这个比例可能会更大，如此之大的资源占比，同样意味着有很大的优化空间。图像是否必需图像资源优化的根本思想：压缩。无论是选取何种图像的文件格式，还是针对于同一种格式压缩至更小的尺寸，
hzulwy·2024-01-08 12:12

前端性能优化不完全手册 【已更新至React、原生JS懒加载和Nginx负载均衡】

性能优化是一门大学问，本文仅对个人一些积累知识的阐述，欢迎下面补充。抛出一个问题，从输入url地址栏到所有内容显示到界面上做了哪些事？1.浏览器向DNS服务器请求解析该URL中的域名所对应的IP地址;2.建立TCP连接（三次握手）;3.浏览器发出读取文件(URL中域名后面部分对应的文件)的HTTP请求，该请求报文作为TCP三次握手的第三个报文的数据发送给服务器;4.服务器对浏览器请求作出响应，并把
weixin_34309543·2024-01-08 03:55

8000字前端性能优化技巧总结！（全面）

性能优化是一门大学问，本文仅对个人一些积累知识的阐述，欢迎下面补充。抛出一个问题，从输入url地址栏到所有内容显示到界面上做了哪些事？1.浏览器向DNS服务器请求解析该URL中的域名所对应的IP地址;2.建立TCP连接（三次握手）;3.浏览器发出读取文件(URL中域名后面部分对应的文件)的HTTP请求，该请求报文作为TCP三次握手的第三个报文的数据发送给服务器;4.服务器对浏览器请求作出响应，并把
SHERlocked93·2024-01-08 03:24

8000字总结的前端性能优化

性能优化是一门大学问，本文仅对个人一些积累知识的阐述，欢迎下面补充。抛出一个问题，从输入url地址栏到所有内容显示到界面上做了哪些事？1.浏览器向DNS服务器请求解析该URL中的域名所对应的IP地址;2.建立TCP连接（三次握手）;3.浏览器发出读取文件(URL中域名后面部分对应的文件)的HTTP请求，该请求报文作为TCP三次握手的第三个报文的数据发送给服务器;4.服务器对浏览器请求作出响应，并把
YvetteLau·2024-01-08 03:53

前端性能优化小结

优化优化的目的是提升用户体验，减少网页加载时间。我们可以依据雅虎军规来对项目进行优化。关于DOM减少DOM元素的数量，不要嵌套太深，正常页面的DOM元素数量一般不应该超过1000。尽量少用iframe。避免空的src和href。用智能的事件处理器（事件委托）。DOM的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。不要一条条地改变样式，而要通过改变class，一次性地
tiancai啊呆·2024-01-08 01:46

测开必备，推荐几款前端性能测试工具、神器

其中有些工具还会检查资源是否被缓存，多个CSS或JS文件是否值得合并，最后自动给出前端性能优化改进建议报
测试开发技术·2024-01-07 22:45

前端性能优化感想

1、利用v-if和v-show减少初始化渲染和切换渲染的性能开销2、computed、watch、methods区分使用场景3、提前处理好数据解决v-if和v-for必须同级的问题4、给v-for循环项加上key提高diff计算速度5、利用v-once处理只会渲染一次的元素或组件6、利用Object.freeze()冻结不需要响应式变化的数据7、提前过滤掉非必须数据，优化data选项中的数据结构8
美旭_2e39·2024-01-07 20:48

前端性能优化-加载优化

前端性能优化-加载优化1.资源加载优先级在浏览器发起网络请求时，并非每个字节都具有相同的优先级，所以，浏览器通常会对所要加载的内容进行推测，将相对重要的信息先呈现给用户。
渔老师·2024-01-07 18:21

前端性能优化的方法

本文将详细介绍前端性能优化的七大手段，包括减少请求数量、减小资源大小、优化网络连接、优化资源加载、减少重绘回流、使用性能更好的API和构建优化减少请求数量【合并】如果不进行文件合并，有如下3个隐患1、文件与文件之间有插入的上行请求
万般皆是你·2024-01-07 18:50

前端性能优化简述

性能的影响大部分网站体现的价值都无外乎信息的载体、交互的工具或商品流通的渠道，这就要求它们需要与更多的用户建立关系，同时还要保持所建立的联系拥有绵延不绝的用户粘性，所以网站就不能只关注自我表达，而不顾及用户是否喜欢。用户的留存我们都希望用户访问网站所进行的交互，对网站构建的内容来说是有意义的，比如，电商网站希望用户浏览并购买商品，社交网站希望用户之间进行互动，视频网站希望用户观看视频，而这些希望都
hzulwy·2024-01-05 22:27

综合面试总结

文章目录html和css相关JavaScript相关浏览器网络相关vue相关react移动端相关插件及工具相关前端性能优化原生通讯算法相关node相关**新生代****老生代****标记清楚算法的问题*
37.22℃·2024-01-05 15:46

商智C店H5性能优化实战

一、性能优化概览从宏观方面讲，前端性能优化主要包含两个层面：•快速的首屏响应指的是从用户输入URL到页面完整渲染出
京东云技术团队·2024-01-05 11:12

Web前端性能优化：提升用户体验的关键

引言：随着互联网的迅速发展，用户对于网页加载速度的要求越来越高。一个快速、高效的网站不仅可以提高用户的满意度，还能增加网站的访问量和转化率。因此，对Web前端性能进行测试和优化变得尤为重要。本文将介绍一些常见的Web前端性能测试方法和优化技巧，帮助开发者提升网站的加载速度和用户体验。一、Web前端性能测试方法页面加载时间测试：通过使用专业的性能测试工具，如GooglePageSpeedInsigh
tester Jeffky·2024-01-03 20:47

JS图片懒加载——前端性能优化

js懒加载：简单粗暴实现方法意义懒加载（LazyLoad）是前端优化的一种有效方式，能极大的提升用户体验，图片加载是其重点，如果加载图片过多将大大增http请求次数或大小，然而更多时候用户并不会浏览到全部加载进来的图片，这种代价是非常不值得的，所以当用户浏览到当前视口时再去加载相应的图片无疑是两全其美的选择原理：只有img标签中的src写入了图片的地址，加载页面时才会请求图片，所以使用懒加载时在s
Aven丶·2024-01-02 06:08
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他