zoukankan      html  css  js  c++  java
  • js css html加载顺序

    1.js放在head中会立即执行,阻塞后续的资源下载与执行。因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控。
    正常的网页加载流程是这样的。
    浏览器一边下载HTML网页,一边开始解析
    解析过程中,发现<script>标签
    暂停解析,网页渲染的控制权转交给JavaScript引擎
    如果<script>标签引用了外部脚本,就下载该脚本,否则就直接执行
    执行完毕,控制权交还渲染引擎,恢复往下解析HTML网页
      如果外部脚本加载时间很长(比如一直无法完成下载),就会造成网页长时间失去响应,浏览器就会呈现“假死”状态,这被称为“阻塞效应”。
    html需要等head中所有的js和css加载完成后才会开始绘制,
    但是html不需要等待放在body最后的js下载执行就会开始绘制,因此将js放在body的最后面,可以避免资源阻塞,同时使静态的html页面迅速显示。
    将脚本文件都放在网页尾部加载,还有一个好处。在DOM结构生成之前就调用DOM,JavaScript会报错,如果脚本都在网页尾部加载,就不存在这个问题,因为这时DOM肯定已经生成了。

    2.js的执行依赖前面的样式。即只有前面的样式全部下载完成后才会执行js,但是此时外链css和外链js是并行下载的。
     css需要分块,首页的css独立,其余的css需要动态加载,因为html的绘制会被css阻塞,这样可以减少首次进入时的白屏时间。

    3.外链的js如果含有defer="true"属性,将会并行加载js,到页面全部加载完成后才会执行,会按顺序执行。
     defer属性的作用是,告诉浏览器,等到DOM加载完成后,再执行指定脚本。
    浏览器开始解析HTML网页
    解析过程中,发现带有defer属性的script标签
    浏览器继续往下解析HTML网页,同时并行下载script标签中的外部脚本
    浏览器完成解析HTML网页,此时再执行下载的脚本
      对于内置而不是连接外部脚本的script标签,以及动态生成的script标签,defer属性不起作用。

    4.外链的js如果含有async="true"属性,将不会依赖于任何js和css的执行,此js下载完成后立刻执行,不保证按照书写的顺序执行。因为async="true"属性会告诉浏览器,js不会修改dom和样式,故不必依赖其它的js和css。 
     async属性的作用是,使用另一个进程下载脚本,下载时不会阻塞渲染。
    浏览器开始解析HTML网页
    解析过程中,发现带有async属性的script标签
    浏览器继续往下解析HTML网页,同时并行下载script标签中的外部脚本
    脚本下载完成,浏览器暂停解析HTML网页,开始执行下载的脚本
    脚本执行完毕,浏览器恢复解析HTML网页
      async属性可以保证脚本下载的同时,浏览器继续渲染。需要注意的是,一旦采用这个属性,就无法保证脚本的执行顺序。哪个脚本先下载结束,就先执行那个脚本。另外,使用async属性的脚本文件中,不应该使用document.write方法。

      一般来说,如果脚本之间没有依赖关系,就使用async属性,如果脚本之间有依赖关系,就使用defer属性。如果同时使用async和defer属性,后者不起作用,浏览器行为由async属性决定。

    原文链接https://www.cnblogs.com/lexiaofei/p/8078689.html

  • 相关阅读:
    Druid 使用 Kafka 将数据载入到 Kafka
    Druid 使用 Kafka 数据加载教程——下载和启动 Kafka
    Druid 集群方式部署 —— 启动服务
    Druid 集群方式部署 —— 端口调整
    Druid 集群方式部署 —— 配置调整
    Druid 集群方式部署 —— 配置 Zookeeper 连接
    Druid 集群方式部署 —— 元数据和深度存储
    Druid 集群方式部署 —— 从独立服务器部署上合并到集群的硬件配置
    Druid 集群方式部署 —— 选择硬件
    Druid 独立服务器方式部署文档
  • 原文地址:https://www.cnblogs.com/alice-cj/p/11507287.html
Copyright © 2011-2022 走看看