chrome浏览器提供的performance是常用来查看网页性能的工具。 使用方法 点击面板左上方圆形按钮开始记录，然后操作页面，一段时间之后在面板上点击停止，即可得到这段操作过程的记录结果。 点击面板上左上方刷新按键，可以重新加载页面并获得该过程记录结果。 点击面板左上方禁止符号，可以清除记录结 ...
分类：
其他好文 时间：
2020-06-17 14:18:57
阅读次数：
189
页面性能优化 学而不思则惘，思而不学则殆 前几天接到一个页面效果优化的任务，边做边查阅了一些关于页面性能的资料。做完任务之后，抽空写了一篇总结，梳理一下思路，加深自己的理解。 1. chrome的timeline 先思考这样的一个问题： 什么叫页面性能好？如何进行评判？ 直观上讲，我们通常会通过一个 ...
分类：
其他好文 时间：
2020-05-22 17:27:21
阅读次数：
92
HTML5学堂-码匠：数据快速的计算与排序，与前端页面性能有直接的关系。由于排序的算法有很多，在本次“算法系列”的分享当中，我们先从简单易上手的选择排序法开始，其它的排序算法会随后陆续跟大家一起分享。 算法的基本概念 算法是什么，它有何作用 为解决一个问题而采取的方法和步骤，称为算法。我们可以把算法 ...
分类：
编程语言 时间：
2020-05-11 10:27:40
阅读次数：
65
关注性能是工程师的本性 + 本分； 页面性能对用户体验而言十分关键。每次重构对页面性能的提升，仅靠工程师开发设备的测试数据是没有说服力的，需要有大量的真实数据用于验证； 资源挂了、加载出现异常，不能总靠用户投诉才后知后觉，需要主动报警。 用什么监控 关于前端性能指标，W3C 定义了强大的 Perfo ...
分类：
Web程序 时间：
2020-05-09 18:58:58
阅读次数：
78
页面性能优化可以从两方面着手，第一个时页面加载速度，第二个是页面运行时性能，这里主要说页面加载性能。 1.vue 路由的懒加载 component: () =>import(/* webpackChunkName: "quality-overseer-msg" */ "@/views/quality ...
分类：
其他好文 时间：
2020-05-01 01:22:24
阅读次数：
99
作为一名前端工程师，能做的优化有哪一些呢？主要包括两方面：页面性能与代码可维护性。 HTML篇 减少不必要的嵌套 适当且精简的id/class名称 有意义地使用id（利用选择符属性） 减少link、script请求 底部引用script CDN加速 利用好HTML5标签 压缩html CSS篇 减少 ...
分类：
其他好文 时间：
2020-03-22 15:59:21
阅读次数：
77
1、资源压缩合并，减少 HTTP 请求； 2、非核心代码异步加载 （1）、异步加载的方式： 动态脚本加载（document创建一个script标签加在body或者head上） defer async （2）、异步加载的区别： defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执 ...
分类：
其他好文 时间：
2020-02-14 16:24:12
阅读次数：
75
一、分析面板介绍 进行页面性能快速分析的主要是图中圈出来的几个模块功能： Network : 页面中各种资源请求的情况，这里能看到资源的名称、状态、使用的协议(http1/http2/quic...)、资源类型、资源大小、资源时间线等情况 Performance : 页面各项性能指标的火焰图，这里能 ...
分类：
其他好文 时间：
2020-02-09 12:05:24
阅读次数：
250
在css3中可以实现很多一些动态效果，css3逐步取代了Flash，可以通过他带来的新特性帮助我们轻易解决一些问题，例如图片的圆角可以直接使用border-radius就可以解决，无需再使用ps解决，并且css3可以减少开发和维护成本，并且还能提高页面性能，因为一些动态效果我们不需要再去使用JS就可 ...
分类：
Web程序 时间：
2020-01-08 21:22:40
阅读次数：
114
了解如何使用 Chrome 和 DevTools 查找影响页面性能的内存问题，包括内存泄漏、内存膨胀和频繁的垃圾回收。 TL;DR 使用 Chrome 的任务管理器了解您的页面当前正在使用的内存量。 使用 Timeline 记录可视化一段时间内的内存使用。 使用堆快照确定已分离的 DOM 树（内存泄 ...
分类：
其他好文 时间：
2019-11-13 10:54:48
阅读次数：
511
