HTML中script标签

HTML中script标签

2023年6月20日发(作者:)

HTML中script标签⼀、script标签中的属性:在script标签中添加此属性,浏览器会开启异步下载脚本(执⾏到当前标签后⽴即下载),当下载完成后⽴即执⾏,但并不会按着script在页⾯中的顺序来执⾏,⽽是谁先加载完谁执⾏。DOMContentLoaded事件的触发并不受async脚本加载的影响,在脚本加载完之前,就已经触发了DOMContentLoaded。charset:此属性很少使⽤,指定src属性中加载的代码属性的字符集(如UTF-8)defer:在script标签中添加此属性,表⽰脚本可以延迟到⽂档完全被解析和显⽰之后再执⾏。只对外部脚本⽂件有效。如果script标签设置了该属性,则浏览器会异步的下载该⽂件并且不会影响到后续DOM的渲染;如果有多个设置了defer的script标签存在,则会按照顺序执⾏所有的script(但现实上并⼀定会按照顺序执⾏,也不⼀定会在dom加载完成后再执⾏,因此最好只添加⼀个defer);defer脚本会在⽂档渲染完毕后,DOMContentLoaded事件调⽤前执⾏。language:⽬前⼤多数浏览器已经弃⽤了这个属性。表⽰src属性中引⼊资源的语⾔类型src:指定要加载的外部的资源属性type:指定脚本类型的语⾔。虽然text/javascript和text/ecmascript都以不在被推荐使⽤,但仍有部分其他需要,如es6使⽤babel时text/babel。另外服务器在传送javascript⽂件时使⽤content-type类型是application/x-javascript,但type属性将⽆效。在⾮IE浏览器中还可以使⽤content-Type还可以使⽤application/javascript和application/ecmascript。注意:外部javascript⽂件带有.js扩展名。但这个扩展名不是必须的,因为浏览器不会检查包含javascript的⽂件扩展名。因此,使⽤JSP、PHP等服务端语⾔⽣成javascript语⾔成为了可能。浏览器端返回⽂件基于http请求的content-type的类型,因此需要服务器端返回正常的MIME类型。三、noscript标签⽤于不⽀持javascript的浏览器或者关闭javascript功能的浏览器,展⽰在noscript标签中的内容。123

请开启浏览器⽀持javascript

三、⽂档模式IE5.5引⼊了⽂档模式的概念,该模式可以通过html的doctype进⾏切换。最初的⽂档模式只有:混杂模式(quirks mode)和标准模式(standards mode)。混杂模式会让IE的⾏为与(包含⾮标准特性的)IE5相同,⽽标准模式则让IE的⾏为更接近标准⾏为。这两种模式主要影响css内容的呈现,但在某些情况下也会影响到javascript执⾏。随着IE⽂档模式的引⼊,其他浏览器⼚商也纷纷效仿。之后IE⼜提出了准标准模式(almost standards mode)。这种⽂档模式很多⾏为都符合标准模式,除了图⽚的间距的时候。在⽂档开始处如果没有发现⽂档类型声明,则所有浏览器都会默认开启混杂模式。开启混杂模式之后,不同的浏览器在这种模式下⾏为差异⾮常⼤,因此不建议开启该模式标准模式:准标准模式:四、浏览器渲染html的过程 1. 浏览器把获取到的html代码解析成1个Dom树,html中的每个tag都是Dom树中的1个节点,根节点就是我们常⽤的document对象。dom树⾥⾯包含了所有的html tag,包括display:none隐藏,还有⽤JS动态添加的元素等。 2. 浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体,在解析的过程中会去掉浏览器不能识别的样式,⽐如IE会去掉-moz开头的样式.3. dom tree和样式结构体(cssom)结合后构建呈现树(render tree),render tree有点类似于dom tree,但其实区别有很⼤,render tree能识别样式,render tree中每个node都有⾃⼰的style,⽽且render tree不包含隐藏的节点(⽐如display:none的节点,还有head节点),因为这些节点不会⽤于呈现,⽽且不会影响呈现的,所以就不会包含到 render tree中。注意: visibility:hidden隐藏的元素还是会包含到render tree中的,因visibility:hidden 会影响布局(layout),会占有空间。4.1、dom树结构,cssom,renderTreeCSSOM : 样式表解析完毕后,系统会根据选择器将CSS规则添加到对应的哈希表中。这些哈希表包括:ID哈希表、类名称哈希表、标记名哈希表等,还有⼀种通⽤哈希表,适合不属于上述类别的规则。如果选择器是ID,规则就会添加到ID表中;如果选择器是类,规则就会添加到类表中。4.2、cssom和dom树怎么匹配结合成renderTree (以dom节点匹配cssom) 从本渲染结点开始,判断此结点是否与选择器链表的当前选择器相匹配。如果匹配,判断此选择器与下⼀个选择器的关系:如果为NONE,表⽰本选择器是选择器链的最后⼀个,返回成功;如果关系为AND (⽐如:#),选择下⼀个选择器与本渲染结点继续⽐较;如果关系为CHILD,表⽰本选择器是下⼀个选择器的⼦结点,返回下⼀个选择器与下⼀个渲染结点的匹配结果;否则,关系为DESCENDANT,选择器和渲染结点各指向下⼀个结点,然后将渲染结点继续回溯,直到第⼀个满⾜回溯后的选择器的结点,此时将继续判断回溯后的选择器和回溯后的渲染结点是否匹配。 4.3、回流与重绘当render tree中的⼀部分(或全部)因为元素的规模尺⼨,布局,隐藏等改变⽽需要重新构建。这就称为回流。每个页⾯⾄少需要⼀次回流,就是在页⾯第⼀次加载的时候当render tree中的⼀些元素需要更新属性,⽽这些属性只是影响元素的外观,风格,⽽不会影响布局的,⽐如background-color。则就叫称为重绘。4.4、哪些情况会发⽣重绘,回流--不同的条件下发⽣重排的范围及程度会不同 :(1).页⾯初始渲染(2).改变字体,改变元素尺⼨(宽、⾼、内外边距、边框,改变元素位置等 各种情况: 设置 style 属性的值

激活 CSS 伪类,⽐如 :hover 操作 class 属性 (注意:如果修改属性不影响布局则不会发⽣重排)(3).改变元素内容(⽂本或图⽚等或⽐如⽤户在input框中输⼊⽂字)(4).添加/删除可见DOM元素(注意:如果是删除本⾝就display:none的元素不会发⽣重排;visibility:hidden的元素显⽰或隐藏不影响重排)(5).fixed定位的元素,在拖动滚动条的时候会⼀直回流(6). 调整窗⼝⼤⼩(Resizing the window)(7).计算 offsetWidth 和 offsetHeight 属性【注释2】【注释2:flush队列】浏览器是聪明的,当对以下属性进⾏操作的时候:包括:offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。浏览器不会马上操作它们,⽽是会先缓存在队列中,有⼀定时间顺序去执⾏这些操作,但是在这过程中我们需要去获取在该队列中的属性时,浏览器为取得正确的值就会触发重排。这样就使得浏览器的优化失效了。所以,在多次使⽤这些值时应进⾏缓存。

发布者:admin,转转请注明出处:http://www.yc00.com/news/1687263728a488.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信