php中script标签,关于 script 标签你应该知道的
script标签用来在网页中执行JavaScript,它可以直接包含JavaScript代码,也可以直接通过src指向一个同域或者不同域的外链。
1. script标签默认会阻塞页面解析,并按照它们出现的顺序执行
console.log('b')
浏览器在解析到上面的script标签时会阻止页面解析,并平行下载a.js, b.js,依次执行a.js, console.log('b'), b.js 后,再继续解析渲染页面。这也是为什么你会经常看到一些建议将需要DOM操作的js要放在body的最后,不阻塞页面html的解析。
2. script标签的async和defer 属性
async 仅适用于外链,规定脚本异步执行
下载不会阻塞页面解析
不会按照出现的顺序执行,先下载完成哪个就先执行哪个
执行的时候,有可能页面还没解析完成
defer仅适用于外链,规定脚本延迟执行
不会阻塞页面解析
在html解析完成后, DOMContentLoaded之前执行
会按照出现的顺序执行
3. type为module的script标签
相比传统script,将被当作一个JavaScript模块对待,被称为module script,且不受charset和defer属性影响。
// app.js
import { assign } from "./utils.js"
var obj = Object.create(
{ foo: 1 },
{
bar: { value: 2 },
baz: { value: 3, enumerable: true }
},
)
var copy = assign({}, obj)
console.log(copy)
上面的代码,可以这么理解:
支持module script的浏览器,不会执行拥有nomodule属性的script
不支持module script的浏览器,会忽略未知的type="module"的script,同时也会忽略传统script中不认识的nomodule属性,进而执行传统的bundle.js代码
module script以及其依赖所有文件(源文件中通过import声明导入的文件)都会被下载,一旦整个依赖的模块树都被导入,页面文档也完成解析,app.js将会被执行
但是如果module script里有async属性,比如,module script及其所有依赖都会异步下载,待整个依赖的模块树都被导入时会立即执行,而此时页面有可能还没有完成解析渲染。
传统script和module script如何被下载执行可以用下图来概括:
4.script标签的integrity属性
integrity属性是资源完整性规范的一部分,它允许你为script提供一个hash,用来进行验签,检验加载的JavaScript文件是否完整。
上面的代码来自github源码,integrity="sha256-PJJrxrJLzT6CCz1jDfQXTRWOO9zmemDQbmLtSlFQluc="告诉浏览器,使用sha256签名算法对下载的js文件进行计算,并与intergrity提供的摘要签名对比,如果二者不一致,就不会执行这个资源。
intergrity的作用有:
减少由【托管在CDN的资源被篡改】而引入的XSS 风险
减少通信过程资源被篡改而引入的XSS风险(同时使用https会更保险)
可以通过一些技术手段,不执行有脏数据的CDN资源,同时去源站下载对应资源
注意:启用 SRI 策略后,浏览器会对资源进行 CORS 校验,这就要求被请求的资源必须同域,或者配置了 Access-Control-Allow-Origin 响应头
5.script标签的crossorigin属性
crossorigin的属性值可以是anonymous、use-credentials,如果没有属性值或者非法属性值,会被浏览器默认做anonymous。crossorigin的作用有三个:
crossorigin会让浏览器启用CORS访问检查,检查http相应头的Access-Control-Allow-Origin
对于传统script需要跨域获取的js资源,控制暴露出其报错的详细信息
对于module script,控制用于跨域请求的凭据模式
我们在收集错误日志的时候,通常会在window上注册一个方法来监测所有代码抛出的异常:
window.addEventListener('error', function(msg, url, lineno, colno, error) {
var string = msg.toLowerCase()
var substring = "script error"
if (string.indexOf(substring) > -1){
alert('Script Error: See Browser Console for Detail')
} else {
var message = {
Message: msg,
URL: url,
Line: lineNo,
Column: columnNo,
'Error object': JSON.stringify(error)
}
// send error log to server
record(message)
}
return false
})
但是对于跨域js来说,只会给出很少的报错信息:'error: script error',通过使用crossorigin属性可以使跨域js暴露出跟同域js同样的报错信息。但是,资源服务器必须返回一个Access-Control-Allow-Origin的header,否则资源无法访问。
6. 动态导入script(Dynamically importing scripts)
function loadError (error) {
throw new URIError(`The script ${error.target.src} is not accessible.`)
}
function importScript (src, onLoad) {
var script = document.createElement('script')
script.onerror = loadError
script.async = false
if (onLoad) { script.onload = onLoad }
document.header.appendChild(script)
script.src = src
}
可以上面的方法动态加载js资源,但是要注意的是,默认append到文档中的script会异步执行(可以理解为默认拥有async属性,如果需要加载的js按顺序执行,需要设置async为false)
7. script标签的onerror
JavaScript运行时的错误(抛出的语法错误和异常)发生时,实现了ErrorEvent接口的error事件在window上触发,并且调用window.onerror(或者window.addEventListener('error, cb))的回调函数
当资源(如 或
8. script标签与innerHTML
通过 innerHTML 动态添加到页面上的 script 标签则不会被执行
document.head.innerHTML += ``
可以用这个恶搞一下同事~
php中script标签,关于 script 标签你应该知道的相关推荐
- 关于MLOps中的数据工程,你一定要知道的.......
关于MLOps中的数据工程,你一定要知道的....... 背景: 数据工程是什么: MLOps中的数据工程有哪些看点? 1.数据收集 2.数据探索 3.数据处理 4.特征工程 5.暗线 背景: 21世 ...
- 解决VS2010 beta2 安装后html标签和script智能提示不起作用的问题
此文已经移至:解决VS2010 beta2 安装后html标签和script智能提示不起作用的问题 安装VS2010 beta2 后,发现正常的html标签的智能提示不起作用,比如<a>, ...
- 第一篇-Html标签中head标签,body标签中input系列,textarea和select标签
第十四周课程(1-12章节) HTML 裸体 CSS 穿华丽衣服 Javascript 动起来 一 HTML (20个标签) 1.我们的浏览器是socket客户端 2.一套规则,浏览器认识的规则 ...
- html页面包含头文件,Web前端技术:HTML部分---Head标签中包含的头文件标签,body标签包含的内部标签...
1.Head标签中包含的 头文件标签的作用: (1)title标签:定义网页的标题. (2)meta标签:一般用于定义页面的特殊信息,例如页面的关键字.页面描述等 (3)link标签:用于引入外部样式 ...
- html中radio单选按钮控件标签用法解析及如何设置默认选中
Radio 对象代表 HTML 表单中的单选按钮.在 HTML 表单中 <input type="radio"> 每出现一次,一个 Radio 对象就会被创建.单选按钮 ...
- 总结HTML中不经常使用的标签
参考链接:HTML参考手册 过时的标签: 全部浏览器均兼容的标签 1.<abbr></abbr>标记一个缩写 The <abbr title="People's ...
- 在Win10系统中使用labelme制作图像分割标签数据
在Win10系统中使用labelme制作图像分割标签数据 文章目录 在Win10系统中使用labelme制作图像分割标签数据 前言 一. 安装labelme3.16.2 1. 安装Anaconda(若 ...
- HTML中的head和body标签及作用
head标签 head标签用于定义文档的头部,它是所有头部元素的容器.<head>中的元素可以引用脚本.只是浏览器在哪里找到样式表.文档的头部描述了文档的各种属性和信息,包括文档的标题.在 ...
- vue修改meta值_vue中动态设置meta标签和title标签的方法
vue中动态设置meta标签和title标签的方法 因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 ...
最新文章
- 【跃迁之路】【531天】程序员高效学习方法论探索系列(实验阶段288-2018.07.21)...
- jquery的contains如何实现精准匹配
- 合并两个有序的单链表
- Unity3D 游戏引擎之IOS高级界面发送消息与Unity3D消息的接收(九)
- SIGPIPE 13 和其他信号的对照表
- 1000套电子物联网专业毕业设计和电赛设计资料822份
- Eview操作步骤——数据导入及数据建模
- html项目答辩ppt范文,论文答辩ppt 论文ppt答辩模板|论文答辩ppt范文6页
- 【定量分析、量化金融与统计学】分类变量与多元非线性关系与子集的选择
- 天津大学计算机学院网韩瑞泽,2018天津大学计算机学院考研拟录取名单
- java国际时间转换为北京时间
- 19年绝响,张国荣「复活」!AI高清修复《热·情》燃爆2000万观众
- 在react中使用swiper/react
- c4d语言包英文,Maxon Cinema 4D R23(C4D R23)中英文安装及设置详细教程(附下载)
- QCC512x QCC302x earbud工程 LED 配置
- 先电openstack2.4云计算省赛任务一:iaas平台搭建任务
- DAY DAY UP 1
- 微信Android资源混淆打包工具
- 【渝粤教育】国家开放大学2019年春季 773初级会计电算化 参考试题
- 计算机三级考试时间duan,英语三级考试作文常用句子大全
热门文章
- office 长时间无限制使用办公软件(简易方便)
- 2021-2027中国智能网站无障碍访问工具市场现状及未来发展趋势
- 海参无线呼叫服务器,简单介绍无线呼叫器原理
- KUKA机器人通过EthernetKRL控制
- 使用bootstrap进行表格布局,文字垂直居中
- 现在3D建模师工资如何?
- Android使用AChartEngine制作动态心电图效果
- 编写非递归算法实现二叉树的前序遍历
- php h5视频播放器,基于JSON数据HTML5视频播放器js插件
- html网页制作校园失物招领,Jsp+SpringMvc+Mysql实现的校园失物招领管理平台毕设指导思路模板...