// 获取父节点,并添加一个click事件
document.getElementById('list').addEventListener("click",function(e) {
if(e.target && e.target.nodeName.toUpperCase == "LI") {
// 针对子元素的处理
三、请求突增导致页面崩溃
1、开启CDN加速(服务器配置完全充足,但是网站访问速度明显变慢了)
把源站内容分发至各地最接近用户的节点;缩短用户到节点的物理距离,使用户可就近取得所需内容,降低延迟。简单来说,当一个网站开启了CDN加速,能给用户的感觉是访问网站速度或者下载东西的速度会明显比没有开启加速更快了。
高防CDN可以自动识别恶意攻击流量,对这些虚假流量进行智能清洗,将正常访客流量回源到源服务器IP上,保障源服务器的正常稳定运行。
2、确认服务器硬件是否足够支持当前的流量。(服务器配置明显不够用,导致宕机或者访问出现错误。)
进行服务器扩容:配置一台更高性能的专用服务器。
3、优化数据库访问。
服务器的负载过大,一个重要的原因是CPU负荷过大,降低服务器CPU的负荷,才能够有效打破瓶颈。而使用静态页面可以使得CPU的负荷最小化。前台实现完全的静态化当然最好,可以完全不用访问数据库,不过对于频繁更新的网站,静态化往往不能满足某些功能。
缓存技术就是另一个解决方案,就是将动态数据存储到缓存文件中,动态网页直接调用这些文件,而不必再访问数据库,WordPress和Z-Blog都大量使用这种缓存技术。
如果确实无法避免对数据库的访问,那么可以尝试优化数据库的查询SQL,避免使用 Select * from 这样的语句,每次查询只返回自己需要的结果,避免短时间内的大量SQL查询。
4、禁止外部的盗链。
外部网站的图片或者文件盗链往往会带来大量的负载压力,因此应该严格限制外部对于自身的图片或者文件盗链,目前可以简单地通过refer来控制盗链,Apache自己就可以通过配置来禁止盗链,IIS也有一些第三方的ISAPI可以实现同样的功能。当然,伪造refer也可以通过代码来实现盗链, 不过目前蓄意伪造refer盗链的还不多,可以先不去考虑,或者使用非技术手段来解决,比如在图片上增加水印。
5、控制大文件的下载。
大文件的下载会占用很大的流量,并且对于非SCSI硬盘来说,大量文件下载会消耗CPU,使得网站响应能力下降。因此,尽量不要提供超过2M的大文件下载, 如果需要提供,建议将大文件放在另外一台服务器上。
6、使用不同服务器分流主要流量
将文件放在不同的主机上,提供不同的镜像供用户下载。
假设后台一下返回1000条数据,如果我们一次性把它放到页面上,那肯定会造成页面卡顿的,优化思路就是,把列表分割成很多个小数组,然后一段一段的显示到页面。可利用 Api:window.requestAnimationFrame或者setInterval不断填充数据;
window.requestAnimationFrame()告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行;
// d..
前端长列表加载
什么是长列表?
长列表的出现寓意着本次数据可能会超过1000条甚至为10000条的数据列表, 这时候列表可能会出现问题,出现短暂白屏、或者数据太多导致网页崩溃等情况,尤其在现在的移动端这种情况是非常容易出现的,给予用户的展现机制大部分都是列表
长列表的解决方案公认的有两种,第一种就是无限滚动 前后端共同进行优化, 基本思想就是用户将可视区域的scrollTop滑动成0时进行分页请求 这种方案是一个在正常逻辑正常框架之下的解决方案. 还有一种方案就是虚拟列表, 他的出现主要是由于又一些特殊的场
前端页面卡顿、也许是DOM操作惹的祸?
界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现 的。尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化的一个主要的关注 点就是DOM操作的优化。DOM操作优化的总原则是尽量减少DOM操作。
先来看看DOM操作为什么会影响性能
在浏览器中,DOM的实现和ECMAScript的实现是分离的。比如 在IE中,ECMAScrit的实现在jscript.dll中,而DOM的实
在做移动端或者其他无限下拉加载时会遇到不断插入
dom的场景,随着
dom的增多
页面会出现
卡顿,遇到这种情况开发者会采取一系列的优化措施,比如复用
dom等,那么到底为什么会出现
卡顿呢?本文将探讨这个疑问。
网页
卡顿,那肯定是渲染延迟或者cpu占用过高。
看下面一个实例:
问题:当后端一次性返回数据(array)过多时(例如1000条或者更多),会导致页面卡顿
优化思路:将这1000条数据划分为多个小数组,然后一段一段的加到页面上
解决方案:利用window.requestAnimationFrame()或者setInterval()
示例:以window.requestAnimationFrame()为例
window.requestAnimationFrame()告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要.
2. 对一阶差分进行统计,例如计算其均值和标准差。
3. 如果一阶差分的均值显著大于0,并且标准差也比较大,那么可能存在
突增的情况;如果一阶差分的均值显著小于0,并且标准差也比较大,那么可能存在突减的情况。
4. 可以根据具体
数据的特点和分析目的,设置阈值来判断是否存在
突增或突减情况。
下面是一个简单的matlab代码示例:
```matlab
data = [1 2 3 10 11 12 8 9 10]; %
数据
diff_data = diff(data); % 一阶差分
diff_mean = mean(diff_data); % 均值
diff_std = std(diff_data); % 标准差
if diff_mean > 0 && diff_std > threshold %
突增
disp('存在
突增情况');
elseif diff_mean < 0 && diff_std > threshold % 突减
disp('存在突减情况');
else % 没有
突增或突减
disp('没有
突增或突减情况');