JavaScript/Ajax/JQuery知识点(BOM/DOM/ScriptEngine/JS引擎)

捋顺JavaScript底层知识，重点讲解如原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念？？

JS中的继承？JS的原型模式，JS的匿名函数 闭包，JS/CSS 继承，接口，封装，多态？？JS动态添加HTML标签？？

合并JS请求。

JS：JS反射机制
  理解如何使用DOM，了解JSON是什么以及如何使用它。
  重要的语言特点，例如功能组成，原型继承，闭包，事件委托，范围，高阶函数。
  异步控制流，承诺(promises),和回调。
  学习如何正确构造你的代码以及将其模块化，可以借助webpack,browseify,或者类似gulp的构造工具来理解。
  知道如何使用至少一种常用框架(很多培训重点培训一种库或者如React或者AngularJS这样的框架，但是在现实中，深刻理解JavaScript语言更重要，而不必将精力过多的放在特定框架的特点上。一旦你充分熟悉了JavaScript，掌握一种框架也不会有问题。)
  尽管有人会说jQuery代码用的少而且会逐渐淘汰，但是在大多数应用中仍然在使用它，牢固地掌握它还是有帮助的。
  一些测试框架的知识以及为什么这些知识重要(一些人甚至声称这个主题不是必须的)
  学习一些重要的新的ES6特点(可选的)
> 检查JS代码漏洞,滥用JS
许多 Web 应用程序都利用 JSON 作为 Ajax 的数据传输机制，这通常都容易受到 JavaScript 劫持攻击，传统的 Web 应用程序反而不易受攻击。JSON 实际上就是一段 JavaScript，通常是数组格式。

15 个有趣的 JS 和 CSS 库- https://zhuanlan.zhihu.com/p/29500893
JavaScript内存管理机制以及四种常见的内存泄漏解析- http://geek.csdn.net/news/detail/238898
  JavaScript内存管理与内存泄漏：即使是使用高级语言，开发人员也应该了解一些内存管理方面的知识(或者至少懂得一些基础知识)。因为在自动内存管理(比如垃圾收集器的bug或实现限制等)出现问题的时候，开发人员必须能够理解并正确地解决这些问题(或者找到一个合适的解决方案，以最低的代价来修改代码)。
 内存生命周期中的每一个阶段：
 分配内存——内存由操作系统分配，并允许程序使用它。在低级语言(例如C)中，开发人员必须显式地执行这一操作。而在高级语言中，系统会自动为你分配内存。
 使用内存——在这一步中，程序将使用先前分配的内存。在代码中使用已分配过内存的变量时，就会发生内存读写操作。
 释放内存——释放所有不再使用的内存，使之成为自由内存，并可以被重利用。与分配内存操作一样，这一操作在低级语言中也是需要显式地执行。
 8个比特称为1个字节（byte）。除了字节之外，还有字(word，有时是16位，有时是32位)。

> BOM和DOM的区别
JS中BOM和DOM的区别与联系- http://blog.csdn.net/xiao_tommy/article/details/53231165
BOM跟DOM的区别和关联：
BOM是Browser Object Model的缩写，即浏览器对象模型。BOM的最根本对象是window。

DOM最根本对象是document（实际上是window.document）。
DOM Level 1 包括DOM Core和DOM HTML。前者提供了基于XML的文档结构图。后者添加了一些HTML专用的对象和方法，从而扩展了DOM Core.
DOM Level 2 引入几个新模块：DOM视图，事件，样式，遍历和范围
DOM Level 3 引入了以统一的方式载入和保存文档的方法。DOM Core被扩展支持所有的XML1.0的特性

 JavaScript 有三部分构成，ECMAScript，DOM和BOM
1.DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]
2.BOM 是 各个浏览器厂商根据 DOM，在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
3.window 是 BOM 对象，而非 js 对象；

JavaScript操作DOM的那些坑- http://www.jqhtml.com/8609.html?ref=myread

----------------------------------------

JS和JQUERY的区别- http://www.cnblogs.com/hanqishihu/p/5601328.html
初识JavaScript，Ajax，jQuery，并比较三者关系- http://blog.csdn.net/caozhangyingfei0109/article/details/10296157
  javaScript是用于Web客户端开发的脚本语言，Ajax是基于JS语言，主要组合JS、CSS、XML三种技术的新技术，是用于创建交互式网页应用的网页开发技术。jQuery是JS的框架，基于JS语言，集合Ajax技术开发出来的JS库，封装JS和Ajax的功能，提供函数接口，大大简化了Ajax，JS的操作。
  jquery 是javascript的一个扩展，封装，就是让javascript更好用，更简单。

  

IE“浏览器模式”和“文档模式”之间的区别- http://blog.csdn.net/jcx5083761/article/details/8668597
浏览器模式和文档模式怎么玩？(转)- http://blog.csdn.net/wangji5850/article/details/51005064
只有IE浏览器中才会有“浏览器模式”和“文档模式”，兼容性视图涉及两个重要的功能便是“浏览器模式【browser mode】”和“文档模式【document mode】”。

  JS

> JavaScript引擎

  JavaScript引擎是专门处理JavaScript脚本的虚拟机，一般会附带在网页浏览器之中。第一个JavaScript引擎由布兰登·艾克在网景公司开发，用于Netscape Navigator网页浏览器中。JavaScriptCore就是一个JavaScript引擎。
  一个JSVirtualMachine的实例就是一个完整独立的JavaScript的执行环境，为JavaScript的执行提供底层资源。
JS引擎有：Rhino,SpiderMonkey,V8,JavaScriptCore,Chakra(JScript),Chakra(Js),KJS
JavaScriptCore是一个C++实现的开源项目。JavaScriptCore引擎主要由以下模块组成：
 Lexer 词法分析器，将脚本源码分解成一系列的Token
 Parser 语法分析器，处理Token并生成相应的语法树
 LLInt 低级解释器，执行Parser生成的二进制代码
 Baseline JIT 基线JIT（just in time 实施编译）
 DFG 低延迟优化的JIT
 FTL 高通量优化的JIT

javascript中的接口就类似于java中的interface，是用function定义的语句块。

JavaScript深入之创建对象的多种方式以及优缺点及设计模式- https://segmentfault.com/a/1190000009359984 ， https://github.com/mqyqingfeng/Blog

12个非常有用的JavaScript技巧- http://geek.csdn.net/news/detail/197093

“js相关”目录存档- http://www.zhangxinxu.com/

JS继承的实现方式- http://www.cnblogs.com/humin/p/4556820.html
js如何实现继承（js实现继承的五种方式）- http://blog.csdn.net/fuxiaohui/article/details/44910765

js实现接口的几种方式- http://www.cnblogs.com/yujon/p/5583807.html

js解析websocket二进制数据包- http://blog.csdn.net/woxingwosu0100/article/details/51273523
全栈必备 JavaScript基础- http://blog.csdn.net/wireless_com/article/details/69055330

极简模式JavaScript音乐播放器- https://github.com/dunizb/SMmuiscPlay

js的左右滑动触屏事件，主要有三个事件：touchstart，touchmove，touchend。这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标。
用HTML和javascript(JS)计算触屏手机手指滑动方向- http://www.itnose.net/detail/6105402.html
js判断手指的上滑，下滑，左滑，右滑，事件监听- http://www.cnblogs.com/lijuntao/p/6479972.html
js滑动触屏事件监听- http://www.cnblogs.com/mingforyou/archive/2013/02/18/2915151.html

开源JavaScript插件和库速查表- http://geek.csdn.net/news/detail/227802
JavaScript- http://blog.csdn.net/yisuowushinian/article/category/1277032

  jQuery

jQuery获取父元素节点、子元素节点及兄弟元素节点的方法- http://www.jb51.net/article/82414.htm

jQuery其实只是个类库，jquery只是一个js写的类库，都是一些简单的api调用。

  Aajx

Ajax的局部刷新？

目前通过Aajx提交的方式只有几种： 
1、使用隐藏的iframe来通过form post 
2、使用flash提交，可以参见uploadify 
3、在部分浏览器(firefox)，可以取到二进制提交 new FormData(),可以参见 http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload
AJAX有着跨源限制，实现跨源通信的方式有：JSONP，iframe hack，window.postMessage() 以及 XMLHttpRequest Level 2。

  JsBridge(原生与JS的交互)

JsBridge实现Js与Java的互相调用- https://github.com/lzyzsd/JsBridge 
WebViewJavascriptBridge框架- https://github.com/marcuswestin/WebViewJavascriptBridge

----------------------------------------

> ScriptEngine解析js或脚本
Java用ScriptEngine解析脚本- http://blog.csdn.net/u012660667/article/details/49684583
Java ScriptEngine 解析js- http://blog.csdn.net/u012660667/article/details/49821811

  javax.script，始于JDK1.6，不过现在只有sun实现的JavaScript的解析器.Java虚拟机支持比较多的脚本语言，比较流行的有JavaScript、Scala、JRuby、Jython和Groovy等.
  JavaSE6中自带了JavaScript语言的脚本引擎，基于Mozilla的Rhino实现，可以通过三种方式查找脚本引擎： 
① 通过脚本名称获取： 
 ScriptEngine engine = new ScriptEngineManager().getEngineByName("JavaScript"); 
② 通过文件扩展名获取： 
 ScriptEngine engine = new ScriptEngineManager().getEngineByExtension("js");  
③ 通过MIME类型来获取： 
 ScriptEngine engine = new ScriptEngineManager().getEngineByMimeType("text/javascript");  

javax.script包下最主要的是ScriptEngineManager、ScriptEngine、CompiledScript和Bindings 4个类或接口。
  ScriptEngineManager是一个工厂的集合，可以通过name或tag的方式获取某个脚本的工厂并生成一个此脚本的   ScriptEngine，目前只有javascript的工厂。通过工厂函数得到了ScriptEngine之后，就可以用这个对象来解析脚本字符串了，直接调用Object obj = ScriptEngine.eval(String script)即可，返回的obj为表达式的值，比如true、false或int值。
  CompiledScript可以将ScriptEngine解析一段脚本的结果存起来，方便多次调用。只要将ScriptEngine用Compilable接口强制转换后，调用compile(String script)就返回了一个CompiledScript对象，要用的时候每次调用一下CompiledScript.eval()即可，一般适合用于js函数的使用。
  Bindings的概念算稍微复杂点，我的理解Bindings是用来存放数据的容器。它有3个层级，为Global级、Engine级和Local级，前2者通过ScriptEngine.getBindings()获得，是唯一的对象，而Local Binding由ScriptEngine.createBindings()获得，很好理解，每次都产生一个新的。Global对应到工厂，Engine对应到ScriptEngine，向这2者里面加入任何数据或者编译后的脚本执行对象，在每一份新生成的Local Binding里面都会存在。

----------------------------------------

Javascript的加载和执行的特点： 
（1）载入后马上执行； 
（2）执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）。原因：因为浏览器需要一个稳定的DOM树结构，而JS中很有可能有 代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修 改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现。
          减少 JavaScript 对性能的影响的方法：
1.将所有的script标签放到页面底部，也就是body闭合标签之前，这能确保在脚本执行前页面已经完成了DOM树渲染。
2.尽可能地合并脚本。页面中的script标签越少，加载也就越快，响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。
3.采用无阻塞下载 JavaScript 脚本的方法： 
（1）使用script标签的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版本）； 
（2）使用动态创建的script元素来下载并执行代码；

如果在解析html的时候遇到js会阻塞页面渲染，所以一般我们会将所有的script标签放到页面底部，也就是body闭合标签之前，这能确保在脚本执行前页面已经完成了DOM树渲染。尽可能地合并脚本。页面中的script标签越少，加载也就越快，响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。
采用无阻塞下载 JavaScript 脚本的方法： 
（1）使用script标签的 defer、async 属性、； 
（2）使用动态创建的script元素来下载并执行代码等异步加载等方法；

(1)Reflow（回流）：浏览器要花时间去渲染，当它发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。 
(2)Repaint（重绘）：如果只是改变了某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的repaint，重画某一部分 
Reflow要比Repaint更花费时间，也就更影响性能。所以在写代码的时候，要尽量避免过多的Reflow。
reflow的原因：
（1）页面初始化的时候； 
（2）操作DOM时； 
（3）某些元素的尺寸变了； 
（4）如果 CSS 的属性发生变化了
减少 reflow/repaint:
（1）不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className。 
（2）不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。 
（3）为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。 
（4）千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。

>  defer、async 区别：
defer、async都是异步下载，但是执行时刻不一致；
  相同点：
加载文件时不阻塞页面渲染；
使用这两个属性的脚本中不能调用document.write方法；
允许不定义属性值，仅仅使用属性名；
  不同点：
html的版本html4.0中定义了defer，html5.0中定义了async；这将造成由于浏览器版本的不同而对其支持的程度不同；
每一个async属性的脚本都在它下载结束之后立刻执行，同时会在window的load事件之前执行，所以就有可能出现脚本执行顺序被打乱 的情况；
每一个defer属性的脚本都是在页面解析完毕之后，按照原本的顺序执行，同时会在document的DOMContentLoaded之前执行；

JavaScript 安全漏洞？
javascript中等于（==）与全等（===）的区别,等于（==）的情况下 只要值相同就返回True。而全等（===）的时候需要值和类型都要匹配才能返回True.
也谈分离JavaScript和HTML- http://blog.csdn.net/eengel/article/details/6193209
jQuery就是管管js代码中ajax和dom的操作；由于各种浏览器版本问题，为一些JS做兼容,框架：Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx

> 网页不支持或禁止了JS
function CloseSearch() {
        $("#searchEffect").html(searchEffect);
        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.abort();
        mystop();
        //alert("dddd");
    }

    function mystop() {
        if (!!(window.attachEvent && !window.opera))
        { document.execCommand("stop"); }
        else
        { window.stop(); }
    }

JavaScript JavaScript与XML——“XPath”的注意要点- https://segmentfault.com/a/1190000004476200
javascript DOM详解之DOM2与DOM3- http://blog.csdn.net/seacean2000/article/details/8289399
  >DOM扩展
Selectors API Level 1 的核心是两个方法：querySelector()和querySelectorAll()。在兼容的浏
览器中，可以通过Document 及Element 类型的实例调用它们。目前已完全支持Selectors API Level 1
的浏览器有IE 8+、Firefox 3.5+、Safari 3.1+、Chrome 和Opera 10+。

  >DOM2 和DOM3级分为许多模块（模块之间具有某种关联），分别描述了DOM 的某个非常具体的子集。这些模块如下:
DOM2 级核心（DOM Level 2 Core）：在1 级核心基础上构建，为节点添加了更多方法和属性。
DOM2 级视图（DOM Level 2 Views）：为文档定义了基于样式信息的不同视图。
DOM2 级事件（DOM Level 2 Events）：说明了如何使用事件与DOM文档交互。
DOM2 级样式（DOM Level 2 Style）：定义了如何以编程方式来访问和改变CSS 样式信息。
DOM2 级遍历和范围（DOM Level 2 Traversal and Range）：引入了遍历DOM 文档和选择其特定部分的新接口。
DOM2 级 HTML（DOM Level 2 HTML）：在1 级HTML 基础上构建，添加了更多属性、方法和新接口
 
  >DOM3级XPath
var supportsXPath=document.implementation.hasFeature("XPath","3.0");
3级DOM通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的所有内容，包扩XML Infoset、 XPath、和XML Base。

XSL的作用：将XML转换成HTML.XSL和XSLT从狭义上理解是一样的,而按照W3C的标准，XSLT的说法更严格些。
1.xsl = xslt + xsl:fo  xsl是包括xslt的，xslt就是xsl转换。
2.xsl是xml样式语言，xslt是转换工具。

跨文档消息传送（cross-document messaging），有时候也简称为XDM，指的是来自不同域的页面间传递消息。
JavaScript：HTML5跨文档消息传递- http://blog.csdn.net/qq_27626333/article/details/51596581 http://blog.csdn.net/J_Y_X_8/article/details/51612259
js 设置header，实现跨域访问- http://blog.csdn.net/enter89/article/details/51205752
【HTTP劫持和DNS劫持】实际JS对抗- http://www.cnblogs.com/kenkofox/p/4924088.html http://www.cnblogs.com/kenkofox/p/4919668.html
JavaScript防http劫持与XSS- http://blog.csdn.net/z69183787/article/details/52496188

JavaScript中8个常见的陷阱- http://www.webhek.com/post/who-said-javascript-was-easy.html

S动态地添加和删除样式表中的某些样式,用来取代不断地查询DOM元素,并应用各种样式。
> JS实现动态加载CSS和JS文件,使用JavaScript动态添加CSS样式规则,动态加载脚本和样式
var dynamicLoading = {
    css: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[0];
        var link = document.createElement('link');
        link.href = path;
        link.rel = 'stylesheet';
        link.type = 'text/css';
        head.appendChild(link);
    },
    js: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.src = path;
        script.type = 'text/javascript';
        head.appendChild(script);
    }
}
//动态加载 CSS 文件
dynamicLoading.css("test.css");
//动态加载 JS 文件
dynamicLoading.js("test.js");

---------------------------------------------------------------

书籍：

《webkit技术内幕》《编写可维护的JavaScript》《锋利的jQuery》《Javascript设计模式与开发实践 》