前端性能 - 随笔分类 - 咖啡机（K.F.J）

【译】我们对 2023 年核心页面指标的建议

摘要：原文地址：https://web.dev/top-cwv-2023，在正文开始前，推荐一款前端监控脚本：shin-monitor，它能监控前端的错误、通信、打印等行为，以及计算各类性能参数，包括 FMP、LCP、FP 等。我们 Google 希望我们的性能建议侧重于：对现实世界产生最大影响的建议阅读全文

posted @ 2023-01-19 08:15 咖啡机（K.F.J）阅读(455) 评论(0) 推荐(2) 编辑

【译】2022 年回顾：Web 性能有哪些新变化？

摘要：原文地址：https://www.debugbear.com/blog/2022-in-web-performance 若对文中提到的一些性能参数不太熟悉，可以参考我之前的一篇博文《性能参数和优化手段》。衡量和优化网站速度的方式一直在变化。今年又引入了新的 Web 标准（并最终得到广泛支持），开阅读全文

posted @ 2022-12-28 09:58 咖啡机（K.F.J）阅读(1287) 评论(0) 推荐(5) 编辑

性能参数和优化手段

摘要：最近参加了字节举办的《APMPlus前端监控训练营》，特此记录些指标，方便自己日后查阅。一、性能指标 Navigation Timing 提供了文档导航过程中完整的计时信息，即一个文档从发起请求到加载完毕各阶段的性能耗时。 Performance Timeline 提供了获取各种类型(naviga 阅读全文

posted @ 2022-08-18 10:17 咖啡机（K.F.J）阅读(390) 评论(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）阅读(1060) 评论(4) 推荐(1) 编辑

前端网络、JavaScript优化以及开发小技巧

摘要：一、网络优化 YSlow有23条规则，中文可以参考这里。这几十条规则最主要是在做消除或减少不必要的网络延迟，将需要传输的数据压缩至最少。 1）合并压缩CSS、JavaScript、图片，静态资源CDN缓存通过构建工具Gulp，可以在开发的时候就将合并压缩的事情一起做掉。之所以要做合并压缩是因为：阅读全文

posted @ 2017-01-03 09:48 咖啡机（K.F.J）阅读(1521) 评论(3) 推荐(2) 编辑

前端页面性能参数搜集

摘要：经常会看些性能分析的书，但是实际在做优化的时候又无从下手。因为没有数据，也不能确定实际用户到底在哪一环影响了他们的性能。现在H5提供了一些很方便的Performance接口，可以让我们更方便的搜集到用户的数据，不过有几个方法的兼容性实在太差。插件已经上传到Github中，可以在这里获取到，in 阅读全文

posted @ 2016-08-15 10:20 咖啡机（K.F.J）阅读(2788) 评论(1) 推荐(2) 编辑

前端性能优化的另一种方式——HTTP2.0

摘要：最近在读一本书叫《web性能权威指南》谷歌公司高性能团队核心成员的权威之作。一直听说HTTP2.0，对此也仅仅是耳闻，没有具体研读过，这次正好有两个篇章，分别讲HTTP1.1和HTTP2.0。两者还能好好对比一下，两者之间的巨大区别，以及HTTP2.0解决了哪些实际问题。无论什么网络，也不管所阅读全文

posted @ 2016-08-09 10:59 咖啡机（K.F.J）阅读(3713) 评论(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）阅读(5663) 评论(0) 推荐(10) 编辑

实践一下前端性能分析

摘要：最近在读一本经典书《高性能网站建设进阶指南》。虽然书籍很多年前就出版了，但里面的内容还是耐人寻味，这次就好好的实践了一下。纸上得来终觉浅，绝知此事要躬行，实践中将会发现一些问题。有个官方网址《Even Faster Web Sites》，点击“Run the Examples”按钮，就能进入在阅读全文

posted @ 2016-05-17 10:06 咖啡机（K.F.J）阅读(3298) 评论(2) 推荐(8) 编辑

图片预加载与懒加载

摘要：一、预加载前面做了个招聘页面，里面有大量的图片需要加载。一开始都是全部写在页面中，在测试环境还看不出很慢，一放到正式环境就不对了。微信浏览器本来就觉得慢，现在一下子要加载这么多图片，一下子就把屏幕弄白了，过了几十秒后才会完整的出现Loading图片。这显然是无法忍受的，马上就加了预加载的功能阅读全文

posted @ 2016-04-12 10:20 咖啡机（K.F.J）阅读(2516) 评论(1) 推荐(2) 编辑

随笔分类 - 前端性能

公告