CSRF（Cross Site Request Forgery）即跨站点请求伪造，攻击者伪装成正常用户，对服务器发起请求，让服务器执行某些操作。例如用户正常登录某个网站，然后再未退出的情况下访问了攻击者事先准备好的页面，此时攻击者就有可能获取到保存在Cookie中的登录凭据或登录信息，然后攻击者就能伪装成用户，与服务器开始通信，CSRF的防御手段如下：1.让用户与网站进行交互才能完成请求，例如在表单中添加验证码。2.检查请求是否来自合法的源，例如上一页的域名是否与当前相同。3.在每个请求中添加一个Token参数，这是一个随机数，可以在进入页面时生成，然后保存在Session中，服务器在接受到T...

XSS（Cross Site Script）即跨站脚本攻击，它将恶意脚本注入到目标网页中，用户在访问该页面时，有可能造成信息泄露，用户行为被劫持、感染并传播蠕虫病毒等危害。防范方法如下列：1.为Cookie添加HTTPOnly标记，使得客户端不能通过javascript读取Cookie信息。2.对提交服务器中的信息做输入检查，例如白名单过滤、把字符编码成HTML实体等。function htmlEscape(text){ return text.replace(/[<>"&]/g, function(match, pos, originalText){ switc...

CDN（content Delivery Network）即内容分发网络，它是在现有的互联网基础上再构建的一层智能虚拟网络（包括分布式存储、负载均衡、请求重定向和内容管理等），通过在各地放置节点服务器实现。其目的是降低访问延时，避开影响传输速度与稳定性的瓶颈和环节，从而提升用户访问网站的相应速度和成功率。CDN能实时地根据网络流量、负载状态、用户的距离和响应时间等综合信息，把用户的请求导向离他最近地节点服务器上，使用户能就近获取所需地内容。全局负载均衡，主要的目的是在整个网络范围内将用户的请求定向到最近的节点（或者区域）。因此，就近性判断是全局负载均衡的主要功能。

5个方法用来优化页面的性能1.网站中的图像放置在专门的图像服务器中，开辟多个不用传Cookie的子域名，这些子域名都能访问该服务器中的图像。2.优化请求，包括合并文件、缓存资源、使用CDN、减小Cookie、启用GZip压缩和长连接等。3.优化CSS，包括将CSS文件至于HTML文档的顶部、使用外部样式、压缩CSS文件等。4.优化JS，包括减少重绘和重排、避免内联脚本阻塞并行下载、批量执行DOM操作、把脚本置于HTML文档底部等。5.优化图像，包括压缩、合并、懒加载、预加载和使用WebP格式等。 WebP是由谷歌（google）开发的一种旨在加快图片加载速度的图片格式,并能节省大量的服务器宽带...

图像预加载是指提前加载图像，并将其缓存，当要访问时就能直接读取缓存中的图像。预加载不但能更流畅地展示网页，减少等待时间，还能防止页面因图像太多而打开缓慢甚至无法打开的情况发送。图像懒加载也叫延迟加载，通常的做法是当滚动条到达某个位置时，再请求图像。这种方式大大节约用户的流量，并能减轻服务器地压力，提升用户体验。

1.前端进行模块化开发能将一个复杂的大型系统分解成一个个高内聚、低耦合的简单模块，并且每个模块都是独立的，用于完成特定的功能。模块化后的系统变得更加可控、可维护、可拓展、程序代码也更简单直观，可读性也更高，有利于团队协作开发。自动化构建工具的出现，使得前端能更容易、更快速地实现模块化开发。2.自动化构建工具能够增强前端的工作流程，避免重复而繁杂的任务，提升开发效率，保持项目可维护和可拓展等。常用的构建工具有gulp，grunt等，它们支持页面监控，自动刷新，文件压缩与合并等功能，让开发人员能更简单，更高质量地完成工作。 gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义...

MVVM模式由三部分组成：模型（model）、视图(View)和视图模型(ViewModel). MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller（MVC）模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。View 层展现的不是 M...

JSONP（json with padding)是一种借助script元素实现跨域的技术，它不会使用XHR对象。script 元素有以下两个特点1.它的src属性能够访问任何URL资源，不会受同源策略的限制。2.如果访问的资源包含js代码，那么在下载完成后会自动执行。JSONP就是基于这两点，再与服务器配合来实现跨域请求的1.定义一个回调函数2.用DOM方法动态创建一个script元素。3.指定要请求的URL，并且将回调函数的名称作为一个参数传递过去。4.将script元素插入到当前文档中，请求开始。5.服务器接收传递过来的参数，然后将回调函数和数据以调用的形式输出。6.当script元素接收...

事件委托是一种提高程序性能，降低内存空间的技术手段，它利用了事件冒泡的特性，只需要在某个祖先元素上注册一个事件，就能管理其所有后代元素上同一类型的事件。用一个例子来描述委托，先创建一个HTML文档，包含一个容器元素，以及它的3个子元素。 <div id="delegation"> <button type="button">提交</button> <button type="button">返回</button> <button type="button&qu...

DocumentFragment(文档片段)是一种独立地节点，默认不属于任何文档，因此它没有父节点，但它可以包含多种类型地子节点，例如Element、Text或Comment等。在文档中直接操作节点有时候会引起DOM树的重绘和重排，如果一下子插入大量的节点，势必会降低脚本的性能，而如果将要插入的节点先保存在文档片段中，把文档片段作为一个临时的节点仓库，然后在文档片段中对节点进行排版、加样式、改内容等操作，最后把整个文档节点插入到文档中，能大大减少文档的重绘和重排次数，提升脚本的性能。 var fragment = document.createDocumentFragment(), p; fo...

初识AJAX    什么是AJAX？  AJAX工作原理  AJAX实例  AJAX-创建XMLHttpRequest对象   XMLHttpRequest 对象  创建XMLHttpRequest对象   AJAX-向服务器发送请求   向服务器发送请求  GET还是POST？   GET请求  POST请求   url-服务器上的文件  异步 - True 或 False？   Async=true  Async = false    AJAX-服务器响应   responseText 属性  responseXML 属性   AJAX- onreadystatechange事件   使用...

从Event Loop 到 async awaithttps://www.jianshu.com/p/8dccfa90ba59运行在宿主环境中的Javascript引擎针对单线程，提供了一种机制来更高效地处理多个任务，这个机制不断地重复处理任务称为事件循环，事件循环具体地执行过程分为以下4步：1.先执行主线程中的任务2.当主线程空闲时，再从任务队列中读取任务，继续执行。3.即使主线程阻塞了，任务队列还是会继续接收任务。4.主线程不断地重复第2步操作。http://www.ruanyifeng.com/blog/2013/10/event_loop.html什么是 Event Loop？http...

（function{})() 刚刚定义好就可以马上自动执行的函数，即时函数用途非常广泛，常用于创建块级作用域，解决循环中的异步回调问题和类库封装。