js数据多时调用接口会卡的简单介绍

前端性能优化总结(一)-js、css优化

1、所以他必须等待到 CSSOM Tree 构建完成，也就是 CSS 资源加载完成(或者 CSS 资源加载失败)后，才能开始渲染。因此，CSS 加载会阻塞 Dom 的渲染。

2、IE8，FF，5，Safari4和Chrome都允许并行下载js文件，当script下载资源时不会阻塞其他script的下载。但是js下载仍然会阻塞其他资源的下载，如图片。尽管脚本下载不会互相影响，但页面仍然必须等待所有js代码下载并执行完才能继续。

3、前端性能优化方法： 减少http请求数常用的减少http请求数有以下几种：1）合并图片。当图片较多时，可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。

4、关键资源字节数 字节数也就是通常说的减少资源文件（js、css、image、video...）的大小。

5、感觉前端的性能确实是很重要的，我谈谈我在实际项目中的应用。

6、前端性能优化一直是一个比较热门的话题，我们总是在尽我们最大的努力去，提高我们的页面性能，比如减少HTTP请求，利用工具对资源进行合并压缩，脚本置底，避免重复请求，css sprite等等。

相关问答

Q1: js没点击一次便调用一个setInterval函数,当点击次数过于频繁时页面会卡...

1、有一定影响的，加载速度会慢。js过多既延长了用户的等待时间，又大量消耗cpu。而且放在页面的前面的话，会影响页面渲染造成用户体验很差，用户会感觉东西迟迟没有出来 。

2、可以考虑分批处理。即是说创造一个间隔定时器setInterval。每隔一小段时间，处理大量数据中的一部分。这样就可以避免大量计算导致浏览器卡死。大致代码如下(这里是简单的例子。具体情况具体分析。

3、因为当页面失去焦点时浏览器不再渲染页面，但是settimeout/setinterval的请求不会停止，队列会一直堆积动画，当页面再次获得焦点时动画队列早已堆积了大量命令，就会导致动画混乱。

4、可以添加标记，第一次点击后变为false，每次点击判断这个标记是true才执行。如果是按钮防止重复点击，可以再按钮点击后，给按钮添加disabled属性。

5、原因是tx = setInterval(resetColor，1000)；里的tx是全局变量setInterval返回的是一个时间句柄ID值是为唯一的。比如第一次点的时候返回是1，第二次是2，这时的tx已经变2所以只清除了2而1去永远留在了页面。

Q2: Js缓存数据下次调接口不刷新数据

1、服务器端任何实现了System.Web.UI.ICallbackEventHandler接口的控件，都可以通过RaiseCallbackEvent()方法来处理从页面上的JS脚本传递过来的请求和数据，处理后，再将结果传回给页面。这项能力的底层仍然是XMLHTTP。

2、一是页面引入的js文件缓存。二是js请求后台的缓存。解决方法：对于第一种情况，有两种处理方式：可以在页面引入的js文件后面增加日趋，如果不经常改动的文件，可以在每次改动后修改后缀。

3、如果用AngularJs在IE下发出GET请求从后台服务取完Json数据再绑定到页面上显示的话，你可能会发现就算数据更新了，IE还是会显示原来的结果。实际上这时候IE的确是缓存了hashtag，没有再次去做HttpGET请求最新的数据。

4、通过增加推送数据的时间间隔，可以减少推送数据的频率，从而减轻前端页面的压力，使页面能够更新数据。通过在前端页面中增加数据缓存机制，可以将推送的数据存储下来，等待页面更新时再进行渲染，从而减轻前端页面的负担。

5、vue中组件有缓存了切换路由回来视频不动解决方法如下。在app中设置需要缓存的div。在路由router.js中设置。

Q3: JS操作大量Dom数据时,假死现象

1、并且在处理js计算时，浏览器不会响应用户的操作，所以就造成了页面“假死”。Web Work，就是为JavaScript创造多线程环境，允许主线程创建Web Worker线程，将一些任务分配给后台运行。

2、js渲染数据太大，导致浏览器崩溃是JS中大量的DOM操作也会导致事件响应缓慢甚至真正卡死浏览器，在IE6下一次插入大量的HTML。

3、dom过多，占用过多的内存。操纵dom时触发重排重绘，消耗浏览器性能。特别是每一次滚动事件将会让对应 DOM 中的所有元素重新渲染。

关于js数据多时调用接口会卡和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。