随笔分类 -  前端性能

【译】我们对 2023 年核心页面指标的建议
摘要:原文地址:https://web.dev/top-cwv-2023,在正文开始前,推荐一款前端监控脚本:shin-monitor,它能监控前端的错误、通信、打印等行为,以及计算各类性能参数,包括 FMP、LCP、FP 等。 我们 Google 希望我们的性能建议侧重于: 对现实世界产生最大影响的建议 阅读全文
posted @ 2023-01-19 08:15 咖啡机(K.F.J) 阅读(448) 评论(0) 推荐(2) 编辑
【译】2022 年回顾:Web 性能有哪些新变化?
摘要:原文地址:https://www.debugbear.com/blog/2022-in-web-performance 若对文中提到的一些性能参数不太熟悉,可以参考我之前的一篇博文《性能参数和优化手段》。 衡量和优化网站速度的方式一直在变化。 今年又引入了新的 Web 标准(并最终得到广泛支持),开 阅读全文
posted @ 2022-12-28 09:58 咖啡机(K.F.J) 阅读(1277) 评论(0) 推荐(5) 编辑
性能参数和优化手段
摘要:最近参加了字节举办的《APMPlus前端监控训练营》,特此记录些指标,方便自己日后查阅。 一、性能指标 Navigation Timing 提供了文档导航过程中完整的计时信息,即一个文档从发起请求到加载完毕各阶段的性能耗时。 Performance Timeline 提供了获取各种类型(naviga 阅读全文
posted @ 2022-08-18 10:17 咖啡机(K.F.J) 阅读(371) 评论(0) 推荐(1) 编辑
JavaScript性能优化 DOM编程
摘要:最近在研读《高性能JavaScript》,在此做些简单记录。示例代码可在此处查看到。 一、DOM 1)DOM和JavaScript 文档对象模型(DOM)是一个独立于语言的,用于操作XML和HTML文档的程序接口(API)。 浏览器通常会把DOM和JavaScript独立实现。例如Chrome中使用 阅读全文
posted @ 2017-05-22 09:43 咖啡机(K.F.J) 阅读(1055) 评论(4) 推荐(1) 编辑
前端网络、JavaScript优化以及开发小技巧
摘要:一、网络优化 YSlow有23条规则,中文可以参考这里。这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少。 1)合并压缩CSS、JavaScript、图片,静态资源CDN缓存 通过构建工具Gulp,可以在开发的时候就将合并压缩的事情一起做掉。 之所以要做合并压缩是因为: 阅读全文
posted @ 2017-01-03 09:48 咖啡机(K.F.J) 阅读(1512) 评论(3) 推荐(2) 编辑
前端页面性能参数搜集
摘要:经常会看些性能分析的书,但是实际在做优化的时候又无从下手。 因为没有数据,也不能确定实际用户到底在哪一环影响了他们的性能。 现在H5提供了一些很方便的Performance接口,可以让我们更方便的搜集到用户的数据,不过有几个方法的兼容性实在太差。 插件已经上传到Github中,可以在这里获取到,in 阅读全文
posted @ 2016-08-15 10:20 咖啡机(K.F.J) 阅读(2773) 评论(1) 推荐(2) 编辑
前端性能优化的另一种方式——HTTP2.0
摘要:最近在读一本书叫《web性能权威指南》谷歌公司高性能团队核心成员的权威之作。 一直听说HTTP2.0,对此也仅仅是耳闻,没有具体研读过,这次正好有两个篇章,分别讲HTTP1.1和HTTP2.0。 两者还能好好对比一下,两者之间的巨大区别,以及HTTP2.0解决了哪些实际问题。 无论什么网络,也不管所 阅读全文
posted @ 2016-08-09 10:59 咖啡机(K.F.J) 阅读(3694) 评论(5) 推荐(8) 编辑
输入URL到展现页面的全过程
摘要:最近在看一本关于网络协议的书《图解HTTP》 当我们在浏览器的地址栏输入 http://www.pwstrick.com ,然后回车,回车这一瞬间到看到页面到底发生了什么呢? 1. 域名解析 2. 建立TCP连接 3. 发起HTTP请求 4. 服务器响应HTTP请求 5. 浏览器渲染页面 自己原先不 阅读全文
posted @ 2016-05-23 10:15 咖啡机(K.F.J) 阅读(5652) 评论(0) 推荐(10) 编辑
实践一下前端性能分析
摘要:最近在读一本经典书《高性能网站建设进阶指南》。 虽然书籍很多年前就出版了,但里面的内容还是耐人寻味,这次就好好的实践了一下。 纸上得来终觉浅,绝知此事要躬行,实践中将会发现一些问题。 有个官方网址《Even Faster Web Sites》,点击“Run the Examples”按钮,就能进入在 阅读全文
posted @ 2016-05-17 10:06 咖啡机(K.F.J) 阅读(3284) 评论(2) 推荐(8) 编辑
图片预加载与懒加载
摘要:一、预加载 前面做了个招聘页面,里面有大量的图片需要加载。 一开始都是全部写在页面中,在测试环境还看不出很慢,一放到正式环境就不对了。 微信浏览器本来就觉得慢,现在一下子要加载这么多图片,一下子就把屏幕弄白了,过了几十秒后才会完整的出现Loading图片。 这显然是无法忍受的,马上就加了预加载的功能 阅读全文
posted @ 2016-04-12 10:20 咖啡机(K.F.J) 阅读(2509) 评论(1) 推荐(2) 编辑