如何让js调用不影响页面的加载速度

简介: 在WEB页面最常用的语言除了HTML、样式表外就是javascript了,但您知道怎么使用javascript才能不影响页面的加载 速度吗?本文就来解决这个疑问,我们先来看看通常js 的加载 方式:  我们这样改一下:document.write("") 以下举例说明: 比如下面是某站长统计代码,以前尽管是把它放在页面的最底部,但还是拖累页面加载 进度。

在WEB页面最常用的语言除了HTML、样式表外就是javascript了,但您知道怎么使用javascript才能不影响页面的加载 速度吗?本文就来解决这个疑问,我们先来看看通常js加载 方式:
 
<script src="xxxx.js "></script>

我们这样改一下:
<script type="text/javascript">
document.write("<scr"+"ipt src=/"xxx.js /"></sc"+"ript>")
</script>

以下举例说明:

比如下面是某站长统计代码,以前尽管是把它放在页面的最底部,但还是拖累页面加载 进度。

<script src="http://s69.cnzz.com/stat.php?id=265381&web_id=265381&show=pic" language="JavaScript" charset="gb2312"></script>

我们可以把它换成这样的方式来加载 (任然放在页面最底部):



<script type="text/javascript">
document.write("<scr"+"ipt src=/"xxx.js /"></sc"+"ript>")
</script>


的方式,还可实现按需按条件的来加载 你要的JS 文件:

<script type="text/javascript">
if ( "心情好" ) {document.write("<scr"+"ipt src=/"xxx.js /"></sc"+"ript>")}
</script>

这样要是"心情不好",就自然不会 载入 你不想要的JS 文件了。


<script type="text/javascript">
document.write("<scr"+"ipt src=/"=http://s69.cnzz.com/stat.php?id=265381&web_id=265381&show=pic/" language=/"JavaScript/" charset=/"gb2312/"></sc"+"ript>")
</script>


这样速度快多了。


个人理解原因是:直接包含js 解析器会当做文件来加载 处理,(会优先下载js 文件然后再解析html代码),而用document.write,js 文件被当成html代码来解析,(同步加载 html文档和js 代码)不会影响到整个文档加载

目录
相关文章
|
2月前
|
缓存 JavaScript 前端开发
高效打造跨平台桌面应用:Electron加载服务器端JS
【9月更文挑战第17天】Electron 是一个基于 Chromium 和 Node.js 的开源框架,允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。加载服务器端 JS 可增强应用灵活性,实现代码复用、动态更新及实时通信。通过 HTTP 请求、WebSocket 或文件系统可实现加载,但需注意安全性、性能和兼容性问题。开发者应根据需求选择合适方法并谨慎实施。
115 3
|
3月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
48 5
|
2月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
67 2
前端JS读取文件内容并展示到页面上
|
1月前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(一)
JavaScript动态渲染页面爬取——Selenium的使用(一)
|
1月前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(二)
JavaScript动态渲染页面爬取——Selenium的使用(二)
|
2月前
|
JavaScript 前端开发
js 回到页面顶部
本文提供了一个JavaScript函数`scrollToTop`,用于平滑滚动页面回到顶部。该函数利用`requestAnimationFrame`和`window.scrollTo`方法逐步减少滚动条距离,直到页面完全回到顶部。
30 1
|
1月前
|
JavaScript 前端开发 API
JavaScript全屏,监听页面是否全屏
JavaScript全屏,监听页面是否全屏
48 0
|
1月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
|
1月前
|
存储 JSON JavaScript
JavaScript动态渲染页面爬取——Pyppeteer爬取实战
JavaScript动态渲染页面爬取——Pyppeteer爬取实战
|
2月前
|
JavaScript 前端开发
js怎么定位不同的页面元素
在JavaScript中,有多种方法定位和选择页面元素。
下一篇
无影云桌面