DOM加载——缓解图片，影音加载慢影响内容显示

最新推荐文章于 2022-07-07 17:52:45 发布
最新推荐文章于 2022-07-07 17:52:45 发布
阅读量4k 收藏 1
点赞数 2
分类专栏： Javascript 文章标签： JAVASCRIPT windows 优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangyongxia921/article/details/20067837
版权
本文介绍了DOM加载过程及其对页面显示的影响，特别是图片和影音加载导致的延迟。通过DOMContentLoaded事件，可以在HTML结构加载完成后，无需等待所有资源加载就能先显示页面，从而优化用户体验。同时，文章探讨了非IE和IE浏览器下的实现差异，并提供了一种跨浏览器兼容的解决方案。
摘要由CSDN通过智能技术生成

一、什么是DOM


     文档对象模型：DOM—Document Object Model,它定义了访问HTML文档对象的一套属性、方法和事件。如下图，我们可以看到有一个红色标注的Document对象。它是全局对象Windows的一个属性，其实就是我们要讲的DOM对象，它包含了anchors，forms,images,links,location等元素，通过DOM，我们可以访问到网页上的任何部分的内容。

也就是说DOM承载了Html页面的所有内容。我们平常看到网页就是DOM和加上js,css文件产生的效果。



二、DOM加载顺序


一般加载顺序如下： 

最低0.47元/天 解锁文章
_Cassie
关注
专栏目录
如何进行Web插件性能优化
程序员光剑
08-01 2340
随着互联网web应用的快速发展、普及化，无论从功能和界面设计上，还是服务性能方面，WordPress都在逐步成为一种热门技术。其插件开发者也越来越多地用到WordPress作为平台，实现各种功能。但与其他技术不同的是，WordPress作为最流行的内容管理系统（CMS）之一，开发者在插件开发时还要面临着一些不得已而为之的性能优化选择。因此，本文将通过现实案例详细阐述如何进行WordPress插件性能优化。
html延迟加载图片
03-08
html延迟加载图片 支持ie6和ie6以上任何浏览器
html图片加载太慢如何解决办法,如何解决CSS JS和图片对网站加载速度的影响
weixin_34603379的博客
06-04 4289
对于网站加载速度的严格要求一致是seo优化过程中的重点，如何提升网站加载速度，服务器，网站内容元素等都有很大的关系，本篇文章将从CSS JS和图片三个方面进行详细的讲解。1、图片(1)指定图像尺寸加载图像之前，您的浏览器开始渲染页面。制定图像尺寸，有助于它环绕不可替代的元素。如果没有制定尺寸，一旦图像被下载您的浏览器将回流，为了做到这个，笔者建议在< IMG >元素使用高度和宽度标签规...
html图片加载慢的问题
chelflan's blog
06-17 3061
html图片加载慢的问题问题:html图片加载慢的问题解决:1.图片懒加载2.打断刚开始图片的长时间的加载卡顿堵塞3.上代码 问题:html图片加载慢的问题 解决: 1.图片懒加载 2.打断刚开始图片的长时间的加载卡顿堵塞 3.上代码 <script> // 判断页面是否到了需要显示图片的位置并赋值 var itv = null; var timer = null; functi
html打开图片慢的解决,电脑开机或打开图片很慢的几种解决方法
weixin_35268264的博客
06-05 398
电脑开机或打开图片很慢的几种解决方法一。点击[开始]--[运行]--输入regedit 然后查找到下面的键值[HKEY_LOCAL_MACHINE/SOFTWARE/Microsoft/Windows/CurrentVersion/Explorer/MyComputer] 删除MyComputer下的子键就OK了... ^-^ 将变得奇快无比！！二。1. 电脑－属性－硬件－设备管理器－IDE控制器...
图片延迟加载或者 dom延迟加载
易之晓的博客
12-16 238
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Lazyload 1</title> <style> img { display: block; margin-bottom: ...
css 同步加载,同步加载，异步加载，懒加载，预加载
weixin_35713375的博客
08-04 1560
同步加载默认的就是同步加载同步加载: 同步模式又称阻塞模式，会阻止浏览器的后续处理，停止了后续的文件的解析，执行，如图像的渲染。流览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。通常会把要加载的js放到body结束标签之前，使得js可在页面最后加载，尽量减少阻塞页面的渲染。这样可以先让页面显示出来。简单来说：js的网页...
Vue教程十二——虚拟DOM
ruby___ruby的博客
03-19 295
虚拟DOM 在此章节，讲解一下关于Vue虚拟DOM的知识点。 那什么是虚拟DOM呢，这里了解一下页面渲染的过程。 页面渲染 当我们请求页面时，HTTP请求返回就会返回页面HTML数据： 1、首先会将HTML信息构建成DOM节点树 2、之后将CSS样式构建成CSSOM树 3、之后将上面的两棵树结合形成一个render树 4、最后将render树加载到浏览器页面上 注意，这是一个极其复杂耗时的过程，假如我们执行操作，一次改一点，一次改一点，那么就需要一遍又一遍的执行上面的页面渲染，页面就会卡死，所以Vue就是
适合移动页面之吃货专用loading加载效果.zip
07-04
特别是在页面加载过程中，为了提供更好的互动体验，许多开发者和设计师会采用有趣的加载效果来吸引用户的注意力，缓解用户等待的焦虑感。"适合移动页面之吃货专用loading加载效果.zip" 就是这样一种创新的设计实践，...
HTML图片懒加载
bobyswise的博客
05-29 3095
现在的网站越来越花哨, 图片加载越来越多, 这样加载速度就会越来越慢了, 因此, 图片懒加载就很流行咯~ 1. 把img标签中的src属性删掉, 此时, 添加属性 data_src, 把图片链接放在该属性下 2. 通过使用img标签添加背景图片, 充当懒加载前的显示图片 3. 当该img标签在浏览器显示区内时, 通过js实现把img标签 中的data_src的链接赋值到img标签中的sr
图片延迟加载
samfung09的博客
04-22 1066
原生js简单实现图片延迟加载，话不多说，看代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.
JavaScript入门
WJB08223的专栏
04-21 413
* DOM 文档对象模型 * Document Object Model * 文档：标记型文档 （HTML/XML） * 对象：封装属性和行为（方法） * 模型：共性特征的体现 * DOM解析HTML * 通过DOM的方法，把HTML全部（元素（标签）、文本、属性）都封装成了对象。 文本 * DOM想要操作标记型文档先解析。（解析器） * DOM解析HTML（浏览
前端页面加载缓慢的原因和性能优化问题
qq_51741730的博客
07-07 1万+
前端页面加载缓慢的原因和性能优化问题
dom加载和js执行的时间先后
qfgg3的专栏
06-29 6680
浏览器的渲染和操作顺序如下： html解析完毕外部脚本和样式表加载完毕脚本在文档内解析并执行html dom完全构造起来涂攀和外部内容加载 （以上内容来源于javascript>一书） 对于外部js文件来说，先加载外部js文件，然后执行js代码，DOM加载并不能保证在其执行前加载完毕。 而行内js，由于按照顺序执行，在js代码执行时，位于行内js之前的元素，其对应的dom节
jQuery动态加载图片实战：页面翻页与大图显示
"该资源是一个使用jQuery实现的动态加载图片数据的练习代码示例，主要展示了如何通过jQuery库实现图片的预览和分页浏览功能。用户可以通过点击小图片来显示大图，同时提供上一页和下一页的切换按钮。" 在网页开发中...
评论 27
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值