面试题小结

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cjg214/article/details/78027138

面试题小结

---

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.jia


2.拉下来别人代码   git pull origin xixi.jia 


3.切换到自己的分支  git cheackout jinge.chen


4.合并两个人的代码    git merge xixi.jia


5.自己的分支  拉远端的dev(公共)   git pull origin dev


6.切换到自己的分支    git cheackout jinge.chen

7.本地代码合并到dev    git merge dev 


8  合并两个人的Dev并提交放到远端     git push origin dev

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

1.站在自己分支，拉取远端dev  git pull origin jinge.chen

2.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个子节点，从后向前计算，且类型为E
E: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父元素中的第一个子节点，且类型为E
E:last-child 表示E父元素中的最后一个子节点，且类型为E
E: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和Repaint
HTML 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-size
d.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）学习要全面，更要深入