【澳门葡京】前者面试绸缪,script标签到底该放在哪个地方

一般script标签会被放在头部或尾部。头部就是<head>里面,尾部一般指<body>里[4-5]。

将script放在<head>里,浏览器解析HTML,发现script标签时,会先下载完所有这些script,再往下解析其他的HTML。讨厌的是浏览器在下载JS时,是不能多个JS并发一起下载的。不管JS是不来来自同一个host,浏览器最多只能同时下载两个JS,且浏览器下载JS时,就block掉解析其他HTML的工作[1]。将script放在头部,会让网页内容呈现滞后,导致用户感觉到卡。所以yahoo建议将script放在尾部,这样能加速网页加载。

将script放在尾部的缺点,是浏览器只能先解析完整个HTML页面,再下载JS。而对于一些高度依赖于JS的网页,就会显得慢了。所以将script放在尾部也不是最优解,最优解是一边解析页面,一边下载JS。

所以[2]提出了一种更modern的方式:使用async和defer。80%的现代浏览器都认识async和defer属性[3],这两个属性能让浏览器做到一边下载JS(还是只能同时下载两个JS),一边解析HTML。他的优点不是增加JS的并发下载数量,而是做到下载时不block解析HTML。

标题一:CSS和JS在网页中的放置顺序是如何的


  • CSS应该献身页面顶部的head标签中
    是因为Render
    Tree是由DOM树和CSSOM树组合成的,html页面需求等到CSS解析完后能力完结渲染,所以CSS应放在head标签内,优先下载解析,以幸免页面成分由于体制缺点和失误变成须臾间的白屏和闪烁。

  • JS应该投身body的底部

  1. 因为浏览器要求3个安居的dom树结构,而且js中很有非常的大恐怕有代码直接改动了dom树结构,浏览器为了幸免出现js修改dom树,须求重新创设dom树的情况,所以就能够卡住别的的下载和显示。
  2. 将JavaScript放在head内和body尾部的分别也在于此,放在head里面,由于浏览器开采head里面有JavaScript标签就可以一时半刻告一段落任何渲染行为,等待JavaScript下载并实行到位才干随着往下渲染,而这年由于在head里面那一年页面是白的;假使JavaScript放在页面后面部分,render
    Tree已经做到超越4六%,所以那时页面有内容展现,就算遇见JavaScript阻塞渲染,也不会有白屏出现。
  • 如果CSS和JS都在head标签内,则应将JS放在所有CSS的前面
    head里的内联js只要在全数外联css前面,css文件就足以和body里的呼吁并行。因为JS
    的实施有十分的大概率借助最新样式。比如,恐怕会有 var width =
    $(‘#id’).width(). 那意味着,JS 代码在施行前,浏览器必须保险在此 JS
    从前的具有 css(无论外链照旧内嵌)都已下载和剖析落成。那是 CSS
    阻塞后续 JS 推行的根本原因。

JS页面品质类
一.升任页面质量的主意有什么?

 

难点二:解释白屏和FOUC


  • 白屏和fouc并不是bug,而是不相同浏览器加载和呈现机制不相同产生的。化解情势正是选取link标签将样式表放置在head标签中
  • 白屏
    一.当把css样式放在底部恐怕选用@import措施引入样式时有个别浏览器比方chrome和IE,他的加载和渲染机制是等css全体加载解析完后再渲染呈现页面,而以此等待的时间就为白屏。
    二.假使把js文件放在头顶,脚本会阻塞前面内容的展现,脚本会阻塞其后组件的下载,出现白屏难题。
  • FOUC
    逐步加载无样式的原委,等CSS加载后页面突然表现样式
    一.假如把CSS样式放在尾巴部分,对于IE浏览器,在好几场景下(点击链接,输入UPAJEROL,使用书签进入等),会出现FOUC .
    二.另一些浏览器举个例子Firefox,他会在css未加载前先突显页面,等css加载后再重复对体制实行改变,那就变成了FOUC
  • 能源减少合并,减弱HTTP请求(能源传输的历程变小);

  • 非大旨的代码异步加载—异步加载的窍门—异步加载的分裂;

    • 异步加载的措施:
      壹.动态脚本加载
      —js成立了二个标签,把标签最终加到body上去或然head(加到文书档案个中达成加载)
      document.createElement(“*”);
      2.defer
      3.async
      二.三怎么用:在加载js时候在script标签上加那两性子子达成异步加载;

      • 异步加载的分别:
        一.defer是在HTML解析完之后才会试行,假诺是四个,遵照加载顺序依次实践;
        贰.async是在加载完事后马上执行,若是是四个,实践顺序和加载顺序毫不相关;
      • 异步加载原理:(任何二个时时都只可以做1件事)
        1.defer:新加载的,在HTML解析完从前,是不会执行的;
        defer能保障按您的加载顺序依次施行;
        【澳门葡京】前者面试绸缪,script标签到底该放在哪个地方。2.async:
        哪个先回去,哪个先实行,和加载顺序无关;
    • 示例:
      1.defer
      八个文件:
      defer1.js console.log(‘defer1’);
      defer2.js console.log(‘defer2’);
      head底部插队:
      <script src=“./defer1.js” charset=“utf-8”
      defer></script>
      <script src=“./defer2.js” charset=“utf-8”
      defer></script>
      body:
      //内联到DOM中的是做一道实践的
      <div class=“div”>
      test
      <script type=“text/javascript”>
      document.write(‘<span>write</span>’);
      </script>
      <script type=“text/javascript”>
      for(var i=0; i<2000000; i++){
      if(i%2000000===0){
      console.log(i);
      }
      }
      </script>
      </div>
      实行各类:先实践write,再进行for循环,最终试行异步加载js
      (defer一,defer二—在这异步加载是等到壹块加载之后实践的)

    2.async
    八个文件:
    async1.js console.log(‘async1’);
    async2.js console.log(‘async2’);
    head底部布置:
    <script src=“./async1.js” charset=“utf-8”
    defer></script>
    <script src=“./async2.js” charset=“utf-8”
    defer></script>
    body:
    //内联到DOM中的是做联合施行的
    <div class=“div”>
    test
    <script type=“text/javascript”>
    document.write(‘<span>write</span>’);
    </script>
    <script type=“text/javascript”>
    for(var i=0; i<2000000; i++){
    if(i%2000000===0){
    console.log(i);
    }
    }
    </script>
    </div>
    施行顺序:施夷光行write,再实行for循环,最后施行异步加载js(因为是地点文件,加载速度相当的慢,所以举办各样是按梯次的)
    尽管把async一.js换到大的js文件,async二.js文本小,加载快,就有望会在前面实行

  • 利用浏览器缓存—缓存的归类—缓存的规律;
    一.缓存的归类:

  1. <script type=”text/javascript” src=”path/to/script1.js” async></script>  
  2. <script type=”text/javascript” src=”path/to/script2.js” async></script>
     

    带async属性的script会异步施行,只要下载完就推行,这会促成script二.js大概先于script壹.js实行(假若script2.js异常的大,下载慢)。defer就能够担保script有序实行,script一.js先实行,script贰.js后举行。

    结论

    1. [贰]感到,假设得以不考虑支持

    2. 谷歌自身的代码script放的也有点乱,有的放在后面[陆],有的放在里面[7],还有的放在里面[8]。总体来讲,放在里其实是最广大的做法。

    3. 正文只谈谈script的岗位,至于link和style,照旧放在head里的做法相比常见。link也是要下载CSS的呦,为毛不思虑下载CSS阻塞HTML解析的难点呢?其实,一般景色下,JS和CSS,放在head和位于body差距很小。CSS的link放在body也是足以的,只是也许引致页面目前并未有样式[9-10]。

    参考

    澳门葡京 ,[1]

    [2]

    [3]

    [4]

    [5]

    [6]

    [7]

    [8]

    [9]

    [10]

难题三:async和defer的作用是怎样?有啥不一样?


  • 设若既不选取 async 也不选取defer:在浏览器继续分析页面从前,立刻读取并实施脚本。
    默许引用 script:<script type=”text/javascript”
    src=”script.js”></script>
    当浏览器遇到 script
    标签时,文书档案的分析将结束,并马上下载并实行脚本,脚本实施达成后将延续分析文书档案。

  • async模式 <script type=”text/javascript” src=”script.js”
    async=”async”></script>
    当浏览器蒙受 script
    标签时,文书档案的剖析不会停下,其余线程将下载脚本,脚本下载完毕后伊始实施脚本,脚本施行的经过中文档将甘休解析,直到脚本试行完结。

  • defer模式 <script type=”text/javascript” src=”script.js”
    defer=”defer”></script>
    当浏览器蒙受 script
    标签时,文书档案的辨析不会终止,其余线程将下载脚本,待到文档解析达成,脚本才会实践。

  • 区别
    最关键的分别就是async是异步下载并霎时施行,然后文书档案继续分析,defer是异步加载后分析文书档案,然后再进行脚本。

缓存:对应文件在浏览器中留存的备份(别本),把请求的东西缓存到本地了(是位于Computer磁盘中的),浏览器下次央浼约等于是从那么些磁盘直接读了,而不会再去乞求这一个文件的地点。

标题3:简述网页的渲染机制


  1. 浏览器解析(包罗HTML,SVG,XHTML,CSS,JavaScript等等)
    解析HTML代码,构建Document Object Model (DOM)
    解析CSS代码,构建CSS Object Model (CSSOM)
    JavaSript通过API操作DOM和CSSOM,
    渲染树营造进度如下:
![](https://upload-images.jianshu.io/upload_images/3237223-0ba0c0a3fe60632a.png)
  1. 布局阶段
    在显示器上绘制渲染树中的全数节点的几何属性,比方:
    地方,宽高,大小等等

  2. 绘制成分
    绘制全部节点的可视属性,比方:颜色,背景,边框,背景图等,那时期可能会生出多少个图层(堆成堆上下文)。

  3. 联合渲染层
    把上述绘制的具有图层(类似于PhotoShop中的“图层”)合并,最后输出一张图纸。

文/饥人谷小霾(简书小编)小说权归小编全部,转发请联系作者获得授权,并标明“简书作者”。

1.强缓存:

http协议头:
Expires       Expires:Thu,21 Jan 2017 23:39:02 GMT
Cache-Control      Cahe-Control : Max-age=3600 

强缓存:问都不问,不直接呼吁,直接拿过来就用了;
不管是纯属时间依然绝对时间,这么些日子过期在此之前不会和服务器通讯了,直接从浏览器别本拿出去给页面用;

HTTP协议头:
 在请求一个文件的时候,http头上(响应头上)会带两个东西(有可能是2个,也有可能是1个,根据服务器配置);

 响应头中会有key,value 
 Expires  过期时间; value值表示的是绝对时间(服务器的绝对时间,这个时间是服务器下发的)
          判断客户端当前的时候是不是这个时间,比较的时候是按浏览器本地的时间做比较,下发的是服务器端的时间,会有偏差;
 缺点:有可能客户端和服务器的时间不一致。

Cache-Control   value值   Max-age=3600(相对时间)
         不管客户端和服务器时间是否一致,它最后是以客户端相对时间为止,时间单位是秒(拿到资源之后再3600s之内不会再去请求服务器,在这个时间之内直接去浏览器拿缓存)

*如果服务器两个时间都下发了,依哪个时间为准呢?
以后者相对时间为准(这个规定)

二.商业事务缓存:

Last-Modified If-Modified-Since   Last-Modified:Wed,26 Jan 2017 00:35:11 GMT
Etag   If-None-Match        

磋商缓存:浏览器开掘本地有这一个别本,不过又不鲜明用不用它,去服务器问3个那个文件要不要用(和服务器协商那几个文件能否用,过期未有)

Last-Modified(服务器下发的上次修改的时间)
        在拿到这个文件的时候,浏览器会给这个资源文件的http响应头中加一个Last-Modified,value值就是时间;
If-Modified-Since:(请求中给服务器带的,服务器要对比,所以一来一回,两个东西)
        当强缓存失效(过期了),浏览器在这个时间之外又开始请求了,不确定这个东西有没有变化,要携带上次给的时间
        是哪一个,请求的时候会以携带这个字段的时间。(拿到新资源文件,会通过Last-Modified下发一个时间,当下次请求问服务器这个资源有没有发生变化,是用http请求
        头中加If-Modified-Since(key值),他们两个值是一个)
*缺点:虽然hash值变了,内容并没有变化,完全可以从副本拿,Etag就是解决这个问题的。
Etag(哈希值):
    服务器给你这个资源的时候会给一个Etag值,当过了强缓存的时间,浏览器在问服务器请求问它这个资源可不可以在用的时候,
    会通过这个http中加一个key值(If-None-Math)一个value,那么value就是发的那个Etag值。
If-None-Match

和缓存相关的http头有何样?能写出来多少个?

Expires
Cache-Control
Last-Modified
Etag
If-None-Match
缓存能够荣升品质;

  • 应用CDN(互联网优化,CDN加载财富十分的快);
    CDN能够让客户以最快的小运把能源请求过来;
    (让网络便捷达到服务器端把公文下载下来;)
    当页面第一遍展开的时候,浏览器缓存是起持续效用的,使用CDN效果是万分分明的;
    预解析DNS
    <meta http-equiv=“x-dns-prefetch-control” content=“on”>
    -页面中兼有的a标签,在部分高级浏览器中私下认可展开了DNS预解析的;(不加那句话,a标签也是足以做到DNS预解析的,那是浏览器的2个作用;)可是一旦您的页面是https协议头的,很多浏览器是私下认可关闭DNS预解析的。那句话是挟持张开a标签的DNS预解析。

    • 怎么选用预解析DNS呢?就是应用上边包车型地铁说话:
      <link rel=“dns-prefetch”
      href=“//host_name_to_prefetch.com”>

    • 从浏览器输入3个url到页面真正渲染完全中学间爆发了哪些环节?
      -第2步就是DNS解析,当您的页面涉及多少个域名的时候,DNS解析效果是尤其显著的;

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website