HTML文档引用外部js文件失效问题

2024-04-23 01:53:24

一：首先应该明确的几个问题：

1、在HTML中，使用JavaScript脚本代码的三种方式

（1）在script元素定义，其间的脚本代码在文档加载后顺序执行，并且执行一次。

（2）脚本代码可以定义在内建事件属性值中，当该事件被触发，就会执行属性值中的脚本代码。eg：

<button onclick = "javascript:所运行的Javascript语句"/>

(3)脚本代码可以位于一个独立的以.js为扩展名的源文件中。

2、脚本代码位置问题：

（1）script脚本代码可以在文档中包含一段脚本代码，该元素可以在HTML文档中出现任意次数，而且，该元素可以位于head元素或body元素内。

3、html文档的解析规则：

1html字符串被浏览器接收后一句一句读取并解析
2如果解析到link标签，便发送请求获取css；
3解析到script标签，发送请求获取js后并执行相应的代码
4解析到img后会请求图片资源
5在解析html过程中构建dom树，解析css等过程中构建渲染树，递归布局后进行页面绘制

从上到下进行解析。

二、HTML文档引用js失效问题

1、HTML文档解析是从上到下进行，就会出现CSS和JS解析顺序问题

CSS不阻塞DOM的加载和解析（它只阻塞DOM的渲染呈现。这里谈加载），不会阻塞其它资源的加载(比如图片)，但是会阻塞后续JS 文件的执行（原因之一是，js执行代码可能会依赖到css样式。css只阻塞执行而不阻塞js的加载）。
鉴于上面的特性，当css后面存在js的时候，css会间接地阻塞js后面资源的加载（css阻塞js，js阻塞dom）。因此将脚本文件放到 body 底部(但还是在</body>之前)就可以起到很不错的优化效（遵循先解析再渲染再执行script这个顺序）。可以将js文件或script元素的脚本代码放置在head中，但为了避免不必要的解析错误，直接将其放置在body尾部即可。

HTML文档引用外部js文件失效问题相关推荐

Angular7中引用外部JS文件
Angular7中引用外部JS文件,步骤如下: 1. 将引入的js文件放到项目的src/assets下 2. 在angular.json文件中找到scripts项并配置js文件的相对路径 3. 在sr ...
A66 TP5.0 html 引用外部js文件无效
切记,在tp5.0 中要将js 文件放置到public/static中,而且要将public 文件夹的属性设置为777,否则因为无法访问文件将导致js无效查看全文 http://www.taodu ...
挖坑指南：如何在引用的外部js文件中获取vue页面实例？（独家）
原文链接前言在基于iView的后台项目中,表格组件是我们的老朋友了.实现如下的效果更是最基本的需求: 开始在iView早期1.x的版本(其实在~2.0.0-rc.7也能使用),想要渲染这样的效果 ...
js加载html的head偶尔失效,外部 js 文件偶尔会加载失败
最近有一个很奇怪的问题一直困扰着我: html 页面中,head部分引入了几个外部js文件. 比如: // 目前页面结构就是这样,其他的代码都和此异常无关,就不多贴了. // 这里就直接报错,显示 V ...
html调用外部js文件乱码,引用的js文件有中文时乱码
Javascript 代码比较多时,通常把代码保存到一个独立的 js 文件中,这样不但利于减少 html 文件长度好布局修改,而且利于搜索引擎蜘蛛抓取.把 Javascript 代码放到 js 文件后 ...
文档编辑器与远端文件存储(Summernote)
文档编辑器与远端文件存储 summernote编辑器实现图片上传服务器并返回图片虚拟地址具体步骤如下: 1.在STS中创建spring boot项目,设置其项目结构为project explorer ...
Web项目中前端页面引用外部Js和Css的路径问题
公众号:南宫一梦 Web项目中前端页面引用外部Js和Css的路径问题一般我们在做Web项目时,通常会将多个页面引入的公共js和css文件抽取出来,单独写成一个公共文件,以期方便各个页面单独引入,达到 ...
JavaWeb中外部引入的js中涉及到location.href的页面跳转/jsp页面的外部js文件引入
当js在jsp页面中写的时候没有任何问题如下所示: function deleteP(obj){if(confirm("你真舍得丢弃我吗?")){//发送请求location.hr ...
大淘客php调用外部js,html调用外部js文件函数
Q1:怎么在html文件中调用js文件在html中调用js代码的方法主要有两种: 一.将javascript直接写在html文件中,然后在html中调用js函数等: 二.将js代码写一个文件中,然后 ...

最新文章

热门文章