移动端面试题

移动端面试题

1、 dos的命令（写五个）

cd 进入目录
md  创建目录 make dir
rd 删除目录 remove dir
dir 查询当前目录
del 删除文件
gem   ruby的安装插件命令
copy  复制文件
ipconfig  查看当前网络配置
ping 查看网络是否相通

2、什么是scss/sass?

这两个都是css预处理器,弥补了css的不足，css不支持变量，分支，循环语句，同时css也不支持混合宏和继承，.sass用换行来代替大括号和分号，.scss需要写大括号和分号，是sass的升级版，更方便好用。

3、简述sass和less的区别（答出5点满分）。

  sass是基于ruby编译的,less基于nodejs编译
  sass有@extend用作继承，而less没有
  sass有@if@else判断，less没有
  sass用$符号定义一个变量，less用@符号定义一个变量
  sass支持@for循环，less则不支持

4、举例说明什么是插值

$L:left;
.mm{
margin-#{$L}:50px;
}

5、什么是css预处理器？

  Css预处理器基于某种开发语言，经过编译生成css样式文件，它
弥补了css的一些缺陷，比如css缺少变量，缺少代码块，缺少继承，缺少逻辑判断，使用css预处理器从而提高代码的可维护性,可以更方便的管理css样式文件。

6、网页常见的单位？

px
em
rem
%

7、px、em、rem、%、vw、vh、vm这些单位的区别

px绝对单位,1px是一个像素点的大小
em相对单位：相对父元素字体的大小缩放比例
rem相对单位，是相对根元素的字体大小的缩放比例
%是相对父元素的百分比
vw是相对设备屏幕宽度的百分比  比如：屏幕宽400px   8vw=400px*8%=32px
vh是相对设备屏幕高度的百分比 
vm包含vmax和vmin，vmax为相对设备最大百分比，vmin为最小百分比

8、1rem等于多少像素？ 由谁决定

1rem具体等于多少像素是由根元素的字体大小来决定
比如 html标记的font-size为100px ,1rem=100px,如果html标记的font-size为40px,那么1rem=40px

9、如何动态的设置 rem

 function rem(){
document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5+”px”
}
rem()
window.onresize=rem;

10、html的font-size是20px， p标签的父元素是10px， 问p标签： 2.5rem是多少， 2em是多少？

2.5rem=20px*2.5rem=50px
2em=10px*2=20px

11、写出完整的移动端头部标签

<meta name=’viewport’ content=’width=device-width;initial-scale=1.0’/>
<meta charset=’utf-8’/>
<title>document</title>

12、详细解释移动端头部标签每个参数的含义

meta：设置一些网页参数的，比如编码格式，视口配置，关键字配置之类的
title: 设置网页标题 
link: 外链样式表
script: 外链js代码

13、meta都包含哪些参数

name: 要设置的项

content: 具体要设置的内容

14、去掉苹果工具栏的meta

<meta name=’mobile-web-app-capable’content=’no’/>

15、格式检测的作用

<meta name=’format-detection’ content=’telephone=no’/>
对于一些特殊文本进行检测，比如数字，地址，邮箱，可以启用或者禁用对应的功能

16、移动端都包含哪些touch事件？

touchstart
touchmove
touchend
touchcancel

17、zepto与jq的区别

zepto和jq有共同的接口
zepto针对移动端,jQ针对pc端
zepto封装了一些移动端的事件
zepto属于轻量级,相对jQuery体积比较小
zepto放弃了对低版本浏览器的支持

18、写出滑动轮播的原理

1. 判断触摸点的起始位置的差值，如果终点减去起点的差值小于零，代表动作为左滑动，反之右滑动，
2. 如果向左滑动到第一张图片，则left值为负的图片宽度，以此类推，滑动到第二张图片，则left值为负的图片宽度*2。反之亦然。

19、click事件的300毫秒延迟的解决方法

目前大部分浏览器都不存在这个问题，但是一些旧版浏览器可能会存在
使用fastclick插件事件
使用zepto中的tap事件

20、zepto都有哪些移动端事件

tap 轻击
doubleTap双击
longTap 长按
swipe 滑屏
swipeUp 向上滑屏
swipeRight 向右滑屏
swipeDown 向下
swipeLeft 向左

21、rem的好处

使用rem制作的网页可以在不同的手机设备上自适应页面大小,从而实现响应式网页效果

22、px、em、rem、%、vw、vh、vm这些单位的区别

px 绝对单位，1px为一个像素点
em 相对父元素字体大小的缩放比例
eem 相对根元素字体大小的缩放比例
%  指的是相对父元素的宽度或高度的百分比
vw 指的是相对设备宽度的百分比
vh 指的是相对设备高度的百分比

23、什么是响应式设计？响应式设计的基本原理是什么？

响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。
基本原理: 媒体查询 @media,对不同的设备设置不同的css样式

24、swiper在html里的基本结构？

<div class=”swiper-container”>
<div class=”swiper-wrapper”>
<div class=”swiper-slide”>1</div>
<div class=”swiper-slide”>1</div>
<div class=”swiper-slide”>1</div>
</div>
</div>

25、写出十个swiper的基础属性并解释其作用

autoplay:1500,  //自动轮播
speed:100, //转换的速度
loop:true|false 是否循环轮播
direction:”vertical”, 设置轮播的方向 
pagination:”.swiper-pagination”, 分页器
scrollbar:”.swiper-scrollbar”, 滚动条
nextButton:”.swiper-button-next”   下一页
prevButton:”.swiper-button-prev”  上一页
slidesPerView:n ,显示的数量
effect:”cube”,切换效果

26、写出四种切换效果

fade   淡入淡出
cube    3d盒子
coverflow,3d流
flip   3d翻转

27、简述什么是swiper，他的作用是什么

swiper是一款简单免费的轻量级的javascript库文件  可以实现移动端的 多种滑块设置以及样式 

28、写出swiper里的方法

slideTo(n) 切换到指定slide
slideNext() 切换到下一个滑块
slidePrev() 切换到上一个滑块
removeSlide(index) 移除指定 index 索引值滑块

29、怎样初始化swiper

var swiper=new Swiper(“.swiper-container”,{})

30、iscroll是什么？

  iscroll是一个高性能、资源占用少、无依赖，多平台的js滚动插件

31、iscroll的属性？

   scrollbars,mousewheel,startX,startY,scrollX,scrollY

32、 IScroll的简单布局？

<div class=”box”>
<div class=”content”>
滚动内容
</div>
</div>

33、iscroll的一些事件的单词？

scroll
scrollStart
scrollEnd
scrollMove
scrollBy

34、写出iscoll的方法 （至少三个 以及含义）

scrollTo():滚动到某个位置 
scrollToElement():滚动到某个元素
scrollBy()从:当前位置滚动多少距离

35、 简述什么是swiper，他的作用是什么

简单的，轻便的，开源的，免费的移动端滑屏js的插件,使用swiper可以快速轻松的制作移动的轮播特效

36、写出弹性盒模型中所有的属性， 并解释什么意思

display:flex;设置弹性盒子
flex-direction:column | row  设置弹性盒子方向
flex-wrap:wrap  设置自动换行
justify-content:space-around， 剩余空间分配
align-items:center 设置对齐方式
 flex-grow 给子元素设置 默认为0,不自动扩展，改变1为自动扩大到占满父元素的剩余空间
flex-shrink 默认值1,内容超出父元素时，自动缩小

37、移动端都包含哪些事件？

touchstart
touchmove
touchend
touchcancel

38、rem 适配原理是什么，请手写适配代码

  Rem适配的原理是根据设备屏幕的宽度自动更改html标记的字体大小
适配代码：
function rem(){
document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5+”px”
}
rem()
window.onresize=rem;

39、写出iscoll的属性和方法 （至少三个 以及含义）

startY 垂直滚动的距离
startX 水平滚动的距离
scrollX 是否允许水平滚动
scrollTo() 滚动到指定位置
scrollBy() 在当前位置基础上，滚动到

40、IScroll的简单布局？

<div class=”box”>
	<div class=”content”>
		这里是滚动内容
	</div>
</div>

41、固定定位布局 键盘挡住输入框内容，如何解决?

setTimeout(function(){
document.body.scrollTop = document.body.scrollHeight;
},300);

42、常见请求头格式：Content-type 的值有哪些，各自的使用场景是什么（面试题）

text/html ： HTML格式
text/plain ：纯文本格式      
text/xml ：  XML格式
image/gif ：gif图片格式    
image/jpeg ：jpg图片格式 
image/png：png图片格式

43、上下拉动滚动条时卡顿、慢 如何解决

body {
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}

44、http工作流程

 域名解析 -> 三次握手 -> 发起HTTP请求 -> 响应HTTP请求并得到HTML代码 -> 浏览器解析HTML代码  -> 浏览器对页面进行渲染呈现给用户

45、HTTP请求体

将一个页面表单中的组件值通过param1=value1&param2=value2的键值对形式编码成一个格式化串，不但报文体可以传递请求参数，请求URL也可以通过类似于“/chapter15/user.html? param1=value1&param2=value2”的方式传递请求参数

46、http常用状态码

200 为OK
301永久重定向
403 无权访问
404 资源不存在

47、什么是跨域，如何解决，以及jsonp 的原理

在JavaScript中，出于方面考虑，制定了同源策略。JavaScript只能访问与包含它的文档在同一域下的内容。
JSONP跨域GET请求是一个常用的解决方案

可以利用<script>标签来向服务器发送请求，服务器端接收到请求后返回一段js代码，调用客户端写好的方法，并把JSON数据传入该方法中，客户端即可拿到数据。

48、jq的ajax 参数有哪些，说出10个参数的含义

url: 发送请求的地址
type:请求方式（post或get）默认为get
timeout: 数字 请求超时时间（毫秒）
async:默认设置为true，请求为异步请求
cache:默认为true从浏览器缓存中加载请求信息
data:向服务器提交的数据
dataType:请求的数据类型
success:请求成功后调用的回调函数
error:请求失败时被调用的函数
contentType:向服务器发送的编码类型

49、移动端开发中遇到的兼容问题

	固定定位布局 键盘挡住输入框内容 

setTimeout(function(){
document.body.scrollTop = document.body.scrollHeight;
},300);

50、socket中TCP的三次握手建立连接

答：客户端发送请求到服务器，建立连接，其中需要三次握手，第一次发送请求头信息过去，第二次服务器接收到请求头确认客户端发出一个响应头，第三次客户端收到响应头，确定服务器信息，可以发送请求到服务器

51.什么是ajax？

AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

52.post和get的区别？

1.get是显式提交，提交到url地址栏,不安全，post是隐式提交,提交到body，安全高
2.get方式提交的内容长度有限制,post不受长度限制
3.get由于提交到地址栏，所有数据需要转换为unicode编码,post不需要转换

53.ajax里0,1,2,3,4分别代表什么意思？、

0:表示未初始化
1:与服务建立链接
2:服务器已接收客户端的请求
3:服务正在处理用户的请求
4:请求已经完成，服务器准备就绪

54.ajax优缺点？

优点：可以不用重新加载整个页面，实现局部的数据更新,
缺点：不利于搜索引擎爬虫抓取，对seo不友好

55.Ajax的核心？

Ajax的核心是通过XMLHttpRequest()对象实现异步更新数据
XMLHttpRequest主要方法和属性有：
open()
send()
onreadystatechange事件
readystate
status
responseText

56.手写原生ajax；

答：
var xhr=new XMLHttpRequest()
xhr.open(“get”，url,true)
xhr.send()
xhr.onreadystatechange=function(){
if(xhr.readystate==4 && xhr.status==200){
console.log(xhr.responseText)
}
}

57.ajax的原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。需要从服务器读取新数据时由Ajax引擎代为向服务器提交请求。

58.AJAX的兼容写法？：

	var xhr;
	if(window.XMLHttpRequest){
		xhr=new XMLHttpRequest();
	}else{
		xhr=ActiveXObject()
	}	

59.原生ajax的步骤：

1.创建一个XMLHttpRequest的对象. 
2.通过open（）与服务器建立连接。 
3.使用send（） 来发送请求。 
4.使用onreadystatechange事件来监听。如果表示readystate==4就说明解析成功，且status==200(状态码成功)，就说明与后台搭建成功。
5.使用responseText来获取服务器返回的数据

60.什么是同步、什么是异步？

当我们向服务器发送一条命令时，需要等待服务做出响应后再发送下一条命令,这样的叫同步,
	向服务器发送一条命令，不需要等待服务器做出响应，可以直接再发送下一条命令，这样的我们称为异步

61、什么是跨域？什么是jsonp

跨域是JavaScript出于安全方面的考虑，制定了同源策略，不允许浏览器在当前访问的域名的页面中的javascript的调用其他域名页面中的对象或方法。
Jsonp其实就是一个跨域解决方案。浏览器在js请求中，是允许通过script标签的src跨域请求，可以在请求的结果中添加回调方法名，在请求页面中定义方法，既可获取到跨域请求的数据。

62.jqery里ajax的方法及含义

$.ajax({})   ajax可以设置type:get或post
$.get(url,{},function(ret){},”json”),使用get请求的ajax
$.post(url,{},function(ret){},”json”) 使用post请求的ajax
$.getJSON(url,function(ret){}),使用get请求，返回json数据

63.Jquery获取节点的方法？

$(“选择器”)    

64.写出JQ $.get的参数？

  $.get(url,{},function(ret){},”json”) 

	url 为请求的网址
	{} 为对象，是指向服务传递参数及数据
	Function(ret){} ajax成功后的要执行的函数
	Json 为将服务器返回的数据转换为json 格式

65. JQ删除节点的方法 （区别）？

$(“选择器”).remove(); 删除自身和后代元素
$(“选择器”).empty(); 删除后代元素
$(“选择器”).detach();删除自身和后代元素

66.写出JQ $getJSON的参数？

$.getJSON(url,function(ret){}) 

67、列举Css3所有选择器

 标记选择器
 类选择器
 Id选择器
 结构选择器
 属性选择器
 伪类伪元素选择器
 表单选择器

68、写出文本超出固定宽度显示“…”的代码

选择器{
	overflow:hidden;
	text-overflow: ellipsis;
}

70、列举出transform的所有属性且解释其意思

translate(x,y)  位置移动
rotate(ndeg) 旋转
scale(x,y) 元素增加或减少的大小
skew() 表示X轴和Y轴倾斜的角度
matrix() 有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

71、列举animation所有属性且解释其意思:

animation-name   动画名
animation-duration  动画所花费的时间
animation-timing-function  动画的速度曲线
animation-delay   动画开始之前的延迟
animation-iteration-count 动画应该播放的次数
animation-direction 是否应该轮流反向播放动画

72、弹性盒子所有属性及其意思

display:flex 设置弹性盒子
flex-direction:row|column 弹性方向
flex-wrap:  是否自动换行
justify-content 父元素剩余空间分布方式
align-items  子内容对齐方式
flex-grow 内容是否放大
flex-shrink 内容是否缩放

73、Html5新增了哪些语义化把标签

header 头
nav 导航条
section  定义块
footer  定义页脚
aside 侧边栏
mark  标记
article 文章
small 小的

74、本地存储请详细解答

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除;
sessionStorage – 不能长久保存数据，浏览器关闭数据就清空
	定义本地存储：localStorage.存储名=值
				  localStorage.setItem(“存储名”,值)
	读取本地存储：localStorage.getItem(“存储名”)
				   localStorage.存储名
	清除指字本地存储：localStorage.removeItem(“存储名”)
	清空本地存储：localStorage.clear();

75、新增了那些新的选择器

属性选择器:
结构选择器:
伪类伪元素选择器

75.Html5新增哪些新特性？（至少写5条）

一、语义标签	                                                                                            
二、增强型表单                                                                                             
三、视频和音频                                                                                             
四、Canvas绘图	                                                                                        
五、SVG绘图                                                                                             
                                                                                                    
六、地理定位	                                                                                            
七、拖拽API	                                                                                            
八、webWorker	                                                                                        
九、webStorage	                                                                                    
十、webSocket                                                                                         

76.CSS3新增了哪些新特性？（至少写5条）

1、CSS3选择器	                                                                                        
2、CSS3边框                                                                                            
3、CSS3背景	                                                                                        
4、CSS3渐变	                                                                                        
5、CSS3文本效果	                                                                                        
6、CSS3字体                                                                                            
7、CSS3转换和变形                                                                                         
8、CSS3过渡	                                                                                        
9、CSS3动画	                                                                                        
10、CSS3多列                                                                                           
11、CSS3盒模型         box-sizing	                                                                    
12、CSS3伸缩布局盒模型(弹性盒子)  display:flex	                                                                
13、CSS3多媒体查询                                                                                        

77.CSS3怎么指定盒子模型为标准盒模型与怪异盒模型？它们的具体区别？（标准盒模型与怪异盒模型下盒子各自高度与宽度怎么算）

1.box-sizing属性可以指定盒子模型种类，                                                                           
	content-box指定盒子模型为W3C（标准盒模型），                                                                   
	border-box为IE盒子模型（怪异盒模型）。                                                                       
2.		                                                                                            
box-sizing: content-box;//在宽度和高度之外绘制元素的内边距和边框。	                                                    
box-sizing: border-box;//在宽度和高度之内绘制元素的内边距和边框。                                                       

78.jquery封装的ajax的方法中可以用get请求的方法（最少写三个才能得分)

$.ajax()/$.get()/$.getJSON()                                                                        

79.什么是同源策略？请写出跨域访问数据方式（至少4种）

a.同源策略又名同域策略，就是协议和主机名和端口号三者相同。                                                                      
	比如百度下javascript是不可操作谷歌下的页面；                                                                     
b.跨域访问数据方式:                                                                                         
	1.JSONP方式                                                                                       
		自定义JSONP跨域请求数据只能是get方法的请求，也就是利用script标签和script标签的src发送get请求                                 
			基于CORS实现跨域Ajax                                                                          
	2.基于CORS实现跨域Ajax                                                                                
		[Cross-Origin Resource Sharing跨域资源共享]                                                       
		请求页面不变，响应端返回数据的时候带有响应头标识，告诉浏览器允许跨域请求。                                                       
	3.使用HTML5 的window.postMessage 方法，支持跨域访问                                                         
	4.降域：思路是让不同源的变成同源。                                                                              
		通过降域可以使两个一级域名相同, 二级域名不同的网页实现跨域资源共享                                                          

80.iscroll怎么实现上拉刷新下拉加载（第12天6题）

利用监听滚动条的scroll事件判断下拉或者上拉的距离，坐上触发距离的标记，                                                              
当scrollEnd事件触发时，执行数据加载  

81.json字符串和json对象相互转化

json字符串转json对象：JSON.parse()
json对象转json字符串：JSON.stringify()

82.sessionStorage中，添加属性a,属性值为100

sessionStorage.setItem("a","100");
sessionStorage.a = "100";