day01认识js

发布于:2022-12-08 ⋅ 阅读:(580) ⋅ 点赞:(0)

javascript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言。被广泛的应用于web应用。(刚入门的小白理解不到哈哈哈,感兴趣的宝子百度吧哈哈哈,一些专业名词咱真的理解不到)

js代码的引用

  • 外部文件引入
    <script src="输入路径"></script>
  • 标签引入
    <script>
        
        //这里可以书写js代码

    <script>

拓展(简单讲述一下js文件和css文件的位置对页面渲染效率的影响)

首先我们大概了解一下页面渲染的过程

  1. 解析html并构建dom树
  2. 把dom树和cssom树结合起来构建渲染树
  3. 布局渲染树,计算几何形状
  4. 把渲染树投到屏幕并绘制(即遍历render树)

 

渲染过程图如下:

其次我们还需要了解:

        当解析到一个script标签的时候,渲染引擎判断这是一段js脚本,此时HTML解析器会暂时停止DOM解析,因为js可以修改当前已经生成的DOM结构。此时专门用于解析js代码的V8引擎介入,开始解析执行这段js脚本,等待js脚本执行完成之后,HTML解析器开始继续解析后续的内容,可以看出这段js脚本就将之前形成的DOM树节点进行了修改。 这也是js文件会影响页面渲染效率的原理。

以及:

        CSSOM具体的体现在DOM中就是document.styleSheets,它的数据结构是一个数组列表,列表中的每一项都是一个个的对象,指定了一系列CSS样式渲染的规则和信息。

接下来我们来简述一下css文件是怎么影响页面渲染的速率的:

        从js角度来看,CSSOM向js提供了操作DOM节点样式的能力。

        不管是内联的CSS文件还是外部引入的CSS层叠样式表,有一个前提就是如果解析HTML文档的时候页面中有script脚本,那么在script脚本的执行需要等待当前文档中的CSS文本被渲染引擎解析成为CSSOM这种结构之后,V8引擎中的JS代码才可以开始执行,因为V8引擎在执行js代码之前,是并不知道js代码要操作css样式的。也就是说,在CSSOM未加载完成时,此时恰巧在解析js代码段,这时候需要检查CSSOM树立有没有js操作DOM样式对应的方法和规则,若没有,则需要等待CSSOM加载完毕,才能继续解析js代码段。只有js执行完成之后才可以继续进行后续的DOM解析,总的来说就是script脚本的加载和执行会阻塞DOM解析,而CSS文件又会阻塞JS脚本的执行,所以CSS文件也是会间接的影响DOM的解析,从而影响布局树的合成,最终影响渲染流水线。

        总之,在执行js代码时,需要保证CSSOM的完整性。因此尽量把css文件放在head内部,把js文件放在文档的底部。

        这里附上一篇讲的比较详细的博客的链接:http://www.muzhuangnet.com/show/59368.htmlhttp://www.muzhuangnet.com/show/59368.html

正确的引用格式如下图:

变量

定义变量的方法

  • let
  • const(常量)
  • var
//方法:关键字 变量名 = 值

let Myname="lucy"

注意事项:

  • 声明之前不可调用
  • 不可重复声明
  • 值可更改
  • 常量不可修改

弹窗和日志

普通弹窗

alert("用于代码调试")

确认弹窗

confirm("你确认退出吗?")

输入弹窗

let name=prompt("请输入你的姓名:")

alert(name)

日志(控制台输出)

console.log("控制台输出")

本文含有隐藏内容,请 开通VIP 后查看