![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端性能优化
文章平均质量分 57
Ashley的成长之路
成为六边形战士!无论处于什么环境,向下生根,向上开花
展开
-
性能优化之雅虎35条军规
|前言 性能问题对于公司项目而言是需要持续关注的,最近刚好看到了雅虎的35条性能优化军规,觉得很棒,画了一个思维导图记录下,方便查找在看性能优化的方法之前需要先了解性能指标,如下:1、FP(First Paint):首次绘制2、FCP(Fisrt Content Paint):首次内容绘制3、LCP(Largest Content Paint):最大内容绘制4、DCL(DocumentContentLoaded) dom加载完成5、L (Onload) 页面加载完成6、TTI(.原创 2021-08-13 14:13:55 · 622 阅读 · 0 评论 -
前端性能优化
一个项目,想要一个良好的用户体验,做好性能优化必不可少,而性能优化可以分为两大块,即加载时的优化和运行时的优化,下面看看在这两个阶段分别可以做哪些优化。1、加载时优化1)减少HTTP请求和减少HTTP请求大小 一个完整的 HTTP 请求需要经历 DNS 查找,TCP 握手,浏览器发出 HTTP 请求,服务器接收请求,服务器处理请求并发回响应,浏览器接收响应等8个步骤。当请求较多时就会严重消耗性能,这就是为什么要将多个小文件合并为一个大文件(如:雪碧图),从而减少 HTTP 请求次数的原因...原创 2021-03-06 11:03:48 · 287 阅读 · 1 评论 -
前端错误监控捕获和上报
1、前端错误分为两大类: a、即时运行错误:代码错误; b、资源加载错误;2、错误的捕获方式 a、即时运行错误: 1)try..catch 2)window.onerror 捕获; b、资源加载错误: 1) object.onerror 2) performance.getEntries() 3) Error事件...原创 2020-04-21 23:34:43 · 798 阅读 · 0 评论 -
函数节流和函数防抖(附带demo)
1、函数节流:让一个函数在执行了一次之后,在规定时间内不会执行第二次。 比如说:有一个需要频繁触发的函数,处于性能优化的角度,让他在规定时间内只有第一次触发生效。<!DOCTYPE html><html lang="zh"><head> <meta charset="utf-8"> <meta http-equ...原创 2020-03-20 14:29:33 · 524 阅读 · 0 评论 -
前端性能优化之gzip压缩(压缩js、css、HTML,千万不能压缩图片!)
GZIP主要用来压缩html,css,javascript等静态文本文件,GZIP压缩的比率通常在3~10 倍之间,压缩后的体积能达到只有原本的30%左右,这样就能大大节省服务器的网络带宽和大大提升浏览器的浏览速度,如果项目够大,这个节省的时间就非常可观了!废话不多说上步骤:1、安装插件npm install compression-webpack-plugin -D2、在vue.config.js文件里添加以下代码const CompressionWebpackPlu...原创 2020-09-14 16:01:21 · 6534 阅读 · 2 评论