前端性能优化
文章平均质量分 65
飞歌Fly
这个作者很懒,什么都没留下…
展开
-
node-sass为什么一直安装不上、安装失败?
node-sass为什么一直安装不上、安装失败?原创 2022-08-28 11:50:34 · 8337 阅读 · 3 评论 -
前端发版本,页面白屏报错,微信缓存不更新资源
前端发版本,页面白屏报错,微信缓存不更新资源原创 2022-07-29 10:01:40 · 1971 阅读 · 0 评论 -
使用Fiddler修改请求参数
1、下载比较新版的Fiddler2、进入到调试的页面,并填写好参数,以获取短信验证码接口为例3、先清空Fiddler列表中已经存在的请求,以便观察3、打开断点调试 (下面两种方式都可以,F11是快捷键)按F11 键盘快捷键或者如下图勾选 Before requests4、一切准备就绪后,点击你要调用的接口,比如我上图 获取短信验证码的接口在右边界面Inspectors 项目下,就可以对 请求的参数进行修改。根据请求类型 是TextView还是webForms进行修原创 2021-11-05 18:36:59 · 8357 阅读 · 0 评论 -
defer和async的区别
<script src="script.js"></script> 没有defer或async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该script标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。 <script async src="script.js"></script> 有async,加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行(异步)。 ...转载 2021-02-20 12:53:19 · 116 阅读 · 0 评论 -
嗨,送你一张Web性能优化地图
我们都知道对于Web应用来说性能很重要。然而性能优化相关的知识却非常的庞大并且杂乱。对于性能优化需要做些什么以及性能瓶颈是什么,通常我们并不清楚(不包括那些对性能优化有丰富经验的高手)。事实上关于Web性能有很多可以优化的点,其中涉及到的知识大致可以划分为几类:度量标准、编码优化、静态资源优化、交付优化、构建优化、性能监控。本文主要介绍性能优化需要做的事以及需要考虑的问题。目的在于给读者脑海中生成一个宏观的地图。不会介绍每个优化项目具体如何操作。PS:后续会有系列文章针对不同优化分类下的具体转载 2021-01-20 10:11:49 · 174 阅读 · 0 评论 -
Nginx优化之gzip压缩
gzip配置的常用参数gzip on|off; #是否开启gzipgzip_buffers 32 4K| 16 8K #缓冲(压缩在内存中缓冲几块? 每块多大?)gzip_comp_level [1-9] #推荐6 压缩级别(级别越高,压的越小,越浪费CPU计算资源)gzip_disable #正则匹配UA 什么样的Uri不进行gzipgzip_min_length 200 # 开始压缩的最小长度(再小就不要压缩了,意义不在)gzip_http_version 1.0|1.1 # .转载 2020-12-28 10:41:18 · 444 阅读 · 0 评论 -
15 张精美动图全面讲解 CORS
15 张精美动图全面讲解 CORS前言:本文翻译自Lydia Hallie小姐姐写的✋???????? CS Visualized: CORS,她用了大量的动图去解释 CORS 这个概念,国内还没有人翻译本文,所以我在原文的理解上翻译了本文并修改了一些错误,希望能帮到大家。觉得翻译的不错一定要点赞哦,谢谢你,这对我真的很重要! ????注:原文的动图均为keynote制作前端开发中,我们经常要使用其他站点的数据。前端显示这些数据之前,必须向服务器发出请求以获取该数据。假设我们..转载 2020-08-05 09:53:48 · 192 阅读 · 0 评论 -
ios页面卡顿不流畅
给滚动元素上添加:overflow-y: auto;-webkit-overflow-scrolling : touch原创 2019-10-11 18:18:53 · 134 阅读 · 0 评论 -
vscode更新版本后,很卡顿,cpu、内存占用高
这几天vscode更新版本后莫名其妙cpu一直100%,电脑直接卡死,本来用的好好的,怎么更新版本后就卡的要死呢。网上搜索了很多文章,也很多转发,每篇文章都说在 文件=>首选项 搜索 search.followSymlinks 将这个值设置成false就解决了,可能对一部分电脑有用,但我试了一点用没有,后来我就想是不是某些我安装的某些插件和新版本有冲突,所以我就挨个插件卸载安装,不试不知道,...原创 2019-08-26 14:39:31 · 2816 阅读 · 0 评论 -
CDN在前端开发的作用
转载自:https://blog.csdn.net/weixin_41697143/article/details/82758630CDN在前端开发的作用CDN 内容分发网络:content delivery network概况:设置多个节点服务器,分布在不同区域中,便于用户进行数据传递和访问。当某一个节点出现问题时,通过其他节点仍然可以完成数据传输工作,可以提高用户访问网站的响应速...转载 2019-07-17 17:07:32 · 477 阅读 · 0 评论 -
debugger工具的使用以及调试
一、打开和进入调试①打开debugger调试无论是web网页(F12)还是微信开发者工具里面,调试都是在source面板②在需要打断点的地方打上标签,如图 39 、47③F5刷新,重新执行,进入断点。如果没有进入断点,说明这个断点不是运行时触发或者需要点击等其他事件触发。二、调试工具说明①进入下个断点,快捷键F8,如果有多个断点,点击时可以直接进入下个断点,忽略...原创 2019-03-04 15:03:52 · 8619 阅读 · 0 评论 -
Web前端性能优化的9大问题
转载自:https://www.cnblogs.com/liulilin/p/7245125.html1、请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出。一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服...转载 2018-03-06 10:23:03 · 263 阅读 · 0 评论 -
HTTP协议以及http与https的区别
转载自:https://www.cnblogs.com/azhai-biubiubiu/p/6048901.html什么是HTTP?以下来自度娘最为专业的解释:超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。1960年美国人T...转载 2018-03-06 09:05:49 · 3202 阅读 · 0 评论 -
强缓存与协商缓存
一、强缓存第一次请求时,服务器把资源的过期时间通过响应头中的Expires和Cache-Control两个字段告诉浏览器,之后再请求这个资源的话,会判断有没有过期,没有过期就直接拿来用,不向服务器发起请求,这就是强缓存。Cache-Control与Expires同时存在的话,Cache-Control的优先级高于Expires(一)Cache-Control的几种模式1、no-cache:不使用本地缓存。需要使用缓存协商,先与服务器确认返回的响应是否被更改,如果之前的响应中存在ET...原创 2018-03-06 08:57:45 · 301 阅读 · 0 评论 -
前端性能优化 —— reflow(回流)和repaint(重绘)
随着前端技术的发展,各种技术和框架也不断更新完善,产品也越来越酷炫,动画、交互等没有你想不到,只有你做不到的,随着而来的就是写不完的需求,改不完的bug(当然这只是开玩笑,毕竟我们都是很专业)。产品不断更新迭代,交互、特效不断往上面加,有一天我们的页面突然就变得很卡了,这是为什么呢?如果你有时间可以阅读以下这篇文章:现代浏览器的工作原理 http://blog.jobbole.com/12749/...原创 2018-03-02 14:13:23 · 701 阅读 · 0 评论