michael8512的博客

(1) 数据体积方面 JSON相对于XML来讲，数据的体积小，传递的速度更快些。 (2) 数据交互方面JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。 (3) 数据描述方面 JSON对数据的描述性比XML较差。  (4) 传输速度方面 JSON的速度要远远快于XML。

1、概述：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么原理： 有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口

1、MVCView 传送指令到 ControllerController 完成业务逻辑后，要求 Model 改变状态Model 将新的数据发送到 View，用户得到反馈所有的通信都是单向的。2、MVVCView：UI界面  ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model

IE6：2个；IE7：4个；IE8+：6个FireFox，Chrome：6个。补充：同一时间针对同一域名下的请求有一定数量限制，超过限制数目的请求会被阻塞。大多数浏览器的并发数量都控制在6以内。有些资源的请求时间很长，因而会阻塞其他资源的请求。因此，对于一些静态资源，如果放到不同的域名下面就能实现与其他资源的并发请求。

详细版1、浏览器会开启一个线程来处理这个请求，对URL 分析判断如果是 http 协议就按照 Web 方式来处理;2、调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;3、通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;4、进行HTTP协议会话，客户端发送报头(请求报头);5、进入到web服务器上的 We

1）IE支持currentStyle，Firefox使用getComputStyle;2）IE使用innerText，FireFox使用textContent；3）滤镜方面：IE：filter:alpha(opacity= num)；Firefox：-moz-opacity:num；4）事件方面：IE：attachEvent：火狐是addEventListene

1、创建了一个空对象，并且this变量引用该对象，同时还继承了该函数；2、属性和方法被加入到this引用的对象中；3、新创建的对象由this所引用，并且最后隐式的返回this。var obj={};obj.__proto__=Base.prototype;Base.call(obj);

1、defer: 只支持IE1）defer 属性规定是否对脚本执行进行延迟，直到页面加载为止；2）并行加载js文件，会按照页面上script标签的顺序执行。2、async并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序执行。注释：有多种执行外部脚本的方法： 1）如果 async="async"：脚本相对于页面的其余部分异步地执行（当页

网页制作中常用的图片格式包括：png-2, png-8, jpeg, gif, svg等目前流行的新格式包括WebP和Apng1. WebP——谷歌于2010年提出WebP 在各大互联网公司已经使用得很多了，国外的有 Google（自家的东西肯定要用啦，Chrome Store 甚至已全站使用 WebP）、Facebook 和 ebay，国内的有淘宝、腾讯和美团等。优势

XHTML是XML重写了HTML的规范，比HTML更加严格，表现如下：1、XHTML中所有的标记都必须有一个相应的结束标签；2、XHTML所有标签的元素和属性的名字都必须使用小写；3、所有的XML标记都必须合理嵌套；4、所有的属性都必须用引号“”括起来；5、把所有6、给所有属性附一个值；7、不要在注释内容中使用“--”；8、图片必须使用说明文字。

1、选择符：1）id选择器（#myid）2）类选择器（.myclass）3）标签选择器（div，h1，p）4）相邻选择器（h1+p）5）子选择器（ul>li）6）后代选择器（li a）7）通配符选择器（*）8）属性选择器（a[rel="external"]）9）伪类选择器（a：hover，li：nth-child）2、样式继承1）可以继承的样式：

1、去掉或者丢失样式的时候能够让页面呈现出清晰的结构；2、有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；3、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；4、便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减

1. 双倍边距问题问题：IE6中使用了float的情况下，无论是left还是right，都会出现双倍编剧的问题；解决方法：设置display：inline2. 文字大小不兼容问题：文字本身的大小不兼容。同样是font-size：14px的宋体文字，在不同浏览器下占的空间不一样，在IE下实际占14px，下留白3px；在fireFox下实际占高17px，上留白1px，下留白3p

在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是「见机行事」，根据原因的不同要用不同的解决方法，这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳， 供大家参考。1、将图片转换为块级对像即设置img为：display：block；在本例中

Etag由服务器端生成，客户端通过If-Match或者说If-None-Match这个条件判断请求来验证资源是否修改。常见的是使用If-None-Match。Etag的作用：主要为了解决 Last-Modified 无法解决的一些问题。请求流程如下：当发送一个服务器请求时，浏览器首先会进行缓存过期判断。浏览器根据缓存过期时间判断缓存文件是否过期。情景一：

1）前端界面是公司产品和数据的接口，为展示公司的数据和产品提供支持（数据接口）；2）与用户最接近，以最直观可见的方式展示公司网站和公司形象；3）网站前端性能优化（浏览器性能），节省用户成本，节省公司成本；4）为简化用户使用提供技术支持（交互部分）；5）为多个浏览器兼容性提供支持；6）为跨平台或者基于webkit或其他渲染引擎的应用提供技术

1、AMD1）来源：是 RequireJS 在推广过程中对模块定义的规范化产出2）执行顺序：提前执行2、CMD1）来源：是 SeaJS 在推广过程中对模块定义的规范化产出2）执行顺序：延迟执行

1、HTTP1）协议：HTTP协议运行在TCP之上。2）内容：明文，客户端和服务器端都无法验证对方的身份。  3）端口：804）SEO：无影响5）其他：无状态的链接2、HTTPS1）协议：HTTP运行在SSL/TLS之上，SSL/TLS（添加的安全协议）运行在TCP之上（SSL+HTTP）。2）内容：加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进

1、Web Worker1）Web Worker 是运行在后台的 JavaScript、独立于其他脚本、不会影响页面的性能、您可以继续做任何愿意做的事情：点击、选取内容等等、而此时 Web Worker 在后台运行；2）除了DOM操作之外、理论上任何JS脚本任务都可放入worker中执行；3）不能跨域访问JS；4）从用户体验上看、提高了服务性能。5）使用：（1）new Wo

1、代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。2、缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等3、请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。4、请求带宽：压缩文件，开启GZIP。

应用层：应用层、表示层、会话层（从上往下）（HTTP、FTP、SMTP、DNS）传输层（TCP和UDP）网络层（IP）物理和数据链路层（以太网）每一层的作用如下：1）物理层：通过媒介传输比特，确定机械及电气规范（比特Bit） 2）数据链路层：将比特组装成帧和点到点的传递（帧Frame） 3）网络层：负责数据包从源到宿的传递和网际互连（包Packe

1、渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。2、优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

(1) 创建XMLHttpRequest对象，也就是创建一个异步调用对象；var xmlhttp;if (window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest();}else{ // IE6, IE5 浏览器执行代码 xmlhttp=n

什么是作用域链：当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain，不简称sc）来保证对执行环境有权访问的变量和函数的有序访问。作用：保证执行环境里有权访问的变量和函数是有序的。对象：作用域第一个对象始终是当前执行代码所在环境的变量对象，变量访问到window对象即被终止。访问方式：作用域链的变量只能向上访问，不允

什么是webpack？WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后

1）link属于HTML标签，而@import是CSS提供的；2）页面被加载的时，link会同时被加载，而使用@import引用的CSS会等到引用它的CSS文件被加载完再加载；3）@import只在IE5以上才能识别，而link是HTML标签，无兼容问题；4）link方式的样式的权重高于@import的权重。

cookie虽然在持久保持客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限。1、IE6或更低版本最多20个cookie；2、IE7和之后的版本最后可以有50个cookie；3、Firefox最多50个cookie；4、chrome和Safari没有做硬性限制；5、IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie；6、co

function a(){ var i=0; function b(){ console.log(i++) } return b;}var c=a();//这里执行了函数a，返回函数b，因此c为函数bc();//0，这里调用了函数bc();//1，因为i仍然保存在a中，而函数b保持着对i的引用，因此i在内存中的栈去依然保留

jQuery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入window对象参数，可以使window对象作为局部变量使用，好处是当jquery中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象。同样，传入undefined参数，可以缩短查找undefined时的作用域链。(function( window, unde

1、堆和栈1）堆（完全二叉树，可以看成一棵树的数组对象）是指程序运行时申请的动态内存，而栈只是指一种使用堆的方法(即先进后出)；2）堆是在程序运行时，而不是在程序编译时，申请某个大小的内存空间；3）栈区由编译器自动分配释放，堆区由程序员分配释放；2、栈和队列1）栈的插入和删除操作都是在一端进行的（只允许在表尾进行插入和删除），而队列的操作却是在两端进行的（在表尾插入，表

absolute：生成绝对定位的元素， 相对于最近一级的定位不是 static 的父元素来进行定位。fixed：（老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。relative：生成相对定位的元素，相对于其在普通流中的位置进行定位。static： 默认值。没有定位，元素出现在正常的流中sticky：生成粘性定位的元素

排序算法的稳定性，通俗地讲就是能保证排序前2个相等的数其在序列的前后位置顺序和排序后它们两个的前后位置顺序相同。例如，如果Ai=Aj，原来在位置前，排序后Ai还是要在Aj位置前。稳定排序：冒泡、插入、归并、基数；不稳定：选择、快速、希尔、堆1）冒泡排序冒泡排序就是把小的元素往前调或者把大的元素往后调。比较是相邻的两个元素比较，交换也发生在这两个元素之间。所以，如果两个元素相等，我想

两者的触发事件可以认为是一致的，没有明确的先后顺序。1. 这里的dom ready指的是dom元素都已经被解析。只有dom树渲染完毕后，才会有元素，不然就会一片空白，而影响dom ready的因素也有很多，才会有那么多的性能化策略。2. 另一方面，在解析script时，dom加载会被阻塞。假如在dom加载之前出现alert提示框，在关闭提示框之前，页面都是一片空白。

从XHTML标准的定义来说，不论是a还是span的内部都是不能放快元素的。在h4的任何doctype声明下，都不允许a嵌套div，而html5的doctype声明下允许a嵌套div。xhtml strict下 ，在没有额外css的描述下，内联元素完全无法嵌套块级元素。xhtml Transitional下面 ，这种嵌套被接受 ，但是具体的表现行为被浏览器所解释。事实上 一个标签的默认属

1. title: 为元素提供额外说明信息例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。2. alt: 指定替换文字只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。根据一些SEO人士的说法，使用alt属性还具有搜索

方法1： localStorage:localStorage在一个标签页面里面被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里监听storage事件，即可得到localStorage存储的值，实现不同标签页之间的通讯。标签页1： $(function(){ $("#btn").click(function(){

浏览器内核就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也不同，因此同一个网页在不同内核的浏览器中的渲染效果不同。这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。浏览器的内核分为两个部分，一是渲染引擎，另一个js引擎。但是，现在的js引擎比较独立，内核更倾向于

src用于替换当前的元素，href用于在当前文档和引用资源之间建立联系。1）srcsrc是souce的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置。请求时，会将该资源下载并应用到文档内，例如js脚本，img图片和iframe等元素。当浏览器解析到该元素时，浏览器会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指

缺点：1）iframe会阻塞主页面的Onload事件；2）搜索引擎的检索程序无法解读这种页面，不利于SEO；3）iframe和主页面共享连续池，而浏览器对相同域的链接有限制，所以会影响页面的并行加载；使用注意事项：1）最好通过javascript使用iframe；2）动态给iframe添加src属性值。

边界叠加简介边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。  1）元素的顶边界与前面元素的底边界发生叠加当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，如图：2）元素的顶边界与父元素的顶边界发生叠加当一个元素包含在另一个元素中...