`
tjuking
  • 浏览: 193773 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

<script>标签位置的影响

Javascriptscript延迟加载标签位置body 
阅读更多

通常情况下，我们会把<script>标签放置于<head>标签内，如下所示：

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<script type=”text/javascript” src=”文件1.js”></script>
<script type=”text/javascript” src=”文件2.js”></script>
<script type=”text/javascript” src=”文件n.js”></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>

 这样做的好处就是把所有的外部链接（Javascript、CSS等）放在一起便于管理和维护。不过，如果引入较多的Javascript文件则会导致一些问题。

 

我们知道，head标签是前于body标签处理的，在head标签的所有文件加载完前是没法进行body内容的展示和渲染。如果js代码较多、文件较大或者数量较多很有可能导致用户需要较长的等待时间才能看到页面的结构和内容，这对于良好的用户体验设计而言是非常不好的。

 

此时可以将这样的script标签放置于body标签的底部，如下所示：

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
<!-- 页面内容 -->
<script type=”text/javascript” src=”文件1.js”></script>
<script type=”text/javascript” src=”文件2.js”></script>
<script type=”text/javascript” src=”文件n.js”></script>
</body>
</html>

 当然我们应该认识到，对于Javascript文件的延迟加载，有可能导致在页面展示后Javascript未加载而无法交互或发生Javascript错误。

2
顶
3
踩
分享到：
| 数据库字段名和数据库关键字冲突
评论
2 楼 宁极而待 2015-11-04  
题目写的这么大，没什么实质性内容
1 楼 tomastong 2014-03-01  
页面结构完成之后，才加载js文件，是不是就意味着先展示静态内容，后渲染呢
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ASP.NET的网页代码模型及生命周期

    编程代码在script标签，并使用runat=“server”属性标记。创建一个单文件页模型，在【文件】按钮中选择【新建文件】选项，在弹出对话框中选择【Web窗体】或在右击当前项目，在下拉菜单中选择【添加新建项】选项即可...

    教你用javascript实现随机标签云效果_附代码

    权重影响使用的字体大小或其他视觉效果。同时，直方图或饼图表是最常用的代表约12种不同的权数。因此，标签云彩能代表更多的权，尽管不那么准确。此外，标签云通常是可以交互的：标签是典型的超链接，让用户可以仔细...

    实现高性能JavaScript之执行与加载

    浏览器在处理HTML页面渲染和JavaScript脚本执行的时候是单一进程的,所以在...1.script标签的位置 当[removed]出现在&lt;head&gt;中的时候,比如: &lt;head&gt; [removed][removed] &lt;script type="text/javascript

    KODExplorer 芒果云-资源管理器

    - 文件名非法字符限定 &lt;script&gt; - 树目录展开箭头状态修复 - 树目录新建文件,没有子节点刷新bug解决 - 文件大小为0上传不了问题 - windows下进入某些系统文件夹死循环bug解决 - tips 居中显示 - 任务栏标签...

    网际畅游 MyIE 3.0 源代码

    （MyIE选项对话框/标签/标签位置/上部或下部） Tips:使用Ctrl-Tab可快速切换标签。 标签栏有三种形式：单行， 多行， 自适应。自适应标签会根据标签数量自动调整标签的宽度，使他们尽量保持在一行内。 图标...

    JavaScript 性能提升之路（推荐）

    1、将所有script标签放在尽可能接近body标签底部的位置，尽可能减少对整个页面下载的影响。 2、尽量少用全局变量。因为变量在作用域链中的位置越深，访问的时间就越长。局部变量位于作用域链中的第一个对象中，全局...

    thread-js:在浏览器中使用多线程的库

    线程js 该库使用被调用的 Ajax 或标有“tjs-script-include”类的脚本标签，并从 src 下载它们，或者如果标有“tjs-script-execute”类，并且需要获得唯一的 id 以便队列可以跟踪在它上面使用“data-tjs-pid”属性和...

    ExtAspNet_v2.3.2_dll

    -Window的Target属性由字符串类型变为枚举类型，注意更新以前的代码：Target="_self" -&gt; Target="Self", Target="_parent" -&gt; Target="Parent"。 -MenuButton, LinkButton, Button, LinkButtonField的...

    如何提高javascript加载速度

    标签底部的位置，以保证页面在脚本运行之前完成解析尽量减少对整个页面下载的影响 2、限制页面的[removed]总数也可以改善性能。每当页面解析碰到一个[removed]标签时， 紧接着有一段时间用于代码执行。最小化这些...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -Window的Target属性由字符串类型变为枚举类型，注意更新以前的代码：Target="_self" -&gt; Target="Self", Target="_parent" -&gt; Target="Parent"。 -MenuButton, LinkButton, Button, LinkButtonField的...

    grub4dos-V0.4.6a-2017-02-04更新

    y_offset&lt;=4，是项目帮助的显示行数； color 默认 “color helptext"; --u 恢复菜单原始状态。 --timeout=[x]=[y]=[color] 倒计时位置、颜色。单位：列，行，24位色彩。 2015-05-14（yaya） 改进 NTFS 文件...

    文章管理系统

    3.[改进]完善过滤script标签的JS函数 4.[改进]后台密码设置由原来限制最长20位扩展到50位 5.[纠正]纠正幻灯片下面的广告位和首页栏目广告位宽度少2像素BUG 6.修复其他小细节 2013年03月02日 V2.71更新包 ★更新...

    易语言程序免安装版下载

    　此次重大版本升级不影响以前的源代码(.e)和模块(.ec)。只要代码或模块中未用到“不支持静态编译”的支持库、COM/OCX等，都可以静态编译。以前编译好的模块(.ec)甚至不需要重新编译即可直接支持静态编译。 　支持库...

    计算机应用技术(实用手册)

    此项目可选择硬盘开机的优先级，按下&lt;Enter&gt;的按键，你可以进入它的子选单，它会显示出已侦测到可以让您选择开机顺序的硬盘，以用来启动系统。当然，这个选项要在你安装了两块或者两块以上的系统才能选择！ HDD ...

Magicbox
Global site tag (gtag.js) - Google Analytics