一、JavaScript初识
网页是=html+css+javascript
是一种编程语言,脚本语言,在浏览器端的,是在浏览器端运行,可以操作dom,可以和用户进行交互。
JavaScript操作页面内容,实现功能或者效果。包括三部分ecmascript,dom,bom.
其中ecmascript是JavaScript的核心,定义一个变量,做一个简单的加法,或者一个函数的循环(没有操作浏览器,与浏览器无关系,可以在服务器等运行,不知仅限于浏览器),剔除任何与浏览器页面相关的特性,只是一个语言,不会操作页面。
dom是通过js可以操作页面内容。
bom是脱离页面,与浏览器交互的。
nodejs是运行在服务器端的JavaScript。
链接内容
./表示当前文件夹下的文件夹
../回到上级目录
JavaScript的引入方式
1、内部样式
<script src="index.js"></script>
<script>
alert(1);
</script>
2、放在头部样式
JavaScript的渲染机制
1、解析html标签,构建dom树(dom包括文档、)
2、解析css标签,构建cssdom树()
3、把dom和cssdom合成渲染树
4、再渲染树的基础上进行布局,对?html和css,计算每个节点的几何结构。
5、把每个节点绘制到屏幕上。
一般都是css放前面,js放后面
二、白屏问题
当给一个页面时,首先加载html,第一种等到所以的样式(外置样式),解析过后,与内置样式进行合并,之后再渲染。
第二种,按照先后顺序,先出现的先渲染,遇到新的样式再渲染一遍遇到外链的css,再解析,遇到js再解析。(但是此种样式的渲染方式会出现无样式内容闪烁现象。)
第一种css放在最后时,过程比较漫长时,浏览器页面是不显示内容的,需要等到所有内容合并后,才进行渲染,就是白屏。这个解析方式是浏览器决定的。
js放在顶部时,加载时间较长时,也可能出现白屏
@import标签时,即使css是放在link下的,也可能出现白屏。
@import的使用方法
<style> @import url(index.css) </style>
如果把样式放在前面,不管浏览器以那种方式进行解析,都可以以最快的样式展现,
FOUC无样式内容闪烁
逐步加载无样式的内容,等css完全解析后页面样式突然展现,会出现页面闪烁。
js一般放在底部,只能一个一个加载,而css可以同时加载2个,4个等。
对于图片和css加载时,会并发加载,(js放在顶部时,加载时间较长时,也可能出现白屏)js不可以并发加载。
三、异步加载(延迟加载)
没有defer或async时,浏览器会立即加载病执行指定的脚本。立即是指在渲染script标签下的内容渲染之前,不等后续载入的文档元素,就加载执行。
有async,读到后,会加载script标签下的内容,再往后加载完成后再执行。与defer的区别是async不保证顺序。
异步加载的作用:
1、一键分享
2、网站数据统计
任何时候都可以加载,并不一定要等整个页面出来再加载。如果js代码放在前面,加上defer async不会阻塞整个页面
JavaScript初识
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...