html head中加载js文件,发现没有改文件加载速度很慢,引入外部js脚本加载慢与页面白屏问题的解决...

最新推荐文章于 2022-09-21 18:08:56 发布
最新推荐文章于 2022-09-21 18:08:56 发布
阅读量266 收藏
点赞数
文章标签： html head中加载js文件 发现没有改文件加载速度很慢

问题背景

最近做的一个项目需要引入一个外部的第三方js脚本。由于这是一个关于渲染3D建筑的脚本，所以体积比较大，大概有2M，加载完成也得要个好几秒，网速慢的时候十几秒都有可能。

之前也遇到脚本加载慢的问题，但是没这么慢，所以这次就特别写个文章记录一下我的解决过程。

首先上两张项目已完成的截图。

下图是通过第三方脚本渲染出来的3D建筑页面

9cef7a44786f5217af1b788a54a31b54.png

下图是首页，不需要用到第三方脚本

03cb3445f8778b1f7d6a536e78b6f5a3.png

遇到的问题和需求

引入外部脚本太大，加载时间太长

首页用不到外部脚本，需要先渲染出来

用到外部脚本的页面，要是脚本还没加载好就点进去会报错

解决问题的过程

我一开始通过

这样页面是可以正常加载的，但是页面出来的很慢，一开始会白屏一段时间等待这个js脚本加载完成。虽然脚本体积大是事实，但这用户体验肯定是可以优化的。

后来我又把这个脚本放到了页面底部，也就是

数羊俱乐部
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Html页面js文件加载缓慢-优化
qq_33152667的博客
03-24 977
以talkingData埋点js为例子，原本在html引入方式为： <scriptsrc="https://jic.talkingdata.com/app/h5/v1?appid=<%=process.env.BURYING_POINT_APPID %>" ></script> 优化方案： 自己封装talkingData的js，把封装的工程发到自己的c...
前端性能优化总结/懒加载、函数节流、优化dom操作、雪碧图、合并文件
weixin_44990056的博客
02-14 703
1.减少 HTTP 请求数量 在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。 （1）懒加载 什么是懒加载 懒加载也叫延迟加...
解决HTML加载时，外部js文件引用较多，影响页面打开速度问题
杨海波的专栏
07-17 1万+
前言    通常HTML文件在浏览器中加载时，浏览器都会按照元素在页面中出现的先后顺序，对它们依次加载，一旦加载的js文件数量过多，就会导致页面展示延迟。那么，在开发的过程中，改怎么解决呢？    首先，我们看一看传统中js加载的做法，所有的元素都应该放在页面的元素中，例如： HTML js应用 好好学习，天天向上
html页面异步加载js文件
GraceUp
08-17 2367
一般直接引入第三方的js，如果第三方速度比较慢，会阻塞页面的渲染，用户等待的时候，会看到一片的空白，这样的用户体验不太好。因此一些不用马上运行的js，可以用异步进行加载。加载方法有两种，如下script 中加入 async=”async”async 是html5的新属性，低版本的浏览器不兼容<script type="text/javascript" async="async" src="http:
JSP/HTML记一次请求非常缓慢，并且报错TypeError: 'stepUp' called on 和 Uncaught RangeError: Maximum call stack
颜值即正义
06-10 396
火狐浏览器报错 TypeError: 'stepUp' called on an object that does not implement interface TypeError: 'stepUp' called on an object that does not implement interface HTMLInputElement.jquery-1.7.2.min.js:4:1...
为什么js文件放在head里页面布局出不来？
become a programmer
03-28 757
之前用EasyUI做了两个页面，js代码放到了文件里，在head里引入js文件。 但是页面一直出不来，只能放到body的底部，页面才能出来。 后来在js文件了加了一个函数，$(document).ready(function(){} 把页面初始化部分代码datagrid，放到这个函数里边去，js文件在head里引入才成功。
引入外部js脚本加载慢与页面白屏问题的解决
10-17
在网页开发中，引入外部JavaScript脚本是一种常见的做法，但当这些脚本体积过大或加载时间过长时，可能会导致页面加载缓慢甚至出现白屏现象，严重影响用户体验。本文主要探讨了如何解决这个问题。 首先，问题的起因...
前端试题(四)
热门推荐
Stephy_Yy
04-25 6万+
又是新的一周 1. vue过滤器使用场景 2. v-on绑定多个方法 3. 在菜单结构不确定时，前端如何动态渲染 树形结构：深度遍历、广度遍历（递归） 4. Vue-router的钩子函数 5. Vue-router的实现原理 6. Vuex的实现原理 7. Vue-cli的自定义指令 8. keep-alive的两个属性 9. keep-alive组件 10. Vue的核心 11...
html总结常见问题
liyongchunscr的博客
04-12 690
1. DOCTYPE 的作用是什么？ DOCTYPE文档类型声明，位于文档中的第一行，告诉浏览器的解析器 什么文档标准解析这个文档。DOCTYPE不存在或格式不正确，会导致文档以兼容模式呈现。 2. 标准模式与兼容模式各有什么区别？ 标准模式的排版中和JS运作模式都是以该浏览器支持的最高标准运行 在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器 的行为以防止站点无法工作 3. HTML5 为什么只需要写DOCTYPE ，而不需要引入 DTD？ HTML5 不基于 SGML，因此不需要
2022前端笔记
马航机长的博客
06-24 2179
tip：只记录本人记得不牢固的，或者有启发的点，新手建议多看书 1、原型链 实例对象的constructor也会指向构造函数 因为没有constructor属性会通过原型链找（容易忽略，是个小陷阱） function Person() {} var person = new Person(); console.log(person.constructor === Person); // true __proto__ 来自于 Object.prototype,更像是一个 getter/setter，使用 o
html文件加载速度太慢,JavaScript文件加载速度慢的解决方案总结
weixin_33954023的博客
06-10 1255
背景最近做的一个后台管理的项目，涉及一个页面多层弹框的情况。在最上层的弹框页面中，ueditor富文本编辑器相关的js加载速度过慢，几秒钟才加载完成(下层的页面和弹框加载js都没有出现这种速度慢的问题)，给用户的体验极其不好。在排除了网络等多种外部因素后，尝试过多种解决方案，发现只有通过动态加载的方式才能明显提高加载速度。注：当然，js文件大也是其中一个原因，我们也可以通过将大的js文件分割成多个...
html的执行与js的加载
weixin_44094720的博客
01-18 205
html的页面被浏览器解析，是由上到下进行加载的，如果要把加载js文件的引入代码放在head头部标签内，那么我们的js文件里是必须要添加一个 window.onload = function(){ } 因为从上往下执行，假设我们的js中有bug那么会导致页面堵塞body的内容加载不出来，这样就表示当我们页面当中的html包括图片/css等都加载完，在去执行js的代码 ...
html js 延迟加载,JS延迟加载方法
weixin_33977645的博客
06-08 1156
当一个网站有很多JS代码要加载，JS代码放置的位置在一定程度上将会影像网页的加载速度，为了让我们的网页加载速度更快，本文汇总了JS延迟加载的几种方法，希望对大家有用。1、延迟加载JS代码代码如下:setTimeout("document.getElementById('my').src='http://www.geilijz.com+js.js';",3000);//延时3秒这样通过延迟...
解决js延迟加载的方式
fangqi20170515的博客
09-21 2415
JS延迟加载就是页面加载完成之后再加载js文件，有助于提高页面加载速度。因为js是单线程，会阻塞DOM解析，因此也会阻塞DOM的加载。HTML元素是按其在页面中出现的次序调用的，如果用javascript来管理页面上的元素（使用文档对象模型dom），并且js加载于欲操作的HTML元素之前，则代码将出错。也就是说，我们写了js语句来获取DOM对象，但由于DOM结构还没有加载完成，因此获取到的是空对象。
前端服务器获取js文件偶尔慢,我也来总结一下我所知道的前端性能优化问题
weixin_29192365的博客
08-10 1367
前言这个问题无论是实际项目还是面试都是经常碰到的，所以非常有必要总结一下。下面分别从几个大的方面去分析一下前端性能优化，有些优化其实效果并不一定非常明显，但还是有必要知道。减少HTTP请求尽可能减少加载一个页面需要引用的资源个数，因为每一次HTTP请求都是客户端与服务端的一次重连，都是一笔不小的开销，可以采取的措施包括：使用精灵图CSS Sprites，又叫雪碧图，将页面中多个小图合并一张大图，然...
优化JS加载时间过长的一种思路
weixin_34160277的博客
05-13 839
文章版权由作者李晓晖和博客园共有，若转载请于明显处标明出处：http://www.cnblogs.com/naaoveGIS/。 1.背景 去年公司在漳州的一个项目中，现场工程人员反映地图部分出图有点缓慢，大约需要20多秒。和另外一个同事一起花了一两天进行了代码优化、代码压缩、中间件优化以及服务部署优化后使地图出图缩短到了9秒上下。 这里对上次的经验做一个总结，提供一种优化JS文件加载时间过...
html载入很慢如何优化,优化页面加载速度的方法 js css使用外部引入
weixin_31633071的博客
05-31 2573
css样式加载慢，怎么解决。CSS布局HTML小编今天和大家分享大神帮忙。在开发时遇到了一个问题，正常打开一个jsp页面 没什么问题，但是按住Ctr提高网站页面的加载速度的方法其实有很多，那本文主要从下面四个角度进行讨论，分享常用的提高网页加载速度的技巧： 一、网页压缩技术 对于网页压缩而言，相信各位站长都比较熟悉，主要是启用服务器Gzip，对页面Gzip压缩，减少元素的体积。网站性能优化 页面打...
如何设置外部js加载的时间限制_前端培训面试他分析-浏览器执行时间线
weixin_39805364的博客
12-03 207
根据js执行那一刻开始的执行顺序 浏览器加载的时间线1.创建document对象，开始解析web页面 这时document.readyState 等于’loading’2.遇到link标签（外部引用css）创建线程加载，并继续解析文档， 即异步加载3.遇到非异步的script标签，浏览器加载并阻塞，等待js加载完成4.遇到异步的script标签，浏览器创建线程加载，并继续解析文档。对于async属...
jfinal html css路径,jfinal请求路径中带有参数时，进入的页面无法加载js文件和css文件...
最新发布
06-06
在 JFinal 中，可以使用 `renderFreeMarker` 方法来渲染 HTML 页面，并在 HTML 页面中引入 CSS 和 JS 文件。如果请求路径中带有参数，可以通过在路由中使用 `render` 方法重定向到带参数的路径，然后在 HTML 页面中使用相对路径引入 CSS 和 JS 文件。 例如，假设有以下路由配置： ```java public void configRoute(Routes routes) { routes.add("/user/:id", UserController.class, "/user"); } ``` 当访问 `/user/123` 时，会进入 `UserController` 的 `index` 方法处理请求。在该方法中，可以使用以下代码重定向到带参数的路径： ```java public void index() { String id = getPara("id"); render("/user/user.html?id=" + id); } ``` 然后，在 `user.html` 中可以使用相对路径引入 CSS 和 JS 文件： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>User</title> <link rel="stylesheet" href="../../static/css/user.css"> <script src="../../static/js/user.js"></script> </head> <body> <p>User ID: ${id}</p> </body> </html> ``` 注意，需要根据实际的路径结构调整相对路径。以上代码中，假设 CSS 和 JS 文件分别存放在 `src/main/webapp/static/css` 和 `src/main/webapp/static/js` 目录下。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值