面试题小结
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)学习要全面,更要深入