关于浏览器对html, js,css的解析先后顺序的理解

摘要:
有两种情况:①对于html文件,当我们使用浏览器访问它们时,我们可以自动解析它们,解析后内容将显示在浏览器上;②对于jsp文件,当我们使用浏览器访问它们时,我们编写的jsp文件将生成。java文件,服务器将运行java文件,并将在jsp中编写的html代码发送到浏览器,这可以通过这种方式理解。我们编写的html文件由浏览器直接解析,我们编写的jsp在java代码的帮助下发送到浏览器。浏览器基本上通过浏览器再次解析html代码。2.加载顺序˂!
1.首先要了解页面的结构(包含哪些元素?哪些计算机语言能够在页面中运行 )
(1)html
         不仅可以包含文字,还可以包含图片、链接,甚至音乐、程序等非文字元素的标记语言
         (展示给用户,不能太单调,css)
(2)css
         是一种用来表现HTML的计算机语言,能使HTML页面变得更加美观
         (要展示给用户光漂亮是不够的,用户还要能够动态的操作HTML页面,也就是让浏览器和用户之间的交互不仅仅是用户能浏览html中的内容,还要能对html页面操作,JavaScript)
(3)JavaScript
         用来给HTML网页增加动态功能、交互行为
         是一种解释性脚本语言(不进行预编译)
         目前我们熟悉的语言Java、JavaScript、C、C++,都属于高级编程语言
         ①计算机不能理解高级语言,也就不能直接执行高级语言了
         ②计算机只能直接理解机器语言,所以任何语言,都必须将其翻译成机器语言,计算机才能运行高级语言编写的程序
         ③翻译的方式有两种,一个是编译,一个是解释。
              1)编译:Java语言的运行先经过编译,但是JAVA语言的编译不是直接编译成计算机能识别的语言,而是编译成JAVA虚拟机能识别的class文件
                              JAVA语言就是典型的翻译方式为编译的编程语言,
                              虽然不是编译成计算机能直接识别的语言,但是同其他以编译为翻译方式的高级编程语言的原理大体上是相同的。
                              最明显:C/C++,可以编译成二进制代码,以可执行文件的形式存在(exe文件)
                              都是先编译再运行,而且是一次编译到处运行,效率非常高。(只需要在第一次运行的时候编译一次)
              2)解释:解释性脚本语言的程序不需要编译,解释性脚本语言在运行程序的时候才翻译
                              解释性脚本语言有专门的解释器来负责解释,不过每次都需要翻译,效率比较低。
                              JavaScript 就是一种解释性脚本语言
         ④JavaScript也有自己专门的解释器——JavaScript引擎,它存在于浏览器端,作为浏览器的一部分
一句话:html(超文本标记语言)、css(层叠 样式表)、JavaScript脚本语言这三样东西在浏览器端相互配合、相辅相成形成了比较成熟的前端界面
(4)这三样东西在HTML页面中的位置
html的基本结构  
<html>  
    <head>  
        <!-- 头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果 -->  
    </head>  
    <body>  
        <!-- 显示实际内容 -->  
    </body>  
</html>  
 
①html:贯穿整个页面
        ②css:三种声明方式
                     外联样式表:在head便签中 用link标签的href属性来引用后缀名为.css的css样式文件
                     内联样式表:在head标签下的style标签中,选择器 + 样式声明
                     内部样式表:在标签的style属性中添加css样式声明
        ③JavaScript:在<script>标签中,可以在head标签中,也可以在body标签中(区别一会再说)
                     
小总结:
以上内容总结出一句话:目前为止,在整个html页面中,可以写html代码、css样式、JS脚本语言
                                        位置:html贯穿整个页面,css可以定义在head头标签中,也可以在定义在html标签的属性中
                                         JavaScript定义在<script>标签中,<script>标签既能在head标签中定义也能在body标签中定义
问题1:JQuery、EasyUI也可以写在html页面中
             jQuery是一个快速、简洁的JavaScript框架(本质上也是JavaScript)
             EasyUI:类库中都是以 .css和.js结尾的文件。别人写好的css样式和JavaScript(本质上也是css和JavaScript)
             所以追其根源,html页面中就是 html、css、JavaScript
问题2:jsp中能编写Java代码
             jsp是特殊的Servlet,本质是Java,是Java就要运行在服务器端,浏览器是不能解析Java代码的
             为什么用浏览器访问jsp时能在浏览器端显示呢?
             分两种情况:
             ①对于html文件,当我们用浏览器访问时能自动解析,解析完毕就会将内容展示在浏览器上
             ②对于jsp,当我们用浏览器访问时,我们写好的jsp文件会生成.java文件,服务器运行JAVA文件,会把jsp中编写的html代码,发送给浏览器
                 可以这样理解,我们编写的HTML文件被浏览器直接解析
                 而我们编写的jsp,是借助JAVA代码将html代码发给浏览器,浏览器再解析
                 本质上都是浏览器解析html代码(这里的html代码,包括刚才说的html、css、JavaScript)
2.加载顺序
<html>  
    <head>  
        <!-- 引用外部JS文件 -->  
        <script src="http://t.zoukankan.com/..........."></script>  
        <!--引用外部css样式 -->  
        <link href="http://t.zoukankan.com/............."/>  
        <style>  
               ..............  
        </style>  
        <script>  
               ..............  
        </script>  
    </head>  
    <body>  
        <script>  
               ..............  
        </script>  
    </body>  
</html>  
从上到下运行,先解析head标签中的代码,
(1)head标签中会包含一些引用外部文件的代码,从开始运行就会下载这些被引用的外部文件
         当遇到script标签的时候
         浏览器暂停解析(不是暂停下载),将控制权交给JavaScript引擎(解释器)
         如果<script>标签引用了外部脚本,就下载该脚本,否则就直接执行,执行完毕后将控制权交给浏览器渲染引擎
(2)当head中代码解析完毕,会开始解析body中的代码
         如果此时head中引用的外部文件没有下载完,将会继续下载
         浏览器解析body代码中的元素,会按照head中声明一部分样式去解析
         如果此时遇到body标签中的<script>,同样会将控制权交给JavaScript引擎来解析JavaScript
         解析完毕后将控制权交还给浏览器渲染引擎。
         当body中的代码全部执行完毕、并且整个页面的css样式加载完毕后,css会重新渲染整个页面的html元素。
(3)按照之前的描述,<script>写到body标签内靠后比较好,
         因为JavaScript 会操作html元素, 如果在body加载完之前写JavaScript 会造成JavaScript 找不到页面元素
         但是我们经常将<script>写到head中,body中不会有大量的js代码,body中的html代码结构会比较清晰
         window.onload: 等待页面中的所有内容加载完毕之后才会执行
         $(document).ready(): 页面中所有DOM结构绘制完毕之后就能够执行
         可以这样理解:window.onload 和 $(document).ready()/$(function(){}); 相当于  写在body 内  最靠后的<script> 代码段

转载地址: https://blog.csdn.net/m0_37550086/article/details/77513676

免责声明:文章转载自《关于浏览器对html, js,css的解析先后顺序的理解》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇go在centos配置以及go mod配置前端动态表单的处理方法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

在线浏览PDF文件的实用jquery插件推荐(转)

在web开发当中我们经常需要进行需要在线浏览PDf内容,在线嵌入动态pdf,传统的解决方法安装客户端PDF阅读器,如果是在谷歌是可以在线浏览的,因为他自身就带了一些插件,以前遇到这样的问题往往是费时又费力,很不好解决, 今天就给大家分享一系列使用javascript实现的pdf插件效果,无需借助第三方插件就可以实现在线浏览功能,非常实用 jQuery...

使用js设置input标签只读 readonly 属性

先上代码: <html> <head> <title> test </title> <meta charset="utf-8"> </head> <script language="JavaScript"> function setReadon...

js中不同值的替换

function(button, e) { debugger; // 中断调试指令,可以手动删除它 var me = this, //this为列表视图控制器 viewModel = me.getViewModel(),...

Javascript 刷新框架及页面的方法总集

项目中会用到很多关于框架页面刷新的方法。先来看一个简单的例子:下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。frame.html 由上(top.html)下(bottom.html)两个页面组成,代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4...

C#、Java和JS实现SHA256+BASE64加密总结

C#、Java和JS实现SHA256+BASE64加密总结--莫非(www.muphy.me) 原理 首先,通过编码格式(UTF-8、ASCII等,如果含有汉字等字符,编码格式不同加密结果也不同)获得加密字符串的字节数组,再计算字节数组的哈希值数组,再把hash数组转换为base64编码的字符串。 C#实例 class Program {//转...

JS按回车键实现登录的方法

按回车实现登录的方法可用js来进行实现,有以下三种方法:   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">(此代码为浏览器以中文的形式呈现) 方法一: <html> <head> <title>Check S...