zoukankan      html  css  js  c++  java
  • CSS阻塞与JS阻塞

    JS阻塞

    所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。
    直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。
    为了提高用户体验,新一代浏览器都支持并行下载JS,但是JS下载仍然会阻塞其它资源的下载(例如.图片,css文件等)。

    由于浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以就会阻塞其他的下载和呈现。

    嵌入JS会阻塞所有内容的呈现,而外部JS只会阻塞其后内容的显示,

    2种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载,但会阻塞外部脚本的执行。

     

    CSS阻塞

    CSS本来是可以并行下载的,在什么情况下会出现阻塞加载了(在测试观察中,IE6下CSS都是阻塞加载)

    当CSS后面跟着嵌入的JS的时候,该CSS就会出现阻塞后面资源下载的情况。而当把嵌入JS放到CSS前面,就不会出现阻塞的情况了。

    根本原因:因为浏览器会维持html中css和js的顺序,样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载,所以就会出现上面CSS阻塞下载的情况。

    嵌入JS应该放在什么位置?
    1、放在底部,虽然放在底部照样会阻塞所有呈现,但不会阻塞资源下载。
    2、如果嵌入JS放在head中,请把嵌入JS放在CSS头部。
    3、使用defer(只支持IE)anysc W3C
    4、不要在嵌入的JS中调用运行时间较长的函数,如果一定要用,可以用`setTimeout`来调用

    Javascript无阻塞加载具体方式
    将脚本放在底部。<link>还是放在head中,用以保证在js加载前,能加载出正常显示的页面。<script>标签放在</body>前。
    成组脚本:由于每个<script>标签下载时阻塞页面解析过程,所以限制页面的<script>总数也可以改善性能。适用于内联脚本和外部脚本。

    非阻塞脚本:等页面完成加载后,再加载js代码。也就是,在window.onload事件发出后开始下载代码。
    (1)defer属性:支持IE4和fierfox3.5更高版本浏览器
    (2)动态脚本元素:文档对象模型(DOM)允许你使用js动态创建HTML的几乎全部文档内容。代码如下:

    <script>
    	var script=document.createElement("script");
    	script.type="text/javascript";
    	script.src="file.js";
    	document.getElementsByTagName("head")[0].appendChild(script);
    </script>
    

     这里相当于给head下面插入了一个script的标签。当script.src所对应的文件下载以后,再而后执行。

     此技术的重点在于:无论在何处启动下载,文件额下载和运行都不会阻塞其他页面处理过程。即使在head里(除了用于下载文件的http链接)。

  • 相关阅读:
    leetcode701. Insert into a Binary Search Tree
    leetcode 958. Check Completeness of a Binary Tree 判断是否是完全二叉树 、222. Count Complete Tree Nodes
    leetcode 110. Balanced Binary Tree
    leetcode 104. Maximum Depth of Binary Tree 111. Minimum Depth of Binary Tree
    二叉树
    leetcode 124. Binary Tree Maximum Path Sum 、543. Diameter of Binary Tree(直径)
    5. Longest Palindromic Substring
    128. Longest Consecutive Sequence
    Mac OS下Android Studio的Java not found问题,androidfound
    安卓 AsyncHttpClient
  • 原文地址:https://www.cnblogs.com/hgonlywj/p/4857151.html
Copyright © 2011-2022 走看看