首页 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脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前 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)

推荐:优秀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状态码是指当浏览器向服务器发起请求时,服务

JS 的 AI 时代来了! JS 的 AI 时代来了! Apr 08, 2024 am 09:10 AM

JS-Torch简介JS-Torch是一种深度学习JavaScript库,其语法与PyTorch非常相似。它包含一个功能齐全的张量对象(可与跟踪梯度),深度学习层和函数,以及一个自动微分引擎。JS-Torch适用于在JavaScript中进行深度学习研究,并提供了许多方便的工具和函数来加速深度学习开发。图片PyTorch是一个开源的深度学习框架,由Meta的研究团队开发和维护。它提供了丰富的工具和库,用于构建和训练神经网络模型。PyTorch的设计理念是简单和灵活,易于使用,它的动态计算图特性使

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

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

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属性来刷新当前页面等等。

See all articles