（1）什么是JavaScript?

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

(2)HTML 代码执行情况

http://blog.jobbole.com/12749/(现代浏览器原理)

　　

作者：钱多多
链接：https://www.zhihu.com/question/59024365/answer/161615976
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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 标签位置

<script>放置位置有两个：（1）<head>中（2）<body>中
 
（1）<head>：一般惯例放在<head>中
（2）<body>：放在<head>中时浏览器必须将js程序下载解析完毕后才会呈现页面内容，造成一定的延时（遇到<body> 才显示页面内容）。故而web程序将js代码放入<body>中
 
3.3 延迟脚本
defer 标签：加入defer 该js程序会在整个页面都下载解析完成后才开始执行
 
注意：< 符号在xhtml 中为&lt
 
3.4文档模式
 
建议使用：<!DOCTYPE html>
 
3.5 <noscript>元素
 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<noscript>
    <p>本浏览器不支持script</p>
</noscript>
</body>
</html>
触发条件：1.浏览器不支持脚本
　　　　　　2.浏览器支持脚本，但是脚本被禁用
 

JavaScript的深入理解（1）的更多相关文章

  1. javascript单例模式的理解

    javascript单例模式的理解 阅读目录 理解单例模式 使用代理实现单例模式 理解惰性单例 编写通用的惰性单例 单例模式使用场景 回到顶部 理解单例模式 单例模式的含义是: 保证一个类只有一个实例 ...

  2. JavaScript面向对象的理解

    JavaScript面向对象的理解  笔记链接: http://pan.baidu.com/s/1c0hivuS 1:JavaScript 中分两种对象,函数对象和普通对象new Function() ...

  3. javascript javascript面向对象的理解及简单的示例

    javascript面向对象的理解及简单的示例 零.本节重点: 1.封装: 2.继承: 壹.下面理解: 一. javascript面向对象概念: 为了说明 JavaScript 是一门彻底的面向对象的 ...

  4. javaScript深入浅出之理解闭包

    javaScript深入浅出之理解闭包 引言 闭包是个老生长谈的话题了,对于闭包网上也有很多不同的看法 <你不知道的javaScript>对于闭包是这么定义的:函数创建和函数执行不在同一个 ...

  5. JavaScript：彻底理解同步、异步和事件循环(Event Loop) （转）

    原文出处:https://segmentfault.com/a/1190000004322358 一. 单线程 我们常说"JavaScript是单线程的". 所谓单线程,是指在JS ...

  6. 通过JavaScript原型链理解基于原型的编程

    零.此文动机 用了一段时间的Lua,用惯了Java C++等有Class关键字的语言,一直对Lua的中的面向对象技术感到费解,一个开源的objectlua更是看了n遍也没理解其中的原理,直到看到了Pr ...

  7. 细心看完这篇文章，刷新对Javascript Prototype的理解

    var person={name:'ninja'}; person.prototype.sayName=function(){ return this.name; } 分析上面这段代码,看看有没有问题 ...

  8. 【JavaScript】深入理解JavaScript之强大的原型和原型链

    由于JavaScript是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. AD: hasOwnProperty函数: hasOw ...

  9. 对javascript this的理解

    对于this的理解,大部分时间都比较模糊,最近几天做了一些研究,记录一下 首先应该明白,this是执行上下文的一个属性,它的值取决于执行上下文,执行上下文和函数调用方式相关,定义一个function的 ...

  10. 深入理解JavaScript系列+ 深入理解javascript之执行上下文

    http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html http://blog.csdn.net/hi_kevin/article/d ...

随机推荐

  1. 【题解】Luogu P5304 [GXOI/GZOI2019]旅行者

    原题传送门 题意:给你k个点,让你求两两最短路之间的最小值 我们考虑二进制拆分,使得每两个点都有机会分在不同的组\((A:0,B:1)\)中,从源点\(S\)向\(A/B\)中的点连边权为0的边,从\ ...

  2. logstash解析tomcat的catalina.out日志字段

    filter { mutate { remove_field => ["@version","prospector","input", ...

  3. spring cloud各个版本之间的区别

    最近公司在使用spring cloud进行开发,对于spring cloud版本号一直有疑惑. 那个版本在前?那个版本在后? 那个版本是最新的? 一.常见版本号说明 举个瓜:2.0.3 RELEASE ...

  4. Teamviewer显示“未就绪，请检查您的连接”解决办法

    打开TeamViewer一直提示“未就绪,请检查您的连接”,一直会弹出一个框提示检查网路设置什么. 解决办法:修改DNS为114.114.114.114,然后TeamViewer就显示网络正常. 为什 ...

  5. Spring-Cloud之Ribbon负载均衡-3

    一.负载均衡是指将负载分摊到多个执行单元上,常见的负载均衡有两种方式.一种是独立进程单元,通过负载均衡策略,将请求转发到不同的执行单元上,例如 Ngnix .另一种是将负载均衡逻辑以代码的形式封装到服 ...

  6. Java web服务端参数校验Javax.validation （springboot）

    一.基本使用 Javax.validation是spring集成自带的一个参数校验接口.可通过添加注解来设置校验条件. 下面以springboot项目为例进行说明.创建web项目后,不需要再添加其他的 ...

  7. iOS学习——（转）解决iOS App打包后dSYM文件找不到的问题

    dSYM文件缺失通常有两种情况**: 情况一:配置错误导致打包时没有生成dSYM文件 针对这种情况,通常是因为Project -> Build Settings下的Debug Informati ...

  8. Java文件流下载并提示文件不存在

    做文件下载功能的时候,一般使用流的形式下载文件, 如果源文件不存在,下载页面可能就会没有提示,或者一片空白 用户操作之后可能一头雾水,那如何友好提示呢? 想到的有两种 1.可以尝试下载一个名称为:文件 ...

  9. 【故障处理】分布式事务ORA-01591错误解决

    [故障处理]分布式事务ORA-01591错误解决 1  BLOG文档结构图       2  前言部分 2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你 ...

  10. Cglib invoke为什么会死循环?

    目录 Cglib invoke为什么会死循环? 动态代理子类的java文件 动态代理子类实例化过程 动态代理类调用过程 动态代理之MethodProxy.invokeSuper Cglib invok ...