十分钟让你的javascript登峰造极

javascipt被称作前端的灵魂,没法灵活运用它,你的前端就只是一具行死走肉。大多初学者能顺利度过div+css,然后倒在了js怀抱,即时跨过了这一关,也只是会用,其底层原理一概不知。小编这就带大家从最底层的原理讲起,相信看完本篇,你对js一定会有更深刻的认识。

浏览器是前端最基本的展示工具。当我们打开浏览器,电脑系统运行内存比就会给它分配一定的空间(假设100M),随着我们打开的页面越来越多,浏览器所使用的空间也就越来越多,超过分配的空间,就会出现卡顿,甚至卡死。而我们打开的每一个页面,也就是js里面的window对象,每打开一个页面,就会创建一个window对象,彼此独立互不影响。我以一个页面(也就是一个window对象为例):

示例

第一

第二

内存图

一个网页在内存中分类为三部分,栈、堆和常量池。栈里面主要定义的变量(变量内存地址);堆里面主要存DOM树,以及它们的属性,也可以理解成对象以及对象方法属性;常量池中存各种字符、数字、符号、文字等。浏览器拿到一个html文档,是从上往下,从左往右进行执行,然后依次在页面上画出来。

假如我们在js里面定义一个变量:var a = 1; 那么栈中就会分配一点内存,供存储常量池中1的内存地址。也可以把这个a当做指针来理解,它指向常量池中的1。

当我们定义一个函数时,该函数也会产生在堆中,如果再把函数赋值给一个变量,这个变量就会存函数的内存地址。需注意的是函数比较特殊,它自己也有栈和堆。函数内部创建变量就保存在自己的栈里,创建的函数也是保存在自己的堆里,外面如果想用,只有通过在window定义个全局变量,然后通过赋值(其实就是内存指向),来引用。

其实js就是用来操作DOM树,改变它的结构或者改变属性。当我们通过js改变了某DOM的属性值,或者增加删除一个DOM,就会导致整个DOM重新加载,浏览器会重新只执行文档,然后依次画出来。由于浏览器对渲染这方面技术已经很成熟,速度很快,所以你很难察觉它是重新绘制了一遍。

时间: 2024-11-05 15:49:24

十分钟让你的javascript登峰造极的相关文章

十分钟理解JavaScript引擎的执行机制

关注专栏写文章 十分钟理解JavaScript引擎的执行机制 方伟景 千锋前端开发推动市场提升的学习研究者. 4 人赞同了该文章 首先,请牢记2点: JS是单线程语言 JS的Event Loop是JS的执行机制.深入了解JS的执行,就等于深入了解JS里的event loop 1.灵魂三问:JS为什么是单线程的?为什么需要异步?单线程又是如何实现异步的呢? 技术的出现,都跟现实世界里的应用场景密切相关的.同样的,我们就结合现实场景,来回答这三个问题. (1) JS为什么是单线程的? JS最初被设计

十分钟开发一个调用Activity的PhoneGap插件

在HybridApp开发中,非常多业务我们是没有办法通过HTML5+js实现的,比方调用第三方的包括Activity的jar包,一些必须使用原生代码才干实现的功能,比方复杂的UI的效果,调用通讯相关的协议栈,第三方支付sdk等.这样的情况我们须要通过写cordova插件的方式,包装android原生代码为插件,供上层javascript调用.本文解说一个调用Activity并返回Activity结果的cordova插件样例,帮助大家掌握cordova plugin的开发 . Cordova插件是

十分钟玩转 jQuery、实例大全(参考自博主索宁)

十分钟玩转 jQuery.实例大全(参考自博主索宁) 一.简介 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并不是强制要求. 二.寻找元素 选择器 基本选择器.层级选择器.属性选择器  与CSS类似,这里不再细说,详细猛戳这里. 基本筛选器 $('li:first') //第一个元素 $('li:last') //最后一个元素 $("tr:even") //索引为偶数的元素,从 0 开始 $(&q

十分钟使用ionic Framework开发一个跨平台移动应用

Ionic是一个前端的框架,帮助开发者使用HTML5, CSS3和JavaScript做出原生应用.ionic的理念类似前端开发的BootStrap,目标是封装HTML5移动跨平台开发的最佳实践,就像Twitter Bootstrap在前端开发中做的一样.Ionic框架目前发展很迅速,我们从2014年3月开始使用,当时是1.0.0beta2,现在已经更新到1.0.0beta10,大概每2个星期会出一个beta版本,并且都包含实质性更新.Ionic框架很先进,js部分是基于AngularJS框架,

JS实现十分钟倒计时代码实例

编写JS倒计时代码需要用到很多JavaScript知识,比如:if函数,Math.floor,定时器setInterval等等,如有不清楚的小伙伴可以参考PHP中文网的相关文章,或者访问 JavaScript视频教程. 举例:10分钟考试倒计时,当时间仅剩五分钟时,提醒考试仅剩5分钟,时间结束时,提示考试结束.具体代码如下: HTML部分: ? 1 2 3 4 <body>  <div id="timer"></div>  <div id=&q

Orange&#39;s 自己动手写操作系统 第一章 十分钟完成的操作系统 U盘启动 全记录

材料: 1 nasm:编译汇编源代码,网上很多地方有下 2  WinHex:作为windows系统中的写U盘工具,需要是正版(full version)才有写的权限,推荐:http://down.liangchan.net/WinHex_16.7.rar 步骤: 1 编译得到引导程序的机器代码.用命令行编译汇编源代码:name boot.asm -o boot.bin,其中boot.bin文件产生在命令行的当前目录中. 2 将引导程序写入到U盘引导盘的第一个扇区的第一个字节处(后),即主引导区.

[转]教你十分钟下载并破解IntelliJ IDEA(2017)

来源:http://www.itwendao.com/article/detail/400687.html 之前都是用myeclipse,但是最近发现看的很多教学视频都是使用 IntelliJ IDEA,于是决定换个软件开始新的学习征程! 下面讲讲我是如何在十分钟之内安装并破解该软件. 1.首先,我找到了 IntelliJ IDEA的官网:www.jetbrains.com 然后找到下载的地方,选择自己电脑所匹配的下载安装包,这里我们选择收费版的下载,因为免费版的功能并没有收费版的强悍. 2.接

十分钟学会Markdown(younghz原创)

younghz原创,转载请注明:http://blog.csdn.net/u012150179/article/details/26503779 原内容及代码托管在GitHub上,并持续更新,欢迎交流:https://github.com/younghz/Markdown 主要内容 MARKDOWN是什么? 谁发明可这么个牛X的东西? 为什么要使用它? 怎么使用? 都谁在用?没人用的东西我可不用. 感觉有意思?趁热打铁,推荐几个工具. 正文 1. MARKDOWN是什么? MARKDOWN是一种

【NLP】十分钟学习自然语言处理

十分钟学习自然语言处理概述 作者:白宁超 2016年9月23日00:24:12 摘要:近来自然语言处理行业发展朝气蓬勃,市场应用广泛.笔者学习以来写了不少文章,文章深度层次不一,今天因为某种需要,将文章全部看了一遍做个整理,也可以称之为概述.关于这些问题,博客里面都有详细的文章去介绍,本文只是对其各个部分高度概括梳理.(本文原创,转载注明出处:十分钟学习自然语言处理概述  ) 1 什么是文本挖掘? 文本挖掘是信息挖掘的一个研究分支,用于基于文本信息的知识发现.文本挖掘的准备工作由文本收集.文本分