专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

经典面试题-Web前端性能优化方法之延迟加载

ins518 2024-10-10 09:54:36 技术文章 10 ℃ 0 评论

在昨天的文章《经典面试题-Web前端性能优化方法（1）》中，我们讲解了几个Web前端性能优化的措施，今天我们继续来学习下其他性能优化的方法。

延迟加载

一个页面的展示如果每次都要等到所有内容都加载完毕，页面的加载速度势必会受到很大影响，这个时候延迟加载的优势就体现出来了。

延迟加载是保证页面初次加载时，所需要的最小内容集，其他的内容在需要的时候再进行加载，这可以保证页面只需加载最少的资源，加快响应速度。

JS延迟加载

Javascript文件延迟加载有几种方法，这里我就简单的表述几种

  • 让js最后加载

在引入外部js文件时，我们将js文件放在<body>的结束标签之前，这样可以让js文件在最后引入，从而可以加快页面加载速度。下面这张图就是百度首页的js文件，可以看到这些文件是放在页面的底部的

让js文件最后加载

  • 使用setTimeout方法

使用setTimeout方法，动态的添加js脚本到head中

setTimeout方法

  • Google帮助页面的推荐方案

将下面代码添加至</body>标签之前，然后修改defer.js为项目中具体的js文件路径。

Google帮助页面推荐方案

需要注意的是这个外部引入的文件中不应该包含页面正常加载需要的js代码，而应该是一些在页面加载后才执行的js代码，例如绑定的click，change事件。

  • 使用lazyload.js插件

lazyload.js是一款jQuery插件，使用方法如下

lazyload.js插件

图片延迟加载

现在很多的Web或者App应用中的图片都是进入可视区域时才去加载，这就用到了延迟加载的知识，图片的延迟加载也有几种方法，这里也总结一下。

  • 使用lazyload.js插件

lazyload.js是一款jQuery插件，需要在lazyload.js之前引入jQuery文件，如下图所示

lazyload延迟加载

  • 原生Javascript代码图片滚动加载

使用Javascript代码控制图片在滚动到可视区域时才加载，代码如下

Javascript实现图片延迟加载

CSS文件延迟加载

CSS文件的延迟加载同样有几种方法，这里做下总结

  • 使用lazyload.js插件

这里同js文件的延迟加载一样，引入lazyload.js

lazyload延迟加载

  • 使用setTimeout方法实现

我们同样可以使用setTimeout方法去实现css的延迟加载

setTimeout实现css延迟加载

总结

今天这篇文章主要针对延迟加载来实现Web性能优化的，后面会继续更新Web性能优化的文章。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表