性能

前端常用性能优化方案

一切性能优化是根据网站测试结果去针对性进行的,不需要无脑的进行优化。另外,没有固定的优化策略,不同的项目要分而治之。 性能优化思路 了解浏览器工作原理及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属性重新赋值。 懒加载目的 优化前端压力,减少首屏请求数,延迟请求。对服务器压力有一定...

加载中...