javascript高级程序设计第一章有感
第一章JavaScript简介
Javascript的诞生最早是为了处理表单数据验证的问题,以前主要是使用perl这个强大的服务端脚本语言处理的。在未诞生javascript之前,
人们每次提交表单就会与服务器交换数据,每一次请求都与服务器交互,若是仅仅只是一个字段没有填或者密码没有填,每一次都与服务器
端进行交互的话,会大大加重服务器那边的负荷,点击提交就会等待服务器端返回数据以及用户的体验也并不好。
Netscape公司决定发明一种客户端语言来处理这种简单的验证。最后布兰登艾维奇开发了Livescript,可以同时在浏览器与服务器中使用。
最后更名为javascript。Javascript受关注度越来越高,Netscape将自己定位为行业的领袖,微软欲与其竞争,在IE3中加入了名为Jscript的jav
ascript的实现,这两种版本的标准化通用化被提上日程,后定义为ECMAScript的新脚本语言标准。浏览器也各自将ECMAScript作为自己浏览
器实现的标准。也就是说我们所运行的浏览器,其实也是基于javascript来实现的,这就是为什么直接在控制台输入一些api会有很多东西比如函
数,对象或者能够直接运行的原因。也可以把浏览器当做是一个大型的javascript宝库,他里面什么东西都有,就看你的js怎么在这个宝库中展现
自己了。只是到了2008年的时候,五大浏览器才全部做到了与ECMA-262的兼容。IE8是第一个着手实现ECMA-262第五版的浏览器,并在IE9中
提供了完整的支持,火狐4也是紧随其后做到兼容。也就是说,在IE8之前,我们都是要处理浏览器兼容性问题的。
ECMAScript的版本也是极其让人头疼的,本来javascrit是弱类型语言,他没有真正的类的,但是ECMAScript4跨度太大,不仅有强类型语言还
有真正的类和继承,还定义了与数据交互的新方式。事实上javascript比ECMASCript-262规定的多很多,一个完整的JavaScript实现由三个不同的
部分组成。核心是ECMAScript,还有文档对象模型DOM,以及浏览器对象模型BOM。
DOM主要是提供访问和操作网页内容的方法和接口,像我们在网页上面进行的一些基本的交互,比如获取网页的内容,给网页添加颜色,或者
给网页上面的某个元素添加事件,或者操作某个表格或者删除表格中的某行,或者只是一个简单的鼠标移进移出等等。当我们要很密集的给网页添
加和删除内容的时候,就不得不提到的一个问题是dom操作速度很慢,会影响浏览器渲染的效率。其中 layout(布局)和paint(绘制)是最大的。
layout 就是布局变动造成重新计算(耗CPU,有时也很耗内存),paint 就是调用浏览器UI引擎进行渲染展示页面(耗CPU和内存)。像jquery的出现
只是为了减少DOM操作,而Vue和React的出现,则是实质性的减少DOM操作,它用虚拟DOM不会进行排版与重绘操作。虚拟DOM的损耗计算:总
损耗 = 虚拟DOM增删改 + (与Diff算法效率有关)真实DOM差异增删改 + (较少的节点)排版与重绘。真实DOM的损耗计算:总损耗 = 真实DOM
完全增删改 + (可能较多的节点)排版与重绘。像我们经常使用的图片懒加载方法,就是为了减少dom操作,避免图片加载过程中产生的性能问题。
通过动态创建img标签,动态加载图片,以减少dom操作。
通过动图我们可以更清晰的看到渲染的过程。
BOM主要是提供与浏览器交互的方法和接口。你想对浏览器进行的任何操作移动,缩放,关闭,甚至浏览器所在用户显示器的分辨率(screen),
以及浏览器所加载页面的详细信息(location)或者浏览器存储的用户信息(cookie)都可以通过其来实现。现在HTML5.20已经出来了,对已经纳入标准
的BOM来说,还是会因浏览器不同特性表现而异。
Tips:关于ES 6和ECMAScript2015是不是同一样东西呢?当然,由于是ECMA-262 的第六次变更,所有按照惯例称为ES6。但是为了更小版本频繁发布版
本,现在 标准叫法是:ECMAScript2015。 号外:ECMAScript2018也要来啦!!!
javascript高级程序设计第一章有感的更多相关文章
- 读书笔记 - javascript 高级程序设计 - 第一章 简介
第一章 简介 诞生时间 1995 最初用途 客服端验证 第一版标准 注意是标准 1997年 Ecma-262 一个完整的js实现由三部分组成 ECMAScript DOM 文档对象模型 BO ...
- javascript高级程序设计第一章
看后总结: 1.javascript的组成成分:ECMAscript+DOM+BOM
- javascript高级程序设计第二章知识点提炼
这是我整理的javascript高级程序设计第二章的脑图,内容也是非常浅显与简单.希望您看了我的博客能够给我一些意见或者建议.
- javascript高级程序设计第二章
看后总结: 1.js代码用得最多的两种加载方式: a)外部文件形式:<script type="text/javascript" src="jquery.min.j ...
- javascript 高级程序设计1--14章重点总结
js简介 首先介绍了js是一种专门与网页交互而设计的脚本语言.主要由ECMAScript 文档对象模型(DOM) 浏览器对象模型(BOM)三部分组成.分别用来提供核心语言,提供访问和操作网页内容的方法 ...
- 读书笔记 - javascript 高级程序设计 - 第二章 在Html中使用JavaScript
1 <script>的6个属性 async 立即下载当前script标签的外部脚本 但不能影响别的 charset 没用了 defer 文档显示之后再执行脚本,只对外部脚本有效 lan ...
- 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介
前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...
- 《JavaScript高级程序设计》笔记——第一章到第三章
2019年,新年伊始,我打算好好重读一下<JavaScript高级程序设计>这本前端必备经典书.每天半小时. 以下内容摘自<JavaScript高级程序设计> 2019-2-1 ...
- JavaScript高级程序设计(第三版)学习笔记20、21、23章
第20章,JSON JSON(JavaScript Object Notation,JavaScript对象表示法),是JavaScript的一个严格的子集. JSON可表示一下三种类型值: 简单值: ...
随机推荐
- django通用权限控制框架
在web项目中根据不同的用户肯定会限制其不同的权限,利用以下模块可以满足日常几乎所有的权限控制 permission_hook.py # 自定义权限控制,必须返回True/false ,True表 ...
- Python自动化运维工具-Fabric部署及使用总结
使用shell命令进行复杂的运维时,代码往往变得复杂难懂,而使用python脚本语言来编写运维程序,就相当于开发普通的应用一样,所以维护和扩展都比较简单,更重要的是python运维工具fabric能自 ...
- mariadb第二章-增删改
MariaDB 数据类型 MariaDB数据类型可以分为数字,日期和时间以及字符串值. 使用数据类型的原则:够用就行, 尽量使用范围小的,而不用大的 常用的数据类型 整数:int, bit 小数:de ...
- 【Beta阶段】M2事后分析
先上照片,最后一次开会了啊... 计划 你原计划的工作是否最后都做完了? 如果有没做完的,为什么? 答:没有全部做完,到目前为止,我们的还有几个实验的报告生成功能没有上线.这几个实验的数据处理文件已经 ...
- iOS Runloop理解
一.RunLoop的定义 当有持续的异步任务需求时,我们会创建一个独立的生命周期可控的线程.RunLoop就是控制线程生命周期并接收事件进行处理的机制. RunLoop是iOS事件响应与任务处理最核心 ...
- shell脚本--函数
shell的函数和Javacript和php的函数声明一样,只不过shell在调用函数的时候,只需要写函数名就可以调用函数,注意不要在函数名后面加括号 创建并使用函数 #!/bin/bash #文件名 ...
- Installing and removing VNC Connect | Red Hat | VNC Connect
https://www.realvnc.com/en/connect/docs/redhat-install-remove.html 此软件会和TigerVNC(Server)或者X11VNC Ser ...
- XMLHttpRequest.withCredentials
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials var xhr = new XMLHtt ...
- Resolved validation conflict with readonly
/** * Bug绕过去方案WorkAround * Bug描述: * JQuery的Validation的和form的input元素设为readonly,一对不可调和的矛盾: * 一个设置为requ ...
- nginx gzip 以及 tcp 反向代理的 model
同事为了提高性能发给我一model 简单改了一下. 记录一下 #user nobody; worker_processes ; events { worker_connections ; } http ...