JavaScript的深入理解(1)
(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 标签位置
<!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)的更多相关文章
- javascript单例模式的理解
javascript单例模式的理解 阅读目录 理解单例模式 使用代理实现单例模式 理解惰性单例 编写通用的惰性单例 单例模式使用场景 回到顶部 理解单例模式 单例模式的含义是: 保证一个类只有一个实例 ...
- JavaScript面向对象的理解
JavaScript面向对象的理解 笔记链接: http://pan.baidu.com/s/1c0hivuS 1:JavaScript 中分两种对象,函数对象和普通对象new Function() ...
- javascript javascript面向对象的理解及简单的示例
javascript面向对象的理解及简单的示例 零.本节重点: 1.封装: 2.继承: 壹.下面理解: 一. javascript面向对象概念: 为了说明 JavaScript 是一门彻底的面向对象的 ...
- javaScript深入浅出之理解闭包
javaScript深入浅出之理解闭包 引言 闭包是个老生长谈的话题了,对于闭包网上也有很多不同的看法 <你不知道的javaScript>对于闭包是这么定义的:函数创建和函数执行不在同一个 ...
- JavaScript:彻底理解同步、异步和事件循环(Event Loop) (转)
原文出处:https://segmentfault.com/a/1190000004322358 一. 单线程 我们常说"JavaScript是单线程的". 所谓单线程,是指在JS ...
- 通过JavaScript原型链理解基于原型的编程
零.此文动机 用了一段时间的Lua,用惯了Java C++等有Class关键字的语言,一直对Lua的中的面向对象技术感到费解,一个开源的objectlua更是看了n遍也没理解其中的原理,直到看到了Pr ...
- 细心看完这篇文章,刷新对Javascript Prototype的理解
var person={name:'ninja'}; person.prototype.sayName=function(){ return this.name; } 分析上面这段代码,看看有没有问题 ...
- 【JavaScript】深入理解JavaScript之强大的原型和原型链
由于JavaScript是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. AD: hasOwnProperty函数: hasOw ...
- 对javascript this的理解
对于this的理解,大部分时间都比较模糊,最近几天做了一些研究,记录一下 首先应该明白,this是执行上下文的一个属性,它的值取决于执行上下文,执行上下文和函数调用方式相关,定义一个function的 ...
- 深入理解JavaScript系列+ 深入理解javascript之执行上下文
http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html http://blog.csdn.net/hi_kevin/article/d ...
随机推荐
- AVR单片机教程——EasyElectronics Library v1.3手册
bit.h delay.h pin.h wave.h pwm.h tone.h adc.h button.h switch.h rotary.h pot.h ldr.h led.h rgbw.h se ...
- C复习 (C premier plus和C和指针)
- redis-集群(codis和Cluster)
codis 和 cluster 对比图: codis工作图: cluster工作图:(去中心化)
- SpringBoot整合freemarker 引用基础
原 ElasticSearch学习笔记Ⅲ - SpringBoot整合ES 新建一个SpringBoot项目.添加es的maven坐标如下: <dependency> <groupI ...
- Outlook 邮件助手
Outlook 邮件助手 1 Overview 2 C# 编程 3 Outlook 设置 3.1 Outlook 2013 3.2 Outlook 2010 1 Overview 本章将示例如何开发一 ...
- 防止用户重复提交表单数据,session方式,js方式
1. 使用session的方式创建Token令牌解决 创建一个生成令牌的工具类,在该类中有返回类的对象,生成token的方法 public class TokenUtil { /* *单例设计模式(保 ...
- SpringDataRedis
一.简介 1.SpringData和Redis Redis将数据存储到内存的,速度快.可以解决请求mysql数据库过多而导致mysql崩溃的问题. SpringData是专门用来控制Redis的工具, ...
- Javascript处理数组的方法
一 迭代方法 ES5为数组定义了5个迭代方法,这些方法大大方便了处理数组的任务,支持这些方法的浏览器有 IE9+,Firefox2+,Safari3+,Opera9.5+和Chrome. 1 ever ...
- 【MFC】在CHtmlView中在同一窗口显示新打开页面
使用MFC的单文档,用IE核心做的简单浏览器.当打开一个新的链接时,IE核心会使用IE来打开一个新窗口显示打开的新页面.为了让新页面在本程序中显示,我试了如下方法,其中的问题一并列出: 方法1.重载C ...
- 2.live555源码分析----服务端doEventLoop()函数分析
上一篇博客说道,live555服务端main函数做的最后一件事就是调用如下代码陷入死循环: env->taskScheduler().doEventLoop(); // does not ret ...