这几行 javascript 代码能让你的浏览器崩溃?

上Demo,想先看效果的可以先戳一下链接:Crash当然自己不想点也可以把链接发给小伙伴 — http://lab.zeakhold.com/crash/

(温馨提示:访问前请保存电脑/手机正在编辑的任务,整人被打概不负责嘿嘿~)

事情还是得从一篇推文说起——2月17日, IT Security Tweets ™ 发了几行JavaScript代码,说是能让你的浏览器崩溃以及iPhone重启:

什么东西这么神奇??!

于是打开电脑跃跃欲试,当满怀好奇地在浏览器上执行了这段代码后发现: Chrome 立马陷入了卡死的状态,点击关闭窗口没响应!!

打开任务管理器,发现CPU已飙升至100%:

在任务管理器里结束 Chrome 进程,所幸一切恢复正常。

不过也纳闷着,这几行代码究竟又是什么梗??

var total = "";

for (var i = 0; i < 1000000; i++) {

total = total + i.toString();

history.pushState(0, 0, total);

}

从代码看应该是history对象的pushState()方法在1000000次的循环中耗尽了系统的资源。看了一下相关的博客介绍,才发现原来pushState()是HTML5引进的新特性之一,它的引进与Ajax有着密切的关系。

我们知道,Ajax的出现方便了用户浏览网页,它允许用户在不用刷新的情况下更新网站的内容,但是这样也引发了一个问题,就是更新网站内容之后,不同的页面之间还是有区别的,而这种区别无法体现在URL上:Ajax产生的页面变化并没有伴随着URL的改变,当前页的URL仍与前一页的URL一样,这就导致我们无法通过前进、后退来切换页面。在传统的浏览体验中,页面内容的改变往往会伴随着URL的改变,而这些改变对应着“前进”和“后退”,但是Ajax的出现破坏了这种独特的体验。为此,HTML5 给history对象新增了一些特性来解决这个问题,其中就包括上面代码里的pushState()方法。

根据W3C的HTML5文档,pushState()方法的作用是在浏览器的历史记录栈里面添加记录(Pushes the given data onto the session history),该方法包含三个参数:一个事件对象,一个加进历史记录的页面的标题(通常被浏览器忽略),一个加进历史记录的地址。这样一来,当Aja作做变更一次,就可以用pushState()方法添加一次历史记录,在此基础上再加上其它几个方法,便使得我们可以主动地对历史记录进行编辑,无刷新改变URL,从而弥补了使用Ajax带来的这个缺陷。

回到代码,for做了1000000次循环,浏览器的历史记录(压入URL)也就修改了1000000次,并且,每次循环的URL都在上一次的基础叠加,这样不断循环下去向history添加记录,迅速地消耗系统内存资源,从而导致浏览器的崩溃。

了解缘由后,选了几个手机设备做了测试,虽然没有出现twitter所说的能让iPhone设备重启的现象,但是都不约而同地搞挂了浏览器。

有了这段代码后,似乎又多了个整蛊小伙伴的新姿势嘿嘿~

html整人js代码大全,这几行 javascript 代码能让你的浏览器崩溃?相关推荐

  1. 100行JavaScript代码实现JavaScript

    先看效果: 100行JavaScript代码实现经典游戏俄罗斯方块 新建一个html文件,复制如下代码,用浏览器打开即可: <!doctype html> <html> < ...

  2. 只要200行JavaScript代码,就能把特斯拉汽车带到您身边

    Jerry的前一篇文章 如何使用JavaScript开发AR(增强现实)移动应用 (一) 介绍了用React-Native + ViroReact开发增强现实应用的一些预备知识. 本文咱们开始进入增强 ...

  3. 60行JavaScript代码写俄罗斯方块

    教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏 早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要 ...

  4. [原创]22行JavaScript代码实现QQ群成员提取器,绿色、环保、无病毒!

    原来想给QQ群内的成员发邮件,找了一个现成的软件,没想到居然有QQ盗号病毒,很不爽.就决定自己动手,丰衣足食. 首先,我想到如果能够直接从QQ群成员列表中把所有成员拷贝出来,岂不是很方便.不过QQ明显 ...

  5. js基础代码大全_关于前端业务代码的一些见解

    前言 如何写出可维护和可读性高的代码,这一直是一个困扰很多人的问题.关于变量如何起名.如何优化 if...else 之类的小技巧,这里就不做介绍了,推荐去看<代码大全2>,千书万书,都不如 ...

  6. python 解压js压缩的图片_20行Python代码,无损压缩千百张图片!Python有多强!就不用说了...

    每个设计师.摄影师或有图片处理需求小编,都会面临批量 高清大图的困扰. 因为高清大图放到网站上会严重拖慢加载速度,或是有的地方明确限制了图片大小,因此,为了完成工作,他们总是需要先把图片压缩,再上传. ...

  7. easyui treegrid 获取新添加行inserted_18行JavaScript代码构建一个倒数计时器

    有时候,你会需要构建一个JavaScript倒计时时钟.你可能会有一个活动.一个销售.一个促销或一个游戏.你可以用原生的JavaScript构建一个时钟,而不是去找一个插件.尽管有很多很棒的时钟插件, ...

  8. 详解用65行javascript代码做Flappy Bird

    点击查看特效 JavaScript做Flappy Bird游戏,代码仅仅65行 资源包括: javascript源码:phaser.min.js:main.js:index.html 素材:两张图片! ...

  9. 如何用 200 行 JavaScript 代码实现人脸检测?

    在超市.地铁.车站等很多场景中,人脸识别已经被广泛应用,但是这个功能究竟是怎么实现的? 在本文中,将以 pico.js 库为例,分享实现轻量级人脸识别功能的具体开发过程 . 作者 | tehnokv ...

  10. 淘宝店铺装修代码大全,淘宝页面设计代码.

    淘宝店铺装修代码大全    快去学习一下吧这里有我做的实例. http://shop110214125.taobao.com 有什么问题可留言我会尽量解答. http://txw100.com/  如 ...

最新文章

  1. IT阅读——关于“业务”
  2. linux7内核优化,centos7 系统内核、网络等优化(适用高并发)
  3. Java Nashorn--Part 3
  4. 盘点:弱电施工过程中的电线电缆36计
  5. 关于无线的Idle Timeout和Session Timeout
  6. SQL Server 2008安装配置说明书+简单使用 亲测可用
  7. winforms中限定上传文件类型
  8. ubuntu cheat sheet 目录结构
  9. pipline 简单是使用
  10. 《软件测试自动化之道》读书笔记 之 目录导航
  11. win11搜索位置在哪 Windows11搜索位置的设置方法
  12. linux中断处理程序架构,Linux外部中断架构初始化流程-----Tiny6410
  13. Elastic Search + Logstash + Kibana 初学者日志
  14. 最近有一次编程方面的思想认识跃变,由指望个人转为工具检查
  15. 3DMAX 创建选择集
  16. JEB工具介绍及使用
  17. Android端投影演示方案
  18. 第一章:状态化流处理概述
  19. pycharm2019版本去掉下划线的方法
  20. 随身WIFI刷入debian

热门文章

  1. 转 计算广告 KPI 公式
  2. 用批处理共享打印机电脑设置
  3. Windows系统如何删除远程桌面连接记录
  4. Numpy:numpy包下载并导入Pycharm的方法
  5. 性能测试流程(完整版)
  6. J2EE 高 级 软 件 工 程 师 面 试 题 集
  7. 三星note10 android q,【极光ROM】-【三星NOTE10/NOTE10+/5G N97XX-9825】-【V5.0 Android-Q-TE9】...
  8. 旺旺的计算机无法打开,电脑任务栏中点击阿里旺旺图标无法打开界面的解决方法...
  9. Windows 10图标如何调整?
  10. 电商商品中心类目体系