前端非同步_如何區分一個網頁的內容是前端非同步渲染的還是後端直接返回的

『壹』 js非同步問題怎麼解決

非同步載入又叫非阻塞載入，瀏覽器在下載執行js的同時，還會繼續進行後續頁面的處理。主要有三種方式。
方法一：也叫Script DOM Element
(function(){
var scriptEle = document.createElement("script");
scriptEle.type = "text/javasctipt";
scriptEle.async = true;
scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
var x = document.getElementsByTagName("head")[0];
x.insertBefore(scriptEle, x.firstChild);
})();

<async>屬性是HTML5中新增的非同步支持。此方法被稱為Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了這種非同步載入代碼
(function(){;
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();

但是這種載入方式執行完之前會阻止onload事件的觸發，而現在很多頁面的代碼都在onload時還執行額外的渲染工作，所以還是會阻塞部分頁面的初始化處理。
方法二：onload時的非同步載入
(function(){
if(window.attachEvent){
window.attachEvent("load", asyncLoad);
}else{
window.addEventListener("load", asyncLoad);
}
var asyncLoad = function(){
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
}
)();

這種方法只是把插入script的方法放在一個函數裡面，然後放在window的onload方法裡面執行，這樣就解決了阻塞onload事件觸發的問題。
注:DOMContentLoaded與load的區別。前者是在document已經解析完成，頁面中的dom元素可用，但是頁面中的圖片，視頻，音頻等資源未載入完，作用同jQuery中的ready事件；後者的區別在於頁面所有資源全部載入完畢。
方法三：其他方法
由於JavaScript的動態性，還有很多非同步載入方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer屬性、 document.write(script tag)。
XHR Injection(XHR 注入)：通過XMLHttpRequest來獲取javascript，然後創建一個script元素插入到DOM結構中。ajax請求成功後設置script.text為請求成功後返回的responseText。
//獲取XMLHttpRequest對象，考慮兼容性。
var getXmlHttp = function(){
var obj;
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
else
obj = new ActiveXObject("Microsoft.XMLHTTP");
return obj;
};
//採用Http請求get方式;open()方法的第三個參數表示採用非同步(true)還是同步(false)處理
var xmlHttp = getXmlHttp();
xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var script = document.createElement("script");
script.text = xmlHttp.responseText;
document.getElementsByTagName("head")[0].appendChild(script);
}
}

XHR Eval：與XHR Injection對responseText的執行方式不同，直接把responseText放在eval()函數裡面執行。
//獲取XMLHttpRequest對象，考慮兼容性。
var getXmlHttp = function(){
var obj;
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
else
obj = new ActiveXObject("Microsoft.XMLHTTP");
return obj;
};
//採用Http請求get方式;open()方法的第三個參數表示採用非同步(true)還是同步(false)處理
var xmlHttp = getXmlHttp();
xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
eval(xmlHttp.responseText);
//alert($);//可以彈出$,表明JS已經載入進來。click事件放在其它出會出問題，應該是還沒載入進來
$("#btn1").click(function(){
alert($(this).text());
});
}
}

Script In Irame：在父窗口插入一個iframe元素，然後再iframe中執行載入JS的操作。
var insertJS = function(){alert(2)};
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;//獲取iframe中的window要用contentWindow屬性。
doc.open();
doc.write("<script>var insertJS = function(){};<\/script><body onload='insertJS()'></body>");
doc.close();

GMail Mobile：業內JS內容被注釋，所以不會執行，在需要的時候，獲取script中的text內容去掉注釋，調用eval()執行。
<script type="text/javascript">
/*
var ...
*/
</script>

HTML5新屬性：async和defer屬性
defer屬性：IE4.0就出現。defer屬聲明腳本中將不會有document.write和dom修改。瀏覽器會並行下載其他有defer屬性的script。而不會阻塞頁面後續處理。註：所有的defer腳本必須保證按順序執行的。
<script type="text/javascript" defer></script>

async屬性：HTML5新屬性。腳本將在下載後盡快執行，作用同defer，但是不能保證腳本按順序執行。他們將在onload事件之前完成。
<script type="text/javascript" defer></script>

Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async屬性。可以同時使用async和defer，這樣IE 4之後的所有IE都支持非同步載入。
沒有async屬性，script將立即獲取（下載）並執行，期間阻塞了瀏覽器的後續處理。如果有async屬性，那麼script將被非同步下載並執行，同時瀏覽器繼續後續的處理。
總結：對於支持HTML5的瀏覽器，實現JS的非同步載入只需要在script元素中加上async屬性，為了兼容老版本的IE還需加上defer屬性；對於不支持HTML5的瀏覽器(IE可以用defer實現)，可以採用以上幾種方法實現。原理基本上都是向DOM中寫入script或者通過eval函數執行JS代碼，你可以把它放在匿名函數中執行，也可以在onload中執行，也可以通過XHR注入實現，也可以創建一個iframe元素，然後在iframe中執行插入JS代碼。

『貳』 JS中的非同步操作有哪些

JS中的非同步操作：
1、定時器都是非同步操作
2、事件綁定都是非同步操作
3、AJAX中一般我們都採取非同步操作（也可以同步）
4、回調函數可以理解為非同步（不是嚴謹的非同步操作）

『叄』同步和非同步的區別js

同步是按順序從上到下載入html,js 可以跳過非同步載入的東西

『肆』 vue前端非同步與頁面渲染問題：怎樣讓子非同步函數完成後頁面再渲染

非同步載入完成後調用ui線程的handle來sendMessage 在handle的dispatchMessage中處理消息，做progressBar的隱藏處理

『伍』前端開發中如何實現非同步編程

非同步編程其實很常見，特別是在出線Node.js之後，非同步編程更是讓很多開發者受益。那麼回到最初的地方，傳統的前端開發中如何實現非同步編程呢？下面列舉了js實現非同步編程的四種方式。
方法一：使用回調函數
方法二：事件監聽
可以定義一個事件，並為這個事件設定處理函數。這樣只有當這個時間發生的情況下，對應的處理函數才會被執行。

方法三：事件的發布/訂閱

這個模式在NodeJS以及其他JS框架中都有實現，是一個非常常用的非同步編程方式。具體的原理及實現方法可以參考我之前的博客：http://blog.csdn.net/fareise/article/details/52198877《 Node中EventEmitter以及如何實現JavaScript中的訂閱/發布模式》，裡面有比較詳細的解析。

方法四：Promise模式

ES6中提供了原生的Promise對象，這個模式最開始只是一個構想，後來由一些框架庫實現。Promise對象代表了未來才會知道結果的事件。

Promise的基本思路就是，將需要非同步執行的事件儲存起來，然後根據非同步事件之行後的結果狀態執行下一步的操作。具體的Promise對象的原理和ES6中的使用方法將在下一篇文章中更加深入的進行介紹。

『陸』如何減少前端非同步請求的數量

http://www.welefen.com/rece-asyn-request.html

『柒』如何區分一個網頁的內容是前端非同步渲染的還是後端直接返回的

右鍵查看源碼 , 就可以看出是前段渲染 ,還是後端渲染 (如頁面上的數據源碼都有則服務端渲染反之前端渲染)

『捌』 javascript同步和非同步的區別與實現方式

舉個生活中的示例就會很明白：

如：

早上起床,先刷牙,再燒水,等水燒開了洗臉,再整理發型.是同步

先刷牙,再燒水,再整理發型,等水壺滴的一聲通知我水燒開了,我再取剛燒開的水洗臉,是非同步.

『玖』 js如何非同步執行方法

functionmyThread(callback){

returnsetTimeout(1000*10,function(){

$("#div").append("<p>hello</p>");//10秒後在div中加一個行，然後在執行callback函數

callback();

});

}

用回調函數

functionA(fun){

vartemp=100;

temp=temp*temp;

window.setTimeout(function(){

fun(temp);

},0);

alert("a函數:"+temp);

}

functionB(r){

alert("b函數"+r);

}

A(B);//調用

『拾』 js的同步、非同步是指什麼怎麼回事與線程有關嗎

javascript非同步表示async，指：代碼執行不按順序，『跳過』執行，待其他某些代碼執行完後，再來執行，稱為「非同步」。

javascript同步表示sync，指：代碼依次執行。

就是這么回事

javascript所謂的「線程」，就是這樣一種概念

這種情況容易出現在ajax當中，因為ajax最可能，也最多用到async或者sync的概念屬性。

前端非同步

與前端非同步相關的內容