JavaScript的理解与用法-js教程-PHP中文网

首页

web前端

js教程

JavaScript的理解与用法

零下一度

Jun 26, 2017 am 11:25 AM

javascriptjs深入理解

（1）什么是JavaScript?

JavaScript是一种专为与网页交互而设计的脚本语言，由三个部分组成：（1）.ECMAScript ：提供核心语言功能。（2）.文档对象模型（DOM）：提供访问和操作网页内容的方法与接口（3）.浏览器对象模型（BOM）：提供与浏览器的交互的方法与接口

(2)HTML 代码执行情况

(现代浏览器原理)

作者：钱多多
链接：
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

1. html下载与执行是同步的吗?

结论：分情况。

html执行这个描述不准确，所谓的执行包括parseHTML、layout、paint几个阶段。download、parseHTML/parseCSS/executeJS、layout、paint都在不同进程中。

parseHTML/parseCSS并行，共同完成后layout生成渲染树，进而paint渲染。执行JS会重新回到layout阶段。

A.如果网速足够快，内容很快传送完毕，那parse+layout+paint会靠后执行。

B.如果弱网环境下，针对网速很慢的情况现代浏览器是有优化的，会尝试提前渲染已收到的内容，也就造成了pc上会看到页面一块一块展现的状况。

C.chunk原理类似，每个chunk断点都有可能触发解析渲染。

D.有些浏览器还会做首屏优化，下载过程中不断尝试parse+layout，如果layout计算出内容超过首屏就paint这些内容，让用户优先看到首屏内容。

大部分进程因为是并行的，会相对复杂，分情况讨论意义不大，不如从原理上理解。

2. css文件的下载和渲染是同步的吗? 还是先下载完, 再渲染?

不确定下载过程中是否同步做词法分析parseCss，但是可能性很大，毕竟是种无损失的优化方案，

但是最终肯定需要下载完再layout生成渲染树，进而渲染。

3. css文件的下载&执行和 html文件的下载&执行同步吗?

并行的。但是需要注意一些限制，比如一个域名下最大并发6个请求，再多就得串行。

4. 图形的加载和 html文件的下载/执行同步吗, 音视频呢, 别的资源呢?

同上。

5. js文件的下载&执行和html文件的下载&执行同步还是异步?如果带有async和defer呢?

下载，但不executeJS

6. 有没有可能出现html文件/图片/css文件/js文件同时下载的情况?

常态。

7. 有没有可能出现html/css文件/js文件同时执行的情况?

你读了上面文章就能理解了：html parse和css parse是并行的，两者完成后才会layout、paint，新的css挂载会延迟layout、paint。js parse会阻塞html parse ，所以后面的layout、paint一定不会同时执行。

（3）.在html 中使用JavaScript

3.1<script>元素 <script>元素的六个属性： 1. async：异步加载属性，可选。只对外部脚本有效，表示立即下载脚本，但不妨碍页面 的其他操作。 2. charset：字符编码属性，可选。默认是utf-8编码，主要表示通过src属性指定的 代码的字符集，大多浏览器会忽略它的值，所以不必使用。 3.defer：脚本延迟属性，可选。用来延迟脚本的执行时间，直到HTML文档已经全 部被解析和显示之后再执行，只对外部脚本文件有效。 4.language：脚本类型属性，不是标准组成的一部分，已废弃。大多数浏览器 会忽略这个属性，已没必要使用。 5.src：链接外部文件属性，可选。表示包含要执行代码的外部文件。注意， 一旦设置src属性，script元素中编写的JavaScript代码就可能无效。 6. type：脚本类型属性，必须。默认值为text/javascript可以看成language 的替代属性，表示编写代码所使用的内容类型（也叫mime类型）。 注意事项：代码中的任何地方都不要出现</script>

3.2 标签位置