移动端面试题 - 总结 | GX = 主人 = 前端工程师

# 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 预处理器？

1
2

  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 等于多少像素？由谁决定

1 2	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 是多少？

1 2	2.5rem=20px2.5rem=50px 2em=10px2=20px

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

1
2
3

<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 都包含哪些参数

1
2
3

name: 要设置的项

content: 具体要设置的内容

# 14、去掉苹果工具栏的 meta

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

# 15、格式检测的作用

1 2	<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

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

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

1
2
3

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

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

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

# 21、rem 的好处

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

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

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

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

1
2

响应式网站设计(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，他的作用是什么

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

# 28、写出 swiper 里的方法

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

# 29、怎样初始化 swiper

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

# 30、iscroll 是什么？

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

# 31、iscroll 的属性？

1	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 的方法（至少三个以及含义）

1
2
3

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

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

1	简单的，轻便的，开源的，免费的移动端滑屏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、固定定位布局键盘挡住输入框内容，如何解决？

1
2
3

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 工作流程

1	域名解析 -> 三次握手 -> 发起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？

1
2

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

# 52.post 和 get 的区别？

1
2
3

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 优缺点？

1 2	优点：可以不用重新加载整个页面，实现局部的数据更新, 缺点：不利于搜索引擎爬虫抓取，对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. 什么是同步、什么是异步？

1
2

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

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

1
2

跨域是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 的参数？

1	$.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、新增了那些新的选择器

1
2
3

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

# 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";

ES6

# 1、 dos 的命令（写五个）

# 2、什么是 scss/sass?

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

# 4、举例说明什么是插值

# 5、什么是 css 预处理器？

# 6、网页常见的单位？

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

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

# 9、如何动态的设置 rem

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

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

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

# 13、meta 都包含哪些参数

# 14、去掉苹果工具栏的 meta

# 15、格式检测的作用

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

# 17、zepto 与 jq 的区别

# 18、写出滑动轮播的原理

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

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

# 21、rem 的好处

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

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

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

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

# 26、写出四种切换效果

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

# 28、写出 swiper 里的方法

# 29、怎样初始化 swiper

# 30、iscroll 是什么？

# 31、iscroll 的属性？

# 32、 IScroll 的简单布局？

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

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

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

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

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

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

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

# 40、IScroll 的简单布局？

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

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

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

# 44、http 工作流程

# 45、HTTP 请求体

# 46、http 常用状态码

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

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

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

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

# 51. 什么是 ajax？

# 52.post 和 get 的区别？

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

# 54.ajax 优缺点？

# 55.Ajax 的核心？

# 56. 手写原生 ajax；

# 57.ajax 的原理

# 58.AJAX 的兼容写法？：

# 59. 原生 ajax 的步骤：

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

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

# 62.jqery 里 ajax 的方法及含义

# 63.Jquery 获取节点的方法？

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

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

# 66. 写出 JQ $getJSON 的参数？

# 67、列举 Css3 所有选择器

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

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

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

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

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

# 74、本地存储请详细解答

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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