前端常用性能优化方案
一切性能优化是根据网站测试结果去针对性进行的，不需要无脑的进行优化。另外，没有固定的优化策略，不同的项目要分而治之。 性能优化思路 了解浏览器工作原理及web渲染原理，认识影响性能的因素 使用如Performance、Lighthouse、PageInsight等工具对性能进行评估，帮助了解短板，说服Linder 使用控制台面板功能（如请...
优化资源阻塞Preload、Prefetch和Preconnect
本文介绍了前端开发如何优化资源的加载，减少资源往返时间。 Preload Preload 是一个新的控制特定资源如何被加载的新的 Web 标准，这是已经在 2016 年 1 月废弃的 subresource prefetch 的升级版。这个指令可以在 <link> 中使用，比如 <link rel="preload">。一般来说，最好使用 preload 来加载你最重要的资...
前端常见性能指标
文档流加载生命周期 DOMContentLoaded 是指页面元素加载完毕，但是一些资源比如图片还无法看到，但是这个时候页面是可以正常交互的，比如滚动，输入字符等。 jQuery 中经常使用的 $(document).ready() 其实监听的就是 DOMContentLoaded 事件。 load 是指页面上所有的资源（图片，音频，视频等）加载完成。jQuery 中 $(do...
图片懒加载实现方式
懒加载原理 当浏览器滚动到相应的位置时再渲染相应的图片。主要利用图片src属性的重新赋值来实现。 将img标签中的src的路径设置为空或默认图片(空白图片、Loading图），缓存真正的图片路径，当浏览器滚动到相应的位置时，再给src属性重新赋值。 懒加载目的 优化前端压力，减少首屏请求数，延迟请求。对服务器压力有一定...