js因函数执行太长页面卡死

2024-08-24

优化js脚本设计，防止浏览器假死

在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出"脚本运行时间过长"的提示框,如果出现这种情况说明你的脚本已经失控了,必须进行优化. 为什么会出现这种情况呢,我们先来看一下浏览器的内核处理方式: 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:javascript引擎线程,GUI渲染线程,浏览器事件触发线程. JavaScript引擎是基于事件驱动单线程执行的,JS引擎一直等待着任务队列中任务的到来然后加以处理,浏览器无论再

通俗易懂的来讲讲js的函数执行上下文

0.开场白在平时编写JavaScript代码时,我们并不会和执行上下文直接接触,但是想要彻底搞懂JavaScript函数的话,执行上下文是我们绕不过去的一个知识点. 1.执行上下文栈 JavaScript在对一个函数的每次调用,都会创建一个执行上下文,然后基于这个执行上下文运行函数体内的代码.一个函数可能会创建无数的执行上下文,因为对函数的每次调用(即使在函数内部调用自己)都会创建一个具有新状态的上下文. 当函数a执行的时候,会创建一个函数a的执行上下文,然后执行函数a中的代码,在函数a中调用

JS中函数执行顺序的问题？

作者:知乎用户链接:https://www.zhihu.com/question/23564807/answer/82996422来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而

js 小数乘积位数太长

function accMul(arg1,arg2) { var m=0,s1=arg1.toString(),s2=arg2.toString(); try{m+=s1.split(".")[1].length}catch(e){} try{m+=s2.split(".")[1].length}catch(e){} return Number(s1.replace(".",""))*Number(s2.replace(&qu

ajax 多个setInterval进行ajax请求的页面长时间打开会出现页面卡死问题

多个setInterval进行ajax请求的页面长时间打开会出现页面卡死问题浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉.当我们执行异步ajax的时候没有问题,但当设置为同步请求时,其他的动作(ajax函数后面的代码,还有渲染线程)都会停止下来.即使DOM操作语句是在发起请求的前一句,这个同步请求也会“迅速”将UI线程阻塞,不给它执行的时间.这就是代码失效的原因. 方案一: setInterval会消耗网页内存,如果不清理会一直消耗直到网页卡死. 解决

学习javaScript必知必会(1)~js介绍、函数、匿名函数、自调用函数、不定长参数

一.简单了解一下JavaScript(js) 1.什么是js? js:是网景公司开发的,是基于客户端浏览器, 面向(基于)对象.事件驱动式的页面脚本语言. 2.什么场景下使用到js? 表单验证.页面特效.Ajax.小游戏 3.js快速入门: (1)直接使用标签script,然后在script标签下编写js代码 (2)通过标签script的src引入外部文件 4.js语句的细节(语句的:可加可不加): js中的语句没那么严格,每个语句可以加; 也可以不叫; (建议是加,因为你写其他语言的语句是要求

JS匿名函数自执行函数

JS匿名函数自执行函数:(function(){})();(function(){}) 这是一个函数,函数后面接(),则是调用函数比如(function(arg){console.log(arg);})(4); 则输出4 好处:放在里面,不会污染外面的变量,也保护了自己,外面调用不了里面的函数和变量.在js中写大量代码,可以防止变量冲突和错误调用. 插件常用的是( function ($ ) {// 插件代码} ) (jQuery ) ; 这样的好处是可以在函数内自由使用$,不用担心跟别的

5.js与jQuery入口函数执行时机

js与jQuery入口函数执行时机区别: JS入口函数是在所有资源加载完成后,才执行.(包括:页面.外部js文件.外部css文件.图片) jQuery入口函数,是在文档加载完成后就执行.文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <tit

JS，Javascript加载与函数执行过程

Js,Javascript加载与函数执行过程 test.html <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8" /> <title>demo</title> <script type="text/javascript"> function hello(){ alert("hel

刷新页面后，让控制台的js代码继续执行

在各种限时,秒杀活动中,有个自动循环的点击的工具是很重要的. 为了方便起见,我们把Js代码放在浏览器的控制台执行,但是刷新页面后,js代码就清空了,也就无法执行. 可以用js代码实现一个不受页面刷新影响不断执行的代码,如下: 1. 必要的知识 prompt() 弹出对话框,获取用户输入的文本setTimeout(,) 延迟执行函数write() 可向指定对象写入html代码或者js代码with() 设定代码的作用域 2.大致框架 var timeout = prompt("设置刷新时间"

JS线程及回调函数执行

JS是单线程的程序,在某些方面来讲并不是十分准确.在浏览器的内核里面有很多的模块,比如js的解释执行的模块,html.css的处理模块,渲染模块等,多数模块是单线程执行的,但是有几个模块是多线程的,比如定时器模块,Dom事件监听(如按钮点击的事件监听)模块,Ajax请求模块,这几个模块都是有回调函数的,也就是说浏览器内核会在使用这几个模块的时候另外开辟一条线程来进行监听,达到条件后通过回调函数返回主线程. 例子: 1. setTimeout(function(){ console.log('ti

C# dll 事件执行 js 回调函数

C# dll 事件执行 js 回调函数前言: 由于js 远程请求 XMLHttpRequest() 不支持多线程,所以用C# 写了个dll 多线程远程抓住供js调用. 最初代码为: C#代码 /// <summary> /// 异步请求入口 /// </summary> /// <param name="url">传入http地址注意加http</param> /// <param name="timeout

从setTimeout看js函数执行

老实说,写这篇文章的时候心里是有点压抑的,因为受到打击了,为什么?就因为喜欢折腾不小心看到了这个"简单"的函数: for (var i = 0; i < 5; i++) { setTimeout(function () { console.log(i) }, i * 1000); } console.log(i); 什么?这不就是我很久之前看到的先打印一

js_倒计时去执行函数或则跳转页面

js_倒计时去执行函数或则跳转页面: var wait = 5; $(document).ready(function () { returnPage(); }); function returnPage() { if (wait == 0) { var redirectUrl=$("#redirectUrlHidden").val(); window.location.href=Global_Sever_url+redirectUrl; } else { var msgId=$(&q

动态加载JS，并执行回调函数

有些时候我们需要动态的加载一些JS,并在JS加载完成后执行一些回调函数. var loadscript = { $$: function (id) { return document.getElementById(id); }, tag: function (element) { return document.getElementsByTagName(element); }, ce: function (element) { return document.createElement(elem

uniapp在在页面跳转时，若URL太长的字符串会导致数据传递失败

url有长度限制,太长的字符串会传递失败,可使用窗体通信.全局变量,或encodeURIComponent等多种方式解决,如下为encodeURIComponent示例的解决方法. <navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator> // 在test.vue页面接受参数 onLoad: function (option)

帆软报表（finereport）JS实现长页面锚点定位

在报表的应用需求中,页面过长时,需要页面中实现类似HTML中锚点功能以跳转到相应需要预览模块 1实现思路在设计器中所做的操作最终都会以HTML形式展现在网页.在这里我们为报表块单元格加上id选择器配合对应js来达到定位跳转效果 #代表id选择器里面的定位,加上后面你像定位的字符,id选择器就比如身份证号码,是唯一的只能一个使用 2. 操作步骤一般制作长页面给BODY的属性为绝对布局固定大小在所需锚点位置拖入报表块,在单元格中以公式形态写入标签,赋予id,这里id名$$$取的是当前单元格内

JS 的立即执行函数

JS 的立即执行函数本文写于 2019 年 12 月 7 日其实 ES6 之后有了之后,很多之前的用法都没必要了,立即执行函数就是其一. 今天看到一道面试题: 请「用自己的语言」简述立即执行函数是什么立即执行函数有什么用途我愣了一下,突然发现自己不是很能清晰的解答这个概念. 我只知道()代表了两种作用: 包裹执行函数立即执行函数该怎么描述呢? 声明一个匿名函数,然后马上调用这个匿名函数,就是立即执行函数? 的确,这就是一个典型的立即执行函数. 首先声明一个匿名函数: functio

js中函数表达式和自执行函数表达式的用法总结

立即调用函数表达式给函数体加大括号,在有变量声明的情形下,没有任何区别但是,如果只是[自动执行]的情形下,就会不同因为,一个匿名函数,不赋值或函数体不加小括号,是不能自动执行的 //以下情形并无差别 var count100 = function getCount100(){ return(100) }();//100 var count200 = (function getCount200(){ return(200) })();//200,加小括号和count100没有区别 var c

css自动换行如何设置?url太长会撑开页面

我们更新文章时如果有引用其他文章一般会带一个原文url,但这个链接如果太长的话会把内容的版块撑开,整个排版乱了.那我们能不能设置css自动换行呢?如下图所示,其实只要两个样式就能搞定 word-wrap:break-word; word-break:break-all; word-wrap用来控制换行两种取值: (1)normal (2)break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题,英文语句也没问题.但是对于长串的英文,就不起作用.) word-break用来

js预编译和函数执行

javascript 执行过程 1.语法检测(有没有基本的语法错误,例如中文,关键字错误...)2.词法分析(预编译) (1)创建全局GO(global object)对象 (2)对var声明的变量进行声明提升但不赋值,放入GO对象中 (3)对函数体整体进行提升,放入GO对象中 3.逐行执行一.全局直接是script标签中的代码,不包括函数执行 <script type="text/javascript"> console.log(a); var a = 100; co

js因函数执行太长页面卡死

热门专题