初窥 知识宝典(中)

on Front-End

摘要：你说这些是不是要不断学习,学以致用

面试题总结

三、Web API模块

基础部分

  1. 要你出一套适应不同分辨率，不同终端的前端实现方案你有什么思路？

    答：

  1. 流式布局：

使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来 根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。这样的布局方式，就 是移动web 开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。

  1. 响应式开发：

那么 EthanMarcotte 在2010 年 5月份提出的一个概念，简而言之，就是一个网站能 够兼容多个终端。越来越多的设计师也采用了这种设计。 CSS3中的 Media Query（媒介查询），通过查询 screen 的宽度来指定某个宽 度区间的网页布局。 超小屏幕（移动设备） 768px以下 小屏设备 768px-992px 中等屏幕 992px-1200px 宽屏设备 1200px 以上 由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如bootstrap 来 完成一部分工作，当然也可以自己写响应式。

  1. px em rem 取用选择依据？

    答：

  1. px 像素（Pixel）。绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一

个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px要换算成物理长度，需要 指定精度 DPI。

  1. em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字

体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因 此并不是一个固定的值。

  1. rem是 CSS3新增的一个相对单位（root em，根em），使用 rem 为元素设定字

体大小时，仍然是相对大小，但相对的只是HTML根元素。

  1. 区别：IE无法调整那些使用 px作为单位的字体大小，而em 和rem可以缩放，rem

相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既 可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁 反应。目前，除了 IE8及更早版本外，所有浏览器均已支持rem。

  1. Zepto和jQuery的区别？

    答：

Zepto相对jQuery更加轻量，主要用在移动端，jQuery也有对应的jQuerymobile移动端框架。

实际工作部分

  1. 移动端touch事件判断滑屏手势的方向？

    答：

当开始一个touchstart事件的时候，获取此刻手指的横坐标startX和纵坐标startY； 当触发touchmove事件时，在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后，通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。 思路：用touchmove的最后坐标减去touchstart的起始坐标，X的结果如果正数，则说明手指是从左往右划动；X的结果如果负数，则说明手指是从右往左划动；Y的结果如果正数，则说明手指是从上往下划动；Y的结果如果负数，则说明手指是从下往上划动。

具体代码如下：

var mybody = document.getElementsByTagName('body')[0];

//滑动处理
var startX, startY, moveEndX, moveEndY, X, Y;
mybody.addEventListener('touchstart', function(e) {
    e.preventDefault();
    startX = e.touches[0].pageX;
    startY = e.touches[0].pageY;
});
mybody.addEventListener('touchmove', function(e) {
    e.preventDefault();
    moveEndX = e.changedTouches[0].pageX;
    moveEndY = e.changedTouches[0].pageY;
    X = moveEndX - startX;
    Y = moveEndY - startY;
    if ( X > 0 ) {alert(‘向右’);}
    else if ( X < 0 ) {alert(‘向左’);}
    else if ( Y > 0) {alert(‘向下’);}
    else if ( Y < 0 ) { alert(‘向上’);}
    else{alert(‘没滑动’); }
});

  1. 移动端对图片优化有哪些方式，怎么实现？

    答：

懒加载，使用CSS Sprites合并为一张大图，首先从图片格式方面着手，webp(google官方网址)是谷歌推出的一种图片格式，优点在于同等画面质量下，体积比jpg、png少了25%以上，去掉无意义的修饰，使用矢量图替代位图。 按照HTTP协议设置合理的缓存。 详见链接 http://web.jobbole.com/81766/

  1. rem布局中的尺寸是怎样计算的，实际举例说明一下？

    答：

其实rem布局的本质是等比缩放，一般是基于宽度，试想一下如果UE图能够等比缩放，假设我们将屏幕宽度平均分成100份，每一份的宽度用x表示，x = 屏幕宽度 / 100，如果将x作为单位，x前面的数值就代表屏幕宽度的百分比。

  1. ​

四、JavaScript高级模块

基础部分

  1. 说说你对this关键字的理解？

    答：

this 是一个关键字，它代表函数运行时，自动生成的一个内部对象，只能在函数内 部使用。

1.作为纯粹的函数调用 this 指向全局对象

2.作为对象的方法调用 this 指向调用对象

3.作为构造函数被调用 this 指向新的对象（new会改变 this 的指向）

4.apply 调用 this 指向 apply方法的第一个参数

  1. 表单验证传输的什么数据？明文还是暗文==加密？如何加密？是每一次传 输数据，都是加密之后才传输吗？

    答：

  1. 概述： GET是从服务器上请求数据，POST 是发送数据到服务器。事实上，GET方法是把数 据参数队列（query string）加到一个URL上，值和表单是一一对应的。比如说， name=John。在队列里，值和表单用一个&符号分开，空格用+号替换，特殊的符号转换 成十六进制的代码。因为这一队列在 URL里边，这样队列的参数就能看得到，可以被记录 下来，或更改。通常GET 方法还限制字符的大小（大概是 256 字节 ）。事实上POST 方法可以没有时间限制的传递数据到服务器，用户在浏览器端是看不到 这一过程的，所以 POST方法比较适合用于发送一个保密的（比如信用 卡号）或者比较大 量的数据到服务器。

  2. 区别： Post 是允许传输大量数据的方法，而 Get 方法会将所要传输的数据附在网址后面，然 后一起送达服务器，因此传送的数据量就会受到限制，但是执行效率却比 Post 方法好。

  3. 总结：

    1、get 方式的安全性较Post 方式要差些，包含机密信息的话，建议用 Post 数据提交 方式；

    2、在做数据查询时，建议用 Get 方式；而在做数据添加、修改或删除时，建议用Post 方式；

  4. 所以： 表达如果是向服务器传输数据(如帐号密码等)都是加密数据(post)，如果只是单单想要 从服务器获得数据或者传输的数据并不重要， 可以直接使用明文方式传输( get )

  1. 如何实现跨域？

    答：

JSONP(JSON with Padding 填充式JSON 或参数式 JSON)

在js 中，我们虽然不能直接用XMLHttpRequest 请求不同域上的数据，但是在页面上引入不同域上的js 脚本文件却是可以的，jsonp正是利用这个特性来实现的。

JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON 数据。

优点： 它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest 或 ActiveX 的支持； 能够直接访问响应文本，支持在浏览器与服务器之间双向通信

缺点： JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些 恶意代码，而此时除了完全放弃 JSONP 调用之外，没有办法追究。因此在使用不是你自己 运维的Web 服务时，一定得保证它安全可靠。 它只支持 GET请求而不支持 POST等其它类型的 HTTP 请求；它只支持跨域 HTTP 请 求这种情况，不能解决不同域的两个页面之间如何进行 JavaScript调用的问题

  1. 说说事件委托机制？这样做有什么好处？

    答：

事件委托，就是某个事件本来该自己干的，但是自己不干，交给别人来干。就叫事件委 托。打个比方：一个button 对象，本来自己需要监控自身的点击事件，但是自己不来监控这个点击事件，让自己的父节点来监控自己的点击事件。

优点： 提高性能：列如，当有很多 li同时需要注册事件的时候，如果使用传统方法来注册 事件的话，需要给每一个 li 注册事件。然而如果使用委托事件的话，就只需要将事件委托给 该一个元素即可。这样就能提高性能。

​ 新添加的元素还会有之前的事件；

  1. call和apply的区别？

    答：

它们的共同之处：都“可以用来代替另一个对象调用一个方法，将一个函数的对象上 下文从初始的上下文改变为由 thisObj 指定的新对象。”

它们的不同之处：

​ Apply：最多只能有两个参数——新this 对象和一个数组 argArray。如果给该方法传递多 个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里面。如 果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被 用作 thisObj， 并且无法被传递任何参数

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

  1. 在JS的计时器运行原理是怎样的，为什么可以触发计时效果? 计时器是多线程吗?

    答：

  1. javascript引擎只有一个线程，强迫异步事件排队等待被执行。
  2. setTimeout 和setInterval 本质上不同的地方是他们如何执行异步代码的。
  3. 如果一个定时器正在执行的时候被阻塞了，那么它将会被推迟到下一个可能的执行点，这既是使得延迟时间有可能会超过声明定时器时设置的值。
  4. Interval 如果有足够的时间来执行（大于制定的延迟），那么它将会无延迟的一个紧 接着一个执行。
  5. 原理： 计时器通过设定一定的时间段（毫秒）来异步的执行一段代码。因为 Javascript 是一 个单线程语言，计时器提供了一种绕过这种语言限制来执行代码的能力。
  6. 总结： 计时器是单线程的， 需要等待上一个执行完， 如果上一个没有执行完， 下一个需要 延迟执行， 直到上一个执行完。

  1. 什么是事件的冒泡和捕获？

    答：

事件冒泡：子元素事件的触发会影响父元素事件；

开关事件冒泡：

​ A，开启事件冒泡：element.addEventListener(eventName，handler，false)；

​ B，关闭事件冒泡：假设传统方式事件的返回值为 e，就可以通过 e.stopPropagation()来关闭事件冒泡；

事件捕获：父元素的事件会影响子元素的事件；

开启事件捕获：element.addEventListener(eventName，handler，true)

  1. 面向对象和类的区别？

    答：

简单的说类是对象的模版。 ​ 在 js 中没有类， 所以在js 中所谓的 类 就是构造函数， 对象就是由构造函数创建 ​ 出来的实例对象。面向对象就是使用面向对象的方式处理问题， 面向对象是对面向过程进 ​ 行封装。 面向对象有三大特性 ​ 抽象性， 需要通过核心数据和特定环境才能描述对象的具体意义

​ 封装性， 封装就是将数据和功能组合到一起， 在js 中对象就是键值对的集合， 对象 ​ 将属性和方法封装起来， 方法将过程封装起来

​ 继承性，将别人的属性和方法成为自己的，传统继承基于模板(类)，js 中继承基于 构 ​ 造函数

实际工作部分

  1. JavaScript 中的垃圾回收机制?

    答：

在Javascript 中，如果一个对象不再被引用，那么这个对象就会被GC 回收。如 果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。 因为函数 a被b引用，b又被 a外的 c引用，这就是为什么 函数 a 执行后不会被回收的原 因。

  1. 列出3条以上 FF 和 IE 的脚本兼容问题

    答：

  1. window.event：

    表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象

  2. 获取事件源

    IE用srcElement获取事件源，而FF用target获取事件源

  3. 添加，去除事件

    IE：element.attachEvent(“onclick”,function) element.detachEvent(“onclick”, function)

    FF：element.addEventListener(“click”,function, true) element.removeEventListener(“click”, function, true)

  4. 获取标签的自定义属性

    IE：div1.value或div1[“value”]

    FF：可用div1.getAttribute(“value”)

  1. 用正则表达式，写出由字母开头，其余由数字、字母、下划线组成的6~30的字符串？

    答：

/^[a-zA-Z]{1}[\w]{5,29}$/

  1. 下列JavaScript代码执行后，iNum的值是多少？

var iNum = 0;

for(var i = 1; i < 10; i++){

​ if(i% 5 == 0){

​ continue;

​ }

​ iNum++;

}

答：8

  1. 程序中捕获异常的方法？

    答：

window.error

try{}catch(error){}finally{}

  1. 正则匹配邮箱？

    答：

/^([a-zA-Z0-9-])+@([a-zA-Z0-9-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

  1. Javascript中callee和caller的作用？

    答：

caller是返回一个对函数的引用，该函数调用了当前函数；

callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

  1. 下列代码的输出结果？

    function f1(){
  var tmp = 1;
  this.x = 3;
  console.log( tmp );
  console.log( this.x );
}
var obj = new f1();
console.log( obj.x );
console.log( f1() );

    答：

首先看代码（1），这里实例话化了f1这个类。相当于执行了 f1函数。所以这个时候 A 会输出 1， 而 B 这个时候的 this 代表的是实例化的当前对象 obj ,B 输出 3。

代码（2）毋庸置疑会输出 3，

重点 代码（3）首先这里将不再是一个类，它只是一个函数。那么 A输出 1， B呢？这里的this 代表的其实就是window对象，那么this.x 就是一个全局变量 相当于在外部 的一个全局变量。所以B 输出 3。最后代码由于f没有返回值那么一个函数如果没返回值的话，将会**返回 underfined **，所以答案就是 ： 1， 3， 3， 1， 3， underfined 。

  1. 下面代码输出结果？

    function changeObjectProperty(o){
  o.siteUrl = "http://www.csser.com/";
  o = new Object();
  o.siteUrl = "http://www.popcg.com/";
}
var CSSer = new Object();
changeObjectProperty( CSSer );
console.log( CSSer.siteUrl );

    答：

"http://www.popcg.com/"

  1. ​

五、jQuery模块

基础部分

  1. 谈谈你对jQuery的理解？

    答：

JQuery 是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的js 库 ，它 兼容 CSS3，还兼容各种浏览器（IE 6.0+，FF1.5+，Safari 2.0+，Opera 9.0+），jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery 使用户能更方便地处理 HTML（标准通用 标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供 AJAX 交互。 jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细， 同时还有许多成熟的插件可供选择。jQuery 能够使用户的 html页面保持代码和 html 内容 分离，也就是说，不用再在 html里面插入一堆 js 来调用命令了，只需要定义 id即可。 jQuery 是一个兼容多浏览器的 javascript 库，核心理念是write less，do more(写 得更少，做得更多)。 jQuery是免费、开源的，使用 MIT 许可协议。jQuery 的语法设 计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、 使用 Ajax 以及其他功能。除此以外，jQuery 提供 API让开发者编写插件。其模块化的使 用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

  1. 、原生JS的window.onload与Jquery的$(document).ready(function () {})，$(function () {})有什么不同？

    答：

1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是 DOM 结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同 window.onload不能同时编写多个，如果有多个 window.onload 方法，只会执 行一个 $(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法 window.onload没有简化写法

​ $(document).ready(function (){})

​ 可以简写成$(function(){})；

  1. jQuery一个对象可以同时绑定多个事件，是如何实现的？

    答：

jQuery可以给一个对象同时绑定多个事件，低层实现方式是使用addEventListner或attachEvent兼容不同的浏览器实现事件的绑定，这样可以给同一个对象注册多个事件。

  1. jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？

    答：

this执行init构造函数自身，其实就是jQuery实例对象，返回this是为了实现jQuery的链式操作

  1. jQuery.extend和jQuery.fn.extend有什么区别？

    答：

Jquery.extend用来扩展jQuery对象本身；jquery.fn.extend用来扩展jQuery实例

实际工作部分

  1. jQuery框架中$.ajax()的常用参数有哪些？写一个post请求并带有发送数据和返回数据的样例？

    答：

async是否异步

url请求地址

contentType发送信息至服务器时内容编码类型

data发送到服务器的数据

dataType预期服务器返回的数据类型

type请求类型

success请求成功回调函数

error请求失败回调函数

$.ajax({

​ url: “/jquery/test1.txt”,

​ type: ‘post’,

​ data: { id: 1 },

​ success: function ( data ) { alert(data); }

​ })

  1. 举一下jquery中的函数，这些函数实现链式编程的原理？

    答：

toggle（fn, fn）

$（“td”）.toggle（
function（）{
$（this）.addClass（“selected”）;
}，
function（）{
$（this）.removeClass（“selected”）;
）
实现函数链式编程的原理：返回自身，其他过程在函数内部实现，其好处是：节约js代码，返回的是同一个对象，提高代码的效率。
  1. ​

六、PHP后台开发模块

基础部分

  1. php inset 和 empty 的区别？

    答：

1、empty函数

用途：检测变量是否为空

判断：如果 var 是非空或非零的值，则 empty() 返回 FALSE。换句话说，”“、0、”0”、NULL、FALSE、array()、var $var; 以及没有任何属性的对象都将被认为是空的，如果 var 为空，则返回 TRUE。注意：empty() 只检测变量，检测任何非变量的东西都将导致解析错误。换句话说，后边的语句将不会起作用;

2、isset函数

用途：检测变量是否设置

判断：检测变量是否设置，并且不是 NULL。如果已经使用 unset() 释放了一个变量之后，它将不再是 isset()。若使用 isset() 测试一个被设置成 NULL 的变量，将返回 FALSE。同时要注意的是一个NULL 字节（”\0”）并不等同于 PHP 的 NULL 常数。

  1. php 中$_SERVER变量中是如何得到当前执行脚本路径的？

    PHP01

七、Ajax模块

基础部分

  1. ajax是什么？

    答：

Ajax并不算是一种新的技术，全称是asychronous javascript and xml，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，早期的浏览器并不能原生支持ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对ajax的原生支持

使用ajax原生方式发送请求主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果

  1. 同步和异步执行代码的区别？

    答：

同步：阻塞的

=张三叫李四去吃饭，李四一直忙得不停，张三一直等着，直到李四忙完两个人一块去吃饭

=浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示页面

异步：非阻塞的

=张三叫李四去吃饭，李四在忙，张三说了一声然后自己就去吃饭了，李四忙完后自己去吃

=浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新

  1. 页面编码和被请求的资源编码不一样如何处理？

    答：

对于ajax请求传递的参数，如果是get请求方式，参数如果传递中文，在有些浏览器会乱码，不同的浏览器对参数编码的处理方式不同，所以对于get请求的参数需要使用 encodeURIComponent函数对参数进行编码处理，后台开发语言都有相应的解码api。对于post请求不需要进行编码

  1. 简述ajax的过程？

    答：

  1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
  3. 设置响应HTTP请求状态变化的函数
  4. 发送HTTP请求
  5. 获取异步调用返回的数据
  6. 使用JavaScript和DOM实现局部刷新

  1. 请解释一下JavaScript的同源策略？

    答：

同源策略在什么情况下会起作用呢？ 当web 页面使用多个<iframe>元素或者打开其他浏览器窗口的时候，这一策略就 会起作用。 同源策略的含义： 脚本只能读取和所属文档来源相同的窗口和文档的属性。 这里就涉及到了一个浏览器如何判断两者是否同源以及如何判断脚本来源的问题。 注意一点：脚本本身的来源并不作为判断是否同源的依据，而是将脚本所属文档的来源 作为判断依据。

  1. 判断脚本来源 例如：文档 A中通过 script 的 src引用了一个外部脚本，这个脚本是 google 提供的，也是从google 的主机上加载到文档 A中的，那么这个脚本的所属文档是谁呢， 答案是文档A。
  2. 判断是否同源 理解了脚本来源，接着理解怎么判断是否同源：如果两个文档在协议、主机以 及载入文档的 URL端口这三点中有一点不同，就认为他们不同源。

  1. get和post的区别？

    答：

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

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

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

  1. 无法使用缓存文件（更新服务器上的文件或数据库）
  2. 向服务器发送大量数据（POST 没有数据量限制）
  3. 发送包含未知字符的用户输入时，POST 比GET 更稳定也更可靠

onp的原理？

答：

Jsonp并不是一种数据格式，而json是一种数据格式，jsonp是用来解决跨域获取数据的一种解决方案，具体是通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术

  1. ajax请求时如何解释json数据？

    答：

使用eval() 或者JSON.parse() 鉴于安全性考虑，推荐使用JSON.parse()更靠谱，对数据的安全性更好。

  1. HTTP状态码都有哪些？

    答：

100 => 正在初始化（一般是看不到的）

101 => 正在切换协议（websocket浏览器提供的）

200或者以2开头的两位数 => 都是代表响应主体的内容已经成功返回了

202 => 表示接受

301 => 永久重定向/永久转移

302 => 临时重定向/临时转移（一般用来做服务器负载均衡）

304 => 本次获取的内容是读取缓存中的数据，会每次去服务器校验

400 => 参数出现错误（客户端传递给服务器端的参数出现错误）

401 => 未认证，没有登录网站

403 => 禁止访问，没有权限

404 => 客户端访问的地址不存在

500 => 未知的服务器错误

503 => 服务器超负荷（假设一台服务器只能承受10000人，当第10001人访问的时候，如果服务器没有做负载均衡，那么这个人的网络状态码就是503）

实际工作部分

  1. 浏览器渲染页面的过程

    答：

浏览器会把HTML、SVG、XHTML三种格式的文件会产生一个DOM树；

Css，解析css会产生css规则树JavaScript会通过DOM apI 来操作DOM树 和 css规则树

  1. 简单描述下同步和异步的区别，并举例实际应用中哪些是同步，哪些是异步？

    答：

同步是阻塞的，浏览器向服务器发送请求，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，页面才可以正常显示；

异步是非阻塞的，浏览器向服务器请求数据，服务器比较忙，浏览器可以干自己原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新。

  1. 简述AJAX的工作原理

    答：

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

  1. jsonp是如何实现前后数据交互？

    答：

ajax请求受同源策略的影响，不允许进行跨域请求，而script标签的src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不在返回json格式的数据，而是返回调用某个函数的js代码，在src中进行了调用，这样就实现了跨域，其原理就是动态创建script标签，通过script标签的src属性进行调用

  1. 你知道的HTTP 请求方式有几种？

    答：

HTTPRequestMethod共计17种

  1. GET 请求指定的页面信息，并返回实体主体。
  2. HEAD 类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
  3. POST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
  4. PUT 从客户端向服务器传送的数据取代指定的文档的内容。
  5. DELETE 请求服务器删除指定的页面。
  6. CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
  7. OPTIONS 允许客户端查看服务器的性能。
  8. TRACE 回显服务器收到的请求，主要用于测试或诊断。
  9. PATCH 实体中包含一个表，表中说明与该URI所表示的原内容的区别。
  10. MOVE 请求服务器将指定的页面移至另一个网络地址。
  11. COPY 请求服务器将指定的页面拷贝至另一个网络地址。
  12. LINK 请求服务器建立链接关系。
  13. UNLINK 断开链接关系。
  14. WRAPPED 允许客户端发送经过封装的请求。
  15. LOCK 允许用户锁定资源，比如可以再编辑某个资源时将其锁定，以防别人同时对其进行编辑。
  16. MKCOL 允许用户创建资源
  17. Extension-mothed 在不改动协议的前提下，可增加另外的方法。
  1. ​

八、H5C3模块

基础部分

  1. CSS3有哪些新特性？

    答：

  1. CSS3实现圆角（border-radius），阴影（box-shadow），
  2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
  3. transform:rotate(9deg)scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩 放,定位,倾斜
  4. 增加了更多的CSS选择器 多背景rgba
  5. 在CSS3中唯一引入的伪元素是 ::selection.
  6. 媒体查询，多栏布局
  7. border-image

  1. Html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML和HTML5？

    答：

新特性：

  1. 拖拽释放(Drag and drop) API
  2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
  3. 音频、视频API(audio,video)
  4. 画布(Canvas) API
  5. 地理(Geolocation) API
  6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
  7. sessionStorage 的数据在浏览器关闭后自动删除
  8. 表单控件，calendar、date、time、email、url、search
  9. 新的技术webworker, websocket,Geolocation

移除的元素：

  1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
  2. 对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

  1. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

    <!--[if lt IE 9]>

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

    <![endif]-->

  1. 本地存储（Local Storage）和cookies（储存在用户本地终端上的数据）之间的区别是什么？

    答：

Cookies:服务器和客户端都可以访问；大小只有4KB左右；有有效期，过期后将会删除；

本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器；每个域5MB；没有过期数据，它将保留知道用户从浏览器清除或者使用Javascript代码移除

  1. 如何实现浏览器内多个标签页之间的通信?

    答：

调用 localstorge、cookies 等本地存储方式

  1. 你如何对网站的文件和资源进行优化？

    答：

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

  1. 什么是响应式设计？

    答：

它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常

  1. 新的 HTML5文档类型和字符集是

    答：

HTML5文档类型：<!doctype html>

HTML5使用的编码<meta charset=”UTF-8”>

  1. HTML5 Canvas元素有什么用？

    答：

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在HTML 上进行图形操作。

  1. HTML5 存储类型有什么区别？

    答：

Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API

  1. CSS3新增伪类有那些？

答：

​ p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

​ p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

​ p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

​ p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

​ p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

​ :enabled、:disabled 控制表单控件的禁用状态。

​ :checked，单选框或复选框被选中。

  1. 你怎么来实现页面设计图，你认为前端应该如何高质量完成工作?一个满屏品 字布局 如何设计?

    答：

首先划分成头部、body、脚部；。。。。。

实现效果图是最基本的工作，精确到2px；

与设计师，产品经理的沟通和项目的参与

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

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

针对服务器的优化、拥抱 HTML5。

  1. 为什么利用多个域名来存储网站资源会更有效？

    答：

CDN缓存更方便

突破浏览器并发限制

节约cookie带宽

节约主域名的连接数，优化页面响应速度

防止不必要的安全问题

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

    答：

（无标准答案）网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

  1. ​

实际工作部分

  1. 请描述一下cookies]()，sessionStorage和localStorage的区别？

    答：

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

  1. 如何在 HTML5页面中嵌入视频？

    答：

HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM 和 Ogg;

<video>

<source src="jamshed.mp4" type="video/mp4">

Your browser does'nt support video embedding feature.

</video>

  1. HTML5引入什么新的表单属性？

    答：

Datalist datetime output keygen date month week time number range emailurl ​