• 购书
• 免费资源
• 博客
• 课程
• 在线帮助
• 目标
...

什么是前端单点故障？

简单理解,即因为某个静态资源(js,css,@font-face自定义字体)加载失败或者阻塞请求,导致页面主体非正常渲染.

出现的症状：页面空白

HTML文档已经加载完毕，但其他资源例如（CSS,JS,字体文件）等加载出现了阻塞，导致页面空白等待的时间。

出现的最主要原因：第三方资源

前端SPOF最频繁出现的原因是第三方内容，如果主站成功返回HTML文档，从主站返回的其他相关资源应该都成功返回，但第三方内容往往不是由主站控制，因此会出现不可预期的错误，所以一个网站的第三方资源不应该在主站资源之前被加载，这将有可能引起前端SPOF。

严格模式的好处

启用严格模式有以下好处：

1. 捕获一些编程错误，并抛出异常。
2. 阻止进行一些相对“不安全”的操作（例如访问全局变量），抛出异常。
3. 禁用一些让人迷惑的特性。

启用严格模式，需要从下面两个方面来做限制（检查）

1. 语法解析阶段：如果在语法检测时发现语法问题，则整个代码块失效，并导致一个语法异常。
...

用惯了jQuery的获取元素的高度（$('#camnprID').height();$('#camnprID').innerHeight();$('#camnprID').outerHeight();），那么js原生怎么获取高度呢？ 我们用到了javascript的offsetHeight属性。 offsetHeight, offsetWidth

返回元素的高度和宽度，以像素为单位。这是非标准的但却得到很好支持的属性。 类型：int。状态：只读。

简单的说，SourceMap是为了压缩后的代码的调试提供方便。 比如：你在项目中引用了jquery.min.js（压缩后的代码），当有个js错误，我们通过控制台显示是第一行出差了，然而第一行有上万个字符，但是，浏览器的错误提示就是在第一行错了，晕，鬼知道第一行哪里错了，这种错误提示就是无意义的了。 纵使，你费了九牛二虎之力，找到错误端，比如：

getJSON:function(e,t,n){return b.get(e,t,n,"json")}

Chrome(版本 25.0.1364.172 m)下的console对象的方法有：

memory profiles _commandLineAPI debug error info log warn dir dirxml trace assert count markTimeline profile profileEnd time timeEnd timeStamp group groupCollapsed groupEnd clear

...

jquery.flip介绍：

Flip!是一个能够让任意HTML、文本或jQuery Element产生漂亮翻转效果的jQuery插件。可以配置翻转方向：从右到左、上到下或从左到右、下到上。翻转的速度也可以配置。
...

var html = '<div>dom</div>', body.innerHTML=html; 和 var div = document.createElement('div'), txt = document.createTextNode('dom'); div.appendChild(txt); 哪种方式好？

关于代码的优化，有时候要针对不同的浏览器。 上边innerHTML和appendChild哪个好呢？
...

在判断当前浏览器是否IE的方法很多，比如下边放到if条件里边都可以说明是ie浏览器，
!-[1,] window.VBArray window.ActiveXObject window.attachEvent 等等，基本都是利用ie的奇葩（因为其它主流浏览器都很正统:-)）

应用例子JS代码如下：

...

先看radio/checkbox效果对比:

下边贴出源码，实现的原理很简单，就是，先隐藏input[type=radio/checkbox]，然后2中状态图片的切换，同时触发值得改变。