前端面试校招问题准备（总结）

时间 2019-11-17

原文原文链接

前端点大而驳杂，面试前的准备每每会感到无所适从。在web开发的中，六项基础知识仍是新手所必须掌握的：javascript

HTML、CSS、JavaScript、移动Web开发、调试、HTTP网络知识。php

HTMLcss

1.经常使用的meta头；
2.经过你对标签语义化的理解来判断你可否写出更规范的HTML代码；
3.HTML5新增的能力；
4.HTML的渲染解析知识，好比为何CSS放前面JS放后面，怎么理解并行加载串行执行

<!-- 字体编码 -->
<meta charset="utf-8" />
<!-- 关键字 -->
<meta name="keywords" content="" />
<!-- 说明 -->
<meta name="description" content="" />
<!-- 做者 -->
<meta name="author" content="" />
<!-- 设置文档宽度、是否缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<!-- 优先使用IE最新版本或chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 360读取到这个标签当即钱换到极速模式 -->
<meta name="renderer" content="webkit" />
<!-- 禁止百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- UC强制竖屏 -->
<meta name="screen-orientation" content="portrait" />
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait" />
<!-- UC强制全屏 -->
<meta name="full-scerrn" content="yes" />
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="ture" />
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app" />
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- window phone 点亮无高光 -->
<meta name="msapplication-tap-highlight" content="no" />
<!-- 安卓设备不自动识别邮件地址 -->
<meta name="format-detection" name="email=no" />

HTML书写规范
1. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html>; 编码统一为<meta charset=”gbk” />, 书写时利用IDE实现井井有条的缩进;
2. 非特殊状况下样式文件必须外链至<head>…</head>之间;非特殊状况下JavaScript文件必须外链至页面底部;
3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法以下:
<link rel=”stylesheet” href=”…” />
<style>…</style> 
<script src=”…”></script>
4. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 好比jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 好比jQuery.cookie.js;
5. 全部编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且全部标签必须闭合, 包括 br (<br />), hr(<hr />)等; 属性值必须用双引号包括;
6. 充分利用无兼容性问题的html自身标签, 好比span, em, strong, optgroup, label,等等; 
须要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 若是没有, 
可使用须以”data-”为前缀来添加自定义属性，避免使用”data:”等其余命名方式;
7. 语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;
8. 尽量减小div嵌套, 如<div><div class=”welcome”>欢迎访问XXX, 
您的用户名是<div 
class=”name”>用户名</div></div></div>彻底能够用如下代码替代: 
<div><p>欢迎访问XXX, 
您的用户名是<span>用户名</span></p></div>;
9. 书写连接地址时, 必须避免重定向，例如：href=”http://itaolun.com/”, 即须在URL地址后面加上“/”；
10. 在页面中尽可能避免使用style属性,即style=”…”;11. 必须为含有描述性表单元素(input, textarea)添加label, 如<p>姓名: <input 
type=”text” id=”name” name=”name” /></p>须写成:<p><label 
for=”name”>姓名: </label><input type=”text” id=”name” 
/></p>
12. 能以背景形式呈现的图片, 尽可能写入css样式中;
13. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;
14. 给区块代码及重要功能(好比循环)加上注释, 方便后台添加功能;
15. 特殊符号使用: 尽量使用代码替代: 好比 <(<) & >(&gt;) & 空格( ) & »(») 等等;
16. 书写页面过程当中, 请考虑向后扩展性;

H5新增标签
一、结构标签
（1）section：独立内容区块，能够用h1~h6组成大纲，表示文档结构，也能够有章节、页眉、页脚或页眉的其余部分；
（2）article：特殊独立区块，表示这篇页眉中的核心内容；
（3）aside：标签内容以外与标签内容相关的辅助信息；
（4）header：某个区块的头部信息/标题；
（5）hgroup：头部信息/标题的补充内容；
（6）footer：底部信息；
（7）nav：导航条部分信息
（8）figure：独立的单元，例如某个有图片与内容的新闻块。
二、表单标签
（1）email：必须输入邮件；
（2）url：必须输入url地址；
（3）number：必须输入数值；
（4）range：必须输入必定范围内的数值；
（5）Date Pickers：日期选择器
（6）search：搜索常规的文本域；
（7）color：颜色；
三、媒体标签
（1）video：视频
（2）audio：音频
（3）embed：嵌入内容（包括各类媒体），Midi、Wav、AU、MP三、Flash、AIFF等。
三、媒体标签
（1）video：视频
（2）audio：音频
（3）embed：嵌入内容（包括各类媒体），Midi、Wav、AU、MP三、Flash、AIFF等。
H5新增属性
（1）对于js进行添加的属性
<script defer src=".....js" onload="alert('a')"></script>
<script async src=".....js" onload="alert('b')"></script>
异步加载先出现b再出现a。
（2）网页中标签中加入小图标的样式代码
有序列表ol:新增start（列表起始值），reversed（是否倒置）menu菜单type属性（3个菜单类型）内嵌css样式：在标签内部来定义一个样式区块（scoped）,只对样式标签内部才有效内嵌框架：iframe元素，新增了seamless无边距无边框，srcdoc定义了内嵌框架的内容。
总结新增属性：
manifest属性：
定义页面须要用到的离线应用文件，通常放在<html>标签里
charset属性：
meta属性之一,定义页面的字符集
sizes属性：
<link>新增属性，当link的rel="icon"时，用以设置图标大小
base属性:
<base href="http://localhost/" target="_blank">表示当在新窗口打开一个页面时，会将href中的内容做为前缀添加到地址前
defer属性：
script标签属性，表示脚本加载完毕后，只有当页面也加载完毕才执行（推迟执行）
async属性：
script标签属性，脚本加载完毕后立刻执行（运行过程当中浏览器会解析下面的内容），即便页面尚未加载完毕（异步执行）
media属性：
<a>元素属性：表示对何种设备进行优化
hreflang属性：
<a>的属性，表示超连接指向的网址使用的语言
ref属性：
<a>的属性,定义超连接是不是外部连接
reversed属性:
<ol>的属性，定义序号是否倒叙
start属性：
<ol>的属性，定义序号的起始值
scoped属性：
内嵌CSS样式的属性，定义该样式只局限于拥有该内嵌样式的元素，适用于单页开发

HTML渲染过程
解析渲染该过程主要分为如下步骤：
（1）解析HTML
（2）构建DOM树
（3）DOM树与CSS样式进行附着构造呈现树
（4）布局
（5）绘制
     浏览器的实际工做是将解析和构建DOM放在一块儿进行的。对于HTML浏览器有专门的html解析器来解析HTML，并在解析的过程当中构建DOM树。在这里咱们讨论两种DOM元素的解析，即样式（link、style）与脚本文件（script）。因为浏览器采用自上而下的方式解析，在遇到这两种元素时都会阻塞浏览器的解析，直到外部资源加载并解析或执行完毕后才会继续向下解析html。对于样式与脚本的前后顺序一样也会影响到浏览器的解析过程，究其缘由主要在于：script脚本执行过程当中可能会修改html界面（如document.write函数）；DOM节点的CSS样式会影响js的执行结果。在个人测试中获得如下四条结论：
　1）外部样式会阻塞后续脚本执行，直到外部样式加载并解析完毕。
   2）外部样式不会阻塞后续外部脚本的加载，但会阻塞外部脚本的执行。
   3） 若是后续外部脚本含有async属性（IE下为defer），则外部样式不会阻塞该脚本的加载与执行
   4）对于动态建立的link标签不会阻塞其后动态建立的script的加载与执行，无论script标签是否具备async属性，但对于其余非动态建立的script，以上三条结论仍适用

      link或style标签都会被解析成DOM节点。浏览器对于样式表还会生成CSSStyleSheet对象(C++代码)
      html解析完毕，DOM树建立完成后DOMContentLoaded事件即触发，这时候能够用过script来操做DOM节点。


HTML解析完毕后，开始构建呈现树RenderTree，这一步的主要工做在于将css样式应用到DOM节点上，WebKit内核将这一过程称为附着，其余浏览器有不一样的概念。对前端工程师而言这个过程会涉及到CSS层叠问题。

首先将根据样式重要性排序，由低到高依次为：
（1）浏览器声明
（2）用户普通声明
（3）做者普通声明
（4）做者重要声明
（5）用户重要声明
     呈现树的每个节点即为与其相对应的DOM节点的CSS框，框的类型与DOM节点的display属性有关，block元素生成block框，inline元素生成inline框。每个呈现树节点都有与之相对应的DOM节点，但DOM节点不必定有与之相对应的呈现树节点，好比display属性为none的DOM节点，并且呈现树节点在呈现树中的位置与他们在DOM树中的位置不必定相同，好比float与绝对定位元素。

呈现树构造完成后浏览器便进行布局处理，及计算每一个呈现树节点的大小和位置信息。有道友可能要问，前面已将样式附着到DOM节点上，不是已经有了样式信息为什么还要计算大小。这里能够这样理解，以上包含大小的样式信息只是存在内存里，并无实际使用，浏览器要根据窗口的实际大小来处理呈现树节点的实际显示大小和位置，好比对于margin为auto的处理。

　布局完成后，即是将呈现树绘制出来显示在屏幕上。对于每个呈现树节点来讲，主要绘制顺序以下：
背景颜色
背景图片
边框
子呈现树节点
轮廓

CSShtml

1.怎样写出更好的CSS，如层级不宜过深，如什么时候用ID和什么时候用class，如怎么拆分组织CSS代码等;
2.盒模型；
3.很是经常使用的CSS3知识，好比CSS3动画，好比弹性布局。

css盒子模型概念前端

CSS css盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：html5

图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），而后最外层是外边距（margin），整个构成了框模型。一般咱们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其余元素。java

元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；jquery

元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值＋ border的上下宽度。ios

css弹性布局概念nginx

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即使容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工做。在该布局模型中，容器会根据布局的须要，调整其中包含的条目的尺寸和顺序来最好地填充全部可用的空间。当容器的尺寸因为屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。好比当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并无这样内在的方向限制，能够由开发人员自由操做。

从图中能够看到，弹性盒布局中有两个互相垂直的坐标轴：一个称之为主轴（main axis），另一个称之为交叉轴（cross axis）。主轴并不固定为水平方向的 X 轴，交叉轴也不固定为垂直方向的 Y 轴。在使用时，经过 CSS 属性声明首先定义主轴的方向（水平或垂直），则交叉轴的方向也相应肯定下来。容器中的条目能够排列成单行或多行。主轴肯定了容器中每一行上条目的排列方向，而交叉轴则肯定行自己的排列方向。能够根据不一样的页面设计要求来肯定合适的主轴方向。有些容器中的条目要求从左到右水平排列，则主轴应该是水平方向的；而另一些容器中的条目要求从上到下垂直排列，则主轴应该是垂直方向的。

肯定主轴和交叉轴的方向以后，还须要肯定它们各自的排列方向。对于水平方向上的轴，能够从左到右或从右到左来排列；对于垂直方向上的轴，则能够从上到下或从下到上来排列。对于主轴来讲，排列条目的起始和结束位置分别称为主轴起始（main start）和主轴结束（main end）；对于交叉轴来讲，排列行的起始和结束位置分别称为交叉轴起始（cross start）和交叉轴结束（cross end）。在容器进行布局时，在每一行中会把其中的条目从主轴起始位置开始，依次排列到主轴结束位置；而当容器中存在多行时，会把每一行从交叉轴起始位置开始，依次排列到交叉轴结束位置。

对于弹性盒布局的容器，使用"display: flex"声明使用弹性盒布局。CSS 属性声明"flex-direction"用来肯定主轴的方向，从而肯定基本的条目排列方式，有row、row-reserve、column、column-reserve。

默认状况下，弹性盒容器中的条目会尽可能占满容器在主轴方向上的一行。当容器的主轴尺寸小于其全部条目总的主轴尺寸时，会出现条目之间互相重叠或超出容器范围的现象。CSS 属性"flex-wrap"用来声明当容器中条目的尺寸超过主轴尺寸时应采起的行为。

JavaScript

(1)事件模型
(2)闭包
(3)原型链

事件模型

javascript中有两种事件模型：DOM0，DOM2。

DOM0级事件模型是早期的事件模型，全部的浏览器都是支持的，并且其实现也是比较简单。

DOM2级事件模型

事件捕获和事件冒泡

注册事件和解除事件

在DOM2级中使用addEventListener和removeEventListener来注册和解除事件（IE8及以前版本不支持）。这种函数较之以前的方法好处是一个dom对象能够注册多个相同类型的事件，不会发生事件的覆盖，会依次的执行各个事件函数。

闭包

当function里嵌套function时，内部的function能够访问外部function里的变量。

但，这还不是闭包。当你return的是内部function时，就是一个闭包。内部function会close-over外部function的变量直到内部function结束。

function foo(x) {
    var tmp = 3;
    return function (y) {
        alert(x + y + (++tmp));
    }
}
var bar = foo(2); // bar 如今是一个闭包
bar(10);

实际上闭包概念就是为了不内存泄露而存在的，闭包重点（或者意义）就是理解js的做用域，理解了做用域方能更主观的避免内存泄露，好一点的教程都会将闭包跟做用域联系在一块儿。

原型链

JS在建立对象（不管是普通对象仍是函数对象）的时候，都有一个叫作__proto__的内置属性，用于指向建立它的函数对象的原型对象prototype。以上面的例子为例：

console.log(zjh.__proto__ === person.prototype) //true

一样，person.prototype对象也有__proto__属性，它指向建立它的函数对象（Object）的prototype

console.log(person.prototype.__proto__ === Object.prototype) //true

继续，Object.prototype对象也有__proto__属性，但它比较特殊，为null

console.log(Object.prototype.__proto__) //null

咱们把这个有__proto__串起来的直到Object.prototype.__proto__为null的链叫作原型链。

移动Web开发

(1)移动Web开发和PC Web开发有何不一样？此题考察你对移动Web开发的总体理解，同时看你可否有组织有条理地思考问题；
(2)怎么实现响应式布局？考察你是否了解常见的布局方案；
(3)移动端的手势和事件；
(4)怎么提升移动端页面的渲染性能？针对移动端网络，考察你是否能从减小HTTP请求出发提出解决方案，是否了解GPU渲染（偏进阶）等；

PC端有ie、chrome、ff内核兼容问题移动端，简单来讲兼容问题相对较少，可是移动端要作好多分辨率的处理，移动端全部图片和全部html标签的尺寸都要减半。

PC端最经常使用的就是固定宽度980px，而后水平居中，移动端不能这么作，由于考虑到横竖屏和分辨率不一的问题。只要牵涉到移动端，就要牵涉到响应式（也叫作自适应）；若是只针对移动端的项目，主要考虑的是320px到750px宽的兼容。移动端相比于PC端多了触摸、滑动，减小了鼠标悬停、点击等事件。

手机浏览器可能不兼容CSS3的属性，能够用一下代码来增强你代码的健壮性。

（1）@media screen and (max-width:355px)宽度小于355px

（2）width:95%

width:calc(100%-10px);

width:-webkit-calc(100%-10px);

width:-moc-calc(100%-10px);

常见的布局方案

一、静态布局（Static Layout）

即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；意思就是无论浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；对于移动设备，单独设计一个布局，使用不一样的域名如wap.或m.。

二、弹性布局

弹性布局是CSS3引入的强大的布局方式，用来替代之前Web开发人员使用的一些复杂而易错hacks方法（如使用float进行相似流式布局）。

其中flex-flow是flex-direction和flex-wrap属性的简写方式，语法以下：

flex-flow: <flex-direction> || <flex-wrap>

flex-direction: row（初始值） | row-reverse | column | column-reverse

flex-wrap: nowrap（初始值） | wrap | wrap-reverse

flex-direction定义了弹性项目在弹性容器中的放置方向，默认是row，即行内方向（通常而言是由左往右，但注意这个和书写模式有关）。

flex-wrap定义是否须要拆行以使得弹性项目能被容器包含。*-reverse表明相反的方向。

二者结合起来即flex-flow属性就肯定了弹性容器在main axis和cross axis两个方向上的显示方式

三、自适应布局（Adaptive Layout）

自适应布局（Adaptive）的特色是分别为不一样的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每一个布局中，页面元素不随窗口大小的调整发生变化。你能够把自适应布局看做是静态布局的一个系列。就是说你看到的页面，里面元素的位置会变化而大小不会变化。

四、流式布局

流式布局（Liquid）的特色（也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整，主要的问题是若是屏幕尺度跨度太大，那么在相对其原始设计而言太小或过大的屏幕上不能正常显示。你看到的页面，元素的大小会变化而位置不会变化——这就致使若是屏幕太大或者过小都会致使元素没法正常显示。

5.响应式布局（Responsive Layout）

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

name="viewport"  
 名称=视图
width=device-width
 页面宽度=设备宽度(能够理解为获取你手机的屏幕宽度)
initial-scale - 初始的缩放比例  
minimum-scale - 容许用户缩放到的最小比例   
maximum-scale - 容许用户缩放到的最大比例  
user-scalable - 用户是否能够手动缩放

分别为不一样的屏幕分辨率定义布局，同时，在每一个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。能够把响应式布局看做是流式布局和自适应布局设计理念的融合。每一个屏幕分辨率下面会有一个布局样式，同时位置会变并且大小也会变。

移动端前端常见的触摸相关事件touch、tap、swipe等整理

1.click事件

单击事件，相似于PC端的click,但在移动端中，连续click的触发有200-300ms的延迟。

2.touch事件

触摸事件，有touchstart touchmove touchend touchcancel四种之分。

3.tap事件

触碰事件，通常用于代替click事件，有tab/long tab/single tap/double tab四种之分。

4.swipe类事件

滑动事件，有swipe/swipeLeft/swiperighgt/swipeup/swipedown五种之分。

移动端前端手势事件

手势事件只是概念型，目前尚未浏览器原生支持，按照概念能够分为gesturestart 、gesturechange 、gestureend三种事件。

gesturestart：当有两根或多根手指放到屏幕上的时候触发

gesturechange：当有两根或多根手指在屏幕上，而且有手指移动的时候触发

gestureend：当倒数第二根手指提起的时候触发，结束gesture

移动端页面渲染优化

HTML文档是以包含文档编码信息的数据流方式在网络间传输，页面的编码信息通常会在HTTP响应的头部信息或在文档内的HTML标记中指明，客户端浏览器只有在肯定了页面编码后才能正确的渲染页面，因此在绘制页面或执行任何的javascript代码前，大部分的浏览器（ie六、ie七、ie8除外）都会缓冲必定字节的数据来从中查找编码信息，不一样的浏览器当中预缓冲的字节数是不同的。

Viewport能够加速页面的渲染、减小Dom节点、尽可能使用CSS3动画、 Touchmove、Scroll事件可致使屡次渲染。

GPU渲染

开启“强制进行GPU渲染”的弊端。任何东西有利必有弊，“强制进行GPU渲染”也不例外，就看利与弊谁多一些了。首先，图形处理从由CPU承担转移到GPU上，手机是保证运行流畅了，但耗能确定会相应的提高，这就会形成你的手机续航时间将会缩短一些。其次，有的应用程序存在不支持GPU渲染的状况。

首先GPU这个东西一开始被造出来，就是为了解决大量运算的问题。它的特色是运算速度超级快可是逻辑单一，只能处理简单的算法，而难以胜任复杂的工做。好比咱们影视从业者通常搞的那种，一等半小时渲一张图的渲染，叫离线渲染。这种渲染由于算法比较复杂，就是GPU之前不能处理的。

因此到底那些开发人员究竟是如何作到让GPU也慢慢可以作复杂的离线渲染，这件事情，我是搞不懂的，就像我也不知道今天在网上买的东西次日就送到我手上这个事情背后复杂的细节。我只是明白这种事情就是从无到有，花费不少聪明的大脑多年努力才慢慢作起来的。困难重重。

而等到GPU真的能够作离线渲染以后，咱们的渲染速度就像变魔术同样瞬间获得超大幅度的提高。这种提高是因为GPU身体结构天生适合快速运算大量数据形成的，之前它只是不会，如今它既然会了，那么就像脱缰的野马，你真的想象不到的快。

GPU核心渲染过程

应用程序阶段：进行涉及cpu和内存的算法，按照个人理解，例如在unity里面设置场景和物体，实现游戏逻辑，这些都是cpu干的活，但cpu并不能让它在屏幕上显示出来，因而cpu就把全部顶点坐标、法向量、纹理坐标、纹理等信息传递给gpu。

几何阶段：主要负责顶点坐标变换、光照、裁剪、投影以及屏幕映射 ，该阶段基于 GPU 进行运算，它将从cpu传递过来的信息加以处理，最后获得通过 变换和投影以后的顶点坐标、颜色、以及纹理坐标。光照计算也在此阶段进行。

光栅阶段：基于几何阶段的输出数据，为像素（Pixel）正确配色，以便绘制 
完整图像，该阶段进行的都是单个像素的操做，每一个像素的信息存储在颜色缓冲 器（color buffer 或者 frame buffer）中。

调试

(1)是否会使用基本的抓包工具、调试控制台；
(2)怎么从茫茫网络内容中找到有用信息；
(3)移动端如何调试；

经常使用的调试工具

浏览器下的插件：Firebug、Web Developer(IE)、IETester(浏览器兼容性测试)。主流Firebug还有一些比较好用的插件：

YSlow（性能优化），Page Speed（性能优化），DNS Flusher（清除浏览器DNS缓存，不重启浏览器使hosts生效），Sen SEO（SEO优化工具），CSS Userage（清理多余的CSS），Web Developer，User Agent Switcher（更换浏览器UserAgent）。

第三方软件：主要有Fiddler、HttpWatch、Http Analyzer。Fiddler是Microsofot出品的免费产品，几乎能够抓取全部的应用程序的HTTP请求。

Chrome控制台调试js使用

控制台介绍：

Elements:页面元素，能够进行编辑，保存后实时查看页面效果。

Network:查看js模拟的http请求，例如修改购物车中的商品数量，能够实时地看到请求地址，点击请求地址会把请求的头信息和响应信息等数据展现出来。还能够查看头信息，preview、响应信息、cookie、timeline。

Sources:左侧sources目录能够展开，从而查看加载页面所调用的资源，如js、css、php等，而且能够设置断点分析。

Timeline:查看页面性能和页面渲染速度。

Profile:主要测试加载文件速度参考。

Console:此功能是模拟js控制台，直接写代码。主要有log、debug、info、warn、error。

一、console.log 用于输出普通讯息
二、console.info 用于输出提示性信息
三、console.error用于输出错误信息
四、console.warn用于输出警示信息
五、console.group输出一组信息的开头
六、console.groupEnd结束一组输出信息
七、console.assert对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台
八、console.count（这个方法很是实用哦）当你想统计代码被执行的次数
九、console.dir(这个方法是我常用的 可不知道比for in方便了多少) 直接将该DOM结点以DOM树的结构进行输出，能够详细查对象的方法发展等等
十、console.time 计时开始
十一、console.timeEnd  计时结束
1三、console.timeLine和console.timeLineEnd配合一块儿记录一段时间轴
1四、console.trace  堆栈跟踪相关的调试

移动端测试

Eruda 是一个专为手机网页前端设计的调试面板，相似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和 Cookie 信息、浏览器特性检测等等。

Chrome Inspect：chrome浏览器自带的调试功能，能调试大多数基于 webWiew 或者经过 chrome 浏览器打开的页面

Safari 开发者工具：链接 ios 设备和 mac 电脑在 ‘开发’ 中找到要调试的设备选择用于开发(或者对应页面的title列表), Safari 会为当前要调试的页面新建一个 inspect, 在 inspect 上能够完成常见的调试功能。

Weinre 远端调试：

最后是一种通用的移动端开发时调试解决方案 Weinre Web Inspect Remote，了解一下Weinre的原理和结构:

目标页面(target) : 被调试的页面，页面已嵌入 weinre 的远程脚本.
Debug 客户端(client) : 本地的 Web Inspector 调试客户端
Debug 服务器(agent) : 一个HTTP Server, 为目标页面与Debug客户端创建通信。

client <------> Debug agent <------> Debug client

HTTP

(1)常见HTTP状态码；
(2)不一样请求类型的区别；
(3)有什么缓存方案以及怎么实现；

常见的HTTP状态码

2开头（请求成功）表示成功处理了请求的状态代码。

200   （成功）服务器已成功处理了请求。一般，这表示服务器提供了请求的网页。
201   （已建立）请求成功而且服务器建立了新的资源。
202   （已接受）服务器已接受请求，但还没有处理。
203   （非受权信息）服务器已成功处理了请求，但返回的信息可能来自另外一来源。
204   （无内容）服务器成功处理了请求，但没有返回任何内容。
205   （重置内容）服务器成功处理了请求，但没有返回任何内容。
206   （部份内容）服务器成功处理了部分 GET 请求。

3开头（请求被重定向）表示要完成请求，须要进一步操做。一般，这些状态代码用来重定向。

300   （多种选择）针对请求，服务器可执行多种操做。服务器可根据请求者 (user agent) 选择一项操做，或提供操做列表供请求者选择。
301   （永久移动）请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302   （临时移动）服务器目前从不一样位置的网页响应请求，但请求者应继续使用原有位置来进行之后的请求。
303   （查看其余位置）请求者应当对不一样的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304   （未修改）自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
305   （使用代理）请求者只能使用代理访问请求的网页。若是服务器返回此响应，还表示请求者应使用代理。
307   （临时重定向）服务器目前从不一样位置的网页响应请求，但请求者应继续使用原有位置来进行之后的请求。

4开头（请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。

400   （错误请求）服务器不理解请求的语法。
401   （未受权）请求要求身份验证。对于须要登陆的网页，服务器可能返回此响应。
403   （禁止）服务器拒绝请求。
404   （未找到）服务器找不到请求的网页。
405   （方法禁用）禁用请求中指定的方法。
406   （不接受）没法使用请求的内容特性响应请求的网页。
407   （须要代理受权）此状态代码与 401（未受权）相似，但指定请求者应当受权使用代理。
408   （请求超时）服务器等候请求时发生超时。
409   （冲突）服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。
410   （已删除）若是请求的资源已永久删除，服务器就会返回此响应。
411   （须要有效长度）服务器不接受不含有效内容长度标头字段的请求。
412   （未知足前提条件）服务器未知足请求者在请求中设置的其中一个前提条件。
413   （请求实体过大）服务器没法处理请求，由于请求实体过大，超出服务器的处理能力。
414   （请求的 URI 过长）请求的 URI（一般为网址）过长，服务器没法处理。
415   （不支持的媒体类型）请求的格式不受请求页面的支持。
416   （请求范围不符合要求）若是页面没法提供请求的范围，则服务器会返回此状态代码。
417   （未知足指望值）服务器未知足"指望"请求标头字段的要求。

5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误多是服务器自己的错误，而不是请求出错。

500   （服务器内部错误）服务器遇到错误，没法完成请求。
501   （还没有实施）服务器不具有完成请求的功能。例如，服务器没法识别请求方法时可能会返回此代码。
502   （错误网关）服务器做为网关或代理，从上游服务器收到无效响应。
503   （服务不可用）服务器目前没法使用（因为超载或停机维护）。一般，这只是暂时状态。
504   （网关超时）服务器做为网关或代理，可是没有及时从上游服务器收到请求。
505   （HTTP 版本不受支持）服务器不支持请求中所用的 HTTP 协议版本。

不一样请求类型的区别：

当使用RESTful web服务的时候，每一种HTTP请求方法的含义以下：

GET：从服务器取回数据（只是取回数据，而不会产生其余的影响）。这是一个幂等的方法（译者注：使用相同的参数重复执行，应该可以获取到相同的结果）。下面是一个使用GET请求从服务器获取id为123的书的例子。

GET /books/123

POST：POST请求一般用来建立一个实体，也就是一个没有ID的资源。一旦这个请求成功执行了，就会在HTTP请求的响应中，返回这个新建立的实体的id。咱们一般用它来上传文件或者表单。

POST /books/

PUT：PUT请求和POST请求相似，可是通常用来更新一个已有的实体。经过把已经存在的资源的ID和新的实体用PUT请求上传的服务器，来更新资源。

PUT /books/123

DELETE:DELETE方法用来从服务器上删除资源。和PUT相似，你须要把要删除的资源的ID上传给服务器。

DELETE /books/123

TRACE:提供一种方法来测试当一个请求发生的时候，服务器经过网络收到的内容。因此，它会返回你发送的内容。

HEAD:HEAS请求和GET请求资源相似，可是仅仅返回响应的头部（没有具体的响应体）。同时，和GET请求相似，HEAD也是幂等的，不会在服务器上形成其余影响。

OPTIONS:OPTIONS方法容许客户端请求一个服务所支持的请求方法。它所对应的响应头(response header)是Allow, 它很是简单地列出了支持的方法。

CONNECT:主要用来创建一个对资源的网络链接（一般请求一些可以把HTTP链接转发成为TCP链接并保持的代理）。一旦创建链接后，会响应一个200状态码和一条“Connection Established”的消息。

WEB缓存方案

web缓存分为不少种，好比数据库缓存、代理服务器缓存、还有咱们熟悉的CDN缓存，以及浏览器缓存。浏览器先向代理服务器发起Web请求，再将请求转发到源服务器。它属于共享缓存，因此不少地方均可以使用其缓存资源，所以对于节省流量有很大做用。

页面缓存状态是由http header决定的，一个浏览器请求信息，一个是服务器响应信息。主要包括Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since。其中Pragma: no-cache由HTTP/1.0规定，Cache-Control由HTTP/1.1规定。

图中，第一次请求：浏览器经过http的header报头，附带Expires，Cache-Control，Last-Modified/Etag向服务器请求，此时服务器记录第一次请求的Last-Modified/Etag再次请求：当浏览器再次请求的时候，附带Expires，Cache-Control，If-Modified-Since/Etag向服务器请求服务器根据第一次记录的Last-Modified/Etag和再次请求的If-Modified-Since/Etag作对比，判断是否须要更新，而后响应请求。

css，js，flash的缓存主要经过服务器的配置来实现这个技术，若是使用apache服务器的话，可使用mod_expires模块来实现.一样能够用nginx方式实现前端页面缓存，详情请看nginx利用proxy_cache来缓存文件。

测试网页性能工具：
⑴Page Speed：

是开源 Firefox/Firebug 插件。网站管理员和网络开发人员可使用 Page Speed 来评估他们网页的性能，并得到有关如何改进性能的建议。

⑵yslow：

YSlow能够对网站的页面进行分析，并告诉你为了提升网站性能，如何基于某些规则而进行优化