前端性能优化

前端性能优化

对于前端的性能优化，主要有分为加载优化和性能优化。在Google官方文档中，给出了性能优化有哪些好处。前端优化的最终目的都是提升用户体验，改善页面性能。另外，对于移动端和PC端的优化则有不同之处。这里我们主要介绍PC端的优化。雅虎23条军规http://yslow.org/在前端技术早期，雅虎提出了优化技巧，虽然部分已经过时，但是仍然具有参考意义。加载优化（网络加载类）1.减少HTTP资源请求次数
IsaacHHH·2021-06-25 04:15

前端性能优化

针对《高性能网站建设指南》的阅读总结：一、减少HTTP请求1.图片地图：将多个图片请求url合并为在一个图片上关联多个URL。在导航栏或其他超链接中使用图片地图是加速页面的最简单方法。缺点：用手工方式难以准确的定义图片地图的区域坐标而且除了矩形无法定义其他形状。2.CSSSprites（css雪碧图）将多个图片合并为一张单独的图片3.内联图片通过使用data：URL模式可以在Web页面中包含图片，
jinjin2018·2021-06-24 22:40

vue 前端性能优化总结

思维导图1438361582-5cdb82bdb6ce8.png一.npmrunbuild缩小打包的体积首先来看我未作任何处理的一个打包微信截图_20210308113609.png微信截图_20210308113634.png这个包很大，里面有很多文件。你会发现里面有很多.map结尾的文件，占据了非常大的空间，下面我们一步一步来：1.productionSourceMapType:boolean
来了啊小老弟·2021-06-24 17:11

前端性能优化（五）：网络与HTTP/2

Front-EndPerformanceChecklist2021[1]https://www.smashingmagazine....前端性能优化（一）：准备工作[2]前端性能优化（二）：资源优化[3
·2021-06-23 02:55

前端性能优化（四）：传输优化

Front-EndPerformanceChecklist2021[1]https://www.smashingmagazine....前端性能优化（一）：准备工作[2]前端性能优化（二）：资源优化[3
·2021-06-23 02:24

【前端性能优化】之接口请求优化

背景今年我在做一个有关商户的app，这是一个包含商户从入网到审核、从驳回提交到入网维护的完整的生命周期线下推广人员使用的客户端软件，但故事并没有这么简单。。。疑问随着app的逐渐完善，遇到的问题也渐渐多了起来，界面加载过久，初始化页面请求次数过多等各种各样的小毛病开始凸显了出来。于是我开始了优化之路，第一步便是从api请求入手，仔细查看了每个api返回的内容，一直奇怪为什么接口总是返回很多的数据回
小小慧house·2021-06-20 15:11

8个方向做好前端性能优化

一、webpack方向webpack优化其实可以归为HTTP层面的优化（网络层面）。因为HTTP这一层的优化两大方向就是：减少请求次数和缩短单次请求所花费的时间。而这两个优化点的手段就是“资源的合并与压缩”，正是我们每天用构建工具在做的事情，webpack无疑是最主流的。webpack的优化主要是两个主题：构建过程时间太长和打包的文件体积太大。（1）构建过程时间太长这个问题，因为不涉及产品体验层面
老陈要上天·2021-06-20 14:35

JS防抖和节流

防抖和节流是前端性能优化中经常提及的点，下面来做个简单介绍和实现方式。
·2021-06-19 18:17

前端性能优化之js性能问题定位

nodejs接口性能优化v8-profilerapi分析需要在接口中添加nodeprofileapiab压测产生xxxx.cpuprofileab-c20-n2000"http://xxxxx"chromedevtool分析*使用chart，可视化查看峰值所在，着重分析js代码*使用Tree形式，根据totalTime倒序，查看各自代码耗时selftime火焰图分析安装npmiflamegraph
前端漫谈·2021-06-19 18:39

JS防抖和节流

防抖和节流是前端性能优化中经常提及的点，下面来做个简单介绍和实现方式。
·2021-06-19 18:35

前端性能优化实践

目录页面内容减少HTTP请求数减少DNS查询缓存Ajax请求延迟加载预先加载减少DOM元素数量划分内容到不同域名尽量减少iframe使用页面内容减少HTTP请求数Web前端80%的响应时间花在图片、样式、脚本等资源下载上。浏览器对每个域名的连接数是有限制的，减少请求次数是缩短响应时间的关键。合并JavaScript、CSS等文件；服务器端（CDN）自动合并基于Node.js的文件合并工具一抓一大把
liutianou·2021-06-18 23:07

81.vue前端性能优化实践

前提：vue-cli3.0，pc端项目，首屏加载时间较长问题：影响首屏时间长的主要问题：大文件的加载长，导致首屏加载的时间长解决思路：减少非必须大文件的加载；因为浏览器可以并行加载文件，大文件可以分割为小文件加载；一、问题定位：首先通过谷歌浏览器调试去发现导致首屏加载时间较长的原因：bbdc07fc51a259998f8be8fc549e80a.pngc87ab7c49ddc5e3093fc9b9
yaoyao妖妖·2021-06-15 08:29

前端性能优化原理与实践（一）

摘自前端性能优化原理与实践网络层面的性能优化我们从输入URL到显示页面这个过程中，涉及到网络层面的，有三个主要过程：DNS解析TCP连接HTTP请求/响应对于DNS解析和TCP连接两个步骤，我们前端可以做的努力非常有限
小小的白菜·2021-06-15 08:18

推酷《编程狂人》第一六零期

高效的JavaScript2017前端性能优化清单使用vue.js构建一个知乎日报小而合理的前端理论：rscss和rsjs2017年React、Angular和Vue的动态移动开发微信小程序实战VueCircleMenu
推酷·2021-06-14 15:57

前端面试题

2.前端性能优化。请求数量：合并脚本和样式表，CSSSprites，拆分初始化负载，划分主域。请求带宽：开启GZip，精简
April_hzy·2021-06-14 07:38

第七周-前端性能优化（一）

如何进行网站性能优化？收集的前端面试题和答案Yahoo,Google加载性能优化图片不同格式的特点：png,jpg,gif,webpwebp：ex.***/220?tp=webp220为图片尺寸初始base64格式图片，如果浏览器能够识别，则浏览器支持webp格式，请求时会加上?tp=webp参数，否则返回jpg,png...生成webp的格式过程中，首先会返回jpg，等生成完则返回webp格式H
seeddyan·2021-06-14 01:28

Web前端入门到实战：Web前端性能优化指南

前端需要性能优化么？性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明，网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为，提升你的网站性能，就是提升你的业务数据（甚至是业务收入）。性能优化广义上包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、降低资源成本以及提高稳定性上。相较于后端，前端的性能优化会更直接与用户的体验挂钩。从用户体验侧来说，前端
木箫箫·2021-06-13 14:54

前端性能优化

首先是代码,从习惯做起：1.优化循环这里每次循环开始前都需要判断i是否小于data.length，JavaScript并不会对data.length进行缓存for(vari=0;i
小伙儿_0c3c·2021-06-13 00:01

前端性能优化常见方式

1.资源的合并与压缩原理：减少http请求，减小请求资源的大小方式：html，css，js压缩，文件的合并，gzip压缩压缩工具;在线压缩，html-minifier，后端模板引擎渲染压缩，css-clean，uglifyjs2，百度fis注意：文件合并存在缺点，首屏渲染问题，缓存失效问题（比如合并的源文件有一个改了，整个要重新请求）文件合并压缩原理图2.图片的优化jpg有损压缩，压缩率高，不支持
luckyQAQ·2021-06-12 08:09

第136天：Web前端面试题总结（理论）

TCP的3次握手c.建立TCP连接后发起http请求d.服务器端响应http请求，浏览器得到html代码e.浏览器解析html代码，并请求html代码中的资源f.浏览器对页面进行渲染呈现给用户2、谈谈你对前端性能优化的理解
慕尚花开·2021-06-11 23:15

前端性能优化

一、网络请求方面在网络加载资源方面，相较于app前端页面占劣势，因为很多css、js、img等等要请求获取，而app的文件在打包的时候已经放进安装包了，不需要重新请求。但是呢，事物都有两面性，重新请求未必全不好，打包静态文件也不一定全好，我们应该从两面性看待问题。前端页面会进行网络资源请求，意味着加载慢、渲染慢，但同时意味着界面可控性更强，例如想改什么样式，只需要修改对应的css网络资源就好，而a
哭不是罪·2021-06-11 20:20

前端性能优化测试工具 之 lighthouse

通过Lighthouse分析web应用程序和web页面，收集关于开发人员最佳实践的现代性能指标和见解，让开发人员根据生成的评估页面，来进行网站优化和完善，提高用户体验。一、下载全局安装npminstall-glighthouse二、使用创建一个文件（用于存放生成的报告文件），然后进入到文件运行命令，后面的地址是需要检测的网址lighthousehttps://www.yubo365.cn图示然后静
素时年锦·2021-06-10 12:36

前端性能优化方案

1.请求和响应缓存控制请求头里，可以发送If-Modified-Since以及If-None-Match等信息，来询问服务端请求内容是否有更新，如果没有更新，可返回304，告诉浏览器使用缓存，避免重新下载资源。Pragma和Cache-Control等也能控制缓存。如告诉服务端不要缓存等。响应头里，Expires可以告诉浏览器过期时间，Last-Modified最近更新时间，ETag则可允许浏览器
单纯的土豆·2021-06-09 07:56

一文串联 HTTP、TCP、IP、以太网

最近部门组织了一次前端性能优化交流会，大家从输入页面URL到最终页面展示内容这个过程提出了许多优化点。
孟思行·2021-06-04 18:18

性能优化

总结一下常用的前端性能优化的方法，希望对大家有些帮助~。
lixingyang-lxy·2021-05-28 15:42

关于前端性能优化问题，认识网页加载过程和防抖节流

前端性能优化—网页加载过程、性能优化方法、防抖和节流一、网页加载过程1、加载资源的形式2、加载资源的过程3、渲染页面的过程4、关于window.onload和DOMContentLoaded二、性能优化
星期一研究室·2021-05-23 20:34

详解浏览器的缓存机制

前言浏览器缓存是前端性能优化的重要一环，对于前端效率提升的重要性，不言而喻。
·2021-05-22 12:42

前端性能优化

前端性能优化，无非是html,css,js三方面的优化。
国之大殇·2021-05-18 19:03

前端性能优化

性能优化性能优化原则多使用内存、缓存或者其他方法减少CPU计算量、减少网络加载耗时（适用于所有编程性能优化、空间换时间）从哪些方面入手加载更快减少资源体积：压缩代码减少访问次数：合并代码（js、css、雪碧图）、ssr服务端渲染（数据一起给前端）、缓存使用更快的网络：CDN（根据地域做静态文件访问服务）渲染更快css放进head中，js放到body最下面尽早执行js，用DOMContentLoad
Smile沛沛·2021-05-18 17:19

前端面试每日 3+1 —— 第35天

[软技能]谈一谈你知道的前端性能优化方案有哪些？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让
浪子神剑·2021-05-17 11:13

移动前端性能优化

本文摘录我所接触过的前端性能优化，纯手打，欢迎补充注：因为每个知识点要细说都需要长篇大论，所以此处只作归纳概括，详情请自行查阅1.利用各种缓存&储存a.html5ApplicationCache可用在更新不频繁的模块或页面上使用缺点
_MEmeNTO_·2021-05-12 03:10

前端面试之前端性能优化

不论是什么样的前端面试，总会问到的一个问题：前端性能优化。相信如果这个问题没有答好，在面试中会很被动。于是，趁着五一假期天天宅的时期，好好的整理了一番。
hugo233·2021-05-10 21:47

前端性能优化

页面优化1减少HTTP请求数从设计层面简化页面合理设置HTTP缓存资源合并与压缩合并图片CSSSprites按需加载LazyLoadImages2将JS脚本置底3将CSS放在HEAD中4深度打包代码优化参考1参考2
jrg_memo·2021-05-10 07:48

Web前端性能优化的实用技巧汇总

今天小编要跟大家分享关于Web前端性能优化的实用技巧汇总。javascript在浏览器中运行的性能，可以认为是开发者所面临的最严重的可用性问题。
重庆千锋·2021-05-08 12:18

前端札记

HTMLTutorialsWeb开发者必上的10个网站前端素材插件jquery之家jquery插件库综合前端工程师必备实用网站：配色、图标、插件、素材、字体web前端网站收藏前端优化干货|Web前端优化的强者之路前端性能优化和测试工具总结
ZoeyeoZ·2021-05-07 08:35

前端性能优化-HTTP添加Expires头

原创作品，请勿抄袭，翻版必究。转载请注明作者。简介HTTP中的Cache-Control和ExpiresWeb页面设计中，建少HTTP请求可以提高页面响应速度。浏览器在第一次访问页面时下载的资源会缓存起来，第二次访问时会判断在缓存中是否已有该资源并且有没有更新过，如果已有该资源且没有更新过，则去缓存去取，这样减少了下载资源的时间。原理上是通过HTTPRquestHeader中的if-modifie
yitalalww·2021-05-06 07:28

推荐一个在线的icon图片合成工具（CSS Sprite）

前端性能优化有很多入口，如今一些网站丰富多彩，绚丽夺目，图片元素占了很大一部分比例，所以处理好图片的加载、减少网络请求是非常有必要的，CSSSprite就是一种方式。
菜菜___·2021-05-06 07:27

对于前端性能优化的理解与实践

先从一道题目说起从输入URL到页面加载完成，发生了什么？站在性能优化的角度；我们可以分为5个过程；DNS解析TCP连接HTTP请求抛出服务端处理请求，HTTP响应返回浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户我们从这五个过程个个击破；dns解析花时间，tcp连接慢；这些需要我们的服务端解决；那么我们的前端工程师在HTTP请求或者浏览器端能做一些什么优化呢？http方面前端可以减少请求
QRFF·2021-05-06 06:17

2021前端面经-看这篇就够了（笔者靠这个拿到阿里和字节的offer）

一、web前端性能优化性能评级工具（PageSpeed或YSlow）cssCSS优化、提高性能的方法有哪些多个css合并，尽量减少HTTP请求将css文件放在页面最上面移除空的css规则避免使用CSS表达式选择器优化嵌套
爱前端也爱恋爱·2021-04-30 17:24

前端性能优化 - CDN引入分析及实践

在前端项目里引入CDN技术以达到加速网页加载的目的以create-react-app为例，//config-overrides.jsconstaddCustomize=()=>(config)=>{config.plugins.push(newHtmlWebpackExternalsPlugin({externals:[{//引入的模块module:"react",//cdn的地址entry:"h
叶叶叶同学·2021-04-29 16:17

从面试官角度讲一讲，前端性能优化方法：CSS篇

前言每一个网页都离不开css，但是很多人又认为，css主要是用来完成页面布局的，像一些细节或者优化，就不需要怎么考虑，实际上这种想法是不正确的，作为页面渲染和内容展现的重要环节，css影响着用户对整个网站的第一体验。因此，在整个产品研发过程中，css性能优化同样需要贯穿全程实现方式实现方式有很多种，主要有如下：内联首屏关键CSS异步加载CSS资源压缩合理使用选择器减少使用昂贵的属性不要使用@imp
学前端的第五个月·2021-04-29 10:43

你不知道的性能优化

作者：ouvenhttps://my.oschina.net/zhangstephen/blog/1601380前端性能优化是一个很宽泛的概念，本书前面的部分也多多少少提到一些前端优化方法，这也是我们一直在关注的一件重要事情
grain先森·2021-04-28 13:04

前端性能优化，jquery实现图片分页懒加载效果，详细步骤?

效果图:第一页默认10条数据,滚动条到末尾实现第二条数据（效果图:获取到的数据）初始时:(验证方法效果)懒加载:不是一次性加载完，是滚动条加载到当前才显示到图片。(数据分析:后端全部给到前端数据，会造成页面阻塞,一般后端给到前端是分页的数据,前端通过调用chunk++往上加载，实现分页)如下图:加载的数据代码如下:图片懒加载功能实现*{margin:0;padding:0;box-sizing:b
浅浅一笑^*^·2021-04-27 05:01

前端性能优化

前端性能优化1.性能优化原则多使用内存、缓存减少CPU计算量，减少网络加载耗时空间换时间2.节流throttle拖拽一个元素时，要随时拿到该元素被拖拽的位置直接用drag事件，则会频繁触发，很容易导致卡顿节流
TurtleOrange·2021-04-27 02:48

面试精选

http://blog.csdn.net/yueguanghaidao/article/details/9568071移动端的轮播图和PC端的轮播图有什么区别怎么解除事件绑定前端性能优化减少http请求次数
阿否_·2021-04-26 07:16

前端性能优化——debounce

实现一个搜索功能，当输入框中的文字改变时，就去请求结果。一开始是这样写的：search=()=>{requestSearchResult();}但存在很大的问题，仅输入"数学"两个字就会使得keydown事件触发7次，发7次请求。通过上图可以看出，搜索内容稍有改变就会发新的请求，导致请求过于频繁。但这些请求中真正有用的其实是最后一个，最有一个请求发出时我们已经输入完完整的搜索词，请求的结果也是我们
_八神光_·2021-04-25 00:50

前端vue知识汇总

前端常见的一些问题1.前端性能优化手段？
十八人言·2021-04-19 21:27

前端面试题套路--终极版（Vue、JavaScript）

前端常见的一些问题1.前端性能优化手段？
六月_7300·2021-04-19 20:46

前端优化总结

前端性能优化一直都是一个老生常谈的问题，面试中也经常被问到，今天就结合雅虎前端团队的35条前端优化原则来总结下我在前端开发过程中的一些优化手段。
蓝瘦额香菇·2021-04-13 23:36

前端性能优化

前端性能优化可以分为两大类分别是页面级别优化代码级别的优化包含DOM操作优化，CSS选择符优化以及图片优化等前端里面包含的内容是丰富的，它包括HTML，CSS以及JS和图片等各种各样的资源。
uptome_b2ef·2021-04-11 20:08
上一页 8 9 10 11 12 13 14 15 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他