前言发现总结性的小干货可以为大家提升更好的开发技巧和编码思维，对代码量产化提供更扎实的质量和支持。这次我们来聊聊大家可能都比较关心的话题：性能优化。一说到页面的性能优化，大家可能都会想起雅虎军规、2-5-8原则、3秒钟首屏指标等规则，这些规则在开发过程中不是强制要求的，但是有时候为了追求页面性能的完美和体验，就不得不对原有的代码进行修改和优化。下面就结合自己三年多的开发经验和大量的项目实践，整理出
分类：
其他好文 时间：
2019-11-07 11:27:31
阅读次数：
117
下面是一些相关概念: 1. 重流: reflow, 重绘: repaint 2. 重流必定导致重绘, 重绘不一定重流 3. 布局改变会发生重流, 元素颜色等改变只会发生重绘 下面是通过减少重流/重绘次数而优化页面性能的一些手段: 1. 减少js中的dom操作, 若必须, 则尽量将读取dom和写入do ...
分类：
其他好文 时间：
2019-10-18 18:55:53
阅读次数：
130
性能和效率 一、 你平时如何评测你写的前端代码的性能和效率。 ChromeDevTools的Timeline:是用来排查应用性能瓶颈的最佳工具。 ChromeDevTools的Audits:对页面性能进行检测，根据测试的结果进行优化。 第三方工具Yslow。 详细参见： http://www.cnb ...
分类：
其他好文 时间：
2019-10-09 12:14:32
阅读次数：
168
使用 document.createDocumentFragment() 注意: 1. 文档片段节点不存在与DOM中, 在插入DOM之前, 对它的操作都是对js对象的操作; 2. 使用文档片段节点将一个较复杂的dom结构构建好再一次性插入到DOM树中, 有利于减少重渲次数, 提高页面性能; ...
分类：
其他好文 时间：
2019-09-19 00:43:02
阅读次数：
81
页面性能监测之performance author: "@TiffanysBear" 最近，需要对业务上的一些性能做一些优化，比如降低首屏时间、减少核心按钮可操作时间等的一些操作；在这之前，需要建立的就是数据监控的准线，也就是说一开始的页面首屏数据是怎样的，优化之后的数据是怎样，需要有一个对比效果。 ...
分类：
其他好文 时间：
2019-08-14 14:49:31
阅读次数：
223
本文主要介绍preload的使用，以及与prefetch的区别。然后会聊聊浏览器的加载优先级。 preload 提供了一种声明式的命令，让浏览器提前加载指定资源(加载后并不执行)，在需要执行的时候再执行。提供的好处主要是 将加载和执行分离开，可不阻塞渲染和 document 的 onload 事件 ...
分类：
其他好文 时间：
2019-08-06 13:44:25
阅读次数：
118
浏览器是我们上网的一个重要工具，是我们重要的信息来源，这里以Chrome浏览器为对象，同时作为一名前端工程师，之前对于浏览器的认知还不够深入，所以借着这一系列的文章，进行浏览器的逐步分析与学习，加深自己的知识储备。同时这部分知识也是做页面性能优化，健康度监控等工具时所必须的基础知识。 进程和线程 进 ...
分类：
编程语言 时间：
2019-06-29 19:16:36
阅读次数：
122
感谢阮一峰老师撰写的非常详细的教程 实现的大致预览： 这个方法很容易理解，并且兼容性也不错，但是有一个致命的缺点就是onscroll事件触发的太频繁了，很容易影响页面性能。 因而考虑使用IntersectionObserver，这个api兼容性很差，需要谷歌51+。 ...
一、是什么 一种异步请求数据的web开发技术，对于改善用户体验和页面性能很有帮助。简单的说就是在不需要刷新页面的情况下实现局部dom的更新。应用场景如：模糊查询以及验证提示等。 二、原理 因为js是一个单线程的脚本语言，那么他是如何实现ajax异步的呢？这就得益于流浪器提供的一个XMLHttpReq ...
分类：
Web程序 时间：
2019-06-04 22:29:23
阅读次数：
161
就像steve在之前发布的文章中指出的那样，window.onload并不是最好的用来衡量网站性能指标的方式。它是一个很方便的，经常被使用的一个指标，但是并不能明确的捕获现代浏览器页面的动态特性。相反，我们需要考虑用户对于页面性能的感知：如何让用户更快的与页面进行交互？ 交互的定义完全取决页面的不同 ...
分类：
其他好文 时间：
2019-05-05 01:20:44
阅读次数：
141
