Arcgis API for JavaScript（1）
注释比较详细，直接贴代码。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1745次
排名：千里之外
原创：15篇
(13)(1)(1)高级黑啊...&br&&br&假如题主是认真的话，我建议你别纠结这问题。涉及偏好的问题要是真能说服别人，也不会有这么多编程语言和框架了。&br&&br&Guido van Rossum 说，just do a good job. 把事情做好，喜欢的人自然会喜欢。让所有人喜欢不可能，也不用强求。&br&&br&话说回来，这个问题炸出来的个别答案还是挺让我难受的。做 Vue 的初衷很单纯，不是为了赚大钱，不是为了成为大神，也不是因为我发现了什么不得了的创新点。我只是想做一个我自己会喜欢的框架。很巧，我把我想要的东西做出来以后，也有很多其他人喜欢，所以用户越来越多。我从没说过，也不认为 Vue 比所有其他框架都好（我一直的观点都是开发者偏好的多样性使得多框架/语言的共存有益无害，甚至是必要的）。有些答案指出的社区活跃度不如 React 等等，也是事实。除了开源会议上的演讲（大多是受邀），我也没进行过任何所谓的『营销』（我在知乎回答问题都尽量避免推销 Vue）。即使这样，还是会有人看不惯，对 Vue 的用户群体表示鄙视，甚至对我有着强烈的敌意。或许程序员这个靠脑力吃饭的群体，也多少会有『文人相轻』这样的习性。
高级黑啊... 假如题主是认真的话，我建议你别纠结这问题。涉及偏好的问题要是真能说服别人，也不会有这么多编程语言和框架了。 Guido van Rossum 说，just do a good job. 把事情做好，喜欢的人自然会喜欢。让所有人喜欢不可能，也不用强求。 话说回来，这…
JAVA是老婆，平时在单位工作的老婆。&br&JavaScript是老婆饼，和老婆是完全不同啊，虽然他们在某种情况下能够发生互动，但是你不能牵着老婆饼的手回家。&br&Android通常由JAVA来开发，但它有一部分专用的API，类同于厨房经常由老婆来打理，到这时候老婆得系个围裙换个加个锅铲神马的装备。当然有些时候开发安卓可以用C，比如老婆做不了太底层的粗活儿就果断心疼老婆请个家政阿姨解决。&br&JAVA Web常见的就JSP，这也是你老婆，只不过你老婆换了个社交场合，不在单位工作了，去参加私人宴会，这个宴会上，你老婆可以吃到老婆饼。就是JavaScript和JAVA发生了互动，你老婆也可能和别的女人相聊甚欢，例如HTML.CSS之流。等回家了，你和老婆ajax一把。
JAVA是老婆，平时在单位工作的老婆。 JavaScript是老婆饼，和老婆是完全不同啊，虽然他们在某种情况下能够发生互动，但是你不能牵着老婆饼的手回家。 Android通常由JAVA来开发，但它有一部分专用的API，类同于厨房经常由老婆来打理，到这时候老婆得系个围裙…
&p&前端：帮我写个脚本，把 js 文件合并成一个文件
后端：没空。你自己用 bash 写一个吧，遍历然后 cat 一下就行了，用 makefile 也行啊
前端心想，妈的听不懂，我只会 JS。&/p&&p&Node.js 一出，前端终于可以用 JS 合并文件了。&/p&&p&看出来了吗？一部分前端除了 JS 啥都不会，不用 Node.js 用啥？（少部分前端早就用 PHP、ruby、Java 做工程化了）&/p&&p&工程化需求一直存在，只是 Node.js 之前前端写不出工具而已。&/p&&p&JS 所谓的工程化，在初期基本就是拼字符串、算个MD5、lint 一下，后来有了 AST 分析，直到 TypeScript 出来，才像那么回事。所以说还是微软的工程师牛逼。&/p&&p&这些工程化，跟Java、C++的工程化比起来，弱爆了好吗？别整得好像很高大上似的，工程化是软件工程的必备项好吗？&/p&&p&以前没条件写，现在有条件了就补上。别老玩概念。&/p&&p&你觉得为什么 gruntfule gulpfile 要叫做 xxxfile，明显就是从 makefile 抄过来的好吗，当然 makefile 抄谁我就不知道了，我水平太差。&/p&&p&你觉得为什么后来前端又说工程化应该用 npm scripts 作为启动脚本。因为终于搞清楚命令行的工作原理了。&/p&&p&你说现在的前端为什么言必称函数式？几年前的面向对象怎么不提了？还不是因为终于多看了两本书了，知道面向对象只是面向对象而已，不是圣经。函数式才是圣经嘛。&/p&&p&你觉得前端新技术出现得那么快是为什么？因为旧的没写好就发布了，用一用发现还是不好用，得再写一个新的呗。&/p&&p&再者说，那些前端东西真的「新」吗？不就是抄 WPF、coffeescript、Python、C# 和 Rails 吗？当然抄并没有什么错，现在新出来的语言都是集大家之所长，但是你因此觉得「壮哉我JS」那就是你中二了。&/p&&p&前端预编译之风居然是从 Ruby 社区刮起来的，知道前端社区有多弱了吗？Node.js 半边天 TJ 也是从 Ruby 社区过来的，知道前端有多尴尬了吗？人家一个人抵得上整个前端社区，科科，前端好意思吗？TJ 在前端潇洒了一圈觉得高处不胜寒跑去跟 golang 社区交流，前端社区依然没有发现自己的窘境。&/p&&p&还有去年前年炒的同构JS。想得很美，做起来知道不容易了吗？&/p&&p&外国的前端社区我不是很熟我可能说错了，但是国内的前端社区我可熟了。大家比着造轮子打知名度，今天这个会议明天那个会议，一片繁华。&/p&&p&但我作为一个前端从业者咋这么心虚呢？我们国内前端社区有那么成果吗？需要开这么多会来歌颂？&/p&&p&后端语言的社区为什么说前端浮躁啊，你说呢？还有比前端社区更浮躁的社区吗？&/p&&p&这么多年了，前端的组件化才搞出点眉目，好意思说工程化？哪个语言像 JS 一样搞个组件化这么难的？（可能有，但是不要在意这些细节，重要的是气势）。为什么难？很大因素就是 JS 没设计好。但是没设计好你就等设计好了再用好嘛，非要整 commonJS、AMD，还来了个 CMD，搞得最终不得不搞一个 UMD。而且明明知道是临时方案，还把自己整得跟标准似的。最后还是得搬标准出来救命。怎么前端还是没从二十年前的浏览器大战中吸取教训似的？幸好有 es modules啊，没有 es modules的话我真的不好意思承认 JS 是现代语言。&/p&&p&有人肯定会说我们不搞这些事，标准怎么会引入 es modules 呢，这些都是必要的。我并不否定这些东西作为临时方案的意义，但是你们该消停了好吗？能把一个东西玩好了再去玩下一个吗？别见一个爱一个。那不叫博爱，那叫没见识。&/p&&p&不是现在的前端太难，而是以前的前端太没技术含量。&/p&&p&你一定发现我跑题了，我也发现了，但是一跑就刹不住了。&/p&&br&&p&利益相关：我是一名前端程序员。&/p&&p&本科学的是软件工程。&/p&
前端：帮我写个脚本，把 js 文件合并成一个文件
后端：没空。你自己用 bash 写一个吧，遍历然后 cat 一下就行了，用 makefile 也行啊
前端心想，妈的听不懂，我只会 JS。Node.js 一出，前端终于可以用 JS 合并文件了。看出来了吗？一部分前端除了 JS 啥都不…
入门可以看《javascript高级程序设计》与《javascript dom 编程艺术》尤其是后者，真是好书。我以前看了许多视频，翻那本很厚的指南与高程，最后还是靠《javascript dom 编程艺术》激发我学习兴趣入门。&br&&br&看了三四次《javascript高级程序设计》就可以看蝴蝶书《javascript语言精辟》，这是讲JS的语法设计，那些语法应该用，那些不应该用（如==、 with、 eval、 argument.caller），这提高你的代码质量必不可少。&br&&br&如果你想写一个插件或一个库，就要涉及大量DOM，BOM知识了。毕竟javascript是胶水语言，而CSS与HTML在JS里都会映射为DOM，此外还有一些涉及浏览器的东西，叫BOM。&br&掌握各大浏览器提供的底层DOM、BOM API，及了解它们之间的差异，如何检测它们是否支持，如果屏蔽它们之间的差异性，如何选用最佳的API是我们成为高手的关键。&br&&br&《PPK 谈 Javascript》，主要是说DOM的兼容性与可用性问题。&br&&br&《JavaScript DOM高级程序设计》，这本非常优秀，不知为何被理没了（也可能是出版社的缘故，很早就买断货就不知道补课），我在这里了解许多操作CSS的API。&br&&br&《JavaScript框架设计》这完全是本面向中高级的书，涉及一般书没有讲解过的模块加载器，事件管理系统，选择器引擎，异步列队，动画引擎，及时下日益流行的MVVM架构。&br&&br&《数据结构与算法JavaScript描述》，越复杂的系统，最后都在架构与算法与数据结构上下功夫，虽然用得不多，但作为一个高手，算法不精真是一个痛点。比较实现一个选择器引擎，人家都会问你比jQuery的快吗？加之JS在这方面也有它的特殊点，因此还得学习。&br&&br&时下也有许多angular与backbone的书，我本人认为他们基本上照搬官网的API文档，很少能讲到底层的实现，能获得的知识点太少了，它们只能用于入门（你英语不好的话），因此不建议入。
入门可以看《javascript高级程序设计》与《javascript dom 编程艺术》尤其是后者，真是好书。我以前看了许多视频，翻那本很厚的指南与高程，最后还是靠《javascript dom 编程艺术》激发我学习兴趣入门。 看了三四次《javascript高级程序设计》就可以看蝴蝶…
首先要知道：从 ES2016 开始，ECMAScript 标准的制定原则是&b&成文标准要从事实标准中诞生&/b&，&b&实现先于标准存在&/b&，进入标准草案必须有 JavaScript 引擎实现的支持（按照流程，起码要 2 个 JavaScript 引擎的稳定实现，而主流常青浏览器里 JavaScript 引擎总共也才 4 个：FireFox 的 SpiderMonkey，IE/Edge 的 Chakra，Chrome/Opera 的 V8，Safari 的 JavaScriptCore ）+ 社区里有充分的人气 + 足够的 test 262 测试，这样才符合每年都发布新版标准的节奏而不至于用各种不成熟的特性 break the Web。所以 ECMAScript 标准现在相当于&b&事实标准的 Snapshot &/b&而已 —— 到了每年年初的 deadline 有多少标准进了 Stage 4，就有多少标准进入当年的草案。今年已经到达 Stage 4 的标准少，自然草案里的内容也少了（因为 ES2015 比较特殊，相当于一下补充了十几年的债+还没启用新流程，内容比较多，没收尾完所以分散了大量精力，不过几大引擎开发中的版本应该都达到 80% 以上了，到明年应该就全力放在新流程上了）。&br&&br&拿题主说的 &b&async &/b&来说（话说 fetch 是怎么回事，那不是 JavaScript 这个次元的东西，那是 Web API ，归 Web 标准（&a href=&///?target=https%3A//fetch.spec.whatwg.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Fetch Standard&i class=&icon-external&&&/i&&/a&）管诶……），没进到 Stage 4 原因是上次 TC39 开会的时候只有 Chakra 和 Babel 有实现（SpiderMonkey 快了，但是当时遇到了一些问题），&b&而且还没有写 test 262 测试&/b&……按照标准是不可以进下一步的（&a class=& wrap external& href=&///?target=https%3A///rwaldron/tc39-notes/blob/master/es7/2015-11/nov-17.md%23async-functions-stage-4-process-discussion-bt& target=&_blank& rel=&nofollow noreferrer&&tc39-notes/nov-17.md at master · rwaldron/tc39-notes · GitHub&i class=&icon-external&&&/i&&/a&）。虽然现在 V8 和 SpiderMonkey 里的 async 也快 land 了（别忘了 JS 引擎现在都是 6 周发一版），test 262 测试也在写了（&a class=& wrap external& href=&///?target=https%3A///tc39/test262/pull/479& target=&_blank& rel=&nofollow noreferrer&&Add tests for async functions by bterlson · Pull Request #479 · tc39/test262 · GitHub&i class=&icon-external&&&/i&&/a&），不过没赶上这个月底 TC39 开会的议程，下一次 TC39 开会是 3 月底，而今年的 deadline 是 1 月 28 日……赶不上 deadline 了，等明年吧←_←&br&&br&另外 JavaScript 标准的实现/标准分离情况跟 Web 标准完全不是一个等级的，维护各种 proposal 和做 JS
引擎实现的很大程度是同一拨人，而且各个 JS
引擎团队经常沟通交流的，不存在割裂的问题。加上现在的几大 JavaScript 引擎都是开源的（给 M$ 鼓个掌），开发流程也都是允许外部参与的，大不了直接去看友商的代码，给人家提 issue/bug/patch 嘛……拿软件工程的术语来说，以前的标准制定流程更像是教材们最爱用来做反面教材的瀑布模型，现在是敏捷开发了，倒有点 Scrum（&a class=& wrap external& href=&///?target=https%3A//en.wikipedia.org/wiki/Scrum_%28software_development%29& target=&_blank& rel=&nofollow noreferrer&&Scrum (software development)&i class=&icon-external&&&/i&&/a&）的味道。&br&&br&所以作为开发者，想要标准里有更多的新东西怎么办？用起来啊！实验性项目可以直接用，非实验项目用 polyfill，或者用 Babel 之类的 transpiler（注意，Babel 在 ECMAScript 流程里也算一种实现）。不敢在浏览器用，也可以在 Node.js 这样的地方用。用得越多，反馈越多，厂商越重视+越好改进，越快进下一个 Stage（何况人气本来就是进下一个 Stage 的标准之一），只要赶上了下一年的 deadline，就进标准了啊。而且标准制定过程都是完全公开的，可以去 Github 提交新的 proposal （传送门：&a href=&///?target=https%3A///tc39/ecma262& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&tc39/ecma262 · GitHub&i class=&icon-external&&&/i&&/a&）和帮着写测试（传送门：&a class=& wrap external& href=&///?target=https%3A///tc39/test262& target=&_blank& rel=&nofollow noreferrer&&tc39/test262: Official ECMAScript Conforman...&i class=&icon-external&&&/i&&/a&）啊，不需要什么资格，签个协议表明一下你无偿做就可以提 pull request 了，只要是好东西，JS 引擎厂商会帮你完成剩下的事（当然如果对相关姿势不够熟的话还是不要添乱了，TC39 里好多大忙人，不要用噪音拖人家后腿，往贡献使用率努力就好，比如我:)…… ）。&br&&br&附之前画的 ECMAScript 标准制定流程图解，原图发表在 alinode 团队博客（&a class=& wrap external& href=&///?target=http%3A///blog& target=&_blank& rel=&nofollow noreferrer&&alinode(beta)&i class=&icon-external&&&/i&&/a&）&br&&br&&img data-rawheight=&7592& data-rawwidth=&882& src=&/20abaac328c_b.png& class=&origin_image zh-lightbox-thumb& width=&882& data-original=&/20abaac328c_r.png&&
首先要知道：从 ES2016 开始，ECMAScript 标准的制定原则是成文标准要从事实标准中诞生，实现先于标准存在，进入标准草案必须有 JavaScript 引擎实现的支持（按照流程，起码要 2 个 JavaScript 引擎的稳定实现，而主流常青浏览器里 JavaScript 引擎总共也才…
&p&3 月 12 日根据评论所说的增加一些内容。原文中增加的会标出。&/p&&p&=============&/p&&p&一个寒假回来，好几个同学都来问我或者自己开始学起了前端，前端入门虽然简单，但是想要做好很难，是一个要通十行才能精一行的工作。再这几年 MVVM 框架的大肆流行，前端已经不是以前用 jQuery 写一写就可以的时代了。于是我写下这篇文章，来给大家一个参考。&/p&&p&首先，请大家牢记以下几点：&/p&&ol&&li&前端不简单！前端不简单！前端不简单！&/li&&li&前端和美工不一样！不是只会 HTML、CSS、JavaScript 就行的。&/li&&li&程序和其他的行业不一样，经验是十分重要的，不管看多少书，都逃不过要经常的练习。&/li&&li&在学会使用 JavaScript 实现相同操作之前，不要使用 jQuery。&/li&&li&JavaScript 和 Java 的关系如同雷锋和雷峰塔的关系一样，并没有什么关系！&/li&&/ol&&h2&&b&前期准备工作&/b&&/h2&&ol&&li&下载好 &a href=&///?target=https%3A///3& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Sublime Text 3&i class=&icon-external&&&/i&&/a&，并自行找教程安装 Package Control。安装完后使用 Package Control 安装 Sublime Text 的汉化包，名字叫做 ChineseLocalizations。之后单独写 HTML 和 CSS 的时候，使用 Sublime Text 编辑。&/li&&li&下载 Chrome 浏览器，目前（2017 年 3 月 9 日）最新版本为 56，请尽量安装最新版本，并设置为默认浏览器。&/li&&li&下载 &a href=&///?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Visual Studio Code&i class=&icon-external&&&/i&&/a&，之后单独写 JavaScript 的时候，使用 VS Code 编辑。&/li&&li&下载并在本地安装 Node.js，目前（2017 年 3 月 9 日）最新版本为 7.7.1，请尽量安装最新版本。&/li&&li&使用 Google 搜索，不能使用 Google 的使用 Bing 搜索，&b&不要使用百度&/b&。&/li&&li&注册一个 Github 账号。&/li&&li&【可选】买一个 VPN 或者 Shadowsocks，科学上网。&/li&&/ol&&h2&&b&初学阶段&/b&&/h2&&blockquote&学习时间：1 个月&/blockquote&&p&初学阶段主要是学习 HTML、CSS 和 JavaScript，掌握三种语言的基础语法，并且掌握基本的布局方式、基本的 DOM 操作和算法。&/p&&p&&b&HTML 和 CSS&/b&&/p&&p&推荐跟着 iMooc 的《HTML + CSS 基础课程》学习，里面的每一小节都是指引式的教学，跟着指导学习 HTML 和 CSS 的基础语法。&/p&&p&链接：&a href=&///?target=http%3A///learn/9& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&/learn/9&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&/p&&p&学习完上面《HTML + CSS 基础课程》的所有内容之后，自行完成一个百度搜索的首页，要求做到位置、颜色、间距等 99% 还原。不需要点击可以搜索。&/p&&p&【3.12 更新】&/p&&p&课程中没有提到的该学习的还有&b& flex 布局&/b&。&/p&&p&&b&JavaScript&/b&&/p&&p&学习 JavaScript 可以上廖雪峰的网站上学习：&/p&&p&&a href=&///?target=http%3A///wiki/867bd51a89c25cc8b43bdb3000& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&/wiki/00&/span&&span class=&invisible&&7bd51a89c25cc8b43bdb3000&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&/p&&p&跟着目录从上往下学习，一直到 Promise。&/p&&p&学习的过程中可以结合练习题学习，这里整理了一些：&/p&&p&&a href=&///?target=https%3A///iszu/web-learning/blob/master/JavaScript%25E7%25BB%%25B9%25A0%25E9%25A2%2598.md& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/iszu/web-lea&/span&&span class=&invisible&&rning/blob/master/JavaScript%E7%BB%83%E4%B9%A0%E9%A2%98.md&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&/p&&p&正确把代码写的简单，短小。最好能一行实现。&/p&&p&当你学完 HTML、CSS 和 JavaScript 的基础之后，完成这么一个小练习：&/p&&p&实现一个简单的 TodoList&/p&&blockquote&不懂啥是 TodoList 的自行 Google&/blockquote&&p&限制&/p&&ol&&li&界面不能照抄网上已有页面的风格，可以把网上的设计稿做成你的页面，也可以自己设计&/li&&li&不能使用任何已有的库（如 jQuery, Bootstrap, Vue 等）&/li&&li&增加、删除、修改的操作执行后，页面不能刷新&/li&&/ol&&p&基本功能&/p&&ol&&li&增删改查
&b&增删改查&/b&是指可以实现“增加”、“删除”、“修改”、“查询”四个功能。 其中“查询”不代表“搜索”，只要页面刷新后，数据能够正常显示即可。&/li&&li&可以储存 &b&“内容”&/b& 与 &b&“是否已完成”&/b& 的状态&/li&&li&使用 localStorage 储存数据&/li&&li&界面尽可能做的好看&/li&&/ol&&p&加分项&/p&&ol&&li&可以只显示“未完成”或“已完成”的条目
你可以把它们分开显示，或者是通过按钮切换显示，或者你也可以自己想一种把它们分开显示的方法&/li&&li&给每一条 todo 添加 &b&“完成日期”&/b&&/li&&li&在第二点的基础上，已过期的条目有不同的样式&/li&&li&其它更牛逼的功能&/li&&/ol&&h2&&b&进阶阶段&/b&&/h2&&blockquote&学习时间：1 个月&/blockquote&&p&学习完上面的课程，你就已经是一个合格的美工了，能根据设计师的设计稿实现出页面，但是还不是一个前端工程师，或者说还不是一个工程师。这一阶段你要开始接触一些作为程序员需要学习的东西。&/p&&p&&b&Markdown&/b&&/p&&p&首先学会使用 Markdown 进行写作，Markdown 是什么，怎么样个语法，可以查看我之前的推送：&/p&&p&&a href=&///?target=https%3A//mp./s%3F__biz%3DMzI1MDA2MTUyMQ%3D%3D%26mid%3Didx%3D1%26sn%3Ddf5b99d596dde9brd& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&https://mp./s?__biz=MzI1MDA2MTUyMQ==&mid=&idx=1&sn=df5b99d596dde9b1862de2#rd&i class=&icon-external&&&/i&&/a&&/p&&p&&b&git 版本控制&/b&&/p&&p&其次要学会使用 git 进行版本控制，还是刚刚的廖雪峰—— git 教程：&/p&&p&&a href=&///?target=http%3A///wiki/bb000& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&/wiki/00&/span&&span class=&invisible&&27c8c017b000&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&/p&&p&并且把上面做的两个项目，通过 git push 到 Github 上开源，README.md 使用 Markdwon 编写。&/p&&p&&b&HTTP, Ajax 和异步&/b&&/p&&p&学习 Ajax 的基本实现，在这个阶段你会接触到 JavaScript 的异步编程，你得自行了解什么是异步，并且会开始基础 HTTP 协议，请自行了解 HTTP 状态码，请求头，响应头等基础知识，并了解 TCP/IP，HTTP，HTTPS 协议的概念和关系。接着了解 JavaScript 的同源策略，为什么需要同源策略，以及如何跨域。&/p&&h2&&b&高级阶段&/b&&/h2&&blockquote&学习时间：6 个月以上&/blockquote&&p&【3.12 更新】&/p&&p&这个阶段你会开始多终端前端的开发，了解响应式布局，接触前端工程化和前端框架，并开始深入学习 JavaScript 的深入内容，包括 ES6、ES7 等。&/p&&p&&b&响应式布局&/b&&/p&&p&了解响应式布局的应用范围、基本原理。学习 em, px, rem, vh, vw 等单位的使用。&/p&&p&&b&ECMAScript 6&/b&&/p&&p&学习 ECMAScript 6，了解 ECMAScript 和 JavaScript 的关系，具体文章可以看阮一峰的 《&a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ECMAScript 6 入门&i class=&icon-external&&&/i&&/a&》，另外可以参考我写的《&a href=&///?target=https%3A//blog.ijason.cc/article/es6-note& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ECMAScript6 学习笔记&i class=&icon-external&&&/i&&/a&》。&/p&&p&&b&NPM&/b&&/p&&p&自行找教程学习 npm 的使用，接触前端工程化，了解 Gulp, Webpack 等工具的用处，并在本地自己搭建一个工程化环境。&/p&&p&&b&前端框架&/b&&/p&&p&自行找教程学习 Vue.js 或 React 或 Angular 等前端框架，并尝试使用这些框架搭建一个单页面应用。以下以 Vue.js 举例：&/p&&ul&&li&学习 Vue.js 基础语法，一定要看官方的文档来学习：&a href=&///?target=https%3A//cn.vuejs.org./& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&https://cn.vuejs.org。&i class=&icon-external&&&/i&&/a&&/li&&li&学习使用 Vue-cli 在本地一键搭建 Vue.js 项目。&/li&&li&本地开发一个 Todolist 的 Vue.js 版本，同样使用 localstorage 进行存储。&/li&&li&学习使用 Github pages 部署开发好的 Todolist，可以让别人一起使用。&/li&&li&了解 Vue.js 2.0 的内部原理和外部思想：&/li&&ul&&li&Virtual DOM&/li&&li&数据监听&/li&&li&render 函数&/li&&li&单向数据流&/li&&li&Vue.js 的 Lifecycle&/li&&li&服务端渲染的原理&/li&&li&Vuex 和 Vue-Router&/li&&li&……&/li&&/ul&&/ul&&p&&b&Canvas 相关&/b&&/p&&p&了解 Canvas API 的使用，懂得使用 Canvas 制作动画，以此来制作一些更炫酷的前端效果，如图片背景的高斯模糊等。&/p&&h2&&b&深入阶段&/b&&/h2&&blockquote&学习时间：无限&/blockquote&&p&这个阶段是作为一个前端继续精进自己的一个阶段，你已经可以胜任小型项目了，但是还有一些细节需要你一直不断的学习。&/p&&p&&b&前端储存&/b&&/p&&p&前端储存知识点：&/p&&ul&&li&储存技术有哪些？&/li&&li&Cookie, SessionStorage, LocalStorage 有什么区别？&/li&&li&……&/li&&/ul&&p&&b&History API&/b&&/p&&p&什么是 History API，为什么要增加这个功能？&/p&&p&&b&性能优化&/b&&/p&&p&学习有关前端性能优化的相关知识等：&/p&&ul&&li&如何缩短白屏时间&/li&&li&如何提升 CSS3 动画的性能&/li&&li&……&/li&&/ul&&p&&b&安全&/b&&/p&&p&学习有关前端的安全相关知识等：&/p&&ul&&li&通信安全&/li&&ul&&li&如何保障 Ajax 通信安全&/li&&/ul&&li&XSS 攻击&/li&&ul&&li&什么是 XSS 攻击&/li&&li&如何防范 XSS 攻击&/li&&/ul&&li&CSRF 攻击&/li&&ul&&li&什么是 CSRF 攻击&/li&&li&如何防范 CSRF 攻击&/li&&li&CSRF 攻击和 XSS 攻击的区别是什么&/li&&/ul&&li&……&/li&&/ul&&p&&b&兼容性&/b&&/p&&p&有关 IE 浏览器以及老版本浏览器的兼容性问题的学习和解决，包括：&/p&&ul&&li&HTML 标签的兼容性&/li&&li&CSS 样式的兼容性&/li&&li&JavaScript 的 API 的兼容性&/li&&li&优雅降级与渐进增强&/li&&/ul&&h2&&b&学习后端&/b&&/h2&&p&等到前端学习的差不多了，可以通过 Node.js 来接触后端的开发，这里不再详述。&/p&&br&&p&这文章原来我发在我的博客上，原文：&a href=&///?target=https%3A//blog.ijason.cc/article/how-to-learn-front-end& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Jason's Blog&i class=&icon-external&&&/i&&/a& &/p&
3 月 12 日根据评论所说的增加一些内容。原文中增加的会标出。=============一个寒假回来，好几个同学都来问我或者自己开始学起了前端，前端入门虽然简单，但是想要做好很难，是一个要通十行才能精一行的工作。再这几年 MVVM 框架的大肆流行，前端已经不是…
每天8个必刷的网站...供参考&br&1. &a href=&///?target=http%3A///member.aspx& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Online video tutorials & training&i class=&icon-external&&&/i&&/a&&br&2. &a href=&///?target=https%3A//www.coursera.org& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Coursera - Free Online Courses From Top Universities&i class=&icon-external&&&/i&&/a&&br&3. &a href=&///?target=https%3A//scotch.io& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Scotch ? Developers bringing fire to the people.&i class=&icon-external&&&/i&&/a&&br&4. &a href=&///?target=http%3A//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JavaScript Weekly: A Free, Weekly Email Newsletter&i class=&icon-external&&&/i&&/a&&br&5. &a href=&///?target=http%3A//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML5 Weekly: A Free, Weekly Email Newsletter&i class=&icon-external&&&/i&&/a&&br&6. &a href=&///?target=https%3A//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Medium&i class=&icon-external&&&/i&&/a&&br&7. &a href=&///?target=http%3A//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Smashing Magazine&i class=&icon-external&&&/i&&/a&&br&8. &a href=&///?target=https%3A//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CSS-Tricks&i class=&icon-external&&&/i&&/a&
每天8个必刷的网站...供参考 1.
开始写正则，是因为要写爬虫抓东西。写过爬虫的应该都知道，尽管很多时候bs4,lxml之类的库的可以帮助我们很多，正则还是写爬虫不可抛弃的东西。&br&之前有个朋友跟我说，会使用正则的都是真爱编程的。虽然不是很准确，但是也是一定程度激励了我学习正则表达式。&br&&b&至于怎么学习，我觉得就是多练习（编程都是这样吧）&br&&br&第一步要做的是通读一遍关于正则的基础，一边看一边练习是一个不错的选择。&br&&/b&有关于基础，我推荐这个文章，可以让你在最短的时间通读一遍正则基础内容&br&&a href=&///?target=http%3A///deerchao/archive//zhengzhe30fengzhongjiaocheng.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&正则表达式30分钟入门教程&i class=&icon-external&&&/i&&/a&&br&当然希望你能在看基础的时候也能一边练习，关于练习，如果你不愿意在本地，你同样可以选择在线的正则表达式测试，推荐一下两个网址：&br&&a href=&///?target=http%3A///regex/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&正则表达式在线测试&i class=&icon-external&&&/i&&/a&
（站长工具）&br&&a href=&///?target=http%3A//tool.oschina.net/regex/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&在线正则表达式测试&i class=&icon-external&&&/i&&/a& （开源中国）&br&&br&第二步当你通读了一遍基础，对正则表达式有些了解的时候，这时候你可以选择做一些复杂的练习了。&br&&b&作者：路人甲&br&链接：&a href=&/p/& class=&internal&&关于正则表达式 - 路人甲的文章 - 知乎专栏&/a&&/b&&br&1、查找所有汉字&br&2、查找Email地址&br&3、查找网址URL&br&4、查找国内电话号码&br&5、查找qq号码&br&6、查找身份证&br&7、查找中国邮编编码&br&8、查找中国身份证&br&9、查找由26个英文字母组成的字符串 &br&10、查找由26个英文字母的大写组成的字符串 &br&11、查找由26个英文字母的小写组成的字符串 &br&12、查找由数字和26个英文字母组成的字符串 &br&13、查找由数字、26个英文字母或者下划线组成的字符串 &br&&br&请帮我设计一个网站，某些表单如下要求：&br&
只能输入数字&br&只能输入n位的数字&br&只能输入至少n位数字&br&只能输入m-n位的数字&br&只能输入零和非零开头的数字&br&只能输入有两位小数的正实数&br&只能输入有1-3位小数的正实数&br&只能输入非零的正整数&br&只能输入非零的负整数&br&只能输入长度为3的字符&br&只能输入由26个英文字母组成的字符串&br&只能输入由26个大写英文字母组成的字符串&br&只能输入由26个小写英文字母组成的字符串&br&只能输入由数字和26个英文字母组成的字符串&br&只能输入由数字、26个英文字母或者下划线组成的字符串&br&验证用户密码正确格式为：以字母开头，长度在6-18之间， &br&只能包含字符、数字和下划线。 &br&验证是否含有^%&'',;=?$&等字符&br&只能输入汉字&br&验证Email地址&br&验证InternetURL&br&验证电话号码&br&验证身份证号（15位或18位数字）&br&验证一年的12个月&br&验证一个月的31天
开始写正则，是因为要写爬虫抓东西。写过爬虫的应该都知道，尽管很多时候bs4,lxml之类的库的可以帮助我们很多，正则还是写爬虫不可抛弃的东西。 之前有个朋友跟我说，会使用正则的都是真爱编程的。虽然不是很准确，但是也是一定程度激励了我学习正则表达式。 …
既然是新人，关于这个问题，你需要首先了解一下一款互联网产品的生命周期。&br&&br&&b&互联网产品的生命周期&/b&&br&&br&我们不妨把开发一个网站或者一个App的过程来进行简单的分解和梳理。和传统的软件开发，从需求分析到软件设计与实现不同，这里我们讲究快速迭代。&br&&br&&img src=&/2c814794caa77e8d3d8f3e4c3e3198ff_b.png& data-rawwidth=&703& data-rawheight=&489& class=&origin_image zh-lightbox-thumb& width=&703& data-original=&/2c814794caa77e8d3d8f3e4c3e3198ff_r.png&&&br&1、首先你得有个改变世界的想法吧&br&2、想法是在脑袋里的，首先要变成大家都能看得见理解得了的东西，那就是原型设计了，这一个步骤可以进一步细分为：&br&&ul&&li&信息架构设计：如何组织整个系统的信息。&/li&&li&用户交互设计：用户如何与系统进行交互，大到整个操作流程，小到一个触控手势设计。&/li&&li&视觉设计：Logo的设计，颜色的设计，总之怎么让用户看起来更爽。&/li&&/ul&&p&3、原型设计就可以作为开发团队的输入了。我们需要把原型变为实际可用的产品。我们可能要去做服务器端的开发和做客户端的开发。&/p&&ul&&li&你的应用最终体现为一个App或者网站，那比如说我们在淘宝上购物，我们可以通过PC去访问淘宝的网站，也可以使用淘宝提供我们的App，通过安卓手机或者苹果手机来完成网购。所以你需要根据实际情况来选择一个或者几个平台，来开发Web应用、iOS App或者Android App。值得一提的是公众号开发，是一种好的验证想法的方式，居家旅行、MVP（Minimum Viable Product）开发、杀人灭口的必备良品。公众号的开发在技术范畴上说术语Web开发。&/li&&li&服务器端的开发是可选的，比如说我们做一个闹钟的应用，可能不需要去连接服务器端，完整的功能不需要网络就能完成。但是现在的应用一般是有服务器端的，这样你才有更多的可能性和发挥空间。如果只是本地的话，意味着这个应用完全跟外界是没有关系，你一定要去建立联系才能让你的应用去发挥最大的价值。即使是闹钟应用，也可以看到做得非常好的产品，它们基于时间提醒将你的行为习惯存储到云端，帮你做规划和分析，这样是不是就给一个小小的App带来的无限的想象空间了。别忘了，互联网的最大意义在于连接。而上面提到的Web开发，类似于一个App有手机端开发和服务器端开发，包含了Web前端开发和Web后端开发。&/li&&/ul&&br&4、做完开发之后，对于服务器端我们要进行部署。在本地计算机上上完成了开发，别人也是访问不到我们的应用的。那别人要怎么样才能访问到我的应用呢？需要把它放到全世界都能访问的服务器上去，而现在我们通过像Amazon EC和像阿里云这样的云计算基础设施，我们能够很方便的拥有一台能够让别人访问的计算机。我们可以按需购买云端的服务器，这也是云计算时代给我们带来的一个便利性。把后端代码去部署到云端之后，你的客户端你要进行应用的分发，你要去提交App Store，或者提交到各种Android的应用市场，你提交上去的时候，用户就能下载了，用户下载之后应用就最终就送达了用户。Web应用不需要经历客户端分发的过程，用户有一个浏览器就能从服务器上获取所有内容和功能，所以说HTML5跨平台嘛。当用户将App下载安装之后，它在产生交互的时候，应用就会跟我们部署在远程机器上的程序进行通讯，最终形成应用的完整体验。&ul&&p&这就是开发的整个过程，而这个过程也是不断迭代的。上面这张图更多关注产品层面，继续延展这个过程，我们改变世界的道路也长着呢。&/p&&br&&p&5、产品开发完了不是扔一旁不管了，你怎么样让别人知道你的App和网站呢？所以接下来你需要推广和营销了，你得通过软文、邮件营销EDM、新媒体（微博微信）、地推、补贴、广告、SEO等等各种大招去让用户感知到你。&/p&&br&&p&6、用户来了，你得经常搞点活动活跃下用户气氛吧，忠实的用户见个微信群听听用户声音，或者举办个线下活动，沙龙什么的，甚至给他们拍个微电影啥的，把他们感动得稀里哗啦的，产生强烈的归属感，打死也不离开你的产品，天天用，还帮你传播。这叫运营。&/p&&br&&p&7、以上所说的整个大过程也是不断迭代的，那么要有人来总体上把握朝什么方向发展，如何扩展产品进入开辟新的战场，通过什么方式赚钱，判断大方向上做什么不做什么，怎么找到你这样希望进入IT行业的一流人才完成以上工作，怎么找到钱来支撑这整个过程。&/p&&br&&p&8、产品做得更大了，IT公司也跟任何公司一样，自然也有销售、财务、行政、法律各方面的问题吧，也得有人做。&/p&&br&&p&&b&IT的职位&/b&&/p&&br&&p&说完了这个过程就可以说说有哪些职业了。&/p&&li&搞1和7的通常是CEO或者创始人。&br&&/li&&li&第2部分的工作一般称为设计师，细分一下有信息架构师、交互设计师、视觉设计师这些职位，你应该基本清楚他们干嘛的了&br&&/li&&li&对第1部分、第2部分中的某些部分比较有Sense的人，可以做产品经理。（自己身为一个水货产品经理，第一次回答竟然漏掉了“产品经理”这个关键词，感谢
&a data-hash=&ffa85a3c6be1e& href=&///people/ffa85a3c6be1e& class=&member_mention& data-editable=&true& data-title=&@王子& data-tip=&p$b$ffa85a3c6be1e& data-hovercard=&p$b$ffa85a3c6be1e&&@王子&/a& 提醒 ）&/li&&li&第3部分的工作一般称为码农，根据工作描述可以有：iOS程序员、Android程序员、Web前端程序员、Web后端程序员。&br&&/li&&li&第4部分的工作也属于码农范畴，叫运维工程师。&br&&/li&&li&第5、6部分一般就是营销与运营工作，叫法上颇多，互联网招聘网站上的title甚多，营销专员，营销经理，营销总监，运营类似。这部分工作也还能细分，活动运营、内容运营、数据运营、新媒体运营。码农也偶尔回来抢饭碗，而且抢的很有逼格，叫做Growth Hacker。营销和运营过程中基于数据来分析产品与用户是一个重要的手段，而搜集数据分析数据是码农们很擅长做的事情。&br&&/li&&br&&p&那么一个问题来了，一个小团队要搞一个产品去哪找那么多人啊？ 这就是传说中的全栈工程师闪亮登场了，这种人传说以一顶十，拳打iOS与Android，脚踢Web与运维，前后端信手拈来。最近还有升级版本2.0：全栈增长工程师。这种大神除此之外还精通数据分析、产品、营销，新生渠道和业界趋势了如指掌，同类产品与上下游生态洞若观火，不得了。不过咱们不妨单点突破，找好其中一个角色进入IT行业，咱也还是专注单点之后再去想颠覆世界吧。&/p&&br&&p&市场、销售、行政、HR、法务对于IT行业也有不同于其他行业的特点，这应该不是你关注的职业了。&/p&&br&&p&其实职位的罗列你去互联网招聘网站上更加全面，一共可能也就几十个类目吧，希望你看到这里，对这些职位跟一个互联网应用的生命周期结合起来，这样有助于你判断，也是我码字的真正意图所在。&/p&&br&&p&&b&如何选择&/b&&/p&&br&&p&如何选择这个事情，今天不细说啦。总体来说跟你个人定位和个人特质有关系了。你是左脑型还是右脑型的人，还是左右脑都发达？你是喜欢面对电脑，还是喜欢跟人打交道？你是希望一份稳定的工作，还是期待一个折腾的人生？ 回头看看上面的内容，跟找妹子一样，总有适合你的一款吧。just follow your hart。&/p&&br&&p&最后推荐一个最近写的移动互联网开发技术概览：&a href=&///?target=http%3A///mobile-internet-development-kickstart& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&移动互联网技术开发概览与入门&i class=&icon-external&&&/i&&/a&，应该对了解以上所说有所帮助。&/p&&/ul&
既然是新人，关于这个问题，你需要首先了解一下一款互联网产品的生命周期。 互联网产品的生命周期 我们不妨把开发一个网站或者一个App的过程来进行简单的分解和梳理。和传统的软件开发，从需求分析到软件设计与实现不同，这里我们讲究快速迭代。 1、首先你…
这是个很有意思的问题。&br&&br&一句话：这是命运的偶然安排，也是历史的必然选择。对，现在JavaScript绝对有资格矫情！&br&&br&-------------------&br&&b&本文核心观点是“一门程序语言脱离实际的硬件环境和相应的软件环境谈它的发展变化，谈为什么我们最后选择它往往是不够深刻的”。我尝试从非另一个角度看待问题。&/b&&br&&b&&u&--------------------&/u&&/b&&br&&br&这个话题很大，但确实值得Web从业者去深究和探讨！但这是一个很有难度的问题，到目前为止我还看不到一个让人心锐诚服的答案！&br&&br&在我看来，找到相对合情合理的答案得从计算机硬件（尤其是CPU）开始，从操作系统发展变化的角度审视互联网的进化，这样才更容易理解浏览器上的开发语言为什么是JavaScript，而不是其他的语言。&br&&br&&u&&b&（此文很长，如果你没有耐心看完但又想知道我的看法，请直接飞到“第11章”，那里有我对此次问题的分解和回答。）&/b&&/u&&br&&br&------------------&br&&b&## 1，浏览器的进程都运行着什么？&/b&&br&&br&先上个图：&br&&img src=&/9dae86a2d73e59cc6f8cb3_b.png& data-rawwidth=&577& data-rawheight=&336& class=&origin_image zh-lightbox-thumb& width=&577& data-original=&/9dae86a2d73e59cc6f8cb3_r.png&&（图片来源：&a href=&///?target=http%3A//grosskurth.ca/papers/browser-refarch.pdf& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&grosskurth.ca/papers/br&/span&&span class=&invisible&&owser-refarch.pdf&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&）&br&这是浏览器内部的大致结构，也就是浏览器的主要组成部分有：&br&&blockquote&&ol&&li&The user interface/用户接口: 除了网页显示区域以外的部分，比如地址栏、搜索栏、前进后退、书签菜单等窗口。&br&&/li&&li&The brower engine/浏览器引擎: 查询与操作渲染引擎的接口，&b&包含事件驱动引擎，提供浏览器进程及其线程之间的资源共享调度机制&/b&。&br&&/li&&li&The rendering engine/渲染引擎: 负责显示请求的内容，比如请求到HTML, 它会负责解析HTML 与 CSS 并将结果显示到窗口中，也是后面几个线程或引擎的父级控制线程。&br&&/li&&li&Networking/网络: 用于网络请求, 如HTTP请求，执行POST、GET等操作就是由它来处理的。&br&&/li&&li&UI backend/UI后台: 绘制基础元件，如消息窗口（alert默认的样子）、下拉选项卡等等。&br&&/li&&li&JavaScript interpreter/JavaScript解释器：也就是JavaScript引擎，用于解析和执行JavaScript代码。&br&&/li&&li&Data storage/数据存储：数据持久层，在我们浏览页面时，浏览器需要把一些数据存到硬盘或内存上，如Cookies、localStorage、sessionStorage、webSql等。&br&&/li&&/ol&&/blockquote&我们用浏览器看到的每一个页面，背后都是由以上的组件或功能来协作完成的。&u&浏览器完成打开一个页面的整个过程，通俗地说这是页面“渲染”。这里的“渲染”，其实是一个组合概念，即浏览器的“渲染引擎”并不是单独工作的，必须依赖其他引擎（组件），经过某种协同机制联合起来完成页面的展示及交互。&/u&&br&&br&关于浏览器如何渲染的，我就不详细展开，请阅读：&br&&ul&&li&原文——&a href=&///?target=http%3A///Projects/howbrowserswork1.htm%231& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/Project&/span&&span class=&invisible&&s/howbrowserswork1.htm#1&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&/li&&li&译文——&a href=&///?target=http%3A///blog/%3Fp%3D3287& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/blog/?&/span&&span class=&invisible&&p=3287&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&/li&&/ul&&br&相信很多人看完原文或译文依然一头雾水，当初我也这样，但我们至少知道这样的知识：&br&&blockquote&&b&浏览器内部有很多组件或功能，不同的功能必定包含不同的模块，而不同的模块当然就需要不同的实现逻辑，书写并运行不同的代码。&/b&&/blockquote&很显然，不同的逻辑需要不同的代码，那么当我们启动浏览器时，OS要运行指定的程序，在OS的任务管理器里面就表现为某个进程（可能是单个也可能是多个）。例如我所用电脑（MAC）在写这篇文章时需要打开Chrome（如下图所示）。&br&&img src=&/c045d7d0faf5ad5a73168_b.png& data-rawwidth=&1419& data-rawheight=&713& class=&origin_image zh-lightbox-thumb& width=&1419& data-original=&/c045d7d0faf5ad5a73168_r.png&&发现没有，我其实只运行了一个Chrome，但打开了N个网站(N个Tab)。当然，我们看到是浏览器的主进程，事实上主进程下面还包含组N个子进程，每个子进程就是一个页面Tab的实例，在Mac系统中可以用以下的命令来打印：&br&&div class=&highlight&&&pre&&code class=&language-text&&ps aux | grep 'Google Chrome'
&/code&&/pre&&/div&如果是Windows系统就更加简单了，Ctrl+Shift+Esc的组合键打开任务管理器，看到类似这样的图：&br&&img src=&/b0dbefe3067_b.png& data-rawwidth=&793& data-rawheight=&644& class=&origin_image zh-lightbox-thumb& width=&793& data-original=&/b0dbefe3067_r.png&&Windows会将所有运行中的进程列出来，如果你启动的时候只点击（运行）过一次桌面上的浏览器图标，那么系统中就只有一个主进程。当你打开很多页面之后，Windows就可能要启动N个子进程，如果你找到了主进程并右键“强制结束”，那么就是可以把子进程一起结束掉。&br&&br&--------------------&br&&b&## &/b&&b&2，“进程”和“线程”是什么？它们有什么&/b&&b&关系和&/b&&b&区别？&/b&&br&&br&有点跑题了，咱们还是回到主题。这里涉及一个概念——“进程”。还有，我们应该听说过“JavaScript是单线程的”这种说法，到底“进程Process”和“线程Thread”是什么玩意呢？&br&&br&这两个是CPU和OS层面的概念，比较抽象。（下面的概念解析是抄的，但我认可这种解析，复制粘贴过来，但不知谁是原作者）&br&&br&&b&什么是进程？&/b&&br&&blockquote&进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动，进程是系统进行资源分配和调度的一个独立单位。&/blockquote&&b&什么是线程？&/b&&br&&blockquote&线程是进程的一个实体，是CPU调度和分派的基本单位，是比进程更小的能独立运行的基本单位。&/blockquote&&b&进程和线程的关系：&/b&&br&&blockquote&&p&(1)一个线程只能属于一个进程，而一个进程可以有多个线程，但至少有一个线程；&/p&&p&(2)资源分配给进程，同一进程的所有线程共享该进程的所有资源；&/p&&p&(3)处理机分给线程，即真正在处理机上运行的是线程；&/p&&p&(4)线程在执行过程中，需要协作同步。不同进程的线程间要利用消息通信的办法实现同步。&/p&&/blockquote&&p&&b&进程与线程的区别:&/b&&/p&&blockquote&&p&(1)调度：线程作为调度和分配的基本单位，进程作为拥有资源的基本单位；&/p&&p&(2)并发性：不仅进程之间可以并发执行，同一个进程的多个线程之间也可并发执行；&/p&&p&(3)拥有资源：进程是拥有资源的一个独立单位，线程不拥有系统资源，但可以访问隶属于进程的资源；&/p&&p&(4) 系统开销：在创建或撤消进程时，由于系统都要为之分配和回收资源，导致系统的开销明显大于创建或撤消线程时的开销。但是进程有独立的地址空间，一个进程崩溃后，在保护模式下不会对其它进程产生影响，而线程只是一个进程中的不同执行路径。线程有自己的堆栈和局部变量，但线程之间没有单独的地址空间，一个进程死掉就等于所有的线程死掉，所以多进程的程序要比多线程的程序健壮，但在进程切换时，耗费资源较大，效率要差一些。&/p&&/blockquote&&p&&b&结论：&/b&&/p&&blockquote&&p&(1)线程是进程的一部分；&/p&&p&(2)CPU调度的是线程；&/p&&p&(3)OS为进程分配资源，不对线程分配资源。&/p&&/blockquote&很显然，这种解析还是比较晦涩难懂。很久很久以前，我曾写过比这上面更加通俗易懂硬件知识刊发在某杂志上，但一下子找不到了，随便找来两个替代品：&br&&blockquote&&ul&&li&《电脑爱好者》的解析：&a href=&///?target=http%3A//.cn/292.shtml& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&走进多核CPU的世界&i class=&icon-external&&&/i&&/a&&br&&/li&&li&阮一峰的解析：&a href=&///?target=http%3A///blog/2013/04/processes_and_threads.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&进程与线程的一个简单解释&i class=&icon-external&&&/i&&/a&&/li&&/ul&&/blockquote&&b&在这里我再补充一点——主进程和子进程是什么？&/b&&br&对于CPU而言，它是没有进程这个概念的，这其实OS层面的概念。这种主/子关系（也可称为父/子关系）是OS建立的关联，因为OS要知道谁启动了谁（例如A运行B，B运行C），知道了这种关系，那么在权重或安全层面就可以建立某种控制机制，让软件的运行有序起来。但是，不管主进程还是子进程都需要单独占用内存空间，运行时都要安排单独的硬件资源。&br&&br&OK，补脑先到这里，请客官您务必理解这两个知识点。当然了，如果还是没能分清楚它们两，那也没有关系，请继续往下看。&br&&br&--------------------&br&&b&## &/b&&b&3，简单回顾CPU硬件和OS的发展&/b&&br&&br&先复制一段总结，括号里面的文字是我的理解：&br&&blockquote&&p&&b&（根据CPU多核心和多进程特点，运行&/b&&b&）&/b&&b&在OS上面的(软件)设计，可归结为三点：&/b&&/p&&p&&b&（1）以多进程形式，允许多个任务同时运行；（现在绝大多数软件都是这种设计）&/b&&/p&&p&&b&（2）以多线程形式，允许单个任务分成不同的部分运行；（软件在运行过程中的特点）&/b&&/p&&p&&b&（3）提供协调机制，一方面防止进程之间和线程之间产生冲突，另一方面允许进程之间和线程之间共享资源。&/b&&b&（软件在运行过程中的特点）&/b&&/p&&/blockquote&这是阮大神的总结，足够精简，但基本把浏览器这种软件的内部外部表现说得非常清楚明白了。当然，别人在总结这种文字的时候未必是为了用来解析浏览器原理的，但是这是计算机底层的知识，底层的东西是通用的。&br&&br&&u&从这里可以看出，要想对程序开发有深层次的认识，最好对计算机底层的原理和机制有了解，越是高级别的开发，计算机硬件知识就要越丰富。&/u&(TM)的又废话了，咱们回到进程和线程这两个概念。&br&&br&&u&浏览器不是单线程的，它是多线程的，是多进程的&/u&（我在‘&a href=&/question//answer/& class=&internal&&网站为什么 JS 调用尽量放到网页底部？&/a&’回复中有解析，但不详细），这话怎么理解呢？这还得从操作系统及硬件层面来解析，这样才更容易理解，也理解得更加深刻。&br&&br&我们都知道，现代的操作系统是支持多进程和多线程的，因此运行在它上面的软件就可以设计成这个样子，比如浏览器。这是现代软件的特点，这点不需要证明了吧？前面的系统管理器截图足够说明这一点。&br&&br&当然，在浏览器诞生初期，它并不是这样的，其他软件也不是。很久很久以前，在DOS时代，所有的软件都是单进程单线程的（如果你玩过DOS，就知道你只能逐条命令地键入，等上一条命令执行完成之后才能输入下一条命令），甚至到了后来的Win95/98时代，软件设计依旧是以单进程单线程为主，为什么？&br&&br&因为那个时代提供多线程并没有太实际意义，这是由计算机硬件层面的特性决定的。简单地说，在2000年以前，民用级别的CPU都只是单个物理核心，多线程技术还没被应用。因此，运行在硬件上面的OS，即便提供多进程多线程不会给电脑性能带来显著的提升，CPU处理程序只能一个挨着一个地排队慢慢处理。&br&&br&首个单核心多线程的CPU是Intel发布的，型号是&a href=&///?target=http%3A///view/.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Intel 奔腾4 3.06GHz&i class=&icon-external&&&/i&&/a&，发布时间大约是2000年样子（具体时间记得不清楚了），它是首个提供 &a href=&///?target=http%3A///view/67916.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&EM64T&i class=&icon-external&&&/i&&/a&技术的民用级64位CPU，也是首个提供HT超线程技术的单核心CPU。&br&&img src=&/3c5c7cd199d10feb816447_b.jpg& data-rawwidth=&1000& data-rawheight=&750& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&/3c5c7cd199d10feb816447_r.jpg&&（&a href=&///?target=http%3A//.cn/29/28771/param.shtml& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Intel 奔腾4 3.06GHz CPU参数&i class=&icon-external&&&/i&&/a&）&br&&br&这是一款事关Intel生死的产品。那个时候，单纯地通过提高CPU运行频率对其性能的提高价值已越来越小，而且提高频率这种技术AMD也能可以做到，但超线程（多线程）技术却可以在不提高运行频率的前提下显著地改善CPU的性能。正是凭借着这一技术，Intel保住了CPU行业老大的位置。&br&&br&随后，多线程技术逐渐被CPU行业所接受，进而开启了Intel和AMD在CPU层面的性能PK大赛，当然Intel一直领先。性能PK大赛让普通用户尝到了多线程技术的好处，电脑性能更好了，而微软也顺势发布了&a href=&///?target=http%3A///view/6399.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WinXP&i class=&icon-external&&&/i&&/a&。&br&&br&WinXP刚刚上市的时候，和Win98一样，依然最多可以使用1个物理处理器，但它由于支持“超线程”，可以利用第2个（虚拟）处理器；另一方面，WinXP采用全新的NT内核（纯32位），CPU和内存的寻址能力更好也更稳定，多进程的处理能力显著提高。因此，除了外观更漂亮外，我们感觉到的是WinXP更稳定，性能也更好了。&br&&br&如果你用过Win98，那么一定记得要定期重启电脑，否则运行久了就会莫名其妙死机或蓝屏。虽然WinXP也一样，但频率低很多。为何？这其实是由&b&微软Windows OS的内核设计决定的。&/b&在早期（大约是1988年-2000年），微软将Windows系统分为面向服务器的NT内核和面向终端用户的16位/32位混合模式内核两类。&br&&br&最为典型的代表就是Win95/98，它们都是16位与32位混合的内核，但是这种混合内核非常不稳定，时不时就蓝屏，用过Win98的用户一定深有感触。为了解决这个问题，微软决定将更加稳定的NT内核应用到普通用户市场，于是就有了纯32位的WinXP的诞生。至此之后，Windows系统都是NT内核，都要么纯32位，要么纯64位，而不存在两者的混合，以避免重蹈16位与32位混合的覆辙。&br&&blockquote&&b&详细了解Windows的历史：&br&&/b&&ul&&li&&a href=&///?target=http%3A///view/41346.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Windows NT_百度百科&i class=&icon-external&&&/i&&/a&&br&&/li&&li&&a href=&///?target=http%3A///a2/.shtml& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&二十六年历程 20个版本Windows完全解析&i class=&icon-external&&&/i&&/a&&br&&/li&&/ul&&b&了解64位和32位有啥区别的：&/b&&br&&ul&&li&&a href=&///?target=http%3A//.cn/445/4453295.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&三分钟小科普：64位和32位芯片的区别&i class=&icon-external&&&/i&&/a&&br&&/li&&li&&a href=&///?target=http%3A///content/10/4.shtml& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&32bit和64bit 的区别&i class=&icon-external&&&/i&&/a&&br&&/li&&li&&a href=&///?target=http%3A///ggjucheng/archive//2288919.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&基于x86和JVM浅谈32bit与64bit的区别&i class=&icon-external&&&/i&&/a&&br&&/li&&li&&a href=&///?target=http%3A///dolphin0520/archive//3110555.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&32位系统最大只能支持4GB内存之由来&i class=&icon-external&&&/i&&/a&&br&&/li&&/ul&&/blockquote&&br&--------------------&br&&b&## &/b&&b&4，从硬件和系统层面来理解浏览器和JavaScript的设计&/b&&br&&br&经过上述的知识补充，我们了解到浏览器必须运行在OS上面（比如Windows、Mac，Linux等），而OS则运行在硬件（硬盘、内存、CPU、主板、显卡等）上面，只有在硬件（CPU）提供了多进程或多线程技术支持的前提下，OS的多线程多进程设计才有实用价值，而只有OS提供了这种运行环境支持，其上面的软件谈多进程，而开发语言才能使用多线程。&br&&br&有了这个层面的知识，我们再来看看&b&浏览器&/b&及&b&Javascript&/b&的历史。这个历史很长，我就不复制粘贴了，补脑的传送门：&a href=&///?target=http%3A///view/7718.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&浏览器&i class=&icon-external&&&/i&&/a&。&b&请努力记住浏览器各个版本&/b&&b&出生的时间，并详细看看网景和微软争斗史。&/b&&br&&blockquote&&b&一个关于浏览器的认识误区&/b&&br&我们大多数人对“浏览器”是有误解的，认为“浏览器”只不过是个系统插件/软件而已，事实并非如此，真正的浏览器是应该可以独立存在系统的，比如Google Chrome OS，就是一个不依赖其他OS独立运行的浏览器系统。不过，是否了解这个知识点并不会影响我们对于它的运行机制的理解。&/blockquote&浏览器的历史看完了，我们再来看看 &a href=&///?target=http%3A///view/16168.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JavaScript&i class=&icon-external&&&/i&&/a& 的历史，补脑的传送门：&a href=&///?target=http%3A///view/16168.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&javascript_百度百科&i class=&icon-external&&&/i&&/a&。&br&&br&&img src=&/2cd3d4df81cefed3e306d09f13adb6c7_b.png& data-rawwidth=&816& data-rawheight=&416& class=&origin_image zh-lightbox-thumb& width=&816& data-original=&/2cd3d4df81cefed3e306d09f13adb6c7_r.png&&百度词条有点扯淡，&b&JavaScript&/b&的发行时间怎么变成了1992年？网景浏览器1994年才出生，没有妈哪来的儿子？我们还是看看阮大神的作品吧——&a href=&///?target=http%3A///introduction/history.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JavaScript的历史 -- JavaScript 标准参考教程&i class=&icon-external&&&/i&&/a&。&br&&img src=&/b11a1185ebbc2a5cf2868_b.png& data-rawwidth=&935& data-rawheight=&441& class=&origin_image zh-lightbox-thumb& width=&935& data-original=&/b11a1185ebbc2a5cf2868_r.png&&这一段很关键，很多JavaScript的书籍都反复述说这一段，我认为作为前端开发者，你必须倒背如流才算合格。正是因为JavaScript这门语言的诞生背景有点奇特，它的设计是为了满足用户浏览网页时产生的交互需求，而且它的生产设计时间也相当紧张（只有10天），因此它有很多不完善的设计。但即便是这样，JavaScript居然能生存并存活到现在，并展现出其独特的生态和旺盛的生命力。&br&&br&这是一个奇迹，但这绝非是偶然的。&br&&br&--------------------&br&&b&## &/b&&b&5，为什么JavaScript被设计成单线程和异步运行？&/b&&br&&br&我只能说，Brendan Eich才是真大神，不管他是偶然，还是故意。事实上，换一个人来实现这门语言未必做得比他做的更好设计得更合理，为什么？&br&&br&这个我们要结合时代，特别是计算机硬件的背景。那个时候，操作系统还是DOS的天下，Win95才发布。要知道Win95/Win98都是基于DOS的GUI层面的封装，多进程能力弱，可能Brendan Eich还不晓得存在多线程这概念，这种情况下如何设计一门运行在浏览器下的语言才是最合理的呢？&br&&br&浏览器是单进程的，可能具备多线程能力，但是硬件不支持，因此那时的它也只能以单线程在运作。&u&这就是语言运行的环境，请嘲笑JavaScript出身的人仔细理解这个时代背景。这种情况下，Brendan Eich只能将JavaScript设计成单线程的，但将异步特点赋予了它。这是神来之笔。&/u&&br&&br&我们应该都知道，&b&单线程和异步运行是JavaScript区别于其他语言的最显著特性。&/b&正是由于Brendan Eich一开始定下的基调，让JavaScript既能够在浏览器这个狭窄的舞台上发挥其独特的魅力，即便它在语法、词法等层面有很多这样那样的问题，但这些都是可以被开发者所克服的。&br&&br&然而，&u&语言设计层面的基调一旦定下来就很难被更改，甚至设计者本身都无法左右。&/u&很多历史事实反复证明这一点，JavaScript出生之后，其发展壮大及演变并不是由Brendan Eich说了算，甚至基本没他什么事。&br&&br&从语言本身来解析这一疑惑其实很难，但如果结合时代背景，并从硬件和操作系统层面来解析，就很容易说通。&br&&br&&b&请问在单核心单进程的CPU硬件环境下，同步执行和异步执行这两个设计方案，采用哪一种会更好？&/b&可能两者区别不大，但如果硬件层面优化了单进程的多线程能力，那么这两种运行模式谁更好？&br&&br&可能答案开始明确了，或许异步优秀一些。&br&&br&硬件发展并不是停滞不前的，在摩尔定律的指挥下，硬件技术飞速发展。当到了硬件具备了多核心（同步运行多个进程）多线程（同时处理多个线程）的能力，而且OS对于这种技术的利用逐渐完善之后，运行在OS上的软件（浏览器）必定会积极利用这种技术。&br&&br&记得我让大家仔细品味网景和微软的争斗历史吗？从硬件层面，网景的衰败是一个必然的结局，因为它离硬件相对遥远，而微软则近很多。&br&&br&微软是OS起家的，而OS是最接近硬件的。或许，浏览器可能只是微软顺手弄出来的，但盖茨看到它在互联网上的价值，因此将它弄到了Windows里面，并Win98开始逐渐改善软件在单进程下的多线程机制。&br&&br&其实，作为用户用什么浏览器来看页面，并不会有特别明显的倾向。如果撇开系统内置这一招，你我都应该相信，从IE浏览器一定会在某个时候超越网景浏览器，毕竟要运行在OS上面（对于普通用户而言），谁会对浏览器的优化做得更好或新技术的运用更快一步呢？&br&&br&答案是显而易见的。对于IE浏览器的优化，几乎伴随着Windows的全部发展进程。2001年，微软发布了Windows XP后，并内置了新一代浏览器——Internet Explorer 6，这是当时最先进的浏览器，它统治了浏览器市场多年。不管是不是前端开发人员，对于IE6应该不会太陌生，它其实是那个时代单进程浏览器的巅峰之作了（IE6原生不支持多标签，记得吧？）。&br&&br&IE统一天下之后，垄断让微软变得傲慢而无理，具体表现在IE6/7/8在技术层面的停滞不前，这是前端开发者的噩梦。然而，硬件技术和互联网发展并不是微软说了就算的，否则浏览器端的语言可能是&b&JScript或VbScritp&/b&。&br&&br&--------------------&br&&b&## &/b&&b&6，硬件高速发展，互联网也在进化！&/b&&br&&br&如果单纯从软件和互联网发展的角度看，很难解析这些和JavaScript的这门语言有什么关联，我还是谈谈硬件吧。&br&&br&事实上，互联网的高速发展离不开硬件的支持，但硬件的发展始终要领先软件一步甚至多步。如何理解？当CPU支持多线程技术时，微软利用Wintel组合总能得到第一手资料，因而获得某种先发优势。其他非底层的软件开发商了解到新技术已经是别人发布新版并公布最新的API才会知道，并且这里需要经历一个再学习的过程。&br&&br&很显然，除了微软外，其他浏览器的厂商大多属于这种情况。但是硬件技术发展并不会停下进化的脚步，它始终高速发展。&br&&br&Intel发布&a href=&///?target=http%3A///view/.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Intel 奔腾4 3.06GHz&i class=&icon-external&&&/i&&/a&之后，2002年初，又发布了第二代130nm的Pentium 4（Northwood），加上支持DDR内存、FSB提升到533MHz等一系列动作，P4的威力得以发挥，帮助Intel夺下了性能的宝座。&br&&br&对手AMD的基于K7微架构的Athlon处理器开始呈现出颓势，但它并没有坐以待毙，一方面继续发布改进版本的Athlon XP（采用PR值类标识性能，避开Intel以频率的命名方式），另一方面宣布了新一代K8架构处理器（提出了多线程、多核心概念）。&br&&br&在2001年-2002年期间，Intel一直以“高频+多线程”来对付AMD，并基本处于领先位置，后者则通过更好的性价比来应对。尽管时有超越，但AMD始终处于被动的挨打态势。直到2003年，AMD终于推出了AMD64 架构 Opteron 以及 Athlon 64 处理器产品线，开启了超线程竞争的时代，尽管新技术架构并没有直接表现为更好的性能，但是它展现出来的后续能力，还是让Intel疲于应付。&br&&br&2004年，Intel 承认 AMD 在市场上的成功，并着手开发 AMD64 延伸的替代品，称为 IA-32e，稍后改名为 EM64T。升级版本的 Xeon 和 Pentium 4 处理器家族支持了新推出的指令。&br&&br&2005年4 月 30 日，微软发布提供给 AMD64 和 EM64T 处理器的 Windows XP Professional x64 Edition。&br&&img src=&/820db916bfb3f2aff4a2_b.jpg& data-rawwidth=&500& data-rawheight=&260& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&/820db916bfb3f2aff4a2_r.jpg&&&br&Intel在日，抢先AMD发布了桌面上第一款双核CPU——&a href=&///?target=http%3A///view/239686.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Pentium D_百度百科&i class=&icon-external&&&/i&&/a&，虽然内部是由两颗Pentium 4共享FSB组成、后来还被证实为“高发热、低性能”，但也是历史上第一款双核了。约1周后，AMD拿出了双核Athlon 64 X2。&br&&img src=&/bc3dabc4867_b.jpg& data-rawwidth=&860& data-rawheight=&820& class=&origin_image zh-lightbox-thumb& width=&860& data-original=&/bc3dabc4867_r.jpg&&Athlon 64 X2可以说是AMD历史上最成功的CPU，凭借K8微架构的优势，功耗控制、双核性能都领先于Intel的Pentium D。凭借这款真正意义上的双核CPU，AMD挑起了“真假双核”之争，Intel只好沉默了，这让AMD开始骄傲了起来，尽管市场方面它还并未获得应有的优势。&br&&br&在这个时候，AMD做了一个在今天看来属于鲁莽级别的决定——收购显卡厂商ATI，尽管从某些角度看这桩高达54亿美元交易是一个不错的决定，但其实非常的不划算，有三个原因：&br&&br&第一，这件事情提醒了Intel，未来CPU和GPU会在某种程度上进行融合。后来，Intel利用CPU制程工艺和酷睿架构上的优势，快速跟进，抢险完成了CPU和GPU的整合，在性能和功耗上找到了动态的平衡，进而提供了更加符合笔记本电脑需求的整合产品，于是在笔记本电脑会取代台式电脑的大势下，AMD又一次完败。&br&&br&第二，触怒了显卡领域的老大—— NVIDIA，促使它不得不与Intel联合，一起对付AMD+ATI的组合。很显然，Intel & AMD && NVIDIA & ATI，这种PK基本上是一边倒；&br&&br&第三，AMD收购ATI并完成整合才会有战斗力，但这显然不是一个简单的过程，对手肯定不会停下来等待，于是AMD在没有将多核的优势保持太久，Intel就于日发行了新一代的Core(酷睿)架构处理器，而它却陷入了旷日持久的财务危机。&br&&br&&img src=&/5dffdc82d7ab25e79632_b.jpg& data-rawwidth=&450& data-rawheight=&338& class=&origin_image zh-lightbox-thumb& width=&450& data-original=&/5dffdc82d7ab25e79632_r.jpg&&&br&自从Core处理器面世之后，直到今时今日，Intel在PC端的地位再也没有被撼动过。&br&&br&--------------------&br&&b&## &/b&&b&7，Ajax的发明促进了Web2.0，JavaScript焕发了青春！&/b&&br&&br&&b&###&/b&&b&（一）&/b&&br&看到这里，可能有人会质疑笔者的啰嗦，为啥要花这么多笔墨来书写这些与浏览器、JavaScript无关的事情？&br&&br&当然，在很多人看来这是毫无关系的。但在我看来，从硬件的角度才更容易看清互联网技术快速发展背后的原因。为什么这么说？&br&&br&这是因为CPU和GPU是PC的核心，而Intel、AMD和NVIDIA则是整条生态链的顶端，它们之间的竞争其实是整个PC行业的风向标，而硬件的快速发展则大大促进了PC互联网（传统互联网，相对于移动互联网而言）的高速发展，竞争尘埃落定的那一刻则正好是PC互联网辉煌的开始，你还觉得这是偶然吗？&br&&br&然而，事情并不是这样简单的。PC硬件领域的军备竞赛决出了胜负，参与对决的选手都可能太过于投入，Intel、AMD和NVIDIA都忽略它们的革命者——高通，并而在一定程度上错失了另一个世界——移动互联网。&br&&br&当然，我们依然要感谢Intel、AMD以及NVIDIA，如果没有他们的竞争，我们不可能这么快地使用到各种多核、多进程、多线程技术，互联网的发展也不会发展得这么快，这么的朝气蓬勃。&br&&br&从2000年到2006年，这是在PC硬件和PC互联网高速发展时代，在这个过程中，浏览器还只是一个相对狭窄的领域，尽管它是互联网的入口，在这个过程中，互联网信息的生产主要依赖传统的手段，直到分出了胜负那一刻，你我他等普通网民（YOU）才成为了信息的主要制造者。&br&&br&&img src=&/34b41b9af51f3d55898f5a_b.jpg& data-rawwidth=&468& data-rawheight=&620& class=&origin_image zh-lightbox-thumb& width=&468& data-original=&/34b41b9af51f3d55898f5a_r.jpg&&还记得这个封面吧？&a href=&///?target=http%3A///a/838.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&网民成为美国时代周刊2006年年度人物(图)&i class=&icon-external&&&/i&&/a&&br&&br&&b&###（二）&/b&&br&&br&在IE称霸天下的途中，在Intel和AMD争霸的过程中，Web领域都发生了些什么大事？&br&&ul&&li&1999年，IE 5部署了XMLHttpRequest接口，允许Javascript发出HTTP请求，为后来大行其道的Ajax应用创造了条件。&br&&/li&&li&2000年，KDE项目重写了浏览器引擎KHTML，为后来的WebKit和Blink引擎打下基础。这一年的10月23日，KDE 2.0发布，第一次将KHTML浏览器包括其中。&br&&/li&&li&2001年，微软公司发布Internet Explorer 6。这是当时最先进的浏览器，它后来统治了浏览器市场多年。&br&&/li&&li&2001年，Douglas Crockford提出了JSON格式，用于取代XML格式，进行服务器和网页之间的数据交换。JavaScript可以原生支持这种格式，不需要额外部署代码。&br&&/li&&li&2002年，Mozilla项目发布了它的浏览器的第一版，后来起名为Firefox。&br&&/li&&li&2003年，苹果公司发布了Safari浏览器的第一版。&br&&/li&&li&2004年，Google公司发布了Gmail，促成了互联网应用程序（Web Application）这个概念的诞生。由于Gmail是在4月1日发布的，很多人起初以为这只是一个玩笑。&br&&/li&&li&2004年，Dojo框架诞生，为不同浏览器提供了同一接口，并为主要功能提供了便利的调用方法。这标志着JavaScript编程框架的时代开始来临。&br&&/li&&li&2004年，WHATWG组织成立，致力于加速HTML语言的标准化进程。&br&&/li&&li&2005年，苹果公司在KHTML引擎基础上，建立了WebKit引擎。&br&&/li&&li&2005年，Ajax方法（Asynchronous Javascript and XML）正式诞生，Jesse James Garrett发明了这个词汇。它开始流行的标志是，2月份发布的Google Maps项目大量采用该方法。它几乎成了新一代网站的标准做法，促成了Web 2.0时代的来临。&/li&&li&&p&2005年，Apache基金会发布了CouchDB数据库。这是一个基于JSON格式的数据库，可以用Javascript函数定义视图和索引。它在本质上有别于传统的关系型数据库，标识着NoSQL类型的数据库诞生。&/p&&/li&&li&&p&2006年，jQuery函数库诞生。jQuery为操作网页DOM结构提供了非常强大易用的接口，成为了使用最广泛的函数库，并且让Javascript语言的应用难度大大降低，推动了这种语言的流行。&/p&&/li&&li&&p&2006年，微软公司发布IE 7，标志重启浏览器的开发。&br&&/p&&/li&&/ul&（以上是阮老师的文字，我是复制粘贴）&br&&br&从这些事件看到，JavaScript本身变化并不明显，它依旧是单线程和异步的，但是浏览器及相关Web技术已经有了很大的飞跃。虽然我们鄙视IE，但它还是提供了一些新的并且很有用的接口，比如XMLHttpRequest。&br&&br&2005年，Ajax方法（Asynchronous Javascript and XML）正式诞生，它实现的基础就是IE的XMLHttpRequest接口。有了它，更加注重交互体验的网络应用才会更加受欢迎，用户参与的积极性才会更高，于是Web2.0来了。&br&&blockquote&&b&什么是Web2.0？补脑的传送门：&a href=&///?target=http%3A///view/733.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&web2.0_百度百科&i class=&icon-external&&&/i&&/a&&/b&&br&简单地说，Web2.0 是相对于Web1.0 的新的时代，指的是一个利用Web的平台，由用户主导而生成的内容互联网产品模式。Web2.0模式下的互联网应用具有以下显著特点：&br&&ul&&li&1.用户分享。在Web2.0模式下，可以不受时间和地域的限制分享各种观点。用户可以得到自己需要的信息也可以发布自己的观点。&br&&/li&&li&2.信息聚合。信息在网络上不断积累，不会丢失。&br&&/li&&li&3.以兴趣为聚合点的社群。在Web2.0模式下，聚集的是对某个或者某些问题感兴趣的群体，可以说，在无形中已经产生了细分市场。&br&&/li&&li&4开放的平台，活跃的用户。平台对于用户来说是开放的，而且用户因为兴趣而保持比较高的忠诚度，他们会积极的参与其中。&/li&&/ul&&/blockquote&&b&--------------------&br&&/b&&b&## &/b&&b&8，为什么&a href=&///?target=http%3A///subview/.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Ajax&i class=&icon-external&&&/i&&/a&不是其他时刻出现，而是在2005年？&/b&&br&&br&这可能是一个偶然的事件。&br&&br&实际上，这个技术应该Google Maps发布之前就已经被使用了，时间应该在2004年-2005年之间，但是Jesse James Garrett还没有想好叫什么名字或暂时不想公布罢了。&br&&br&要知道早在1999年，IE 5就部署了XMLHttpRequest接口，后来很长一段时间里面，JavaScript本身并没有翻天覆地的变化，它完全可以在更早的时间里被发明出来。不是吗？&br&&br&当然，你完全可以说是一种偶然，但我依然不这么认为。可以从硬件层面解析，它的出生时间节点和CPU技术发展是密不可分的。&br&&br&下图是同步请求和异步请求的差异：&br&&img src=&/ff97cd5e303f50e38e21ca536c9023bd_b.png& data-rawwidth=&475& data-rawheight=&598& class=&origin_image zh-lightbox-thumb& width=&475& data-original=&/ff97cd5e303f50e38e21ca536c9023bd_r.png&&&br&再来看看这个CPU的单线程和多线程的差异；&br&&img src=&/a17fae049a91a207bbbeccfe59cbc3e1_b.png& data-rawwidth=&686& data-rawheight=&430& class=&origin_image zh-lightbox-thumb& width=&686& data-original=&/a17fae049a91a207bbbeccfe59cbc3e1_r.png&&有没有发现，两种技术有着异曲同工之处吗？我之前反复强调过这样的概念——&u&软件是根植于硬件，只有硬件层面的技术支持完善了，相应的软件技术才会有用武之地。&br&&/u&&br&我们都知道，JavaScript是一个单独的线程，而http请求也是，但它们都必须基于同一个浏览器进程。那么，请问在单核心单进程的硬件环境下，JavaScript发起一个异步http请求和发起一个同步请求，对于浏览器进程而言，两者有很明显的区别吗？&br&&br&很显然，不会有明显的区别。&br&&br&因此，在Win98时代，理论上IE5已经支持AJAX了，但开发人员并不会考虑用它来做什么，理由是硬件和系统层面不给力。但随着CPU的单核多线程和多核多线程技术的完善，OS积极利用这些技术，使得运行在其上面的软件的多个线程能力明显加强了。&br&&br&于是，就有了程序员来思考单线程的JavaScript如何利用异步来发起http请求这种技术。由于在OS层面，浏览器可以根据CPU的多线程并行执行的特点，将HTTP请求安排到JavaScript线程之外的线程堆栈里面来执行，进而改善Web界面交互的体验。&br&&img src=&/aa3af7ccb7183b_b.jpg& data-rawwidth=&990& data-rawheight=&555& class=&origin_image zh-lightbox-thumb& width=&990& data-original=&/aa3af7ccb7183b_r.jpg&&这是我根据自己的理解所画的，表示在一个支持双线程系统上的某个浏览器进程中，JavaScript发起AJAX请求后的运行状态示意图。&br&&br&从CPU硬件及系统发展角度看，Ajax也应该在这个时间节点上出现，或许它不叫“Ajax”，而是其他名字。&br&&br&当然，如果从Web互联网的角度思考，Ajax的出现是因为随着互联网信息传输量的不断加大，传统的Web应用所采用的同步交互方式显现出越来越明显的问题。当服务器端处理请求时，浏览器端的用户就必须要等待，只有到最终的响应结果传输到浏览器客户端时，整个页面才会重新进行刷新，以显示处理的结果。&br&&br&可以想象，这样的一种处理方式往往会让用户的体验变得不连贯、不顺畅。JavaScript异步交互的处理方式则能够很好的解决这个问题，而正好IE提供了XMLHttpRequest接口，于是基于异步交互的JavaScript技术被人们发明了出来。&br&&br&--------------------&br&&b&## &/b&&b&9，JavaScript成为宠儿，是历史的选择。&/b&&br&&br&在我看来，JavaScript被设计成单线程是由于它独特的运行环境决定的，它出生在一个普通的这个家庭（网景浏览器），而非底蕴更加深厚的豪门（接近底层的OS）。也就是说，JavaScript决定不了自己的出身，但它的父亲（Brendan Eich）还是非常尽职尽责的，并且很有远见的。&br&&br&虽然只能给它一颗单线程的心，但却赋予了异步的灵魂。尽管出生的时机也不太对（微软开始独霸天下），并且准备也不够充分（只用了10天时间），导致JavaScript天生有些营养不良，但它却是赶上了一个好的时代——互联网的飞速发展。&br&&br&在众人的努力帮助下，帮JavaScript改良的体质，将单线程+异步的特性发挥并很好地运作起来，进而焕发了青春！跟随者互联网环境的发展，在没有可替代品的前提下，JavaScript的潜力被人们发挥到了极致。&br&&br&人们发明基于JavaScript的Ajax技术，从某种意义上看，这一发明是对于JavaScript而言是一件生死攸关的大事。因为正当人们对Web应用有更高的体验要求时，它的出现正好满足了这种需求，而这里的关键其实是JavaScript这门语言的异步特性，让浏览器端与服务器的对话不再阻塞用户的交互。&br&&br&事实上，除了JavaScript外，能够实现AJAX技术的HTML脚本语言还有&a href=&///?target=http%3A///view/24920.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&VBScript&i class=&icon-external&&&/i&&/a&和&a href=&///?target=http%3A///view/40829.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JScript&i class=&icon-external&&&/i&&/a&，它们都来自微软，在当时都只能运行于Windows平台下，这两语言拥有得天独厚的优势，因为它的运行环境——IE6发布之后不久就夺取了统治级别的地位，并于2002年达到96%的峰值。&br&&br&&b&### 为什么&/b&&b&VBScript&/b&&b&没能成为“JavaScript”呢？&/b&&br&&br&我下面讨论的是VBScript&b&，而不是&/b&JScript，因为现在的JavaScript其实网景的JavaScript和微软的JScript的合体，两者都是&a href=&///?target=http%3A///view/810176.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ECMAScript&i class=&icon-external&&&/i&&/a&规范在浏览器上的实现。&br&&br&原因很多，我认为有以下2点（原来有3点）：&br&&br&&b&#### 第1，来自非Windows体系的浏览器组织的抗争。&/b&&br&&br&其中，最重要的就是&a href=&///?target=http%3A///view/393243.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Mozilla&i class=&icon-external&&&/i&&/a&，它最初是由网景公司内部成立的，后来网景被AOL收购后，这一组织独立了出来，并接管了网景许多业务，而它最重要的产品就是开发人员非常熟悉的Firefox。我们都知道Firefox一直和IE对着干，其原因就是它是网景体系的延续（JavaScript创造者Brendan Eich一直是Mozilla的带头人）。&br&&br&除了Mozilla组织外，还有苹果以及KDE项目等。虽然这些对手在当时还非常弱小，但星星之火可以燎原，后来就是这些不起眼的对手将IE赶下了神坛。很显然，死而不僵的网景起到了关键的作用，作为前端开发从业者，我们应该好好感谢网景。&br&&img src=&/194c89abb5ba1ddb0e17_b.png& data-rawwidth=&500& data-rawheight=&140& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&/194c89abb5ba1ddb0e17_r.png&&&br&（前端人记得烧柱香，祭拜一下）&br&&br&&b&#### 第2，微软的垄断导致Windows和IE的封闭。&/b&&br&&br&Windows 95/98之后，&b&微软霸占了&/b&桌面系统，绝对垄断让它拥有了很多特权，比如IE直接内置在Windows里面，玩死了网景。绝对的市场地位，微软压根不用考虑IE是不是可以安装在其他系统上面，而针对网景的JavaScript，它弄出来的VBScript和JScript也只能运行在IE上面，够封闭吧？&br&&br&然而，除了Windows外，这世界还有不少系统需要浏览器，比如linux系统、比如苹果系统。虽然当时的它们市场份额很小，但是这些系统的用户都是高端用户，拥有非常强势的话语权。正是由于这个原因，浏览器需要一门可以跨平台的编程语言，JavaScript正好符合需求。&br&&br&就这样，JavaScript成为了浏览器端编程的胜利者。&br&&br&于是，人们容忍了它的不足，并主动修补了它的各种缺陷，各种兼容类库纷纷涌现，而jQuery的出现，为Web开发人员操作网页DOM结构提供了非常强大易用的接口，为JavaScript这门语言的流行铺平了道路，而它则成为了最最广