JavaScript高级部分_HTMLCSS JS的加载过程和网页解析的过程

JavaScript高级部分:ECMAScript BOM DOM(事件)

DOM简单学习:

  • 功能:控制html文档的内容
  • 获取页面标签(元素)对象:Element
    - document.getElmentById(“id值”):通过元素的id获取元素对象
  • 操作Element对象:
    - 修改属性值:明确获取的对象是哪一个?查看相关的API文档,找出那些属性是可以设置的
    - 修改标签体内容:属性—innerHTM 获取元素对象 使用innerHTML属性修改标签体内的内容

事件简单学习:

  • 功能:某些组件被执行了某些操作后,触发某些代码的执行

  • 事件的绑定:任何事件都是要绑定到某个标签对象上,绑定对象的方式通过属性提供唯一标识进行绑定
    - 直接在html标签上,指定事件的属性(操作),属性值就是js代码----通过方法进行绑定
    - `

     		
     	`
          - 通过js获取元素对象,指定事件属性,设置一个函数进行绑定 
    

浏览器解析渲染【html的过程

  1. 用户输入网址(一般前后端分离的项目NG定位的都是index.html),浏览器向服务器发出请求,服务器返回html文件;
  2. 浏览器开始载入html代码,读取到<head>标签内有一个<link>标签引用外部CSS文件;
  3. 发出下载CSS文档的请求,服务器响应;
  4. 继续载入html中<body>部分的代码,用已有的CSS进行DOM结构开始构建—进行CSS的渲染,匹配的过程其实就是进行标签的匹配;
  5. 假设页面引用了一张<img>,向服务器发出下载请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;
  6. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此执行重排。文件尾部,引入了一个<script>标签,执行其中的立即执行的脚本;
  7. JS脚本执行了style.display=”none”,假设为隐藏某个<div>`,隐藏该内容。
  8. 直到遇到</html>,表示执行完了此次的页面加载渲染过程
  9. 此时,假设用户点击页面的“换肤”按钮,JS让浏览器换了一下<link>标签的CSS路径,也就是执行了脚本中那部分交互逻辑;
  10. 浏览器检查各个元素,重新渲染页面----最后的动作还是渲染操作。

流程分析:

  1. 浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的
  2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)
  3. 如果遇到语义解释性的标签嵌入文件(js脚本,css样式),那么此时浏览器的下载过程会弃用单独连接进行下载
  4. 并在下载后进行解析,解析过程中,停止页面所有往下元素的下载(阻塞下载)
  5. 样式表在下载完成后,将和以前下载的所有的样式表一起进行解析,解析完成后,将对此前所有元素包括以前已经渲染了的(重新渲染)—》保证页面的显示效果和预期效果一致
  6. JS、CSS中如果有重定义,后面定义的函数将覆盖前定义的函数

JS的加载
-

  1. 下载和解析不能一起进行(阻塞下载—提高效率,保证页面的尽量少做修改)
  2. 当引用了js的时候,浏览器将发送js 的请求一直等待该request的返回,因为浏览器需要一个稳定的DOM树结构,而js很有可能有代码直接修改了DOM树的结构,比如使用document.write或者appendChild等等,浏览器为了防止js修改DOM树,需要重新构建DOM树的情况,所以就会直接阻塞其他的下载和呈现

HTML CSS JS 三者加载的过程

<head lang="en">
    <meta charset="utf-8">
    <title>title>
    <link rel="stylesheet" href="css/*.css">
                    
                    

你可能感兴趣的:(JavaWeb,vue,js,css,javascript,java)