性能优化
文章平均质量分 50
毛发苍苍
尽量只更新一些比较花调研时间的东西。具体技术就算啦
展开
-
阿里云ARMS渲染速度指标
前言大家都知道,首屏性能对点击率、转换率等有很大影响,以下是我们统计的淘宝旺铺点击率和首屏时间的关系,随着首屏时间从1秒增大到8秒,点击率逐步从85%降低到了82%【来自阿里云ARMS前端监控团队】指标和标准指标说明ARMS提供了两个图来反应性能指标:页面加载时间详情图、页面加载瀑布图具体指标说明:【第一步】首屏渲染(白屏时间):从请求开始到浏览器开始解析第一批HTML文档字节的时间差。【第二步】首次可交互时间:浏览器完成所有HTML解析并且完成DOM构建,此时浏览器开始加载资源。【第三原创 2022-04-11 22:18:30 · 623 阅读 · 0 评论 -
小程序性能优化(一)——多线程worker
基本介绍有时候小程序文档真的看的我脑壳疼多线程顾名思义,简单理解成正在执行我们业务代码的线程(主线程)之外,再开一个后台线程worker。一般用来执行一些耗时的任务和定时任务。整体思路1.全局开启worker2.主线程引入对应worker,发送消息给后台线程,并监听返回信息3.监听收到的信息,进行代码处理,发送信息给主线程。具体步骤app.json第一级属性中添加worker: “workers”: “workers”新建worker文件夹,在主线程中,即自己页面代码编写整体思路的原创 2021-10-24 16:14:13 · 1941 阅读 · 0 评论 -
jpg、png、jpeg区别与压缩等知识总结 —— 性能优化篇
jpegjpeg是一个国家专家小组,同事也是一种算法名称,而用JPEG算法压缩出来的静态图片文件称为JPEG文件,扩展名通常为*.jpg、.jpe.jpeg。JPEG文件大体上可以分成两个部分:标记码(Tag)和压缩数据。标记码由两个字节构成的,换而言之他们都是数据来的,是可以进行算法压缩的。本质上就是算法和空间的权衡。.jpe.jpeg是同样的东西,和.htm与.html一样,受限当年DOS时代对扩展名不能超过3个字符的规则。严格来讲后者才是正主。pngpng格式是一种16进制数据,并且是可以无原创 2021-09-08 22:16:06 · 5980 阅读 · 0 评论 -
Charles基本使用、请求响应拦截并修改返回
首先Charles是抓包工具,就不多介绍了。下面是破解版+证书安装教程不赘述。重点是前端怎么入门、怎么用工具poJie版安装证书 不安装的话,就监听不到,全是unknown一、 基本介绍Structure视角:按域名给你分类好接口,我比较常用这个Sequence视角:按时间顺序给你分类接口二、拦截接口(Breakpoints )1.先在左侧找到你想拦截的接口,右键breakPonits(断点2.刷新页面重新请求该接口,就能拦截了3.这里会显示你刚拦截的接口4.可以修改参数、请求原创 2021-08-08 22:59:29 · 2646 阅读 · 0 评论 -
函数节流、防抖函数,面试/优秀代码必备
函数节流、防抖函数是两个不同的出发点,但是方法论都是一样的。函数节流:节流,就是减少没必要的输出,就是防止一个函数没执行完,同个函数又开始执行了,性能的浪费。防抖函数:短时间执行多次函数,等他们都执行完了就会一起刷新展示出来,导致页面抖动。常用场景:重复点击查询列表、关键词搜索、屏幕大小改变监听函数等。eg:屏幕大小改变是个拖动过程,函数会执行超多次的,实际你只想要有意义的那么几次,怎么才算有意义呢,这个场景的话,一般是行为结束后0.几秒时候才是有意义的。那么就可以设置一个定时器。解决办法都是原创 2021-03-22 12:06:17 · 106 阅读 · 3 评论 -
记一次前端《性能优化》,首屏优化
首先要知道,性能优化无非两点:更快的请求、更轻的体态更快的请求DNS缓存了解一下,内容不多,一搜就有cdn,现在各种云的都能提供这个,看谁做的更好了(命中率,回源率),核心原理是负载均衡:你请求后给你找到一个最佳的服务器节点。其实大概知道就好了,实际上你都碰不到这些代码,都是七牛、腾讯阿里云都给你做好的了,你花钱部署上去,直接请求地址就好了。浏览器缓存,两点:强缓存,协商缓存。简单说就是前者直接使用首次请求的内容。后者每次会问后端内容有变吗?再做决定。资源合并、域名分片。前者代表就是雪碧图,小小原创 2020-12-14 18:33:49 · 288 阅读 · 2 评论 -
各种刷新的区别,和缓存304/200
先说下缓存tip:想了解缓存更多,可以去看强缓存、协商缓存为切入口的内容在使用强缓存时候,会有个过期时间的,这段时间内请求都是用的缓存文件文件过期后请求,请求头会多一个If-Modified-Since Mon, 04 Jul 2011 10:12:40 GMT这时间是服务器端之前就告诉你的,是该文件最后的修改时间。现在后端收到该请求会看看文件最新修改时间。如果时间一致,说明文件没改过,返回304,内容为空。如果有改动,返回200,和新内容。浏览器会更新缓存.缓存和刷新、强制刷新、原创 2020-12-14 17:09:29 · 308 阅读 · 0 评论 -
element-图片文件上传,多图合并请求(各种踩坑)
先上图1 .认识属性:file-list=“fileList”上传的话选中文件后,会加载到页面中供我们预览。这个属性就是存预览的照片数组的。(你不配置这属性,当然也能看到预览,但是你无法对其进行操作,比如删除)2.:auto-upload=“false” 选中文件后是否直接上传。记住这个很重要,文档几乎不提3.:on-change 官方解释“文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用”,当你添加文件也会调用,使用这个的时候,记得把第二点属性设置成fa原创 2020-10-16 17:20:30 · 952 阅读 · 0 评论 -
前端上传七牛云服务器(企业级方案)+入门
以往我们所知道的都是前端上传到后端,后端回传地址。后端是指自己服务器,而不是花钱~嫩来的第三方。第三方除了贵没什么别的坏处。为什么用七牛什么是七牛云,自行百度。我只讲几点重要的图片压缩、裁剪,人脸识别,CDN加速,不占后端资源代码为什么和csdn大部分不同?他们是直接一个ajaxj就请求了,没有配置可言这是官方前端上传七牛详细文档首先是声明了好几个变量,都是配置来的。最后qinniu.upload()上传key是上传后的文件名,为什么有个/,是命名规范吧,也是为了防止命名重复原创 2020-11-16 11:20:16 · 400 阅读 · 0 评论 -
src图片使用base64格式,免请求/上传使用图片
效果图代码(红色区域就是超长的base64编码)这种方法仅仅限于 图片超小情况使用图片转base64地址原创 2020-11-11 16:49:39 · 525 阅读 · 0 评论 -
七牛云对图片压缩、裁剪、缩小等处理
官方文档文档相对正经,建议先看看这边 <img :src="form.courseBanner+'?imageView2/2/w/400'" @click="showUploadDialog">这是企业级应用的代码。imageView2是七牛云字段名(可以这么理解)。imageView2/2后面的2是指模式2,官方提供了0-5六种模式。格式为:模式数/w/参数一/h/参数二0模式:参数一是长边最多为xxx,参数二是短边最多为yyy。进行等比缩放,不裁剪。如果不写/h/参数二,意原创 2020-11-10 15:03:06 · 3908 阅读 · 1 评论 -
vue cli2\3首屏优化加速——cdn引入element、JQ
了解CDN的全称是Content Delivery Network,即内容分发网络。CDN加速主要是加速静态资源,如网站上面上传的图片、媒体,以及引入的一些Js、css等文件。CDN服务器遍布很广,像一个个大的快递超市,比如echarts/ui组件你不需要自己下载到本地,你发起请求让它配送给你。它会找最近的CDN服务器配送资源给你。从而达到提高加载速度。(项目需要资源就那么多,1.从本地加...原创 2020-02-28 12:28:24 · 617 阅读 · 0 评论 -
网页/vue ——性能优化加速技术总结篇
仅做技术总结和简单介绍。具体实现看我的其他博客(当时查资料时候,发现很多人都做的特别乱,甚至是错误的。为此做了个梳理)1、路由懒加载这是减少打包后app.js文件大小的。app.js是各个页面的逻辑代码。当项目很大型时候,app.js起码1M+时候再用这个技术。否则按需发起的请求太多,反而起副作用。原理:把逻辑代码文件拆成多个,当页面需要这些逻辑时候再加载。默认情况首屏就把所有逻辑加载了...原创 2020-02-28 14:51:57 · 269 阅读 · 0 评论