优化网站起始载入所花费的时间

VincentFF 发布于2019-08-21 11:51 / 1221人阅读

摘要：因上面我是等着方法触发后才开始载入文件，所以使用或者差别不大如果是要完全避免上面的问题则是要等依赖的加载成功，触发方法时再去加载该则可以解决因加载速度比依赖的的加载速度更快出现的问题。

最近对单页面比较感兴趣，想用单页面实现原生app的效果，但单页面应用将多页面汇集到一个页面上，由此可知初始加载的数据会很大，这样会导致在初始加载网页的时候会有一个比较漫长的等待时长，特别是网络不好的情况下等待时长就更不能让用户满足。

为了解决这个问题，我想到一个解决方法，在页面先不加载js和css文件，首先展示一些准备好的图片或者等待页面（数据尽量小），然后等onload事件触发的时候再一一将js文件和css文件载入到页面。

window.onload = function(){
          var scripts = ["/static/js/jquery-1.8.3.min.js","/static/js/fuc.js","/static/js/app.js"];
          var s = 0;
          scripts.forEach(function(scriptSrc){
              var head = document.getElementsByTagName("head")[0];
                 var script = document.createElement("script");
                script.type = "text/javascript";
                script.charset = "utf-8";
                script.async = true;
                script.timeout = 120000;
                script.src = scriptSrc;
                head.appendChild(script);
                script.onload=function(){
                    s++;
                    if(s == scripts.length){
                        var load = document.getElementById("load");
                        var app = document.getElementById("app");
                        load.style.display = "none";
                        app.style.display = "block";
                    }
                }
          });
      }

如代码所示，当所有的js都成功加载后，再将主页面对应的div显示出来，这样用户的体验才会比较良好。这里定义了一个变量s，当变量s等于加载的js的数量的时候才会显示主页面，所以如果出现一个没有成功加载都会导致页面不会出现。值得一提的是async这个属性等于true的时候是异步加载，这样加载速度会更加快，但是这也会出现一个问题：如果出现一个js会依赖另一个js的时候就会可能出现错误，就比如上面的代码中的app.js用到了jquery，当app.js加载速度会jquery-1.8.3.min.js更快的时候会提前渲染，此时jquery并没有加载，所以app.js使用到jquery的地方就会报错。

Script异步加载还可以用defer属性，defer属性与async不同的是defer载入成功不会自动渲染而是等到onload事件触发时才会开始执行，而async属性是文件载入成功就立即执行。

因上面我是等着onload方法触发后才开始载入js文件，所以使用async或者defer差别不大
如果是要完全避免上面的问题则是要等依赖的js加载成功，触发script.onload方法时再去加载该js,则可以解决因加载速度比依赖的js的加载速度更快出现的问题。还有一种方法，就是把所有的js打包到一个js里面，我这里是使用了webpack打包程序将整个程序都打包到了一个js，这样加载就不会有问题了。

GPU云服务器云服务器网站的优化怎么做网站的搜索引擎优化单位网站所需服务器点所对应的数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87189.html

Web最佳实践阅读总结(1)

摘要：介绍最近开始刷一些书和题此系列是介绍在读最佳实践的一些收获和体会。先修改诸如命名，格式等不涉及具体逻辑的内容重构过程中要持续测试，在多个浏览器测试，确保重构的部分功能正确。介绍最近开始刷一些书和题,此系列是介绍在读Web最佳实践的一些收获和体会。 showImg(https://segmentfault.com/img/remote/1460000011465909?w=309&...

liaosilzu2007 2019-08-01 17:44 评论0 收藏0
Web最佳实践阅读总结(1)

摘要：介绍最近开始刷一些书和题此系列是介绍在读最佳实践的一些收获和体会。先修改诸如命名，格式等不涉及具体逻辑的内容重构过程中要持续测试，在多个浏览器测试，确保重构的部分功能正确。介绍最近开始刷一些书和题,此系列是介绍在读Web最佳实践的一些收获和体会。 showImg(https://segmentfault.com/img/remote/1460000011465909?w=309&...

Cympros 2019-08-21 16:55 评论0 收藏0
Web最佳实践阅读总结(1)

摘要：介绍最近开始刷一些书和题此系列是介绍在读最佳实践的一些收获和体会。先修改诸如命名，格式等不涉及具体逻辑的内容重构过程中要持续测试，在多个浏览器测试，确保重构的部分功能正确。介绍最近开始刷一些书和题,此系列是介绍在读Web最佳实践的一些收获和体会。 showImg(https://segmentfault.com/img/remote/1460000011465909?w=309&...

DirtyMind 2019-08-30 15:53 评论0 收藏0
Python--Redis实战：第二章：使用Redis构建Web应用：第四节：数据行缓存

摘要：实际执行缓存操作的函数需要用到数据行的延迟值，如果某个数据行的延迟值不存在，那么程序将取消对这个数据行的调度。上一篇文章实战第二章使用构建应用第三节网页缓存下一篇文章实战第二章使用构建应用第五节网页分析上一篇文章： Python--Redis实战：第二章：使用Redis构建Web应用：第三节：网页缓存下一篇文章：Python--Redis实战：第二章：使用Redis构建Web应用：第...

TwIStOy 2019-07-30 18:01 评论0 收藏0