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重新加载,浏览器会重新只执行文档,然后依次画出来。由于浏览器对渲染这方面技术已经很成熟,速度很快,所以你很难察觉它是重新绘制了一遍。

转载于:https://www.cnblogs.com/Unknw/p/6217170.html

十分钟让你的javascript登峰造极相关推荐

  1. 十分钟,快速理解JavaScript中的闭包概念

    海阔凭鱼跃,天高任鸟飞.Hey 你好!我是猫力Molly 闭包已经是一个老生常谈的问题了,不同的人对闭包有不同的理解.今天我来浅谈一下闭包,大家一起来就"闭包"这个话题,展开讨论, ...

  2. 十分钟实现炫酷透明计算器,CSS3+JavaScript实现3D炫酷计算器

    B站视频:https://www.bilibili.com/video/BV1Kp4y167iX 十分钟实现炫酷透明计算器,CSS3+JavaScript实现3D炫酷计算器 今天带大家实现了一个炫酷的 ...

  3. 十分钟教你开发EOS智能合约

    十分钟教你开发EOS智能合约 在CSDN.柏链道捷(PDJ Education).HelloEOS.中关村区块链产业联盟主办的「EOS入门及最新技术解读」专场沙龙上,柏链道捷(PDJ Educatio ...

  4. 十分钟理解线性代数的本质_数学对于编程来说到底有多重要?来看看编程大佬眼里的线性代数!...

    本文提出了一种观点:从应用的角度,我们可以把线性代数视为一门特定领域的程序语言.我们一起来看看!文章有点偏理论讨论,可能比较枯燥,对于一名程序员,你如果看下去,你将会有不一样的收获! 线性代数是什么? ...

  5. 十分钟快速了解 ES6 Promise

    转载自 十分钟快速了解 ES6 Promise 什么是Promise Promise最早由社区提出并实现,典型的一些库有Q,when, bluebird等:它们的出现是为了更好地解决JavaScrip ...

  6. CakePHP 2.x十分钟博客教程

    1. CakePHP2十分钟博客教程(一):安装与配置 Cakephp 2.0依然保持着Cakephp框架的各种优良传统,其中之一就是非常易于新手入门,几乎不做任何复杂的配置即可使用.非常可惜的是,C ...

  7. 得物App联合Zippo推出限量款打火机 首批开售十分钟即售罄

    5月18日,得物App今天宣布联手世界知名品牌Zippo,共同推出"登峰造极.极光之宝"联名限量款打火机,并在得物App进行独家发售. 根据官方公布的数据显示,开售十分钟,首批限量 ...

  8. 十分钟,学会使用js三种方法创建本地json数据文件

    前言 在干业务时,需要得到一份全国省市到街道的区划数据,刚好业务中连接了高德地图,高德地图又提供了区划的api,这下只需要把数据写到json里了.什么!你说你还不会用js创建json文件?没关系,只需 ...

  9. js 倒计时 php,JS如何实现分钟倒计时(十分钟倒计时实例)

    工作中经常需要在页面中设置倒计时,那你知道JS如何实现分钟倒计时吗?这篇文章和大家分享一个JS十分钟倒计时代码,非常简单实用,感兴趣的朋友可以看看. 编写JS倒计时代码需要用到很多JavaScript ...

最新文章

  1. 结构体为什么要4字节对齐
  2. UIWindow的windowLevel详解
  3. 为什么你申请信用卡总是被拒绝?是银行跟你有仇吗?
  4. ubuntu网站收集
  5. Oracle 10g数据仓库实践pdf
  6. 禁用生成8.3字符长文件名解决单目录存储大量文件写入性能下降问题
  7. 渐变背景和背景图片并存
  8. 华为笔记本linux双系统,华为MateBook笔记本安装Win10与Ubuntu双系统
  9. 一天一个 Linux 命令(27):mkfs 命令
  10. 【onnx】——since it‘s not constant, please try to make things (e.g., kernel size) static if possible
  11. 基于单片机的电压电流表设计
  12. R语言使用倾向评分提高RCT(随机对照试验)的效率
  13. vue验证手机号、密码验证码、时间、机型、图片类型等
  14. 手机前缀带字幕滚动筛选
  15. Redis设计与实现学习记录《一》
  16. win10系统输入法图标不见了怎么找回
  17. web前端:文本、字体、图像、列表 全【含精灵图,box-sizing,字符间距,首行缩进,垂直对齐】
  18. 关于esp8266的D0、D3、D4口的使用
  19. 多合一身份证读卡器JKL-HS300安装说明
  20. 酒干倘卖无之递归算法

热门文章

  1. strtok,sterror函数
  2. Android 低功耗蓝牙开发简述
  3. 计算机网络的分类及基本特点,计算机网络的定义、分类、特点
  4. Java基础进阶多线程-生产者和消费者模式
  5. python 纸牌_python-扑克牌
  6. 小程序开发,唯一一个稳定的版本,其他的都白屏,微信这帮子开发人员真是垃圾
  7. JavaScript中正负零
  8. WebShell and Threat Intelligence
  9. autoform分析用什么计算机,AutoForm入门操作流程
  10. c语言tinyxml使用方法,C++ tinyXML使用