一、养成良好的编码习惯，提高可维护性
1、避免定义全局变量和函数，解决全局变量而导致的代码“污染”最简单的额方法就是把变量和方法封装在一个变量对象上，使其变成对象的属性：
1 var myCurrentAction = { 2 length : 0 , 3 init : function(){}, 4 action : function(){} 5 }
还可以将全局的变量包含在一个局部作用域中，然后在这个作用域中完成这些变量的定义以及变量使用的逻辑：
1 (function(){ 2 var length = 0; 3 function init(){} 4 function action (){} 5 })();
模块之间交互使用return语句(即做到了代码逻辑的封装，又公开了需要访问的接口)：
1 var myCurrentAction = (function(){ 2 var length = 0; 3 function init(){} 4 function action(){} 5 return { 6 init : init 7 } 8 })();
在JavaScript中，对象的构造中有一个名为prototype的对象，即为原型对象，这个对象上的属性或方法是共享给所有实例对象的。所以说实例对象上的属性和方法来自于两个地方：自身和对应的原型对象。因为原型本身也可以是其他函数的实例对象。所以原型对象中的属性和方法也可能来自于作为实例对象时对应的原型对象上。这就形成了一个由各原型对象组成的链条，称为原型链。原型链的最顶端是构造函数Object中名为prototype的对象，查找对象上的属性或方法时，首先会查找自身是否存在此属性或方法，如果未找到，则会继续在原型链上查找，直到找到或者未找到返回undefined值为止。
DOM操作对性能影响最大其实还是因为它导致了浏览器的重绘和重排。
--重绘指的是页面的某些部分要重新绘制，比如颜色或背景色的修改，元素的位置和尺寸并没有改变。
--重排则是元素耳朵位置或尺寸发生了改变，浏览器需要重新计算渲染树，导致渲染树的一部分或全部发生变化
--导致原因
- 增加、删除和修改可见DOM元素
- 页面初始化的渲染
- 移动DOM元素
- 修改CSS样式，改变DOM元素的尺寸
- DOM元素内容改变，是的尺寸被撑大
- 浏览器窗口尺寸改变
- 浏览器窗口滚动
二、常见的Web前端攻击方式
1、XSS
XSS是Cross Site Scripting的缩写，即跨站点脚本攻击。XSS发生在用户的浏览器端，即当用户在加载HTML文档时执行了非预期的恶意脚本，
2、CSRF
CSRF是Cross Site Request Forgery的缩写，译为跨站请求伪造。CSRF和XSS攻击都是发起各种请求，但对CSRF来说请求是来源于其他网站的，即为跨站的请求，并且这个请求并不是来自于用户的意思，而是伪造的请求，诱导用户发起的请求。
3、界面操作劫持
点击劫持、拖放劫持。
JSONP技术提供的跨域数据访问利用了同源策略不完善的地方，算是技巧性的方案，而CORS则是从规范上专门定义的一项跨域数据访问的技术。JSONP只能用GET请求，而CORS比JSONP更先进和可靠。CORS主要的原理是在服务器端设置Access-Control-Allow-Origin头，从而限定了服务请求的发起端。
防范方式：
1、更安全的使用Cookie :设置Cookie为HttpOnly，即禁止了JavaScript操作Cookie.如果需要用到此方式来传递和保存数据的话，应该使用其他安全的代替方案，比如HTML5的LocalStorage.
三、移动设备和桌面端设备，事件绑定的差异
移动设备上可以做多点触摸操作，但在PC上主要是鼠标的单一点操作。
触摸事件分为4类：touchstart、touchmove，touchend，touchcacel。
touchstart和touchend对应桌面端浏览器的mousedown mousemove和mouseup,每个触摸事件都包含3个列表：touchs targetTouches和changed-Touches,其中需要注意的是touchcancel事件，它比较独特。在某些情况下触摸事件可能被打断。例如：在IOS系统的Safari浏览器中，用户按下了home按键，或者按了浏览器底部工具条上的按键等
四、如何让桌面WEB页面兼容移动设备
1、使用流式布局
流式布局和固定布局是相对的，流式布局的核心思想是使用百分比来设置页面部分的宽度，而固定布局是指页面主要模块使用固定的宽度。
使用流式布局的优点是无论窗口有多大，网页中的各模块都可以完整地显示在窗口中，不会因为浏览器窗口变窄而导致页面部分模块隐藏。这一优点在兼容各种尺寸的移动设备时尤为有用，保证了在移动设备中能完整地显示网页中的内容。
2、借助于CSS Media queries(媒体查询)技术
Media queries是在CSS3中新加入的特性，通过指定媒体类型的方式来限定所包含样式的作用范围。https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
1 @media (max- 12450px) { ... }
3、使用合适的图片显示兼容方案
4、保持页面简洁，不要使用移动设备不兼容的技术
5、设置viewport
6、增加链接和按钮的可操作区域
7、使用响应式设计框架
8、使用工具检查网页的移动设备兼容性（MobiReady 、 W3C mobileOK Checker、iPadPeek、Howtogomo）