首页 web前端 js教程 JavaScript的理解与用法

JavaScript的理解与用法

Jun 26, 2017 am 11:25 AM
javascript js 深入 理解

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

3.2 标签位置

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1671
14
CakePHP 教程
1428
52
Laravel 教程
1331
25
PHP教程
1276
29
C# 教程
1256
24
推荐:优秀JS开源人脸检测识别项目 推荐:优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属,在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别,大大缩短了用户等待时间,提高了用户体验;弱势是:受到模型大小限制,其中准确率也有限。如何在web端使用js实现人脸检测呢?为了实现Web端人脸识别,需要熟悉相关的编程语言和技术,如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是,由于Web端的计

PHP与JS开发技巧:掌握绘制股票蜡烛图的方法 PHP与JS开发技巧:掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展,股票投资已经成为了越来越多人的选择。而在股票交易中,蜡烛图是一种常用的技术分析方法,它能够显示股票价格的变化趋势,帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧,带领读者了解如何绘制股票蜡烛图,并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前,我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

js和vue的关系 js和vue的关系 Mar 11, 2024 pm 05:21 PM

js和vue的关系:1、JS作为Web开发基石;2、Vue.js作为前端框架的崛起;3、JS与Vue的互补关系;4、JS与Vue的实践应用。

如何在JavaScript中获取HTTP状态码的简单方法 如何在JavaScript中获取HTTP状态码的简单方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP状态码获取方法简介:在进行前端开发中,我们常常需要处理与后端接口的交互,而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法,并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时,服务

深入了解HTTP状态码100:它代表什么意思? 深入了解HTTP状态码100:它代表什么意思? Feb 20, 2024 pm 04:15 PM

深入了解HTTP状态码100:它代表什么意思?HTTP协议是现代互联网应用中最为常用的协议之一,它定义了浏览器和Web服务器之间进行通信所需的标准规范。在HTTP请求和响应的过程中,服务器会向浏览器返回各种类型的状态码,以反映请求的处理情况。其中,HTTP状态码100是一种特殊的状态码,用来表示"继续"。HTTP状态码由三位数字组成,每个状态码都有特定的含义

js刷新当前页面的方法 js刷新当前页面的方法 Jan 24, 2024 pm 03:58 PM

js刷新当前页面的方法:1、location.reload();2、location.href;3、location.assign();4、window.location。详细介绍:1、location.reload(),使用location.reload()方法可以重新加载当前页面;2、location.href,可以通过设置location.href属性来刷新当前页面等等。

JS中__proto__与prototype的区别 JS中__proto__与prototype的区别 Feb 19, 2024 pm 01:38 PM

JS中__proto__和prototype是两个与原型相关的属性,它们在功能上稍有不同。本文将具体介绍并比较这两者的区别,并提供相应的代码示例。首先,我们先来了解一下它们的含义和用途。proto__proto__是对象的一个内置属性,它用于指向该对象的原型。每个对象都有一个__proto__属性,包括自定义对象、内置对象和函数对象。通过__proto__属

See all articles