前端面试资料整理

创建对象的方式

（1）使用new关键字

var start = new Object;

（2）使用花括号

var start = {};

创建类

ES6之前使用function关键字模拟：function Person(){};

ES6中类的创建方式：class Person{}

异步传输实现方式：

（1）ajax

（2）iframe(加上target)实现

JavaScript 中应该用 “==” 还是 “===”

绝大多数场合应该使用 === ，只有检测 null/undefined 的时候可以使用 x == null

javascript的typeof返回哪些数据类型

Object number function boolean underfind

例举3种强制类型转换和2种隐式类型转换?

强制（parseInt,parseFloat,number）

隐式（== – ===）

split() join() 的区别

前者是切割成数组的形式，后者是将数组转换成字符串

数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除

Unshift()头部添加 shift()头部删除

slice

（1）slice() 方法可从已有的数组中返回选定的元素。

（2）slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

注意： slice() 方法不会改变原始数组。

sort

sort() 方法用于对数组的元素进行排序。按字母顺序值排序；

call和apply的区别

apply：应用某一对象的一个方法，用另一个对象替换当前对象。

call：调用一个对象的一个方法，以另一个对象替换当前对象。

apply：最多只能有两个参数——新this对象和一个数组 argArray。

call：则是直接的参数列表，主要用在js对象各方法互相调用的时候，使当前this实例指针保持一致,或在特殊情况下需要改变this指针。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

apply和call功能一样，只是传入的参数列表形式不同：

apply的写法：func.apply(func1,[var1,var2,var3])

call的写法：func.call(func1,var1,var2,var3)

substring和substr的区别

var v1 = 'Hello World';
//如果只是写一个参数，两者的作用都是一样的：就是截取字符串当前下标以后直到字符串最后的字符串片段。
console.log(v1.substring(1));   //ello World
console.log(v1.substr(1));      //ello World

console.log('**********************************');

// 当写第二个参数的时候，两者就会有完全不同的含义；
// substring(a,b)
// 第二个参数是截取到字符串最终的下标(实际截取位置是1-7)
console.log(v1.substring(1,8));      //ello Wo
// substr(a,b)
// 第二个参数是截取字符串的长度(实际截取8个字符长度值)
console.log(v1.substr(1,8));        //ello Wor

事件委托是什么

利用事件冒泡的原理，自己所触发的事件，让他的父元素代替执行！

Javascript的事件流模型都有什么？

(1).冒泡型事件：指事件按照从最精确的对象到最不精确的对象的顺序逐一触发

(2).捕获型事件：它与冒泡型事件相反，指事件按照从最不精确到最精确的对象的顺序逐一触发

JS对象与JSON格式的互相转换

①JSON的解析（json数据转换成JS对象）：

var myObject=JSON.parse(myJSONtext)；

②JSON的序列化（JS对象转换成JSON数据）：

var myJSONtext=JSON.stringify(myObject)；

列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个

对象：Window location screen history navigator

方法：Alert() confirm() prompt() open() close()

documen.write和 innerHTML 的区别？

document.write 只能重绘整个页面；innerHTML 可以重绘页面的一部分

闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数，或者定义在一个函数内部的函数。

闭包的好处：

（1）不增加额外的全局变量；

（2）执行过程中所有变量都在匿名函数内部

闭包的坏处：

（1）内存消耗大，会影响网页的性能

（2）会改变父函数内部变量的值

如何阻止事件冒泡和默认事件

阻止事件冒泡：w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true;

阻止默认事件：w3c的方法是e.preventDefault()，IE则是使用return false;

HTTP状态码知道哪些？

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

　　200 正常返回信息

　　201 请求成功并且服务器创建了新的资源

　　202 服务器已接受请求，但尚未处理

　　301 请求的网页已永久移动到新位置。

　　302 临时性重定向。

　　303 临时性重定向，且总是使用 GET 请求新的 URI。

　　304 自从上次请求后，请求的网页未修改过。

　　400 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。

　　401 请求未授权。

　　403 禁止访问。

　　404 找不到如何与 URI 相匹配的资源。

　　500 最常见的服务器端错误。

　　503 服务器端暂时无法处理请求（可能是过载或维护）。

JS的原型和原型链

（1）原型和原型链是JS实现继承的一种模型；

（2）原型链的形成依靠 * _proto_ *而不是prototype

（3）在js中每一个对象都可以看成是一个原型对象，通过proto可以把所有原型对象串联成一条原型链；

cookies、localStorage、sessionStorage的理解

localStorage：长期存储数据。浏览器关闭不丢失；

sessionStorage：存储的数据在浏览器关闭后删除；

cookies：保存的数据在浏览器和服务器之间传递，数据是加密的；存储数据大小是4k;

localStorage、sessionStorage保存的数据在本地，存储数据大小是5M;

作用域

指对某一属性（变量）或者方法（函数）具有访问权限的代码空间，在JS中作用域在函数中进行维护；

this在js中（当前对象）是一个依赖于使用它的执行环境中被解析的关键字；

input输入框提示信息

<input type="text" placeholder="请输入信息"/>
<input type="text" placeholder="请输入信息" onfocus="if(value=='请输入信息'){value=''}" onblur="if(value==''){value='请输入信息'}"/>

第一种情况只有IE10以上版本才会提示请输入信息，第二种placeholder+onfocus+onblur可以兼容到IE7

HTML中href、src区别

<link href="reset.css" rel=”stylesheet“/>
<script src="script.js"></script>

src用于替换当前元素；href用于在当前文档和引用资源之间建立联系

window对象的常用方法

prompt

alert

confirm

open

close

setTimeout

setInterval

js内置对象：

Data、Math、Array、String、Number、Boolean、function

JQuery中的选择器

JQuery中的选择器分为：基本选择器、层次选择器、过滤选择器、属性过滤选择器、表单选择器

基本选择器：

ID选择器:$(ID)

Class选择器：$(className)

通
150f3
配符选择器：$(“*”)

层次选择器

$(“body div”)

$(“body > div”)

$(“body + div”)

$(“body ~ div”)

过滤选择器

$(“div:first”) $(“div:last”)

$(“div:even”) $(“div:odd”)

$(“div:eq(3)”) $(“div:gt(3)”) $(“div:lt(3)”)

jQuery有两种用法($和jquery)使用上有什么区别呢？

这两种用法没什么区别，只是别名而已，用 $ 要比jQuery简短一些、
方便一些，另外其他的前端框架也都用到$符号，如果想不跟其他框架冲突，
建议使用jQuery方式。

还有种方法就是换一个新的缩写：
1、调用jquery的noConflict函数
JQuery.noConflict();//让jquery放弃对$的使用权，
交给其他js框架使用

$和$()的区别：
$可以调用那些不需要操作对象的方法（像Java代码中的静态方法，不用声明对象就可以操作），如$.prototype、$.post()、$.get()、$.ajax()等;如果是给某个对象赋值（注意，这里有操作对象），就需要用$('#abc').val('123')的方式，因为像val()等方法中会用到$(this)去操作当前对象。

children()

该方法用来获取子元素的集合

prev()

获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的

siblings()

获得匹配集合中每个元素的同辈元素，通过选择器进行筛选是可选的

parent()、

parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。

parents() 获得当前匹配元素集合中每个元素的祖先元素，使用选择器进行筛选是可选的。

closest()

closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

ajax

ajax的优缺点：

优点：

不需要插件支持

优秀的用户体验

提高web的性能

减轻服务器和带宽的负担

缺点：

浏览器对XMLHttpRequest 对象的支持度不好

破坏浏览器前进后退按钮的正常功能

开发和调试工具的缺乏

设计模式

总体来说设计模式分为三大类：

创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。

结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。

行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。

23中设计模式中没有MVC的原因

MVC属于架构模式，是观察者模式、策略模式、组合模式三种设计模式的演变

link和@important的区别

link无兼容性，支持使用jsvascript改变模式，而@important不可以

内联样式与@important相比较，@important的优先级更高

导入样式时，link会直接加载，而@important会等页面加载完成才加载样式

一、IE6双倍边距bug

当页面上的元素使用float浮动时，不管是向左还是向右浮动；只要该元素带有margin像素都会使该值乘以2，例如“margin-left:10px” 在IE6中，该值就会被解析为20px。想要解决这个BUG就需要在该元素中加入display:inline 或 display:block 明确其元素类型即可解决双倍边距的BUG

二、IE6中3像素问题及解决办法

当元素使用float浮动后，元素与相邻的元素之间会产生3px的间隙。诡异的是如果右侧的容器没设置高度时3px的间隙在相邻容器的内部，当设定高度后又跑到容器的相反侧了。要解决这类BUG的话，需要使布局在同一行的元素都加上float浮动。

三、IE6中奇数宽高的BUG

IE6中奇数的高宽显示大小与偶数高宽显示大小存在一定的不同。其中要问题是出在奇数高宽上。要解决此类问题，只需要尽量将外部定位的div高宽写成偶数即可。

四、IE6中图片链接的下方有间隙

IE6中图片的下方会存在一定的间隙，尤其在图片垂直挨着图片的时候，即可看到这样的间隙。要解决此类问题，需要将img标签定义为display:block 或定义vertical-align对应的属性。也可以为img对应的样式写入font-size:0

五、IE6下空元素的高度BUG

如果一个元素中没有任何内容，当在样式中为这个元素设置了0-19px之间的高度时。此元素的高度始终为19px。

解决的方法有四种:

1.在元素的css中加入：overflow:hidden

2.在元素中插入html注释：

<!– >

3.在元素中插入html的空白符：

4.在元素的css中加入：font-size:0

六、重复文字的BUG

在某些比较复杂的排版中，有时候浮动元素的最后一些字符会出现在clear清除元素的下面。

解决方法如下：

1.确保元素都带有display:inline

2.在最后一个元素上使用“margin-right:-3px

3.为浮动元素的最后一个条目加上条件注释，

<!–[if !IE]>xxx<![endif]–>

4.在容器的最后元素使用一个空白的div，为这个div指定不超过容器的宽度。

七、IE6中 z-index失效

具体BUG为，元素的父级元素设置的z-index为1，那么其子级元素再设置z-index时会失效，其层级会继承父级元素的设置，造成某些层级调整上的BUG。详细解释可以阅读IE6中部分情况下z-index无效的原因，以及解决办法

实际上IE6中，很多BUG的解决方法都可以使用display:inline、font-size:0、float解决。因此我们在书写代码时要记住，一旦使用了float浮动，就为元素增加一个display:inline样式，可以有效的避免浮动造成的样式错乱问题。使用空DIV时，为了避免其高度影响布局美观，也可以为其加上font-size:0 这样就很容易避免一些兼容上的问题。

css reset的作用是重置浏览器的css默认属性

css Sprite的作用是把一堆小图片整合到一张大图片上，减少服务器对图片的请求次数，减轻负担

移动端如何画出1px

使用css设置border为0.5px，js检车是否支持0.5px

直接用图片实现

伪元素+transform实现：before或者after重做border,并将transform的scale值减小一半

设置meta标签

js中的垃圾回收机制—GC

Javascript中的GC垃圾回收机制(GC:Garbage Collecation)

标记清除

js中最常用的垃圾回收方式就是标记清除。当变量进入环境时，就将这个变量标记为“进入环境”。而当变量离开环境时，则将其标记为“离开环境”。对标记为“离开环境”的变量进行排除释放内存

引用计数

引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾回收器下次再运行时，它就会释放那些引用次数为0的值所占用的内存。

JS事件轮询

一、为什么JavaScript是单线程？

javascript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。

JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。

二、任务队列

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。

如果排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备（输入输出设备）很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。

JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。

于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入”任务队列”（task queue）的任务，只有”任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

具体来说，异步执行的运行机制如下。（同步执行也是如此，因为它可以被视为没有异步任务的异步执行。）

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在一个”任务队列”（task queue）。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。

（3）一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。只要主线程空了，就会去读取”任务队列”，这就是JavaScript的运行机制。这个过程会不断重复。

三、事件和回调函数

“任务队列”是一个事件的队列（也可以理解成消息的队列），IO设备完成一项任务，就在”任务队列”中添加一个事件，表示相关的异步任务可以进入”执行栈”了。主线程读取”任务队列”，就是读取里面有哪些事件。

“任务队列”中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入”任务队列”，等待主线程读取。

所谓”回调函数”（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。

“任务队列”是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。主线程的读取过程基本上是自动的，只要执行栈一清空，”任务队列”上第一位的事件就自动进入主线程。但是，由于存在后文提到的”定时器”功能，主线程首先要检查一下执行时间，某些事件只有到了规定的时间，才能返回主线程。

四、Event Loop

主线程从”任务队列”中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。

五、定时器

除了放置异步任务的事件，”任务队列”还可以放置定时事件，即指定某些代码在多少时间之后执行。这叫做”定时器”（timer）功能，也就是定时执行的代码。

定时器功能主要由setTimeout()和setInterval()这两个函数来完成，它们的内部运行机制完全一样，区别在于前者指定的代码是一次性执行，后者则为反复执行。

判断一个单词是否是回文？

回文是指把相同的词汇或句子，在下文中调换位置或颠倒过来，产生首尾回环的情趣，叫做回文，也叫回环。比如 mamam redivider

function checkPalindrom(str) {
return str == str.split('').reverse().join('');
}

reverse() 方法用于颠倒数组中元素的顺序。

去掉一组整型数组重复的值

比如输入: [1,13,24,11,11,14,1,2]
输出: [1,13,24,11,14,2]
需要去掉重复的11 和 1 这两个元素。

let unique = function(arr) {
let hashTable = {};
let data = [];
for(let i=0,l=arr.length;i<l;i++) {
if(!hashTable[arr[i]]) {
hashTable[arr[i]] = true;
data.push(arr[i]);
}
}
return data

}

module.exports = unique;

统计一个字符串出现最多的字母

输入 ： afjghdfraaaasdenas
输出 ： a

function findMaxDuplicateChar(str) {
if(str.length == 1) {
return str;
}
let charObj = {};
for(let i=0;i<str.length;i++) {
if(!charObj[str.charAt(i)]) {
charObj[str.charAt(i)] = 1;
}else{
charObj[str.charAt(i)] += 1;
}
}
let maxChar = '',
maxValue = 1;
for(var k in charObj) {
if(charObj[k] >= maxValue) {
maxChar = k;
maxValue = charObj[k];
}
}
return maxChar;

}

module.exports = findMaxDuplicateChar;

排序算法

冒泡排序
function bubbleSort(arr) {
for(let i = 0,l=arr.length;i<l-1;i++) {
for(let j = i+1;j<l;j++) {
if(arr[i]>arr[j]) {
let tem = arr[i];
arr[i] = arr[j];
arr[j] = tem;
}
}
}
return arr;
}
module.exports = bubbleSort;

快速排序
function quickSort(arr) {

if(arr.length<=1) {
return arr;
}

let leftArr = [];
let rightArr = [];
let q = arr[0];
for(let i = 1,l=arr.length; i<l; i++) {
if(arr[i]>q) {
rightArr.push(arr[i]);
}else{
leftArr.push(arr[i]);
}
}

return [].concat(quickSort(leftArr),[q],quickSort(rightArr));
}

module.exports = quickSort;

找出下列正数组的最大差值比如:

输入 [10,5,11,7,8,9]
输出 6

function getMaxProfit(arr) {

var minPrice = arr[0];
var maxProfit = 0;

for (var i = 0; i < arr.length; i++) {
var currentPrice = arr[i];

minPrice = Math.min(minPrice, currentPrice);

var potentialProfit = currentPrice - minPrice;

maxProfit = Math.max(maxProfit, potentialProfit);
}

return maxProfit;
}

webpack打包AMD、CMD、Common、UMD理解

webpack可以实现的功能：可以打包 AMD、CMD、Common、css\、coffee、json、Image 等均可打包，也可以打包自定义后缀的文件，如：.vue、.jsx 等，都可以通过loaders加载器进行处理打包。

webpack特性：

将js、css等文件视为一个模块，将外部或者第三方文件也视为一个模块

实现按需加载，是浏览器能够在最短时间打开项目

适合大型项目操作

AMD/CMD/CommonJs是JS模块化开发的标准，目前对应的实现是RequireJs/SeaJs/nodeJs.

CommonJs主要针对服务端，AMD/CMD主要针对浏览器端，所以最容易混淆的是AMD/CMD

CommonJS

CommonJS 加载模块是同步的，所以只有加载完成才能执行后面的操作。

CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}

CommonJs 是服务器端模块的规范，Node.js采用了这个规范。

根据CommonJS规范，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。

AMD((Asynchromous Module Definition)

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出

AMD异步加载模块。它的模块支持对象 函数 构造器 字符串 JSON等各种类型的模块。

CMD

CMD是SeaJS 在推广过程中对模块定义的规范化产出

AMD/CMD区别

很多人说requireJS是异步加载模块，SeaJS是同步加载模块，这么理解实际上是不准确的，其实加载模块都是异步的，只不过AMD依赖前置，js可以方便知道依赖模块是谁，立即加载，而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，这也是很多人诟病CMD的一点，牺牲性能来带来开发的便利性，实际上解析模块用的时间短到可以忽略。

AMD是预加载，在并行加载js文件同时，还会解析执行该模块（因为还需要执行，所以在加载某个模块前，这个模块的依赖模块需要先加载完成）；而CMD是懒加载，虽然会一开始就并行加载js文件，但是不会执行，而是在需要的时候才执行。

AMD优点：加载快速，尤其遇到多个大文件，因为并行解析，所以同一时间可以解析多个文件。

AMD缺点：并行加载，异步处理，加载顺序不一定，可能会造成一些困扰，甚至为程序埋下大坑。

CMD优点：因为只有在使用的时候才会解析执行js文件，因此，每个JS文件的执行顺序在代码中是有体现的，是可控的。

CMD缺点：执行等待时间会叠加。因为每个文件执行时是同步执行（串行执行），因此时间是所有文件解析执行时间之和，尤其在文件较多较大时，这种缺点尤为明显。

UMD

UMD是AMD和CommonJS的糅合

AMD模块以浏览器第一的原则发展，异步加载模块。

CommonJS模块以服务器第一原则发展，选择同步加载，它的模块无需包装(unwrapped modules)。

这迫使人们又想出另一个更通用的模式UMD （Universal Module Definition）。希望解决跨平台的解决方案。

UMD先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式。

在判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。

web前端性能优化

转载：http://blog.csdn.net/mahoking/article/details/51472697

一、浏览器访问优化

1、减少http请求，合理设置 HTTP缓存

2、使用浏览器缓存

3、启用压缩

4、CSS Sprites：合并 CSS图片，减少请求数的又一个好办法。

5、LazyLoad Images（图片懒加载）

6、CSS放在页面最上部，javascript放在页面最下面

7、异步请求Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）

8、减少cookie传输

9、Javascript代码优化

10、CSS选择符优化

11、CDN加速

12、反向代理：传统代理服务器位于浏览器一侧，代理浏览器将http请求发送到互联网上，而反向代理服务器位于网站机房一侧，代理网站web服务器接收http请求。

前端js图片压缩

FileReader()

toDataURL()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js压缩图片</title>
<script src="jquery.js"></script>
</head>
<body>
<input type="file" name="file" id="file">
<div id="container"></div>

<script>
/*图片地址 https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E9%AB%98%E6%B8%85%E7%BE%8E%E5%A5%B3%20%E4%B8%9D%E8%A2%9C%E5%B7%A8%E4%B9%B3&step_word=&hs=0&pn=1&spn=0&di=57234189540&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=2&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=-1&cs=3589338782%2C536437810&os=3988412231%2C488396405&simid=3515890414%2C233897128&adpicid=0&lpn=0&ln=1389&fr=&fmq=1490709487003_R&fm=result&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fwww.bz55.com%2Fuploads%2Fallimg%2F150416%2F139-1504161AK9.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bkzcc_z%26e3Bv54AzdH3F4jtgektzitAzdH3F8l9c9_z%26e3Bip4s&gsm=0&rpstart=0&rpnum=0 */
$(function(){
$("#file").on("change",function(){
var file=this.files[0];
photoCompress(file,50,$("#container")[0])

});
})

/*
三个参数
file：一个是文件(类型是图片格式)，
w：一个是文件压缩的后宽度，宽度越小，字节越小
objDiv：一个是容器或者回调函数
photoCompress()
*/
function photoCompress(file,w,objDiv){
var ready=new FileReader();
/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
ready.readAsDataURL(file);
ready.onload=function(){
var re=this.result;
canvasDataURL(re,w,objDiv)
}
}
function canvasDataURL(re,w,objDiv){
var newImg=new Image();
newImg.src=re;
var imgWidth,imgHeight,offsetX=0,offsetY=0;
newImg.onload=function(){
var img=document.createElement("img");
img.src=newImg.src;
imgWidth=img.width;
imgHeight=img.height;
var canvas=document.createElement("canvas");
canvas.width=w;
canvas.height=w;
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,w,w);
if(imgWidth>imgHeight){
imgWidth=w*imgWidth/imgHeight;
imgHeight=w;
offsetX=-Math.round((imgWidth-w)/2);
}else{
imgHeight=w*imgHeight/imgWidth;
imgWidth=w;
offsetY=-Math.round((imgHeight-w)/2);
}
ctx.drawImage(img,offsetX,offsetY,imgWidth,imgHeight);
var base64=canvas.toDataURL("image/jpeg",0.7);
if(typeof objDiv == "object"){
objDiv.appendChild(canvas);
}else if(typeof objDiv=="function"){
objDiv(base64);
}
}

}

</script>
</body>
</html>

photoCompress()

传进参数就可以实现压缩了，这是上传图片的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js压缩图片</title>
<script src="jquery.js"></script>
</head>
<body>
<input type="file" name="file" id="file">
<div id="container"></div>

<script>
/*跨域是无法做的*/
$(function(){

var newImg=new Image();
newImg.src="./timg.jpg";
newImg.onload=function(){
var currentImg=document.createElement("img");
currentImg.src=newImg.src;
photoCompress(currentImg,50,$("#container")[0])
}
})

/*
三个参数
file：一个是文件(类型是图片格式)，
w：一个是文件压缩的后宽度，宽度越小，字节越小
objDiv：一个是容器或者回调函数
photoCompress()
*/
function photoCompress(file,w,objDiv){
if(file.tagName.toLocaleLowerCase()=="img"){
canvasDataURL(file.src,w,objDiv);
return false;
}
var ready=new FileReader();
/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
ready.readAsDataURL(file);
ready.onload=function(){
var re=this.result;
canvasDataURL(re,w,objDiv)
}
}
function canvasDataURL(re,w,objDiv){
var newImg=new Image();
newImg.src=re;
var imgWidth,imgHeight,offsetX=0,offsetY=0;
newImg.onload=function(){
var img=document.createElement("img");
img.src=newImg.src;
imgWidth=img.width;
imgHeight=img.height;
var canvas=document.createElement("canvas");
canvas.width=w;
canvas.height=w;
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,w,w);
if(imgWidth>imgHeight){
imgWidth=w*imgWidth/imgHeight;
imgHeight=w;
offsetX=-Math.round((imgWidth-w)/2);
}else{
imgHeight=w*imgHeight/imgWidth;
imgWidth=w;
offsetY=-Math.round((imgHeight-w)/2);
}
ctx.drawImage(img,offsetX,offsetY,imgWidth,imgHeight);
var base64=canvas.toDataURL("image/jpeg",0.7);
if(typeof objDiv == "object"){
objDiv.appendChild(canvas);
}else if(typeof objDiv=="function"){
objDiv(base64);
}
}

}

</script>
</body>
</html>

前端跨域知识总结

产生跨域的原因

1、浏览器限制

2、发送xhr请求

3、跨域：只要协议、域名、端口有任何一个不同，都被当作是不同的域。

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

特别注意两点：

第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，

第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。

前端解决跨域问题

转载链接地址：http://web.jobbole.com/88524/

document.domain + iframe (只有在主域相同的时候才能使用该方法)

jsonp：动态创建script

location.hash + iframe

window.name + iframe

postMessage（HTML5中的XMLHttpRequest Level 2中的API）

CORS

web sockets

跨域解决办法之jsonp：

jsonp发送的不是xhr请求，一般ajax请求（xhr）返回的是json对象，而jsonp返回的是script代码

jsonp的弊端：

1、服务器需要改动代码支持

2、只支持Get

3、发送的不是xhr请求

GitHub上的面试资料：

https://github.com/yangshun/front-end-interview-handbook/blob/master/Translations/Chinese/README.md