如何让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
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
128 2
|
6月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1145 58
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
272 1
|
9月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
405 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
10月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
489 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
9月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
276 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
10月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
299 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
8月前
|
JavaScript 前端开发 API
纯js轻量级页面顶部Loading进度条插件
纯js轻量级页面顶部Loading进度条插件
|
缓存 前端开发 JavaScript
JavaScript加载优化
JavaScript加载优化
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
225 1