zoukankan      html  css  js  c++  java
  • JavaScript的深入理解(1)

    (1)什么是JavaScript?

    JavaScript是一种专为与网页交互而设计的脚本语言,由三个部分组成:(1).ECMAScript :提供核心语言功能。(2).文档对象模型(DOM):提供访问和操作网页内容的方法与接口(3).浏览器对象模型(BOM):提供与浏览器的交互的方法与接口

    (2)HTML 代码执行情况

    http://blog.jobbole.com/12749/(现代浏览器原理)

      
    作者:钱多多
    链接:https://www.zhihu.com/question/59024365/answer/161615976
    来源:知乎
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    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>元素

    <script>元素的六个属性:

      1. async:异步加载属性,可选。只对外部脚本有效,表示立即下载脚本,但不妨碍页面

               的其他操作。

      2. charset:字符编码属性,可选。默认是utf-8编码,主要表示通过src属性指定的

                代码的字符集,大多浏览器会忽略它的值,所以不必使用。

      3.defer:脚本延迟属性,可选。用来延迟脚本的执行时间,直到HTML文档已经全

             部被解析和显示之后再执行,只对外部脚本文件有效。

      4.language:脚本类型属性,不是标准组成的一部分,已废弃。大多数浏览器

                  会忽略这个属性,已没必要使用。

      5.src:链接外部文件属性,可选。表示包含要执行代码的外部文件。注意,

            一旦设置src属性,script元素中编写的JavaScript代码就可能无效。

      6. type:脚本类型属性,必须。默认值为text/javascript可以看成language

              的替代属性,表示编写代码所使用的内容类型(也叫mime类型)。

    注意事项:代码中的任何地方都不要出现</script>

    3.2 标签位置
    <script>放置位置有两个:(1)<head>中(2)<body>中
     
    (1)<head>:一般惯例放在<head>中
    (2)<body>:放在<head>中时浏览器必须将js程序下载解析完毕后才会呈现页面内容,造成一定的延时(遇到<body> 才显示页面内容)。故而web程序将js代码放入<body>中
     
    3.3 延迟脚本
    defer 标签:加入defer 该js程序会在整个页面都下载解析完成后才开始执行
     
    注意:< 符号在xhtml 中为&lt
     
    3.4文档模式
     
    建议使用:<!DOCTYPE html>
     
    3.5 <noscript>元素
     
    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <noscript>
    <p>本浏览器不支持script</p>
    </noscript>
    </body>
    </html>
    触发条件:1.浏览器不支持脚本
          2.浏览器支持脚本,但是脚本被禁用
     
  • 相关阅读:
    微服务怎么限流?算法+框架+实战!
    Maven 架构选型,单模块还是多模块?
    Java 几行代码提取图片文字,过个厉害了。。
    面试官:SOA 和微服务的区别?这回终于搞清楚了!
    别再纠结线程池大小了,没有固定公式的!终于有人说清楚了。。
    MySQL 8.0 可以操作 JSON 了,牛逼。。。
    C#中判断一个类是否实现了某interface
    所有各数据库或文件的连接串定义CHM文件.
    这两天终于把火箭动力稍微搞清楚了点
    事件查看器中总是出现 sqlserveragent的错误
  • 原文地址:https://www.cnblogs.com/xuwebdesign/p/6972027.html
Copyright © 2011-2022 走看看