相信大家经常遇到网页加载的时候半天内容不出来，也不到要等待多久，或者说有进度条但是无法反应页面的加载进度，这种用户体验还是非常差的，给站点一个真实的进度条对于用户体验还是非常友好的，一个真实的进度条可以一定程度上可以增加用户继续等待的机率。
假进度条
很多网页的进度条基本上就是装装样子的，基本上页面打开了就显示加载到了20%，然后页面开始渲染了就显示加载到了50%，加载完成之后就显示100%。这种进度条一旦网站加载一卡顿，就会出现在一个进度值半天不动，体验式非常差的。
今天潘某人SEO分享一个基于原生javascript语法不需要任何插件来实现进度条的真实加载，按照加载资源数量的控制进度条的变化，可以实现只要网站每加载完成一个资源进度条同步变化。
程序逻辑思路
基本原理是在页面添加一个progress标签，控制标签的value值来更新进度条的加载进度；而进度值通过计算页面已加载完成资源数量和总资源数的比例获取。
- 第一步获取资源数
- 第二步计算完成加载的资源数的比例
- 第三步将得到加载完成的资源数的比例值更新progress标签的value值
代码实现
别看上面逻辑很简单，但是要把功能做的完美还是有单独的，这里涉及到了浏览器页面渲染相关的知识，重点在于如何知道资源的加载状态以及如何知道资源加载完成。文末结尾有完整代码示例，接下来先一个个步骤简单讲解下。
进度条
DOCTYPE html>
<html>
<head>
<title>页面资源加载进度条---潘某人SEOtitle>
<style>
#progressBar{
position: fixed;
z-index: 200;
top: 0;
left: 0;
width: 100%;
height: 3px;
box-shadow: 1px 2px 3px #eee;
background-color: blue;
transition: width 1s ease-in-out;
}
style>
head>
<body>
<progress id="progressBar" value="0" max="100">progress> body> html> 我们使用通一个progress标签作为进度条，大家可根据自己的需求来调整进度条的样式，进度条进度的变化是通过修改 progress 标签的value值实现，当value值达到和max值相等，进度条即加载完成。接下来我们需要做的就是计算页面资源加载的比例的数值来更新value值即可。
如何获取资源的比例
progress标签的value值 = 资源加载完成的数量/资源的总数，对计算结果取整。获取页面资源的数量非常简单，难点在于什么时候去获取。正确的时间应该是在dom树构建完成，就需要获取页面资源及其数量，获取早了资源会获取不全，获取晚了资源可能就加载完成的都差不多了，都会影响进度条的准确性。
// 监听dom构建完成
document.addEventListener('DOMContentLoaded', function() {
console.log("dom构建完成")
})
要准确的把握时机，就需要监听‘DOMContentLoaded’事件，当页面dom构建完成的时候会触发此时间，此时就可以去获取页面的资源。DOM树大致可以认为的就是页面可以看到的html变迁结构，DOM树构建完成的时候，大部分资源都是没有开始加载的，这里也暗藏下了一个问题。
那么由如何知道这些资源加载的情况呢？这就需要我们将获取到资源，每个资源添加一个‘load’事件的监听，当资源加载完成的时候会被触发，将这些触发的次数累加就得到了资源加载完成的数量。
// 更新进度条
function updateProgress(loadedResources) {
progress = Math.round((loadedResources / totalResources) * 100);
console.log('加载完成度：',progress,'%')
progressBar.value = progress;
}
//获取页面所有资源
const resources = document.querySelectorAll('img, script, link');// 获取图片、脚本和链接资源
window.totalResources = resources.length; // 获取资源总数
window.loadedResources = 0;//已加载完成的资源数
window.progress = 0;// 进度值
window.progressBar = document.getElementById('progressBar');
resources.forEach((resource) => {//遍历元素添加load监听事件
resource.addEventListener('load', () => {
loadedResources++;
console.log('加载完成的资源数量：',loadedResources)
//更新进度条的处理函数
updateProgress(loadedResources);
});
上述代码就实现了，获取资源总数以及资源加载完成的数量，然后每当一个资源加载完成，就会触发‘load’事件，更新对应progress标签的value值。
当然我们不一定需要获取所有的资源，可以在第8行代码选择获取哪些类型。
存在的问题
前面说到了存在一个问题，上述代码执行的时候会发现，进度条是无法达到100%的，这是因为在‘DOMContentLoaded’事件触发完成的时候已经有部分资源已经加载完成，这个主要适合浏览器页面解析渲染的原理有关，具体的大家可以去学习了解下页面的渲染的，比较复杂这里一两句讲不清。
如js脚本会阻塞dom的构建，换句话说dom构建完成的时候，部分的js脚本的加载完成，这也是导致部分元素在‘DOMContentLoaded’事件触发的时候已经加载完成的原因之一。
解决方法是通过监听页面‘readyState’状态，在页面渲染完成的时候，将进度条更新100%进度即可，由于这部分资源数量占比比较少，对于进度条体验上不会有很大的影响。考虑的太复杂也没有意义，并且进度条的展示也是要基于js和css实现的，将资源获取的时间在往前提，个人认为意义不大。
//页面渲染完成
document.onreadystatechange = function () {
if (document.readyState === 'complete') {
console.log('页面加载完成');
//执行结束进度条的函数
}
}
成果展示，完整代码
上图则是在潘某人SEO站点测试下来的效果，在页面构建完成之后，开始页面加载的时候就会显示进度条，随着资源的加载进度条可以非常丝滑并且反应真实页面加载进度，页面加载完成之后，进度条达到100%后消失隐藏。
DOCTYPE html>
<html>
<head>
<title>页面资源加载进度条---潘某人SEOtitle>
<style>
#progressBar{
position: fixed;
z-index: 200;
top: 0;
left: 0;
width: 100%;
height: 3px;
box-shadow: 1px 2px 3px #eee;
background-color: blue;
transition: width 1s ease-in-out;
}
style>
head>
<body>
<progress id="progressBar" value="0" max="100">progress> body> <script> /** * @autor 潘某人SEO www.chateach.com * @param {String} state ---"start"开启进度条加载、“end”进度条到达100结束进度条 */ function changeProgress(state) { // 更新进度条 function updateProgress(loadedResources) { progress = Math.round((loadedResources / totalResources) * 100); console.log('加载完成度：',progress,'%') progressBar.value = progress; } switch (state) { //开启进度条 case "start": //获取页面所有资源 const resources = document.querySelectorAll('img, script, link');// 获取图片、脚本和链接资源 window.totalResources = resources.length; // 获取资源总数 window.loadedResources = 0;//已加载完成的资源数 window.progress = 0;// 进度值 window.progressBar = document.getElementById('progressBar'); console.log("resources:",resources) resources.forEach((resource) => {//遍历元素添加load监听事件 resource.addEventListener('load', () => { loadedResources++; console.log('加载完成的资源数量：',loadedResources) //更新进度条 updateProgress(loadedResources); }); }); break; //结束进度条 case "end": updateProgress(totalResources); progressBar.style.opacity = 0; setTimeout(() => { progressBar.style.display = 'none'; } , 1000); break; default: break; } } //dom构建完成 document.addEventListener('DOMContentLoaded', function() { console.log("dom构建完成") changeProgress ("start");//开启进度条 }) //页面渲染完成 document.onreadystatechange = function () { if (document.readyState === 'complete') { console.log('页面加载完成'); changeProgress ("end");//结束进度条， } } script> html> -
linux下使用composer的方式安装laravel 9.x版本的方法，及laravel的简介，Laravel是一套简洁、优雅的PHP Web开发框架，它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。具有了一套高级的PHP ActiveRecord实现 -- Eloquent ORM。
-
vue框架简介及其优势，Vue 是一套用于构建用户界面的渐进式JavaScript框架，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。。但是vue对于SEO并不是非常友好，及其解决方案。
-
laravel的安装方式有很多种，推荐大家通过Composer安装laravel，下面是在linux系统中使用Composer安装laravel框架的方法。
-
Laravel如何发送邮件呢？Laravel邮件发送功能的实现例子，从邮箱注册配置到，laravel邮件参数配置，提供纯文本邮件和富文本邮件发送两种邮件发送实例。
-
js在for循环中的闭包的解决方法，实现点击li标签获取标签的所处位置。
-
在 Laravel项目中有时我们会需要一些全局函数和常量，那么在laravel如何定义一个全局的常量，以及如何的使用全局常量。
-
我们的项目通常来讲都是一个比较大的项目，包含了各种各样的服务。如果每个服务都以不同的方式返回异常信息，这样排查的时候就会比较凌乱。如果我们定义一个标准的异常处理体系。并在所有的服务中使用。那样开发起来就可以快速定位。页面也会更加的简单和直观。
-
php将多维数组根据某个键倒序/升序，一维数组可以用一个简单的krsort() 函数进行升序排列，或者使用 arsort() 函数进行降序排列 。但是如何是多维数组那么情况就会复杂很多，没有可以直接实现多维数组按照某个键值进行排序的函数。
-
MySQL常用的查询语句大全看这里，值得收藏。MySQL数据库管理系统由瑞典的DataKonsultAB公司研发，该公司被Sun公司收购，现在Sun公司又被Oracle公司收购，因此MySQL目前属于 Oracle 旗下产品。
-
laravel Request的所有方法详解,laravel实现如何获取cookie、表单参数、提交的文件、laravel如何获取网址url、路径、ip、端口等。
-
网站搭建第一步本地服务器的架设centos系统安装，对于刚接触网站编程的小伙伴不要先急着去购买服务器，当然土豪请随意。我们可以现在自己电脑上本地搭建一个虚拟服务器环境来运行，可以检测下自己是不是真的能力去搭建一个网站。
-
什么是localStorage，与cookie的区别是什么，localStorage的生存期、数据结构、域名限制、浏览器支持；localStorage常用方法，存储数据setItem、读取数据getItem、修改数据、删除数据。
-
vue如何实现触底判断，实现无限加载等功能。当我们需要实现无限加载的时候，即实现瀑布流的功能的时候，核心就是监听页面的滚动事件，当滚动触底的时候去请求加载数据，既可以实现无限加载下拉。
-
有时候为了提升用户体验，比如在某些页面需要实现点击内容，将内容复制到剪切板，可以提升用户复制内容的操作效率；因此在实际操作中通过一定的事件触发复制功能是非常有意义的行为，下面是两种通过原生js实现复制内容到剪切板。
-
css设置超链接鼠标悬停字体上时字体变颜色，css设置鼠标悬停变色布局。鼠标悬停字体上文字变色，通常针对超链接锚文本字体颜色改变，使用了伪类：hover。
-
Springboot如何生成cookie，获取cookie信息，cookie就是一个小体积的键值对，格式：key=value;客户端和服务器端，通常使用http协议来进行数据传输，而http协议是无状态的。也就是客户端向同一个服务器端发送的第一次Request和第二次Request，是没有关联的。需要cookie来保存一些用户信息，每次向相同的域名（domian）和路径（path）发送Request时都会携带cookie。
-
如果你喜欢记录生活，那么拥有一个个人的博客网站还是非常不错的，从此你不再需要遵守任何平台的规则，只需要遵守我国法律即可。人生在世短短几十年，为短暂的人生留下点痕迹，成为数字世界的终极身份证。今天潘某人SEO就为大家大致的总结一下拥有一个自己网站需要哪几步并需要多少花费。
-
centos系统修改超级管理员root用户名实例演示，只要简单的将超级管理员root用户修改掉，那么被暴力破解几率就会直线下降。