页面滚动网页卡顿怎么解决方法,能用线程解决吗

服务器网页卡顿怎么解决方法或崩溃的常见原因分析及解决方法

    在计算机网络日益普及的今天计算机安全不但要求防治计算机病毒,而且要提高系统抵抗黑客非法入侵嘚能力还要提高对远程数据传输的保密性,避免在传输途中遭受非法窃取

当内存是在子程序中被分 配时,通常会出现这种问题其结果是程序从子程序中返回时不会释放内存。如此一来对已分配的内存的引用就会丢失,只要操作系统还在运行中则进程就会一 直使用該内存。

用C或C++编写的程序如Web服务器API模块,有可能导致系统的崩溃因为只要间接引 用指针中出现一个错误,就会导致操作系统终止所有程序另外,使用了糟糕的C指针的Java模拟量将访问一个空的对象引用

第三,数据库中的临时表不够用  

许多数据库的临时表数目都是固定的临时表即保留查询结果的内存区域。在临时表中的数据都被读取后临时表便会被释放,但大量同时进行的查询可能耗尽数目固定的所囿临时表这时,其他的查询就需要列队等候直到有临时表被释放时才能再继续运行。

由多线程带来的性能改善是以可靠性为代价的主要是因为这样有可能产生线程死锁。线程死锁时第一个线程等待第二个线程释放资源,而同时第二个线程又在等待第一个线程释放资源

导致系统无法正常运行的最可能的原因是磁盘已满。一个好的网络管理员会密切关注磁盘的使用情况隔一定的时间,就需要将磁盘仩的一些负载转存到备份存储介质中     

Netscape Web服务器的每个连接都使用一个线程。Netscape Enterprise Web服务器会在线程用完后挂起而不为已存在的连接提供任何服務。

第一种:服务器自身的因素

租用服务器后在使用过程中客户会慢慢发现服务器不够用,那么您首先要考虑的是您的服务器是不是巳经跟不上您业务发展,就是说您的服务器配置跟不上您用户增长的速度需要扩展服务器的配置才导致您的服务器比较卡。不过一般这種原因您只要查看一下您一天的的IP访问量大小,峰值是不是在您访问的时段就可以比较出。
不过有时候服务器上有病毒,您服务器嘚CPU占用率过高也会导致您的服务器会很慢。甚至会出现网页卡顿怎么解决方法的现象。还有一个问题是您的服务器配置和您网站不搭配,出现了短板处比如硬盘,CPU内存不匹配等等,也是会导致这种问题出现尽管您租用的服务器带宽很大,也会出现这种问题

   我嘚服务器配置各方面都很好,可是就是很慢出现这种原因,有可能有以下两点问题:安全问题和带宽问题当您租用的服务器价格不是茬正常的范围之内,很便宜的服务器又不是什么大的服务商,却标着很高的带宽可是实际使用起来,就是觉得“卡”说明您实际使鼡的不是合乎标准的带宽,服务器租用不能图便宜

安全问题是您的服务器被攻击了。如果受到像DDoS这样的攻击我们的服务器自然会呈现絀慢的假象,如果不及时防护有可能我们的网站会出于瘫痪。所以在平时建议一定要定期做安全维护,及时查找不明流量的来路以保证我们在受到攻击时能保证网站的良好运行。如果可以一定对您的防火墙进行设置以保证您的网站有一个安全保障,或者租用高防型嘚服务器这样就可在不明情况下,有专人提供网络防御了

第三种:本地网络较慢。

一般我们在查看服务器时 是通过远程进行操作的夲地网络慢自然影响到我们远程操作了。可以试着通过重启本地网络路由然后用tracert命令做追踪,检查本地网络

}

为什么我的网站很卡,系统问题还昰硬件问题? [问题点数:20分结帖人fkueyga6]

看看是属于哪种虚拟技术。

再看看自己在vps 上执行的时间

如果有查询可以看下当前页面sql,这个有可能是帶宽的原因

先用浏览器查查看看是卡在哪个元素上了 然后再在后台打到对应的元素查看性能瓶颈在哪

匿名用户不能发表回复!}

最近在开发小程序与vue类似,它們都有生命周期这回事

所以这又触碰到了我的知识盲区,不过项目在磕磕绊绊中完成的差不多了但是遇到了CSS3动画渲染的性能问题,所鉯我也是被逼的再回过头来从浏览器渲染网页的流程出发,去找动画网页卡顿怎么解决方法的症结

浏览器渲染网页的流程如下:

可以結合Alon的这篇和安卓开发者选项的显示页面布局。

安卓开发者选项的显示页面布局

简单说下app中的一大块是白色的没有红线标记出来的,但昰上面有按钮图片等时,就是webview也就是通过一个伪浏览器去请求到的数据,断网时打开app没有任何东西显示在上面

小程序为hybird式开发

在渲染唍界面之后也就是通过.json中的配置项生成native界面后,开始渲染webview的部分一个页面只会调用一次。

onReady 监听页面初次渲染完成 一个页面只会调用一佽代表页面已经准备妥当,可以和视图层进行交互

onShow 监听页面显示 每次打开页面都会去调用其中的函数。

我们的动画应该放在哪里

应該放在onShow里,因为这样我每次打开都能看到动画

有一个前提必须要提,前端开发者们都知道浏览器是单线程运行的。
但是我们要明确以丅几个概念:单线程主进程和合成进程。

虽然说浏览器执行js是单线程执行(注意是执行,并不是说浏览器只有1个线程而是运行时,runing)但实际上浏览器的2个重要的执行线程,这 2 个线程协同工作来渲染一个网页:主线程和合成线程

一般情况下,主线程负责:运行 JavaScript;计算 HTML 元素的 CSS 样式;页面的布局;将元素绘制到一个或多个位图中;将这些位图交给合成线程

相应地,合成线程负责:通过 GPU 将位图绘制到屏幕上;通知主线程更新页面中可见或即将变成可见的部分的位图;计算出页面中哪部分是可见的;计算出当你在滚动页面时哪部分是即将變成可见的;当你滚动页面时将相应位置的元素移动到可视区域

那么为什么会造成动画网页卡顿怎么解决方法呢?

原因就是主线程和合荿线程的调度不合理

下面来详细说一下调度不合理的原因。

主线程的渲染流程可以参考浏览器渲染网页的流程:

可能会有人说,这才提升了19次有什么好性能提升的?

那么就减少了约190ms的耗时

会有人说,辣鸡才190ms,无所谓

还会有人说,辣鸡也就2s,无所谓

你忘了单線程这回事了吗?

如果网页有3个动画3*2s=6s,就是6s的性能提升
由于数据是猜测的,所以暂时不考虑其真实性文章后面我使用chrome devtools的performance做了一个实驗。

要知道在"客户至上"的今天,好的用户体验是所有产品的必须遵守的一条规则无论是对于开发者还是产品经理,追求极致的性能都昰我们打造一个好的产品所必备的品质

可能看了我的略不专业的分析后,大家对主线程合成线程以及它们在2种性能不同动画方案上的笁作流程还不是很了解,可以去看一篇翻译过来的博客(英文原版链接已经失效了):

这篇文章完美讲述了浏览器主线程和合成线程的区別并且举了一个高度从100px变化到200px的2种动画方案的对比,对主线程和合成线程的整个工作流程做了很详尽的讲解真心建议认真阅读一遍。

transform為我们提供了丰富的api例如scale,translaterotate等等,但是在使用时需要考虑兼容性但其实对于大多数css3来说,mobile端支持性较好desktop端支持性需要格外注意。


補充:为了增强本文的说服力特地回家做了一个实验,代码如下

可能图片不是很好地能说明性能差异,那么我们来列一张耗时对比表方便我们计算。

通过上表我们可以计算出明margintransform与transition组合实现CSS3动画效果时的性能差异参数。

实际动画耗时(总时间 减去 空闲时间)

计算得出transform动画耗时约等于margin动画耗时的0.49倍,性能优化50%

由于我对Other的所做的具体事情不是很清楚,所以这里的实际动画时间也有可能还要减掉Other中的时間下表是我们减掉后的数据。

实际动画耗时(总时间 减去 其他时间和空闲时间)

计算得出transform动画耗时约等于margin动画耗时的0.32倍,性能优化接菦70%

也就是说,无论我们减去还是不减去Other的时间我们采用transform实现动画的方式都比margin动画快。

虽然会有50%~70%的性能提升但是需要注意硬件差异,硬件好的情况下可能不能发现网页卡顿怎么解决方法或者其他的一些性能上的问题
例如在开发小程序的过程中,模拟器是位于desktop端的因此它的硬件性能性能更好,例如CPUGPU。但是一旦在mobile端运行例如ios或者android上运行时,就可能会出现性能问题这就是因为移动端的硬件条件逊于PC端导致的。

所以说性能问题是一直存在的,只不过硬件差异会导致性能影响的程度不同

合成器的优点在于,其工作无关主线程合成器线程不需要等待样式计算或者 JS 执行,这就是为什么合成器相关的动画 最流畅如果某个动画涉及到布局或者绘制的调整,就会涉及到主線程的重新计算自然会慢很多。

引用自infoQ的好文:

与我们的博客上下文结合起来解释如下:
在使用css3 transtion做动画效果时,transform实现的动画是与合成器线程相关的不需要等待主线程样式计算或者 JS 执行,计算速度是很快的;而使用heightwidth,margin和padding时导致布局和绘制的调整,主线程需要重新计算样式并且执行JS计算速度自然就慢了。

期待和大家交流共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:

努力荿为优秀前端工程师!

}

我要回帖

更多关于 网页卡顿 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信