美文网首页
初识JavaScript

初识JavaScript

作者: 飘飘流浪者 | 来源:发表于2017-08-22 11:38 被阅读0次

    简单介绍 JavaScript的发展历史

    • 1990年底,欧洲核能研究组织(CERN)科学家Tim Berners-Lee,发明了万维网(World Wide Web),从此可以在网上浏览网页文件。最早的网页只能在操作系统的终端里浏览,也就是说只能使用命令行操作,网页都是在字符窗口中显示,非常不方便。
    • 1992年底,美国国家超级电脑应用中心(NCSA)开始开发一个独立的浏览器,叫做Mosaic。这是人类历史上第一个浏览器,从此网页可以在图形界面的窗口浏览。
    • 1994年10月,NCSA的一个主要程序员Marc Andreessen联合风险投资家Jim Clark,成立了Mosaic通信公司(Mosaic Communications),不久后改名为Netscape。这家公司的方向,就是在Mosaic的基础上,开发面向普通用户的新一代的浏览器Netscape Navigator。
    • Netscape公司很快发现,Navigator浏览器需要一种可以嵌入网页的脚本语言,用来控制浏览器行为。1995年,Netscape公司雇佣了程序员Brendan Eich开发这种网页脚本语言。5月,Brendan Eich只用了10天,就设计完成了这种语言的第一版。它是一个大杂烩,语法有多个来源。
    • Netscape公司与Sun公司(Java语言的发明者和所有者)达成协议,后者允许将这种语言叫做JavaScript。这样一来,Netscape公司可以借助Java语言的声势,而Sun公司则将自己的影响力扩展到了浏览器。
    • 1996年3月,Navigator 2.0浏览器正式内置了JavaScript脚本语言。
    • 1996年8月,微软模仿JavaScript开发了一种相近的语言,取名为JScript。Netscape公司面临丧失浏览器脚本语言的主导权的局面。
    • 1996年11月,Netscape公司决定将JavaScript提交给国际标准化组织ECMA,希望JavaScript能够成为国际标准,以此抵抗微软。
    • 1997年7月,ECMA组织发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript。ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。在日常场合,这两个词是可以互换的。ECMAScript只用来标准化JavaScript这种语言的基本语法结构,与部署环境相关的标准都由其他标准规定。
    • 1997年7月,ECMAScript 1.0发布。
    • 1998年6月,ECMAScript 2.0版发布。
    • 1999年12月,ECMAScript 3.0版发布,成为JavaScript的通行标准,得到了广泛支持。
    • 2007年10月,ECMAScript 4.0版草案发布,对3.0版做了大幅升级,预计次年8月发布正式版本。草案发布后,由于4.0版的目标过于激进,各方对于是否通过这个标准,发生了严重分歧。2008年7月,由于对于下一个版本应该包括哪些功能,各方分歧太大,争论过于激进,ECMA开会决定,中止ECMAScript 4.0的开发(即废除了这个版本),将其中涉及现有功能改善的一小部分,发布为ECMAScript 3.1,而将其他激进的设想扩大范围,放入以后的版本。会后不久,ECMAScript 3.1就改名为ECMAScript 5。
    • 2009年12月,ECMAScript 5.0版正式发布。
    • 2011年6月,ECMAscript 5.1版发布,并且成为ISO国际标准(ISO/IEC 16262:2011)。到了2012年底,所有主要浏览器都支持ECMAScript 5.1版的全部功能。
    • 2013年3月,ECMAScript 6草案冻结,不再添加新功能。新的功能设想将被放到ECMAScript 7。
    • 2013年12月,ECMAScript 6草案发布。然后是12个月的讨论期,听取各方反馈。
    • 2015年6月,ECMAScript 6正式发布,并且更名为“ECMAScript 2015”。下一个版本在2016年发布,称为“ECMAScript 2016”。

    简述页面的渲染机制

    • 解析 HTML 标签, 构建 DOM 树
    • 解析 CSS 标签, 构建 CSSOM 树
    • 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
    • 在渲染树的基础上进行布局, 计算每个节点的几何结构
    • 把每个节点绘制到屏幕上 (painting)


    样式、JS 在 HTML 中如何放置?

    • 使用 link 标签将样式表放在顶部
    • 将JS放在底部
      1.脚本会阻塞后面内容的呈现
      2.脚本会阻塞其后组件的下载

    解释白屏和 FOUC

    • 白屏是由于把script标签放在了head头部进行加载,由于script标签的特性会阻碍其他文件加载,必须等待脚本加载完毕,其他资源才能进行加载显示,应该放在body的尾部进行加载避免白屏,把CSS文件放在底部同样也会造成白屏,用@import也会。
    • FOUC(flash of unstyled cotent)无样式内容闪烁:是由于把css的link标签放在了HTML标签后面,那么浏览器就会先渲染到HTML标签展示无样式的标签,等到加载到对应的CSS样式后,会进行重绘,回流,造成无样式闪烁。

    如何异步加载脚本

    • 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。
    • 有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。
    • 有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

    介绍下 repaint和 reflow的概念

    相关文章

      网友评论

          本文标题:初识JavaScript

          本文链接:https://www.haomeiwen.com/subject/wkfhdxtx.html