面试题小结

---

1.em和rem本质区别

px:相对单位，相对于屏幕分辨率。

em:相对于当前对象的文本字体大小，若未设置，则相对于浏览器默认字体大小。

例子：通常使用em作为单位时，任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使1em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

2.em特点

1. em的值并不是固定的；2. em会`继承`父级元素的字体大小。

注意：

1. body选择器中声明Font-size=62.5%；2. 将你的原来的px数值除以10，然后换上em作为单位；3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

例子:

<div id="content">    <p></p></div>

你在content声明了字体大小为1.2rem，p的1em=con的1.2rem

3.rem

（1）只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

（2）对于ie8-不支持，解决：多写一个绝对单位的声明。因为这些浏览器会忽略用rem设定的字体大小。

例子：p {font-size:14px; font-size:.875rem;}

（3）rem不仅可以设置字体的大小，也可以设置元素宽、高等属性。

2.常见对象

（1）document对象

document.getElementsByName(name)//多获取input标签，生成数组getElementsByTagName()getAttribute()//通过元素节点的属性名称获取属性的值。setAttribute(name,value)// 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。document.createElement(tagName)document.createTextNode(data)创建文本节点document.write

（2）Window对象

 window.innerHeight - 浏览器窗口的内部高度 Window.open() 方法可以查找一个已经存在或者新建的浏览器窗口。 window.close();   //关闭本窗口 window.navigator.userAgent  //浏览器信息（内核，版本等） window.location  //对象 当前网址地址url（.location.href） window.location.search  //url  ?后面的内容（输入框name,用户输入内容的键值对） window.location.hash  //url #后面的内容 window.onload/.onscroll/.onresize window加载完成时/滚动条滚动时/窗口大小变化时事件 window.onscroll/.onresize不是按照1像素来触发事件，而是单位时间触发

注：

语法：

window.open([URL], [窗口名称], [参数字符串])

参数说明:

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。窗口名称：可选参数，被打开窗口的名称。    1.该名称由字母、数字和下划线字符组成。    2."_top"、"_blank"、"_self"具有特殊意义的名称。       _blank：在新窗口显示目标网页       _self：在当前窗口显示目标网页       _top：框架网页中在上部窗口中显示目标网页    3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。    4.name 不能包含有空格。参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。参数表：

3.IE与火狐事件机制

ie下：obj.attachEvent(事件名称(字符串),事件函数)；
标准：obj.addEventListener(事件名称,事件函数,是否捕获)

默认是false，false：冒泡 true：捕获

浏览器 事件 是否捕获 事件名 执行顺序 this IE attachEvent 没 有on 倒序 Window 火狐 addEventListener 有 没有on 顺序 执行该事件的对象

4.HTTP 和 HTTPS 的不同之处

HTTP 的 URL 以 http:// 开头，而 HTTPS 的 URL 以 https:// 开头HTTP 是不安全的，而 HTTPS 是安全的HTTP 标准端口是 80 ，而 HTTPS 的标准端口是 443在 OSI 网络模型中，HTTP 工作于应用层，而 HTTPS 工作在传输层HTTP 无需加密，而 HTTPS 对传输的数据进行加密HTTP 无需证书，而 HTTPS 需要认证证书

9.19记

---

1.为何需要前段自动化构建：自动化构建

小结：

(1)JavaScript和CSS的版本问题(2)JavaScript和CSS的依赖问题性能优化 - 文件合并 - 文件压缩效率提升 - 自动添加浏览器兼容性前缀 - 单元测试 - 代码分析 - HTML引用JavaScript或者CSS文件

2.gulp 和grunt的区别：区别

3.前后端分离好处：

（1）避免前后端互相嵌入对方代码

前端文件里不再掺杂后台的代码逻辑了，看起来舒服多了

（2）提高工作效率，分工更加明确

前后端分离的工作流程可以使前端只关注前端的事，后台只关心后台的活，两者开发可以同时进行，在后台还没有时间提供接口的时候，前端可以先将数据写死或者调用本地的json文件即可，页面的增加和路由的修改也不必再去麻烦后台，开发更加灵活。（前端可利用自己数据完成页面，等到后台完成时，在ajax中使用后台的API，然后直接将代码丢进服务器即可）

（3）局部性能提升

通过前端路由的配置，我们可以实现页面的按需加载，无需一开始加载首页便加载网站的所有的资源，服务器也不再需要解析前端页面，在页面交互及用户体验上有所提升。（实现局部加载）

4.git

（1）使用git 的原因

git不仅仅是一个代码版本管理工具，也是一个文档管理工具，在git上很容易维护一个文档；git可以提高开发效率，主要表现在:

合并对提交过程的保留修正提交廉价好用的本地分支更强大智能的合并能力完整配套的开发过程设施(wiki issue 功能大赞！)查看日志

（2） git log 查看 提交历史

在提交了若干更新之后，又或者克隆了某个项目，想回顾下提交历史，可以使用 Git log 命令查看。

默认不用任何参数的话，git log 会按提交时间列出所有的更新，最近的更新排在最上面。看到了吗，每次更新都有一个 SHA-1 校验和、作者的名字 和 电子邮件地址、提交时间，最后缩进一个段落显示提交说明。

• -p 选项展开显示每次提交的内容差异，用 -2 则仅显示最近的两次更新：

  $ git log -p -2

• git log –stat 增改行数统计

• git log –pretty=oneline 将每个提交放在一行显示

小结：

-p 按补丁格式显示每个更新之间的差异。--stat 显示每次更新的文件修改统计信息。--shortstat 只显示 --stat 中最后的行数修改添加移除统计。--name-only 仅在提交信息后显示已修改的文件清单。--name-status 显示新增、修改、删除的文件清单。--abbrev-commit 仅显示 SHA-1 的前几个字符，而非所有的 40 个字符。--relative-date 使用较短的相对时间显示（比如，“2 weeks ago”）。--graph 显示 ASCII 图形表示的分支合并历史。--pretty 使用其他格式显示历史提交信息。可用的选项包括 oneline，short，full，fuller 和 format（后跟指定格式）。

（3）git diff//查看尚未暂存的文件更新了哪些部分

git diff –cached//查看已经暂存起来的文件(staged)和上次提交时的快照之间(HEAD)的差异

git diff –staged//显示的是下一次commit时会提交到HEAD的内容(不带-a情况下)

diff命令用于比较两个文件的差异，它可以被制作成补丁文件，使用patch命令对相应的文件打补丁。

（4）merge代码

push完成之后

1.在自己的本地创建一个别人的分支   git cheackout -b xixi.jia2.拉下来别人代码   git pull origin xixi.jia 3.切换到自己的分支  git cheackout jinge.chen4.合并两个人的代码    git merge xixi.jia5.自己的分支  拉远端的dev(公共)   git pull origin dev6.切换到自己的分支    git cheackout jinge.chen7.本地代码合并到dev    git merge dev 8  合并两个人的Dev并提交放到远端     git push origin dev

遇到的问题：拉去或mrge后，切换不回去。解决：

1.站在自己分支，拉取远端dev  git pull origin jinge.chen2.git add .3. git commit -m'change'4.git add .5.git commit -m'change'6.git push origin jinge.chen

---

5.浏览器的重绘与重排

（1）浏览器从下载文档到显示页面的过程：简单讲，通常在文档初次加载时，浏览器引擎会解析HTML文档来构建DOM树，之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性，类似于盒子模型（由于隐藏元素不需要显示，渲染树中并不包含DOM树中隐藏的元素）。当渲染树构建完成后，浏览器就可以将元素放置到正确的位置了，再根据渲染树节点的样式属性绘制出页面。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。

（2）重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，且并不一定伴随重排。

（3）重排是更明显的一种改变，可以理解为渲染树需要重新计算。下面是常见的触发重排的操作：

i> DOM元素的几何属性变化

当DOM元素的几何属性变化时，渲染树中的相关节点就会失效，浏览器会根据DOM元素的变化重新构建渲染树中失效的节点。之后，会根据新的渲染树重新绘制这部分页面。而且，当前元素的重排也许会带来相关元素的重排。例如，容器节点的渲染树改变时，会触发子节点的重新计算，也会触发其后续兄弟节点的重排，祖先节点需要重新计算子节点的尺寸也会产生重排。最后，每个元素都将发生重绘。可见，重排一定会引起浏览器的重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的。

ii>DOM树的结构变化

　当DOM树的结构变化时，例如节点的增减、移动等，也会触发重排。浏览器引擎布局的过程，类似于树的前序遍历，是一个从上到下从左到右的过程。前面元素发生变化时，会导致整个文档的重新渲染，而在其后插入一个元素，则不会影响到前面的元素。

iii>浏览器引擎可能会针对重排做了优化。比如Opera，它会等到有足够数量的变化发生，或者等到一定的时间，或者等一个线程结束，再一起处理，这样就只发生一次重排。

但除了渲染树的直接变化，当获取一些属性时，浏览器为取得正确的值也会触发重排。这样就使得浏览器的优化失效了。这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以，在多次使用这些值时应进行缓存。

此外，改变元素的一些样式，调整浏览器窗口大小等等也都将触发重排。开发中，比较好的实践是尽量减少重排次数和缩小重排的影响范围。

总结：尽量减少重排次数和缩小重排的影响范围。例如：

（1）JS:

var changeDiv = document.getElementById(‘changeDiv’);changeDiv.style.color = ‘#093′;changeDiv.style.background = ‘#eee’;changeDiv.style.height = ’200px’;

可以合并为：
　CSS:

div.changeDiv {    background: #eee;    color: #093;    height: 200px;}

　JS:

document.getElementById(‘changeDiv’).className = ‘changeDiv’;

（2）将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。

（3） 在内存中多次操作节点，完成后再添加到文档中去。例如要异步获取表格数据，渲染到页面。可以先取得数据后在内存中构建整个表格的html片段，再一次性添加到文档中去，而不是循环添加每一行。

（4）由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。

（5）在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量。

建议：

在最近几次面试中比较常问的一个问题：在前端如何实现一个表格的排序。如果应聘者的方案中考虑到了如何减少重绘和重排的影响，将是使人满意的方案。

9.5记

---

1.两种盒模型

（1）W3C盒模型（标准和模型）–>内容盒模型content box(默认值)

W3C盒模型认为：元素的with和height属性仅仅指content area。

W3C盒模型 元素的总共宽和高：
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

(2)IE盒模型–>边框盒模型border-box

IE盒模型认为：元素的with和height属性 由content area + padding + border组成。

IE盒模型 元素的总共宽和高：
Total element width = left margin + width + right margin
Total element height = +top margin + height + bottom margin

注意：

（1）background-color设置元素的背景色：包括content padding border，不包括margin，margin背景色始终为transparent

div{    width:300px;    height:300px;    border:10px dashed pink;    padding:20px;    background-color:rgba(0,0,0,0.6);}

（2）如果box-sizing是默认值(content-box)，width, min-width, max-width
, height, min-height与 max-height控制内容大小。

---

2.position的6个属性值

（1）relative

a、不影响元素本身特性；b、不使元素脱离文档流（元素原始位置会被保留）；c、没有定位偏移量时对元素无影响（相对于自身偏移）；d、提升层级；

(2)absolute

a、使元素完全脱离文档流；b、使内联元素支持宽高；c、快元素的宽高，由内容撑开d、相对于距离其最近的且已定位的父元素偏移，若未找到便逐层上找，直到document；e、相对定位一般配合绝对定位使用；f、提升层级

（3）fixed

与绝对定位一致，但相对于可视区域偏移，且ie6及更低版本不兼容

(4)static（默认）

没有定位，元素出现在正常的流中，（忽略left/top/bottom/riht，z-index）

(5)inherit

规定应该从父元素继承posItion的属性值

（6）sticky

粘性定位：结合了 position:relative 和position:fixed两种定位功能于一体的特殊定位，适用于一些特殊场景。

元素定位表现为在跨越特定临界值前为相对定位，之后为固定定位。临界值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

兼容性：

例子1：

设定的阈值是 top:0 ，这个值表示当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 等于0px 时，元素表现为 fixed 定位，也就会固定在顶部。

css:

.container {    background: #eee;    width: 600px;    height: 1000px;    margin: 0 auto;}.sticky-box {    position: -webkit-sticky;    position: sticky;    height: 40px;    margin-bottom: 30px;    background: #ff7300;    top: 20px;    font-size: 30px;    text-align: center;    color: #fff;    line-height: 40px;}

html:

<div class="container">    <div class="sticky-box">内容1</div>    <div class="sticky-box">内容2</div>    <div class="sticky-box">内容3</div>    <div class="sticky-box">内容4</div></div>

效果：

例子2：头部导航栏固定(超出固定)

在没滚动时，nav为relative;在滚动达到临界值（即p重叠在nav下面），nav显示fixed.

CSS:

.container {    background: #eee;    width: 600px;    height: 1000px;    margin: 0 auto;}nav {    position: -webkit-sticky;    position: sticky;    top:0;}nav {    height: 50px;    background: #999;    color: #fff;    font-size: 30px;    line-height: 50px;}.content {    margin-top: 30px;    background: #ddd;}p {    line-height: 40px;    font-size: 20px;}

html:

<div class="container">    <nav>我是导航栏</nav>    <div class="content">        <p>我是内容栏</p>        <p>我是内容栏</p>        <p>我是内容栏</p>        <p>我是内容栏</p>        <p>我是内容栏</p>        <p>我是内容栏</p>        <p>我是内容栏</p>        <p>我是内容栏</p>    </div></div>

效果:

注意：
（1）top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。

（2）设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。这里需要解释一下：如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况。
如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。

---

3.display的常见属性（none||block||inline||inline-block）

4.隐藏元素方法

（1）display:none

元素使用该属性会不占据空间，且其上功能将不存在；元素在页面将完全消失；元素原本占据的空间会被其他元素占据，引起浏览器的重绘与重拍

(2)visibility:hidden

元素在页面消失，但仍然占据位置；仅导致浏览器的重绘，不导致浏览器的重排，适用于不希望元素消失后页面布局发生变化的场景；元素上的功能将不存在

（3）opacity:0

与（2）相似，元素在页面消失，但仍然占据位置；元素上的功能依然存在

（4）width/height设为0

（5）添加遮罩

（6）利用margin或定位等移出视线

（7）transform: scale(0,0);

站位+功能消失

（8）通过设置z-index(如-1000)，让其他元素遮盖住该元素。

（9）clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px);

注：

   （1）polygon（坐标，坐标，。。。），这些坐标连成最终要显示的区域   （2）站位+功能消失

---

5.伪类与伪元素

（1）常见伪类

状态伪类：

:link表示链接的正常状态，选择那些尚未被点过的链接。:visited伪类选择点过的链接，应该声明在第二位（在:link之后）:hover伪类在用户指针悬停时生效。:active只发生在鼠标被按下到被释放的这段时间里:focus用于选择已经通过指针设备、触摸或键盘获得焦点的元素，在表单里使用得非常多。

结构化伪类：

E:nth-child(n)  表示E父元素中的第n个子节点，且类型为E（先找第n个，再判断是否为E）p:nth-child(odd){background:red}/*匹配奇数行(如:第一行)*/p:nth-child(even){background:red}/*匹配偶数行*/p:nth-child(2n){background:red}(n>=0)练习：做一个商品列表，要求4个一行，并且左右对齐E:nth-last-child(n) 表示E父元素中的第n个子节点，从后向前计算，且类型为EE:nth-of-type(n)  表示E父元素中的第n个E子节点（先在父元素中找E,再在结果中找第n个）E:nth-last-of-type(n)表示E父元素中的第n个E子节点，从后向前计算E:empty 表示E元素中没有子节点。 注意：会将父标签中的空白区域理解成文本节点E:first-child 表示E父元素中的第一个子节点，且类型为EE:last-child 表示E父元素中的最后一个子节点，且类型为EE:first-of-type 表示E父元素中的第一个E子节点E:last-of-type 表示E父元素中的最后一个E子节点E:only-child表示E父元素中只有一个子节点。注意：不包含文本节点（获取时自动跳过文本节点）E:only-of-type 表示E父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：不包含文本节点

取反伪类

li:not(.first-item) {    color: orange;}

:target

含义：匹配相关URL指向的E元素。

解释：URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。

例子：点击跳转到某个具体的元素

CSS：

a{    margin-bottom:10px;}div{    width:200px;    height:200px;    text-align: center;    line-height: 200px;    font-size: 50px;    color: #fff;    margin-bottom: 500px;    display:none;}#div1{   background-color: #34b1ff;}#div2{    background-color: #75ffcd;}#div3{    background-color: #ff89d9;}div:target{    display: block;}

html:

<a href="#div1">跳到div1</a><a href="#div2">跳到div2</a><a href="#div3">跳到div3</a><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div>

验证伪类

E:disabled 表示不可点击（获取焦点）表单控件E:enabled 表示可点击（获取焦点）的表单控件E:checked 表示已选中的checkbox或radio

:read-only伪类

选择用户不能编辑的元素，与:disabled伪类相似

（2）常见伪元素

E::selection

表示E元素在用户选中文字时（moz下，要做兼容，加上-moz）

E::before

生成内容在E元素前

E::after

生成内容在E元素后

E::first-line

表示E元素中的第一行

E::first-letter

表示E元素中的第一个字符

---

H5篇

（1）语义化标签+表单控件======》课件html5-1,5-2

(2)地理定位

先通过navigator.geolocation判断用户设备是否支持地理定位；若支持，则运行 getCurrentPosition()方法；如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象，getCurrentPosition() 方法的第二个参数showError用于处理错误，它规定当获取用户位置失败时运行的函数。

函数showPosition(),调用coords的latitude和longitude即可获取到用户的纬度和经度；百度地图和谷歌地图等提供了这方面的接口，我们只需要将获取到的经纬度信息传给地图接口，则会返回用户所在的地理位置，包括省市区信息，甚至有街道、门牌号等详细的地理位置信息。

代码思路：首先在页面定义要展示地理位置的div，分别定义id#baidu_geo和id#google_geo。我们只需修改关键函数showPosition()。先来看百度地图接口交互，我们将经纬度信息通过Ajax方式发送给百度地图接口，接口会返回相应的省市区街道信息。百度地图接口返回的是一串JSON数据，我们可以根据需求将需要的信息展示给div#baidu_geo。注意这里用到了jQuery库，需要先加载jQuery库文件。

<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>演示：HTML5获取地理位置定位信息</title><script type="text/javascript" src="jquery-1.10.1.min.js"></script><style type="text/css">.demo{width:560px; margin:60px auto 10px auto}.geo{margin-top:20px}.demo p{line-height:32px; font-size:16px}.demo p span,#baidu_geo,#google_geo{font-weight:bold}</style></head><body><div id="main">    <div class="demo">        <p>地理坐标：<span id="latlon"></span></p>        <div class="geo">            <p>百度地图定位位置：</p>            <p id="baidu_geo"></p>        </div>        <div class="geo">            <p>GOOGLE地图定位位置：</p>            <p id="google_geo"></p>        </div>    </div></div><script>function getLocation(){    if (navigator.geolocation){        navigator.geolocation.getCurrentPosition(showPosition,showError);    }else{        alert("浏览器不支持地理定位。");    }}function showPosition(position){    $("#latlon").html("纬度:"+position.coords.latitude +'，经度:'+ position.coords.longitude);    var latlon = position.coords.latitude+','+position.coords.longitude;    //baidu    var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0";    $.ajax({         type: "GET",         dataType: "jsonp",         url: url,        beforeSend: function(){            $("#baidu_geo").html('正在定位...');        },        success: function (json) {             if(json.status==0){                $("#baidu_geo").html(json.result.formatted_address);            }        },        error: function (XMLHttpRequest, textStatus, errorThrown) {             $("#baidu_geo").html(latlon+"地址位置获取失败");         }    });    //google    var url = 'http://maps.google.cn/maps/api/geocode/json?latlng='+latlon+'&language=CN';    $.ajax({         type: "GET",        url: url,         beforeSend: function(){            $("#google_geo").html('正在定位...');        },        success: function (json) {             if(json.status=='OK'){                var results = json.results;                $.each(results,function(index,array){                    if(index==0){                    $("#google_geo").html(array['formatted_address']);                    }                });            }        },        error: function (XMLHttpRequest, textStatus, errorThrown) {             $("#google_geo").html(latlon+"地址位置获取失败");         }     });}function showError(error){    switch(error.code) {        case error.PERMISSION_DENIED:            alert("定位失败,用户拒绝请求地理定位");            break;        case error.POSITION_UNAVAILABLE:            alert("定位失败,位置信息是不可用");            break;        case error.TIMEOUT:            alert("定位失败,请求获取用户位置超时");            break;        case error.UNKNOWN_ERROR:            alert("定位失败,定位系统失效");            break;    }}getLocation();</script></body></html>

---

媒体查询：

写法一：非手机调试下成立

div{width:100px; height:100px; background-color:red;}@media screen and (min-width:300px) and (max-width:600px) {     div{margin:100px auto; background-color:blue;}}

写法二：不同屏幕尺寸，引入不同样式表

<link rel="stylesheet" type="text/css" href="indexa.css" media="screen and (min-width:800px)"><link rel="stylesheet" type="text/css" href="indexb.css" media="screen and (min-width:400px) and (max-width: 800px)"><link rel="stylesheet" type="text/css" href="indexc.css" media="screen and (max-width: 400px)">

写法三：横竖屏

<link rel="stylesheet" media="all and (orientation:portrait)" href="indexb.css">//竖<link rel="stylesheet" media="all and (orientation:landscape)" href="indexa.css">//横

写法四：同一

@media screen and (min-width:800px) {           .wrap{border:1px solid #000; font:14px/28px "宋体";color:#000; text-indent:2em; -moz-column-count:4; -moz-column-gap:30px; -moz-column-rule:1px solid #000;}}@media screen and (min-width:400px) and (max-width:800px) {     .wrap{border:1px solid #000; font:16px/28px "宋体";color:#000; text-indent:2em; -moz-column-count:2; -moz-column-gap:20px; -moz-column-rule:1px solid #000;}}@media screen and (max-width:400px) {           .wrap{border:1px solid #000; font:16px/28px "宋体";color:#000; text-indent:2em; -moz-column-count:1; -moz-column-gap:20px; -moz-column-rule:1px solid #000;}}

常见媒体查询：

横屏智能手机：@media(min-width:321px){...}竖屏智能手机: @media(max-width:320px){...}横向ipad:@madia(orientation:landscape){...}竖向ipad:@madia(orientation:portrait){...}

---

状态码：

---

前端优化

优化目的

用户角度：页面加载更快、操作响应更快、体验更好服务端角度：减少请求数、减小请求带宽

优化方法

a. 页面优化

HTTP请求数从设计实现层面简化页面合理设置HTTP缓存资源合并与压缩(example：CSS Sprites)Inline Images（将图片嵌入到页面或style文件）Lazy Load Images避免重复的资源请求资源的无阻塞加载CSS放在HEAD中JavaScript置底Lazy Load Javascript（example：AMD）

b. 代码优化

DOM操作优化减少DOM操作，减少Reflow和RepaintHTML Collection（类数组集合。并不是一个静态的结果，表示的仅是特定的查询，每次访问时会重新执行查询。建议当需要遍历 HTML Collection时，将它转为数组再访问，以提高性能。）JavaScript减少作用域链查找（example：缓存全局变量）慎用 with、eval、Function减少闭包的使用（易内存浪费，不仅仅是常驻内存，重要的是，使用不当会造成无效内存的产生）直接量、局部变量的使用（对象属性以及数组的访问需要更大的开销）减少字符串拼接+使用CSS选择符优化减少层级，多用class（浏览器解析CSS是从右往左）资源优化图片格式的选择（非透明大图尽量不用png、PS保存图片为web格式且勾选连续选项）HTML结构优化使用HTML5 DOCTYPE标签闭合、结构分离Boolean 属性不需要赋值，如果存在则为True（example：checked、selected）语义化、标签统一整洁减少文本和元素混合，并作为另一元素的子元素避免使用"</br ></hr>"标签

备注：

html collection(元素集合):历史上的DOM集合接口。主要不同在于HTMLCollection是元素集合而NodeList是节点集合（即可以包含元素，也可以包含文本节点）。所以 node.childNodes 返回 NodeList，而 node.children 和 node.getElementsByXXX 返回 HTMLCollection 。

唯一要注意的是 querySelectorAll 返回的虽然是 NodeList ，但是实际上是元素集合，并且是静态的（其他接口返回的HTMLCollection和NodeList都是动态的）。

---

常见git命令

1.提交代码

# 添加当前目录的所有文件到暂存区$ git add .$git status# 提交暂存区到仓库区$git commit -m"5.31"git status#提交到远端分支git push origin 分支名

2.查看分支

# 列出所有本地分支$ git branch# 列出所有远程分支$ git branch -r# 列出所有本地分支和远程分支$ git branch -a# 新建一个分支，并切换到该分支$ git checkout -b [branch]# 合并指定分支到当前分支$ git merge [branch]# 删除分支$ git branch -d [branch-name]

3.撤销

# 重置暂存区的指定文件，与上一次commit保持一致，但工作区不变$ git reset [file]

版本回退

1.小结（廖雪峰-git版本回退）

HEAD指向的版本就是当前版本，因此，Git允许我们在版本的历史之间穿梭，使用命令git reset –hard commit_id。

穿梭前，用git log可以查看提交历史，以便确定要回退到哪个版本。

要重返未来，用git reflog查看命令历史，以便确定要回到未来的哪个版本。

---

10.19三面

---

1.懒加载原理？绑定什么事件？项目中使用的是插件还是自己封装的？瀑布流判断加载条件的具体表达式？

如图：当末元素.offsetTop+末元素.offsetHeight/2<页面滚动距离（scrollTop）+窗口高度clientHeight时，开始加载末元素。

2.rem原理？项目中如何使用？

var designWidth = 640, rem2px = 100;var d = window.document.createElement('div');d.style.width = '1rem'; //1rem=1 html font-sized.style.display = "none";var head = window.document.getElementsByTagName('head')[0];head.appendChild(d);//插入头部，将不在页面显示var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));d.remove();//获取默认字体后，将刚生成的div铲除掉document.documentElement.style.fontSize =   640 / designWidth * rem2px / defaultFontSize * 100 + '%';//通过该语句，更改根节点字体大小rem//实际宽度 / 设计宽度= 默认字体大小*fontSize百分比 /1rem（我项目里指定为100px）,利用该公式，当给定实际设备宽度和1rem值时，便可以计算出html根节点字体大小，即fontSize百分比console.log(document.documentElement.style.fontSize);

3.this指向

（1）

function Fn1() {    var a=2;    console.log(this.a+a);//nan(this:window)}function Fn2(){    var a=1;    Fn1();}Fn2();

解析：this全程指向window

（2）

function Fn1() {    var a=2;    console.log(this.a+a);//2+2=4}function Fn3() {    var a=3;}Fn3.prototype={    a:2};var fn3=new Fn3();//console.log(fn3.a);Fn1.call(fn3);

解析：第三行中this指向fn3,当访问fn3.a时，fn3的基本属性中没有a，于是沿着–proto–找到了Fn3.prototype.a。

备注：访问一个对象的属性时，先在基本属性中查找，如果没有，再沿着proto这条链向上找，这就是原型链。

4.手写ajax？成功状态码有哪些？原生ajax是否能实现同步，如何实现？

（1）

function ajax(url,fnSucc,fnFaild){    //参数：1、连接服务器的地址；2、成功时函数；3、失败时函数    //1、创建Ajax对象（创建XHR对象）    var oAjax = null;    if(window.XMLHttpRequest){        oAjax = new XMLHttpRequest(); //ie6及以下不兼容    }else{        oAjax = new ActiveXObjext("Microsoft.XMLHTTP");    }    //2、连接服务器    oAjax.open('GET',url,true);    //3、发送请求    oAjax.send();    //4、接收服务器的返回    oAjax.onreadystatechange = function(){        if(oAjax.readyState ==4){  //完成            if(oAjax.status ==200){                //alert('成功： '+oAjax.responseText);                fnSucc(oAjax.responseText);            }else{                //alert('失败');                if(fnFaild){                    fnFaild();                }            }        }    }}

（2）成功状态码：

200：表示客户端发来的请求，在服务端被正常处理。

在响应报文内，随状态码返回的信息会因方法的不同而不同。比如，使用get方法，在响应中返回实体的主体部分。而使用head方法，在响应中只返回首部。

204：无内容响应

一般在只需要从客户端往服务器发送信息，但不需要服务器往客户端发送新信息的情况下使用。因为该状态码表示服务器已经成功处理接收的请求，但在返回的响应中不含任何实体主体。所以当浏览器发出请求后，服务端返回204响应，那么浏览器显示的页面不发生更新。

206：范围请求

客户端先进行了范围请求，而服务器成功执行了对应部分的get请求。在响应报文中，来使用content-range指定范围内容。

5.（1）正则中+、？、*含义
（2）将ab_cd变为abCd,要求：去掉下划线，将下划线后第一个字母变为大写。

var re=/(_)([a-z])/g;

6.http

（1）如何实现DNS功能？
（2）缓存机制？怎样查看是强缓存还是协商缓存？

查看：i>强缓存：在chrome开发者工具里，返回的http状态为200，size显示为from cache。可以通过勾选“disable cache”来禁用强缓存。

ii>协商缓存：在chrome开发者工具里，若返回的http状态为304 notmodified，就可以说明资源命中了协商缓存，并且是从客户端加载。

（3）材料：若客户端没有命中强缓存，则给服务器发送请求，服务器收到请求后，先检查资源是否有更新。若无，则给浏览器返回304 not modified即可，告诉浏览器加载自身缓存即可。若有更新，则服务器直接返回资源内容。

i>讲讲304 not modified
ii>服务器怎样检查自己是否有更新？

根据时间判断：【last-modified,if-modify-since】根据标志判断:【ETag、if-none-match】

缓存知识小结及应用

（4）cache-control和expires
（5）使用代理服务器原理？代理服务器的出现，减少了源服务器的压力，那么代理服务器也属于服务器，它会压力大吗？(๑•ᴗ•๑)

7.get和post

8.看过jquery源码吗？手动封装过吗？封装冒泡排序（给定数组arr,调用arr.sort()方法，可实现排序）

思路：闭包+原型

 Array.prototype.mysort=function(){        var arr=this;//保存外部构造        var l=arr.length;        for (var i = 0;i<l;i++) {            var tag=0;            for (var j = 0; j < l-i-1; j++) {                if (arr[j]<arr[j+1]) {                    var temp=arr[j];                    arr[j]=arr[j+1];                    arr[j+1]=temp;                    tag=1;                }            }            if(!tag){                break;            }        }        return arr;    };    var arr12=[3,2,5,8];    console.log( arr12.mysort() );    //因为var arr12=[3,2,5,8]本质是var arr12=new Array(3,2,5,8)，故arr12可以继承Array原型上的方法mysort

心得：
（1）简历一定要熟悉，提前了解面试性质
（2）学习要全面，更要深入