前端性能优化实践：让视频加载也“懒”一点

在本专栏中，我向大家介绍了图片的加载优化，其中“最具盛名”的便是 懒加载 了。

与图片一样，视频同样可以延迟加载，来达到性能优化的目的。

正常情况下加载视频，都是使用<video>标签，那么对于一些需要用户自己播放的视频，最好指定<video>标签的preload属性为none，这样浏览器就不会预加载任何视频数据。
为了占用空间，我们用poster属性为其占位：

<video controls preload="none" poster="占位图"><source src="视频资源同名.webm" type="video/webm"><source src="视频资源名.mp4" type="video/mp4">
</video>

前端性能优化实践：让视频加载也“懒”一点相关推荐

前端性能优化——如何提高页面加载速度？
1.将样式表放在头部首先说明一下,将样式表放在头部对于实际页面加载的时间并不能造成太大影响,但是这会减少页面首屏出现的时间,使页面内容逐步呈现,改善用户体验,防止"白屏". 我们 ...
前端性能优化学习 08 资源加载优化
图片延迟加载什么是延迟加载首先来想象一个场景,当浏览一个内容丰富的网站时,比如电商的商品列表页.主流视频网站的节目列表等,由于屏幕尺寸的限制,每次只能查看到视窗中的那部分内容,而要浏览完页面所包含 ...
前端性能优化－－预加载技术
当我们谈到前端的性能时,总是会提到比如合并.压缩.缓存或者在服务器上开启gzip之类的,目的都是为了让页面加载的更快. 资源预拉取(prefetch)则是另一种性能优化的技术.通过预拉取可以告诉浏览器 ...
WEB前端性能优化，提高页面加载速度
可能有人会说:网站的性能是后端工程师的事情,与前端并无多大关系.我只能说,too young too simple.事实上,只有10%~20%的最终用户响应时间是用在从Web服务器获取HTML文档并传 ...
html src加载外部静态资源,前端性能优化2:静态资源加载与优化
css和js的装载与执行-HTML 页面加载渲染的过程一个网站在浏览器端是如何进行渲染的呢? 流程示意图.png HTML渲染过程的一些特点顺序执行.并发加载(单个域名的并发数量是有限的,所以多个 ...
不加载执行js_前端性能优化：preload 预加载页面资源
网上看到一篇来自蚂蚁金服数据体验团队的文章,觉得不错,分享给大伙:https://juejin.im/post/5a7fb09bf265da4e8e785c38 本文主要介绍preload的使用,以及 ...
性能优化——图片压缩、加载和格式选择
本文首发于政采云前端团队博客:性能优化--图片压缩.加载和格式选择 https://www.zoo.team/article/images-compress 前言相信大家都听说过 "258 ...
【前端性能优化实践】手把手教你实现webpack图片压缩插件
前言我想写一个系列:前端性能优化实践方案.网上虽然一搜一大把这样的文章,但大多缺乏体系化.也有很多讲性能优化的书籍,但其实想照着书上的知识进行实践,还是挺难的一件事. 这是该系列的第一篇文章由于自 ...
小程序性能优化之页面预加载方案——让你的小程序运行如飞进阶篇
小程序性能优化之页面预加载方案进阶篇转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80798452 写在前面预加载方案 ...
小程序性能优化之页面预加载方案——让你的小程序运行如飞集成篇
小程序性能优化之页面预加载方案集成篇转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80802725 前言之前看到一篇文 ...

前端性能优化实践：让视频加载也“懒”一点

前端性能优化实践：让视频加载也“懒”一点相关推荐

最新文章

热门文章