5lx是什么前端常识

1、如何区分native与h5页面？
a.下拉刷新的时候：
如果界面没有明显刷新现象的是原生的，如果有明显刷新现象（比如闪一下）的是H5页面（ios和android）；
下拉页面的时候显示网址提供方的一定是H5。
b.看app顶部 导航栏是否会有关闭的操作:
如果APP顶部导航栏当中出现了关闭按钮或者有关闭的图标，那么当前的页面肯定的H5，原生的不会出现（除非设计开发者故意弄的）

2、css和Js阻塞的情况？
a.css放头部，js放底部。css是并行下载的，js会阻塞；
b.js放头部也不阻塞的话，添加async属性，IE支持defer
c.外部样式不会阻塞外部脚本的加载，但会阻塞外部脚本的执行。
c.css也会出现阻塞的情况：当CSS后面跟着嵌入的JS的时候，该CSS就会出现阻塞后面资源下载的情况。而当把嵌入JS放到CSS前面，就不会出现阻塞的情况了。根本原因：因为浏览器会维持html中css和js的顺序，样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载，所以就会出现上面CSS阻塞下载的情况。

3、bootstrap断点设置：320，480，768，992，1200，http://caibaojian.com/bootstrap-media.html

4、SVG 与 HTML5 的 canvas 各有什么优点？
Canvas基于像素，是使用JavaScript程序绘图(动态生成)，SVG为矢量，是使用XML文档描述来绘图。提供一系列图形元素（Rect, Path, Circle, Line …），还有完整的动画，事件机制，本身就能独立使用，也可以嵌入到HTML中，IE9+
从这点来看：SVG更适合用来做动态交互，Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制。而且SVG绘图很容易编辑，SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景。同时SVG是基于矢量的，所有它能够很好的处理图形大小的改变。Canvas是基于位图的图像，它不能够改变大小，只能缩放显示；

5、用H5+CSS3解决下导航栏最后一项掉下来的问题

6、html5新特性？
绘画 canvas 元素
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器  多背景 rgba
新的技术webworker, websockt, Geolocation

7、csshack
CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

• “-″减号是IE6专有的hack，*为IE7
• “9″ IE6/IE7/IE8/IE9/IE10都生效
• “0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
• “90″ 只对IE9/IE10生效，是IE9/10的hack

8、语义化的理解？
用正确的标签做正确的事情！
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

9、如何实现浏览器内多个标签页之间的通信?
调用 localstorge、cookies 等本地存储方式

10、谈谈你对模块化开发的理解？http://blog.csdn.net/lxcao/article/details/52774825
所谓的模块化开发就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。模块化开发的基础就是函数，通过函数实现一定的功能，但是为了避免函数之前变量的相互影响，使用闭包。AMD／CMD

11、谈谈对this的理解? http://blog.csdn.net/lxcao/article/details/52750575
this的指向：this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象，指向window对象时可以省略不写，调用的上下文环境包括全局和局部
全局：全局环境就是在<script></script>里面，这里的this始终指向的是window对象；
局部：a.在全局作用域下直接调用函数，this指向window .  b.对象函数调用，哪个对象调用就指向哪个对象 .  c.使用 new 实例化对象，在构造函数中的this指向实例化对象。d.使用call或apply改变this的指向。

12、javascript有几种类型的值？http://blog.csdn.net/lxcao/article/details/52749421
两大类：
栈：原始数据类型（Undefined，Null，Boolean，Number、String）
堆：引用数据类型（对象、数组和函数）

13、什么是闭包？
通俗的讲，闭包是就是函数中的函数，里面的函数可以访问外面函数的变量，外面的变量的是这个内部函数的一部分。在模块化中，会使用到闭包，可以避免变量的全局污染，不能滥用，否则会导致内存泄露，影响网页的性能 

18、requestAnimationFrame
浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果
如：通过requestAnimationFrame()，JS动画能够和CSS动画/变换或SVG SMIL动画同步发生。另外，如果在一个浏览器标签页里运行一个动画，当这个标签页不可见时，浏览器会暂停它，这会减少CPU，内存的压力，节省电池电量。

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    // name has changed in Webkit
                                      window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) , timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    }
    if (!window.cancelAnimationFrame) {
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
    }
}());

demo向上滚动：

function funscroll()
        $("#info-position").css("top",scroll+"px");
       requestAnimationFrame(funscroll); 
    }

　　

 20.移动端动画卡顿优化：http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201412/293834.shtml

开启translateZ或 translate3d，用3D变形来开启GPU加速

如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：

 -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;   transform 属性不会触发浏览器的 repaint，而 left 和 top 则会一直触发 repaint，著作权归作者所有。
http://www.w3cplus.com/css3/introduction-to-hardware-acceleration-css-animations.html