function f1(){

　　　　var n=;

　　　　nAdd=function(){n+=}

　　　　function f2(){

　　　　　　alert(n);

　　　　}

　　　　return f2;

　　}

　　var result=f1();

　　result(); //

　　nAdd();

　　result(); // 1000

//nAdd前面没有使用var关键字，因此nAdd是一个全局变量

//nAdd的值是一个匿名函数，而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

function User(){

        //this = {};

        //this.constructor = User；

        this.name = "Vicfeel";

        this.age = ;

        //return this;

    }

    var user = new User();

、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

、属性和方法被加入到 this 引用的对象中。

、新创建的对象由 this 所引用，并且最后隐式的返回 this 。 

var obj  = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

 var count = ;

    var ulList = document.getElementById("list");

    //动态构建节点

    for(var i = count;i--;){

        var liDom = document.createElement('li');

        ulList.appendChild(liDom);

    }

    //绑定点击事件

    var liNode = ulList.getElementByTagName("li");

    liNode.onClick = function(e){

        if(e.target && e.target.nodeName.toUpperCase == "LI") {

            // li点击事件

        }

    }

res.writeHead(, {

    "Content-Type": "text/html; charset=UTF-8",

    "Access-Control-Allow-Origin":'http://localhost',

    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',

    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'

});

<script>

    function createJs(sUrl){

        var oScript = document.createElement('script');

        oScript.type = 'text/javascript';

        oScript.src = sUrl;

        document.getElementsByTagName('head')[].appendChild(oScript);

    }

    createJs('jsonp.js');

    box({

       'name': 'test'

    });

    function box(json){

        alert(json.name);

    }

</script>

<script>

    function testjsonp(data) {

       console.log(data.name); // 获取返回的结果

    }

</script>

<script>

    var _script = document.createElement('script');

    _script.type = "text/javascript";

    _script.src = "http://localhost:8888/jsonp?callback=testjsonp";

    document.head.appendChild(_script);

</script>

跨域的4种方式：

①通过动态添加script标签，然后指定callback函数，可以获取到传过来的json数据，这时候要自己写一个callback函数来处理数据；

②使用jquery封装好的getJson方法，传入不同域的url?callback=?,好处是不需要手动的插入script标签以及定义回掉函数。jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。

③通过设置window.domain来处理跨域，但是只适用于不同子域的框架间的交互。所以使用的时候可以用一个隐藏的iframe来做一个代理，让这个iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面。

④window.name是可以跨域的。window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右甚至更大的一个容量，具体取决于不同的浏览器，但一般是够用了。所以可以转化成字符串的数据都可以使用window.name来传递，比如json数据。

作者：毕安

链接：https://www.jianshu.com/p/0e9a0d460f64

來源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

    ()创建`XMLHttpRequest`对象,也就是创建一个异步调用对象.

    ()创建一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.

    ()设置响应`HTTP`请求状态变化的函数.

    ()发送`HTTP`请求.

    ()获取异步调用返回的数据.

    ()使用JavaScript和DOM实现局部刷新. 

    var xmlHttp = new XMLHttpRequest();

    xmlHttp.open('GET','demo.php','true');

    xmlHttp.send()

    xmlHttp.onreadystatechange = function(){

        if(xmlHttp.readyState ===  & xmlHttp.status === ){

        }

    }

function fn1() {

    var obj = {name: 'hanzichi', age: };

}

function fn2() {

    var obj = {name:'hanzichi', age: };

   return obj;

}

var a = fn1();

var b = fn2();

为简化用户使用提供技术支持（交互部分）

为多个浏览器兼容性提供支持

为提高用户浏览速度（浏览器性能）提供支持

为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持

为展示数据提供支持（数据接口）

前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。

    、实现界面交互

    、提升用户体验

    、有了Node.js，前端可以实现服务端的一些事情

参与项目，快速高质量完成实现效果图，精确到1px；

 与团队成员，UI设计，产品经理的沟通；

 做好的页面结构，页面重构和用户体验；

 处理hack，兼容、写出优美的代码格式；

 针对服务器的优化、拥抱最新前端技术。

.合并js、css文件，减少http请求
. 减少 DNS 查找 
. 避免重定向 
. 使用 Ajax 缓存 
. 延迟载入组件 
. 预先载入组件 
. 

• 减少dom操作，尽可能用变量替代不必要的dom操作

. 切分组件到多个域
. 最小化 iframe 的数量 
. 不要出现http  错误
11.压缩css、js文件，外部js、css文件放在最底下

栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。

队列先进先出，栈先进后出。

栈只允许在表尾一端进行插入和删除，而队列只允许在表尾一端进行插入，在表头一端进行删除

栈区（stack）—   由编译器自动分配释放   ，存放函数的参数值，局部变量的值等。

堆区（heap）   —   一般由程序员分配释放，   若程序员不释放，程序结束时可能由OS回收。

堆（数据结构）：堆可以被看成是一棵树，如：堆排序；

栈（数据结构）：一种先进后出的数据结构

(function( window, undefined ) {

         //用一个函数域包起来，就是所谓的沙箱

         //在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局

         //把当前沙箱需要的外部变量通过函数参数引入进来

         //只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数

        window.jQuery = window.$ = jQuery;

    })( window );

区别

.从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

.加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
@import虽然后被加载，却会在加载完毕后置于样式表顶部，最终渲染时自然会被下面的同名样式层叠。

.兼容性区别 @import是 CSS2. 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。 

.DOM可控性区别 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

    .id选择器（ # myid）

    .类选择器（.myclassname）

    .标签选择器（div, h1, p）

    .相邻选择器（h1 + p）

    .子选择器（ul > li）

    .后代选择器（li a）

    .通配符选择器（ * ）

    .属性选择器（a[rel = "external"]）

    .伪类选择器（a: hover, li:nth-child）

优先级为:!important > id > class > tag

、IE浏览器内核：Trident内核，也被称为IE内核；

、Chrome浏览器内核：Chromium内核 → Webkit内核 → Blink内核；

、Firefox浏览器内核：Gecko内核，也被称Firefox内核；

、Safari浏览器内核：Webkit内核；

、Opera浏览器内核：最初是自主研发的Presto内核，后跟随谷歌，从Webkit到Blink内核；

、360浏览器、猎豹浏览器内核：IE+Chrome双内核；

、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

、百度浏览器、世界之窗内核：IE内核；

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.

浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:;padding:;}来统一。

IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）

#box{ float:left; width:10px; margin:   100px;}

这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入

_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

渐进识别的方式，从总体中逐渐排除局部。 

  首先，巧妙的使用“\”这一标记，将IE游览器从所有情况中分离出来。

  接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

  css

      .bb{

       background-color:#f1ee18;/*所有识别*/

      .background-color:#00deff\; /*IE6、7、8识别*/

      +background-color:#a200ff;/*IE6、7识别*/

      _background-color:#1e0bd1;/*IE6识别*/

      } 

怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发

怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在

可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推荐的写法：`<doctype html>

.使用空标签清除浮动。

   这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

.使用overflow。

   给包含浮动元素的父标签添加css属性 overflow:auto; zoom:; zoom:1用于兼容IE6。

.使用after伪对象清除浮动。

   该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:，否则该元素会比实际高出若干像素；

29、JS中IE的几种兼容性写法？CSS中兼容性写法？IE与其他浏览器有哪些不同？

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

//CSS兼容性写法

-webkit- ，针对safari，chrome浏览器的内核CSS写法

-moz-，针对firefox浏览器的内核CSS写法

-ms-，针对ie内核的CSS写法

-o-，针对Opera内核的CSS写法

IE支持currentStyle，FIrefox使用getComputStyle

IE 使用innerText，Firefox使用textContent

滤镜方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num

事件方面：IE：attachEvent：火狐是addEventListener

鼠标位置：IE是event.clientX；火狐是event.pageX

IE使用event.srcElement；Firefox使用event.target

IE中消除list的原点仅需margin:0即可达到最终效果；FIrefox需要设置margin:;padding:0以及list-style:none

CSS圆角：ie7以下不支持圆角

30、说一下zoom:1的原理

参考：说一下zoom:1的原理，万一被问到呢？

31、get和post的区别？何时使用POST？

    GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符

    POST：一般用于修改服务器上的资源，对所发送的信息没有限制。 

    GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，

    也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。 

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

32、ajax如何解释json数据？

33、js继承方式及其优缺点

原型链继承的缺点：一是字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。
借用构造函数（类式继承）

javascript继承的6种方法

面向对象的基本特征有：封闭、继承、多态。

，原型链继承

，借用构造函数继承

，组合继承(原型+借用构造)

，原型式继承

，寄生式继承

，寄生组合式继承

34.什么是哈希表？

散列表（也叫哈希表），是根据关键码值直接进行访问的数据结构。也就是说，它通过把关键码值映射到表中一个位置来访问记录，以加快查找的速度。这个映射函数叫做散列函数，存放记录的数组叫做散列表。

35、什么是事件冒泡和默认事件？如何阻止？

 . 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。

 . 事件处理机制：IE是事件冒泡、firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件。；

//阻止事件冒泡

 `ev.stopPropagation()`;注意旧ie的方法 `ev.cancelBubble = true`;

36、javascript的本地对象/原生对象、内置对象和宿主对象？

原生对象

ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。

“本地对象”包含哪些内容：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。

由此可以看出，简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。

内置对象

ECMA-262 把内置对象（built-in object）定义为“由 ECMAScript 实现提供的、独立于宿主环境的所有对象，在 ECMAScript 程序开始执行时出现”。这意味着开发者不必明确实例化内置对象，它已被实例化了。

同样是“独立于宿主环境”。根据定义我们似乎很难分清“内置对象”与“本地对象”的区别。而ECMA-262 只定义了两个内置对象，即 Global 和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象）。如此就可以理解了。内置对象是本地对象的一种。

宿主对象

何为“宿主对象”？主要在这个“宿主”的概念上，ECMAScript中的“宿主”当然就是我们网页的运行环境，即“操作系统”和“浏览器”。

所有非本地对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象。所有的BOM和DOM都是宿主对象。因为其对于不同的“宿主”环境所展示的内容不同。其实说白了就是，ECMAScript官方未定义的对象都属于宿主对象，因为其未定义的对象大多数是自己通过ECMAScript程序创建的对象。

37、Document.onload与ready的区别？

共同点：这两种事件都代表的是页面文档加载时触发。

异同点：

ready 事件的触发，表示文档结构已经加载完成（不包含图片等非文字媒体文件）。

onload 事件的触发，表示页面包含图片等文件在内的所有元素都加载完成。

38、javascript的同源策略

CSS3实现圆角（border-radius），阴影（box-shadow），

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的CSS选择器  多背景 rgba

在CSS3中唯一引入的伪元素是::selection.

媒体查询，多栏布局

border-image

）<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。

）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

.所有的标记都必须要有一个相应的结束标记

.所有标签的元素和属性的名字都必须使用小写

.所有的XML标记都必须合理嵌套

.所有的属性必须用引号""括起来

.把所有<和&特殊符号用编码表示

.给所有属性赋一个值

.不要在注释内容中使“--”

.图片必须有说明文字

      createDocumentFragment()    //创建一个DOM片段

      createElement()   //创建一个具体的元素

      createTextNode()   //创建一个文本节点

//添加、移除、替换、插入

     appendChild()

      removeChild()

      replaceChild()

      insertBefore() //并没有insertAfter()

//查找

     getElementsByTagName()    //通过标签名称

      getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

      getElementById()    //通过元素Id，唯一性    

  HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

  拖拽释放(Drag and drop) API

  语义化更好的内容标签（header,nav,footer,aside,article,section）

  音频、视频API(audio,video)

  画布(Canvas) API

  地理(Geolocation) API

  本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

  sessionStorage 的数据在浏览器关闭后自动删除 

  表单控件，calendar、date、time、email、url、search

  新的技术webworker, websocket, Geolocation

//移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

//支持HTML5新标签：

IE8/IE7/IE6支持通过document.createElement方法产生的标签，

    可以利用这一特性让这些浏览器支持HTML5新标签，当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

       <!--[if lt IE ]>

       <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

       <![endif]-->

用来初始化一个变量，这个变量可能被赋值为一个对象。

用来和一个已经初始化的变量比较，这个变量可以是也可以不是一个对象。

当函数的参数期望是对象时，被用作参数传入。

当函数的返回值期望是对象时，被用作返回值传出。

作为对象原型链的终点。 

undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

变量被声明了，但没有赋值时，就等于undefined。

调用函数时，应该提供的参数没有提供，该参数等于undefined。

对象没有赋值的属性，该属性的值为undefined。

函数没有返回值时，默认返回undefined。

.异步加载的方案： 动态插入script标签

.通过ajax去获取js代码，然后通过eval执行

.script标签上添加defer或者async属性

.创建并插入iframe，让它异步执行js

.延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。

<div id="myDiv">

    <input type="button" value="Click me" id="myBtn">

</div>

<script type="text/javascript">

    var btn = document.getElementById("myBtn");

    btn.onclick = function(){

        document.getElementById("myDiv").innerHTML = "Processing...";

    }

</script>

<div id="myDiv">

    <input type="button" value="Click me" id="myBtn">

</div>

<script type="text/javascript">

    var btn = document.getElementById("myBtn");

    btn.onclick = function(){

    btn.onclick = null;

        document.getElementById("myDiv").innerHTML = "Processing...";

    }

</script>

function bindEvent(){

    var obj=document.createElement("XXX");

    obj.onclick=function(){

        //Even if it's a empty function

    }

}

解决方法如下：

function bindEvent(){

    var obj=document.createElement("XXX");

    obj.onclick=function(){

         //Even if it's a empty function

    }

    obj=null;

}

 setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

分为4个步骤：

    （）当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。

    （）浏览器与远程`Web`服务器通过`TCP`三次握手协商来建立一个`TCP/IP`连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

    （）一旦`TCP/IP`连接建立，浏览器会通过该连接向远程服务器发送`HTTP`的`GET`请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。

    （）此时，`Web`服务器提供资源服务，客户端开始下载资源。

请求返回后，便进入了我们关注的前端模块

简单来说，浏览器会解析`HTML`生成`DOM Tree`，其次会根据CSS生成CSS Rule Tree，而`javascript`又可以根据`DOM API`操作`DOM`

，工厂模式

，构造函数模式

，原型模式

，混合构造函数和原型模式

，动态原型模式

，寄生构造函数模式

，稳妥构造函数模式

IE6 两个并发，iE7升级之后的6个并发，之后版本也是6个

Firefox，chrome也是6个

  //ajax的缺点

  、ajax不支持浏览器back按钮。

  、安全问题 AJAX暴露了与服务器交互的细节。

  、对搜索引擎的支持比较弱。

  、破坏了程序的异常机制。

  、不容易调试。

//IE缓存问题

/*在IE浏览器下，如果请求的方法是GET，并且请求的URL不变，那么这个请求的结果就会被缓存。解决这个问题的办法可以通过实时改变请求的URL，只要URL改变，就不会被缓存，

可以通过在URL末尾添加上随机的时间戳参数('t'= + new Date().getTime())

或者：*/

open('GET','demo.php?rand=+Math.random()',true);

//Ajax请求的页面历史记录状态问题

可以通过锚点来记录状态，location.hash。让浏览器记录Ajax请求时页面状态的变化。

还可以通过HTML5的history.pushState，来实现浏览器地址栏的无刷新改变

对于传统的网站来说重构通常是：

表格(table)布局改为DIV+CSS

使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)

对于移动平台的优化

针对于SEO进行优化

深层次的网站重构应该考虑的方面 

减少代码间的耦合

让代码保持弹性

严格按规范编写代码

设计可扩展的API

代替旧有的框架、语言(如VB)

增强用户体验

通常来说对于速度的优化也包含在重构中 

压缩JS、CSS、image等前端资源(通常是由服务器来解决)

程序的性能优化(如数据读写)

采用CDN来加速资源加载

对于JS DOM的优化

HTTP服务器的文件缓存

var promise = new Promise(function(resolve, reject) {

        if (...) {  // succeed

            resolve(result);

        } else {   // fails

            reject(Error(errMessage));

        }

    });

promise.then(onFulfilled, onRejected)

变量必须声明后再使用

函数的参数不能有同名属性，否则报错

不能使用with语句

不能对只读属性赋值，否则报错

不能使用前缀0表示八进制数，否则报错

不能删除不可删除的属性，否则报错

不能删除变量delete prop，会报错，只能删除属性delete global[prop]

eval不会在它的外层作用域引入变量

eval和arguments不能被重新赋值

arguments不会自动反映函数参数的变化

不能使用arguments.callee

不能使用arguments.caller

禁止this指向全局对象

不能使用fn.caller和fn.arguments获取函数调用的堆栈

增加了保留字（比如protected、static和interface）

物理层：通过媒介传输比特,确定机械及电气规范（比特Bit）

数据链路层：将比特组装成帧和点到点的传递（帧Frame）

网络层：负责数据包从源到宿的传递和网际互连（包PackeT）

传输层：提供端到端的可靠报文传递和错误恢复（段Segment）

会话层：建立、管理和终止会话（会话协议数据单元SPDU）

表示层：对数据进行翻译、加密和压缩（表示协议数据单元PPDU）

应用层：允许访问OSI环境的手段（应用协议数据单元APDU）

a instanceof b?alert("true"):alert("false"); //a是b的实例？真:假

var a = new Array();

alert(a instanceof Array);  // true

alert(a instanceof Object)  // true

//如上，会返回 true，同时 alert(a instanceof Object) 也会返回 true;这是因为 Array 是 object 的子类。

function test(){};

var a = new test();

alert(a instanceof test)   // true

if (window instanceof Object){ alert('Y')} else {  alert('N');}  // 'N'

7、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。

图像格式的区别：

矢量图：图标字体，如 font-awesome；svg

位图：gif,jpg(jpeg),png

区别：

　　1、gif:是是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。

　　2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo,各种小图标icons等。

　　3、png:PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。

关于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明;

优缺点：

　　1、能在保证最不失真的情况下尽可能压缩图像文件的大小。

　　2、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

72、浏览器是如何渲染页面的？

渲染的流程如下：

1.解析HTML文件，创建DOM树。

自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

3.将CSS与DOM合并，构建渲染树（Render Tree）

4.布局和绘制，重绘（repaint）和重排（reflow）

73、解释“JavaScript模块模式”以及你在何时使用它。你是如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？

 如果有提到无污染的命名空间，可以考虑加分。

如果你的模块没有自己的命名空间会怎么样？ 
请看文章-JavaScript之模块化编程 和JavaScript之命名空间模式 浅析

请看文章-JavaScript之模块化编程和Javascript之对象的继承

74、说说你对语义化的理解？

1.去掉或样式丢失的时候能让页面呈现清晰的结构：html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。

3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）。

4.有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。

5.便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

75、为什么利用多个域名来提供网站资源会更有效？

.CDN缓存更方便

.突破浏览器并发限制（一般每个域名建立的链接不超过6个）

.Cookieless，节省带宽，尤其是上行带宽一般比下行要慢

.对于UGC的内容和主站隔离，防止不必要的安全问题(上传js窃取主站cookie之类的)。正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。

.数据做了划分，甚至切到了不同的物理集群，通过子域名来分流比较省事。这个可能被用的不多。

PS:关于Cookie的问题，带宽是次要的，安全隔离才是主要的。关于多域名，也不是越多越好，虽然服务器端可以做泛解释，浏览器做dns解释也是耗时间的，而且太多域名，如果要走https的话，还有要多买证书和部署的问题。

76、如果你参与到一个项目中，发现他们使用Tab来缩进代码，但是你喜欢空格，你会怎么做？

建议这个项目使用像EditorConfig(http://editorconfig.org/)之类的规范 
为了保持一致性，接受项目原有的风格 
直接使用VIM的retab命令

77、你都使用哪些工具来测试代码的性能？

Profiler,JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）,Dromaeo。

78、请谈一下你对网页标准和标准制定机构重要性的理解。

w3c存在的意义就是让浏览器兼容性问题尽量小，首先是他们对浏览器开发者的约束，然后是对开发者的约束。

79、什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？

FOUC(Flash Of Unstyled Content)–文档样式闪烁

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。解决方法简单的出奇，只要在之间加入一个或者<script>元素就可以了。

80、如果网页内容需要支持多语言，你会怎么做？

下面这些问题需要考虑：

• 应用字符集的选择，选择UTF-8编码

• 语言书写习惯&导航结构

• 数据库驱动型网站

81、data-属性的作用是什么？

data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性包括两部分：

• 属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符

• 属性值可以是任意字符串

82、如果把HTML5看作做一个开放平台，那它的构建模块有哪些？

<nav>,<header>,<section>,<footer>等。

83、请描述一下cookies，sessionStorage和localStorage的区别？

sessionStorage和localStorage是HTML5 Web Storage API提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的cookies会发送到服务器端。其余两个不会。Microsoft指出InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。

• Firefox每个域名cookie限制为50个。

• Opera每个域名cookie限制为30个。

• Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号。

• Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号。

• InternetExplorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。

84.解释下CSS sprites，以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

85.你最喜欢的图片替换方法是什么，你如何选择使用。

<h2><span图片丢这里></span>Hello World</h2>

把span背景设成文字内容，这样又可以保证seo，也有图片的效果在上面。一般都是：alt，title，onerror。

86.讨论CSS hacks，条件引用或者其他。

各个浏览器都认识，这里给firefox用；

\9所有的ie浏览器可识别；

\0是留给ie8的+background-color:pink;+ie7定了；

__专门留给神奇的ie6；:root#test{background-color:purple\9;}:root是给ie9的，

@media all and(min-width:0px){#test{}}这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。

@media screen and(-webkit-min-device-pixel-ratio:0){#test{}}最后这个是浏览器新贵chrome和safari的。

87.如何为有功能限制的浏览器提供网页？你会使用哪些技术和处理方法？

88.你用过媒体查询，或针对移动端的布局/CSS吗？

媒体查询，就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。

语法结构及用法：@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}。

示例如下：

/* 当浏览器的可视区域小于980px */

 @media screen and （max-width： 980px） {

 #wrap {width： %; margin: auto;}

 #content {width： %;padding： %;}

 #sidebar {width： %;}

 #footer {padding： % %;margin-bottom： 10px;}

 }

 /* 当浏览器的可视区域小于650px */

 @media screen and （max-width： 650px） {

#header {height： auto;}

#searchform {position： absolute;top： 5px;right： ;}

#content {width： auto; float： none; margin： 20px ;}

#sidebar {width： %; float： none; margin： ;}

}

89.请罗列出你所知道的display属性的全部值。

CSS display 属性

90.如何优化网页的打印样式？

<link rel = "stylesheet" type = "text/css" media = "screen" href = "xxx.css"/>

其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。打印样式示例如下：

<link rel = "stylesheet" type = "text/css" media = "print" href = "yyy.css"/>

但打印样式表也应注意以下事项：

打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。

最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。

隐藏掉不必要的内容。（@print div{display:none;}）

打印样式表中最好少用浮动属性，因为它们会消失。如果想要知道打印样式表的效果如何，直接在浏览器上选择打印预览就可以了。

91.在书写高效CSS时会有哪些问题需要考虑？

• 1.样式是：从右向左的解析一个选择器；

• 2.ID最快，Universal最慢有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal ；

• 3.不要tag-qualify（永远不要这样做ul#main-navigation{}ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。）；

• 4.后代选择器最糟糕（换句话说，下面这个选择器是很低效的：html body ul li a{}）；

• 5.想清楚你为什么这样写；

• 6.CSS3的效率问题（CSS3选择器（比如:nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。）；

• 7.我们知道#ID速度是最快的，那么我们都用ID，是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性。

92.如果设计中使用了非标准的字体，你该如何去实现？

所谓的标准字体是多数机器上都会有的，或者即使没有也可以由默认字体替代的字体。

方法：

• 用图片代替

• web fonts在线字库，如Google Webfonts，Typekit等等；http://www.chinaz.com/free/2012/0815/269267.shtml；

• @font-face，Webfonts(字体服务例如：Google Webfonts，Typekit等等。)

93.解释下浏览器是如何判断元素是否匹配某个CSS选择器？

从后往前判断。浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。举个例子，有选择器：

body.ready#wrapper>.lol233

先把所有class中有lol233的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，如果元素的parent id不为#wrapper则把元素从集合中删去。再向上，从这个元素的父元素开始向上找，没有找到一个tagName为body且class中有ready的元素，就把原来的元素从集合中删去。至此这个选择器匹配结束，所有还在集合中的元素满足。大体就是这样，不过浏览器还会有一些奇怪的优化。为什么从后往前匹配因为效率和文档流的解析方向。效率不必说，找元素的父亲和之前的兄弟比遍历所哟儿子快而且方便。关于文档流的解析方向，是因为现在的CSS，一个元素只要确定了这个元素在文档流之前出现过的所有元素，就能确定他的匹配情况。应用在即使html没有载入完成，浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。为什么是用集合主要也还是效率。基于CSS Rule数量远远小于元素数量的假设和索引的运用，遍历每一条CSS Rule通过集合筛选，比遍历每一个元素再遍历每一条Rule匹配要快得多。

94、描述一种JavaScript中实现memoization(避免重复运算)的策略