pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

html5 Web開發:防止瀏覽器假死的方法

在Web開發的時候經常會遇到瀏覽器不響應事件進入假死狀態,甚至彈出“腳本運行時間過長“的提示框,如果出現這種情況說明你的腳本已經失控了。

一個瀏覽器至少存在三個線程:js引擎線程(處理js)、GUI渲染線程(渲染頁面)、瀏覽器事件觸發線程(控制交互)。

JavaScript引擎是基于事件驅動單線程執行的,JS引擎一直等待著任務隊列中任務的到來然后加以處理,瀏覽器無論再什么時候都只有一個JS線程在運行JS程序。

GUI 渲染線程負責渲染瀏覽器界面,當界面需要重繪(Repaint)或由于某種操作引發回流(reflow)時,該線程就會執行。但需要注意 GUI渲染線程與JS引擎是互斥的,當JS引擎執行時GUI線程會被掛起,GUI更新會被保存在一個隊列中等到JS引擎空閑時立即被執行。

事件觸發線程,當一個事件被觸發時該線程會把事件添加到待處理隊列的隊尾,等待JS引擎的處理。這些事件可來自JavaScript引擎當前執行的代碼塊如setTimeOut、也可來自瀏覽器內核的其他線程如鼠標點擊、AJAX異步請求等,但由于JS的單線程關系所有這些事件都得排隊等待JS引擎處理。

了解了瀏覽器的內核處理方式就不難理解瀏覽器為什么會進入假死狀態了,當一段JS腳本長時間占用著處理機就會掛起瀏覽器的GUI更新,而后面的事件響應 也被排在隊列中得不到處理,從而造成了瀏覽器被鎖定進入假死狀態。另外JS腳本中進行了DOM操作,一旦JS調用結束就會馬上進行一次GUI渲染,然后才 開始執行下一個任務,所以JS中大量的DOM操作也會導致事件響應緩慢甚至真正卡死瀏覽器,如在IE6下一次插入大量的HTML。而如果真的彈出了“腳本 運行時間過長“的提示框則說明你的JS腳本肯定有死循環或者進行過深的遞歸操作了。

現在如果遇到了這種情況,我們可以做的不僅僅是優化 代碼,html5的webWorkers提供了js的后臺處理線程的API,它允許將復雜耗時的單純js邏輯處理放在瀏覽器后臺線程中進行處理,讓js線 程不阻塞UI線程的渲染。這個線程不能和頁面進行交互,如獲取元素、alert等。多個線程間也是可以通過相同的方法進行數據傳遞。

直接看代碼:

例子:用戶輸入一個數字,進行加法運算(+=)

以前的做法:

<!DOCTYPE HTML>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>webworkers–calculate</title></head>
<body>
<input id=”num” name=”num” type=”text”/>
<button onclick = “calculate()”>計算</button><br />
<div id=”result” style=”color:red;”></div>
<div id=”time” style=”color:red;”></div>
<script type=”text/javascript” src=”calculate.js”></script>
<script type=”text/javascript”>        function calculate(){
data1 = new Date().getTime();
var num = document.getElementById(“num”).value;
var val = parseInt(num,10);
var result =0;
for(var i =0; i<num;i++){
result += i;
}
data2 = new Date().getTime();
document.getElementById(“result”).innerHTML =”計算結果:”+result;
document.getElementById(“time”).innerHTML =”普通 耗時:”+ (data2 – data1)+”ms”;
}
</script>
</body>
</html>

 

使用webWorkers以后:

calculate.html

<!DOCTYPE HTML>
<html lang=”en”><head>
<meta charset=”UTF-8″>
<title>webworkers–calculate</title>
</head>
<body>
<input id=”num” name=”num” type=”text”/>
<button onclick = “calculate()”>計算</button><br />
<div id=”result” style=”color:red;”></div>
<div id=”time” style=”color:red;”></div>
<script type=”text/javascript” src=”calculate.js”></script>
<script type=”text/javascript”>
var worker = new Worker(“calculate.js”);
var data1 =0;
var data2 =0;
worker.onmessage = function(event){
var data = event.data;
data2 = new Date().getTime();
document.getElementById(“result”).innerHTML =”計算結果:”+data;
document.getElementById(“time”).innerHTML =”workers 耗時:”+ (data2 – data1)+”ms”;
};
function calculate(){
data1 = new Date().getTime();
var num = document.getElementById(“num”).value;
var val = parseInt(num,10);
worker.postMessage(val);
}
</script>
</body>
</html>

calculate.js

onmessage = function(event){
var num = event.data;
var result = 0;
for(var i = 0; i<num;i++){
result += i;
}
postMessage(result);
};

 

webWorker需要將代碼放入web服務器中, 如果使用的是localhost請用高版本的chrome瀏覽器打開,firefox瀏覽器在處理localhost的時候會出現“Could not get domain!”的錯誤,關于這個可以參考:https://bugzilla.mozilla.org/show_bug.cgi?id=682450 對比上面的兩種實現方式,當計算值達到100億的時候,普通做法耗時已經很長,且一般會卡死了。

▲webWorkers在Chrome15下的效果

更正:getTime()返回的應該是毫秒(ms),而不是秒(s)。

如下圖所示:

▲普通方法在Chrome15下的效果

可見webWorkers在未來的web應用中還是非常有價值的。

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

這篇文章主要介紹了有關HTML5頁面在iPhoneX適配問題,需要的朋友可以參考下
本篇文章主要介紹了html5中canvas圖表實現柱狀圖的示例,本文使用canvas來實現一個圖表,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
Adobe公司出品的多媒體處理軟件產品線較多,涵蓋了音視頻編輯、圖像處理、平面設計、影視后期等領域。這篇文章主要介紹了Adobe Html5 Extension開發初體驗圖文教程,非常不錯,需要的朋
這篇文章主要介紹了基于HTML5的WebGL經典3D虛擬機房漫游動畫,需要的朋友可以參考下
這篇文章主要介紹了手機端用rem+scss做適配的詳解,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了canvas 實現 github404動態效果的示例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 二手注塑机回收_旧注塑机回收_二手注塑机买卖 - 大鑫二手注塑机 二手光谱仪维修-德国OBLF光谱仪|进口斯派克光谱仪-热电ARL光谱仪-意大利GNR光谱仪-永晖检测 | 依维柯自动挡房车,自行式国产改装房车,小型房车价格,中国十大房车品牌_南京拓锐斯特房车 - 南京拓锐斯特房车 | 十二星座查询(性格特点分析、星座运势解读) - 玄米星座网 | 衬氟止回阀_衬氟闸阀_衬氟三通球阀_衬四氟阀门_衬氟阀门厂-浙江利尔多阀门有限公司 | 亚洲工业智能制造领域专业门户网站 - 亚洲自动化与机器人网 | 邢台人才网_邢台招聘网_邢台123招聘【智达人才网】 | 洛阳永磁工业大吊扇研发生产-工厂通风降温解决方案提供商-中实洛阳环境科技有限公司 | 专业生产动态配料系统_饲料配料系统_化肥配料系统等配料系统-郑州鑫晟重工机械有限公司 | 药品仓库用除湿机-变电站用防爆空调-油漆房用防爆空调-杭州特奥环保科技有限公司 | 婚博会2024时间表_婚博会门票领取_婚博会地址-婚博会官网 | 高压分散机(高压细胞破碎仪)百科-北京天恩瀚拓 | 岩棉切条机厂家_玻璃棉裁条机_水泥基保温板设备-廊坊鹏恒机械 | 政府园区专业委托招商平台_助力企业选址项目快速落地_东方龙商务集团 | 水篦子|雨篦子|镀锌格栅雨水篦子|不锈钢排水篦子|地下车库水箅子—安平县云航丝网制品厂 | 中国产业发展研究网 - 提供行业研究报告 可行性研究报告 投资咨询 市场调研服务 | 科研ELISA试剂盒,酶联免疫检测试剂盒,昆虫_植物ELISA酶免试剂盒-上海仁捷生物科技有限公司 | 搅拌磨|搅拌球磨机|循环磨|循环球磨机-无锡市少宏粉体科技有限公司 | 烟气在线监测系统_烟气在线监测仪_扬尘检测仪_空气质量监测站「山东风途物联网」 | 篷房[仓储-婚庆-展览-活动]生产厂家-江苏正德装配式帐篷有限公司 | 大巴租车平台承接包车,通勤班车,巴士租赁业务 - 鸿鸣巴士 | 比亚迪叉车-比亚迪电动叉车堆垛车托盘车仓储叉车价格多少钱报价 磁力去毛刺机_去毛刺磁力抛光机_磁力光饰机_磁力滚抛机_精密金属零件去毛刺机厂家-冠古科技 | 包装机传感器-搅拌站传感器-山东称重传感器厂家-济南泰钦电气 | 防腐储罐_塑料储罐_PE储罐厂家_淄博富邦滚塑防腐设备科技有限公司 | 小型气象站_便携式自动气象站_校园气象站-竞道气象设备网 | IIS7站长之家-站长工具-爱网站请使用IIS7站长综合查询工具,中国站长【WWW.IIS7.COM】 | 诚暄电子公司首页-线路板打样,pcb线路板打样加工制作厂家 | 济南品牌包装设计公司_济南VI标志设计公司_山东锐尚文化传播 | 沈阳楼承板_彩钢板_压型钢板厂家-辽宁中盛绿建钢品股份有限公司 轴承振动测量仪电箱-轴承测振动仪器-测试仪厂家-杭州居易电气 | 代理记账_免费注册公司_营业执照代办_资质代办-【乐财汇】 | 建筑资质代办-建筑资质转让找上海国信启航 | 硅胶管挤出机厂家_硅胶挤出机生产线_硅胶条挤出机_臣泽智能装备 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 博医通医疗器械互联网供应链服务平台_博医通 | 风化石头制砂机_方解石制砂机_瓷砖石子制砂机_华盛铭厂家 | 巨野电机维修-水泵维修-巨野县飞宇机电维修有限公司 | 工业胀紧套_万向节联轴器_链条-规格齐全-型号选购-非标订做-厂家批发价格-上海乙谛精密机械有限公司 | 无纺布包装机|径向缠绕包装机|缠绕膜打包机-上海晏陵智能设备有限公司 | 北京企业宣传片拍摄_公司宣传片制作-广告短视频制作_北京宣传片拍摄公司 | 欧景装饰设计工程有限公司-无锡欧景装饰官网 | pbootcms网站模板|织梦模板|网站源码|jquery建站特效-html5模板网 | 贴片电容代理-三星电容-村田电容-风华电容-国巨电容-深圳市昂洋科技有限公司 | RFID电子标签厂家-上海尼太普电子有限公司 |