1 / HTML
1.DOCTYPE 的作用是什么？标准模式与兼容模式各有什么区别?
声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
!DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉浏览器它应该使用什么样的文档类型定义（DTD）来解析文档。
标准模式，浏览器按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。标准模式的排版 和 JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作！
具体区别
1.盒模型
在严格模式中 ：width是内容宽度 ，元素真正的宽度 = width;
在兼容模式中 ：width则是=width+padding+border
2.兼容模式下可设置百分比的高度和行内元素的高宽
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。
在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
3.用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）
4.兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效
标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
2.html5为什么只需要写<!doctype html>?你知道多少种Doctype文档类型？
HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。其中，SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。BUT，HTML5不是的。
3.行内元素有哪些？块级元素有哪些？ 行内块元素有那些？
常见的块级元素有：<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,<address>,<blockquote>,<form>
行内元素：<a>,<span>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>
行内块元素：img|input|select|textarea|button等，也被称为可置换元素（Replaced element）。
4.请说出五种html5的特性
（1）语义化标签：header,footer,nav etc.
（2）canvas 画布
（3）audio, video
（4）drag 拖拽
（5）本地存储 localStorage, sessionStorage
（6）webSocket 长连接
（7）定位
（8）增强型表单 input number, datalist, keygen, output, progress
（9）svg 矢量绘图
（10）webWorker 实现js多进程。
（11）新事件如 ondrag onresize
5.简述a标签target属性的取值和作用？
<a>标签的target属性规定在何处打开连接文档
属性值
_black：点击一次打开一个新窗口
_self：默认，在当前窗口打开
_new：始终在同一个新窗口中打开
_parent：在父级窗口打开
_top：在当前的整个浏览器中打开所链接文档，即在顶级窗口打开
framename：在指定的框架中打开被链接文档
6.请列举几个html5新增的标签？
#video：表示一段视频并提供播放的用户界面#
audio：表示音频
time：日期和时间值
source：为video和audio提供数据源
nav：导航
aside：在一边
article：文章
footer：页尾
header：页眉f
main：主要的
menu：菜单
canvas：表示位图区域
track：为video和audio指定字母
svg：定义矢量图
code：代码段
figure：和文档有关的图例
figcaption：图例的说明
mark：高亮的引用文字
Datalist：提供给其他控件的预定义选项
keygen：秘钥对生成器控件
output：计算值
progress：进度条
embed：嵌入的外部资源
menuitem：用户可点击的菜单项
template：模板
section：部分
7.如何定义一个单选按钮？
input[type='radio']radio定义单选按钮
8.<img>标签上的title属性与alt属性的区别是什么？
alt是在图片不能正常加载时候显示的提示语
title属性是鼠标划上去显示的内容
9.如何处理html5新标签的浏览器兼容问题？
（1）使用静态资源的html5shiv包，载入后，初始化新标签的css
（2）使用js动态插入新标签
10.分别写出以下几个HTML标签：文字加粗、下标、居中、斜体
加粗：<b>、<strong>，下标：<sub>，居中：<center>，斜体：<i>
11.对WEB标准以及W3C的理解与认识
web标准，简单来说就是将页面的结构、表现和行为各自独立实现，尽量使用外链css样式表和js脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、
使用外链css和js脚本、
结构行为表现的分离、文件下载与页面速度更快、
内容能被更多的用户所访问、
内容能被更广泛的设备所访问、
更少的代码和组件，容易维护、改版方便，不需要变动页面内容、
提供打印版本而不需要复制内容、
提高网站易用性。
12.前端页面有哪三层构成，分别是什么，作用是什么？
最准确的网页设计思路是把网页分成三个层次，即：结构层、样式层、行为层。
HTML：结构层：
网页的结构或内容层是该页面的基础HTML代码。
CSS：样式层：
该层指示结构化HTML文档如何看待网站的访问者，并由CSS（层叠样式表）定义。
JavaScript：行为层
行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改
13.请讲述一下iframe框架的优缺点？
优：iframe能够原封不动地把嵌入的网页展现出来。如果遇到加载缓慢的第三方内容，如图标和广告等，可以用iframe来解决
缺：会产生很多页面，不容易管理。很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差
现在基本上都是用Ajax来代替iframe，iframe已渐渐退出了前端开发。
14.form表单实现上传文件必不可少的属性是什么？
enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。
method="post" 、enctype="multipart/form-data"
15.src和href的区别是什么？
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
16.input不可编辑，必填属性分别是什么？
disabled不可被编辑； required必填项；
17.请写出input常用的13种type类型，并写出每种类型的应用场景
text 默认的输入类型。
password 密码，表现为一连串的点。
file 文件上传控件。
radio 单选按钮
checkbox 复选框
hidden 隐藏的输入字段，用于在表单中添加对用户不可见
button 按钮
image 图像形式的提交按钮
reset 重置按钮,清除表单中所有数据
submit 提交按钮,提交按钮会把表单数据发送到服务器
color 调色板
tel 包含电话号码的输入域
email 包含email地址的输入域
url 包含URL地址的输入域
search 搜索域
number 包含数值的输入域
range 包含一定范围内数字值的输入域
date 选取日、月、年的输入域
month 选取月、年的输入域
week 选取周、年的输入域
time 选取月、年的输入域
datetime 选取时间、日 月、年的输入域(UTC时间)
datetime-local 选取时间、日 月、年的输入域(本地时间)
18.请简述一下你对语义化标签的理解
⒈用正确的标签做正确的事情
⒉HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；
⒊即使在没有CSS样式的情况下也以一种文档格式显示，并且是任意阅读的；
⒋搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；
⒌时阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
19.如何区分html和html5
1、在文档声明上，html有很长的一段代码，并且很难记住这段代码，都只是靠工具直接生成，而html5却不同，只有简简单单的声明，也方便人们的记忆，更加精简。
2、在结构语义上；html4.0没有体现结构语义化的标签。html5在语义上却有很大的优势,提供了一些新的html5标签。
20.img的常用属性
src 图像的源文件
alt 提示文字
width,height 高度，宽度
border 边框
vspac 垂直间距
hspace 水平间距
21.字体加粗的方法
（1）用CSS中font-weight:bold样式给字体加粗
（2）用html中的<strong>加粗标签
（3）用html中的<b>加粗标签
22.一个网页从开始请求到最终显示的完整历程
一个网页从开始请求到最终显示的完整历程一般可以分为以下7个步骤：
1.在客户端浏览器中输入网址URL。
2.发送到DNS(域名服务器)获得域名对应的WEB服务器的IP地址。
3.客户端浏览器与WEB服务器建立TCP(传输控制协议)连接。
4.客户端浏览器向对应IP地址的WEB服务器发送相应的HTTP或HTTPS请求。
5.WEB服务器响应请求，返回指定的URL数据或错误信息；如果设定重定向，则重定向到新的URL地址。
6.客户端浏览器下载数据，解析HTML源文件，解析的过程中实现对页面的排版，解析完成后，在浏览器中9显示基础的页面。
7.分析页面中的超链接，显示在当前页面，重复以上过程直至没有超链接需要发送，完成页面的全部显示。
2 / CSS
1.css性能优化的方法，至少说出五种
1.异步加载CSS
2.js，css文件压缩、
3.有选择地使用选择器
4.优化重排与重绘
5.不要使用@import
6.减少闭包的使用
7.减少dom操作
8.使用精灵图和雪碧图
2.Css选择器有几种？选择器的优先级是怎样的。
元素选择器，id选择器，calss 选择器，后代选择器，子代选
择器，伪类选择器，通配符
内联样式> id>class>元素>通配符>继承样式
3.浮动的原理什么？浮动有几种？
将排成一列的元素变成一行，脱离文档流。
主要是为了让一些标签并排显示
使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘
向下浮动向上浮动两种
4.定位有几种，他们的特点分别是什么？是相对于什么进行定位的？
static静态定位
html元素的默认值，不受top、bottom、left、right属性影响，元素出现在正常的文档流中
relative相对定位
相对定位, 特点：不脱离文档流的布局，受top、bottom、left、right属性影响,只改变自身的位置，在文档流原先的位置遗留空白区域。
absolute绝对定位
绝对定位 特点:脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static)，否则为html文档本身。
fixed固定定位
固定定位, 特点：类似于absolute，但不随着滚动条的移动而改变位置。元素的位置相对于浏览器窗口是固定位置
sticky粘性定位
粘性定位的语法格式如下：
选择器 { position: sticky; top: 10px; }
1、粘性定位可以认为是相对定位和固定定位的混合；
2、粘性定位的元素是以浏览器的可视窗口为参照点移动元素；
3、粘性定位继续占有原先的位置；
4、必须添加top、bottom、left、right其中一个才有效；
5、一般都是跟页面滚动搭配使用；
5.如何设置背景透明？
background-rgba（四个参数）
background-color:rgba(0,0,0,0~1)，使用这个方法就只会设置div背景透明，而不会影响到div里的内容。
background-color:transparent
6.请列举几种布局方式，并列举各自优点
1 静态布局:布局简单，没有兼容性问题。
2 自适应布局:自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局
3 流式布局:流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。
4 响应式布局:通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局
7.css引入方式有几种？link和@import有什么区别？
3种，行内样式，内嵌式，外链式
link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义ref连接属性等作用；
@import是CSS提供的，只能用于加载CSS;
页面被加载的时，link会同时被加载
@import引用的CSS会等到页面被加载完再加载; 网络不好的情况下，会造成页面混乱
8.在css样式中使用em和px。各有什么优势，在表现上有什么区别？
px：长度单位，值是固定的
em：值不是固定的，并且会继承父级元素的字体大小。例如浏览器默认字体的高是16px，如果未经调整的话，1em=16px。12px=0.75em
9.请列举几种隐藏元素的方法？（至少三种）
display:none 通过隐藏盒子属性
visibility:hidden 通过隐藏盒子属性
overflow:hidden 溢出隐藏
opacity: 0 ； 通过改变元素的透明度
使用绝对定位，定位到看不见的地方
10.css3中有哪些新属性？（至少五种）
background-size
padding-box
text-shadow
transform：
transition
圆角（border-radius:8px;）
阴影（box-shadow:10px）
对文字加特效（text-shadow）
变换（transform）
rgb：设置颜色不透明度的操 作
旋转 transform:rotate(9deg)
缩放 scale(0.85,0.90)
定位 translate(0px,-30px)
倾斜 skew(-9deg,0deg)
线性渐变（gradient）
增加了更多的 css 选择器
matrix()函数
border-image：图片边框
border-color：为边框设置多种颜色
background-origin：指定背景图片从哪里开始显示
background-clip：指定背景图片从什么位置开始裁剪
word-wrap：自动换行
11.请写出清除浮动有几种方式，分别是什么.
clear：both：
父级添加overflow属性（父元素添加overflow:hidden）
使用after伪元素清除浮动
使用before和after双伪元素清除浮动
12.如何初始化css样式？为什么要初始化css样式？
* { margin: 0; padding: 0}
1.浏览器差异
不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异
2.提高编码质量
如果不初始化，整个页面做完会很糟糕，重复的css样式很多
13.如何让一段文本中的所有英文单词的首字母大写？
text-transform：capitalize 首字母大写
text-transform ：uppercase 全部都是大写
text-transform ：lowercase 全都是小写
14.rgba()和opacity的透明效果有什么不同？
opacity作用于元素，以及元素内的所有内容元素
.rgba()只作用于元素的颜色或其背景色，元素的子元素不会继承透明效果
15.行内，块状，行内块元素之间如何进行转换？
display:inline； 行内样式
display:inline-block；行内块元素
display：block; 块状元素
16.如何设置一个元素，固定到网页的底部
bottom：0；
position：fixed；
17.如何使用css将多出范围的字变为...
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
css能做到文本超出第二行显示省略号
width:100px;
overflow : hidden;/*必须结合的属性,当内容溢出元素框时发生的事情*/
text-overflow: ellipsis;/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本*/
display: -webkit-box;/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示*/
-webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数*/
-webkit-box-orient: vertical;/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式*/
18.如何解决浮动引起的高度坍塌
1.给父元素设置高度
2.设置一个空标签，并且给此标签加上clear:both；
19.margin和padding的区别是什么？
Margin是调盒子与盒子之间的距离，padding调整盒子内部的距离。
20.如何取消a链接点击时的背景颜色
-webkit-tap-highlight-color:transparent;
21.display：none；和visibility：hidden；的区别是什么？
display:none 不占页面空间，visiblity:hidden 占据原先页面空间。、
display:none 引起页面重绘和回流， visiblity:hidden 只引起页面重绘。
22.css3新增的伪类有哪些？
:root 选择文档的根元素，等同于 html 元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素意外的元素
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
:checked 选择被选中的表单元素
:after 在元素内部最前添加内容
:before 在元素内部最后添加内容
:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
:nth-child(odd)
:nth-child(even)
:nth-child(3n+1)
:first-child
:last-child
:only-child
:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
:nth-of-type(odd)
:nth-of-type(even)
:nth-of-type(3n+1)
:first-of-type
:last-of-type
:only-of-type
:selection 选择被用户选取的元素部分
:first-line 选择元素中的第一行
:first-letter 选择元素中的第一个字符
23.请描述一下渐进增强与优雅降级
优雅降级：项目开始就构建站点的完整功能，然后针对浏览器测试和修复。对低版本的浏览器就行兼容性的修复。
渐进增强：项目开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
渐进增强相当于向上兼容，而优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本的
24.请简述你所了解的css中z-index的权重问题
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
后面的数值越大，表示越要优先显示
25.有哪几种方法可以使html元素脱离文本流？
1:float 2:absolute 3:fixed
26.超链接访问过后hover样式就不出现的问题是什么？如何解决？
被点击访问过的超链接样式不再具有hover和active了，解决办法是改变css属性的排列顺序：L-V-H-A（link,visited,hover,active）
27.介绍一下标准的css的盒子模型？与低版本IE的盒子模型有什么不同？
在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
28.CSS中哪些属性可以继承？
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
color：文本颜色
visibility：元素可见性
光标属性：cursor
29.width: auto 和 width: 100% 的区别？
1、width:100% 并不包含margin-left margin-right的属性值，width直接取其父容器的宽度。如果设置了margin那新的width=100%+margin的值。就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围，(这条相对于父容器是body)。
2、width:auto包含margin-left/margin-right的属性值。width:auto总是占据整行，如果要设置margin的值那么新width=100%-margin。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。
3、一般width:auto使用的多，因为这样灵活，而width:100%使用比较少，因为在增加padding或者margin的时候，容易使其突破父级框，破环布局。
30.什么是FOUC？你如何来避免FOUC
如果使用import方法对CSS进行导入，会导致某些页面在Windows下的IE出现一些奇怪的现象：
以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效(Flash of Unstyled Content)，简称为FOUC。
原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
解决方法：使用LINK标签将样式表放在文档HEAD中。
31.content-box和border-box，为什么看起来content-box更合理，但还是经常使用border-box
content-box不包含padding，border-box包含padding
32.如何让一个容器成为弹性容器？
display: flex;
33.弹性布局的布局原理是什么？什么场景下使用弹性布局？
该布局模型的目的是提供一种更加高效的方式来对容器的条目进行布局、对齐和分配空间。适用于移动端，在Android和ios.上也支持
34.如何让实现一个元素在网页中水平垂直居中？
弹性布局用给父元素加上{ display:flex;align-items:center; }
普通元素用：magin:auto
（1）知道子元素的宽高
<!--父元素相对定位-->
<!--子元素绝对定位-->
.child{
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}
（2）不考虑子元素的宽高
<!--父元素不能有定位-->
<!--子元素绝对定位-->
.child{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
（3）不用考虑子元素的宽高，且当子元素没有宽高也能居中（兼容性不是很好）
<!--父元素不能有定位-->
<!--子元素绝对定位-->
.child{
background-color: tomato;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
（4）给父元素设置display:flex
body{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
（5）通过JS实现：
获取当前屏幕的宽高，通过DOM添加css样式达到效果
（6）父元素有固定宽高
同时父元素设置：
body{
height: 988px; width: 1000px;
display:table-cell;
vertical-align: middle;
text-align: center;
}
子元素需要设置为inline-block
.child{
display: inline-block;
}
35.请简述弹性布局与传统盒模型布局的区别和优缺点？
传统布局，基于盒模型，依赖 display属性 、position属性 、float属性。它对于那些特殊布局非常不方便，比如垂直居中
如果屏幕尺寸发生变化,传统布局的页面样式就会发生变化.
弹性盒子可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理
36.flex是什么？
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
37.请解释一下css3的flex(弹性盒布局模型)以及使用场景
Flexbox（弹性盒布局模型）
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
适用场景
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。–Flex 布局，可以简便、完整、响应式地实现各种页面布局。
38.弹性盒子使用什么样的方式布局的？
CSS3 弹性盒（ Flexible Box 或flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
39.弹性盒子的布局原理是什么？
容器上有 主轴和纵轴的概念，默认主轴（main-axis）是横向，从左到右，纵轴是竖向，从上到下。其中所有的孩子的布局都会受到这两个轴的影响。
40.flex弹性盒子布局与传统盒模型布局的区别
传统盒子模型就是由外边距（margin）、边框（border）、内边距（padding）以及内容（content）组成。
传统方式
布局目标的实现，属性赋值非常松散。
严重依赖于页面结构与内容实际页面大小。
当页面属性发生变化的时候，页面的布局取值都要重新调整。
不是很能够灵活的引用页面结构的变化。
用弹性盒子布局：
相关的css属性赋值，比较统一。
布局方式灵活，可以应对页面结构元素变化。
实现了一种整体控制方法，比较直观，高效。
3/ JavaScript
1.变量命名规则
1.变量命名必须以字母或是下表符号“_”或者“$”为开头
2.变量名长度不能超过255个字符。
3.变量名中不允许使用空格。
4.不使用脚本语言中保留的关键字及保留符号作为变量名。
5.变量名区分大小写。（javascript是区分大小写的语言）
2.js数据类型有几种，判断数据类型的方法
七种数据类型：number，null,undefined,string,boolean,object,symbol
JS数据类型的判断主要有三种方法：typeof、instanceof、Object.prototype.toString.call()
最常用typeof
3.哪些运算符常用作布尔判断简述运算符的优先级
逻辑运算符 ||,&&,!。 . [] () 字段访问、数组下标、函数调用以及表达式分组
4.写出以下常用函数：生成随机数、数字四舍五入、字符串查询子串、字符串分割为数组、检索数组中的元素、数组拼接成字符串、向数组中增删元素
rand()生成随机数，
round() 数字四舍五入
substr（）字符串查询子串
split（）字符串分割为数组
results.push()寻找索引
join("")数组拼接成字符串
push（）增加
remove（）删除
toFixed()保留小数点
5.怎样改变元素的内容、属性、样式
改变内容：innerText/innerHTML
改变属性：setAttribute
改变样式：.style.color = "red"
6.怎样获取浏览器窗口尺寸
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
7.怎样控制浏览器前进、后退、页面跳转
<a href="javascript:history.back(-1)">后退</a>
<a href="javascript:history.back(1)">前进</a>
<a href="javascript:window.location.reload()">刷新</a>
<a href="javascript:document.execCommand('stop')">停止</a>
<a href=about:home>返回主页</a>
第一个方法
跳转页面;在当前页面进行跳转 location前可加 window 也可不加
location.href = "http://127.0.0.1:8080/news";
第二个方法
跳转页面;打开新的标签页进行跳转
window.open("http://127.0.0.1:8080/news");
8.遍历数组和对象的常用方法有哪些
for循环
foreach遍历（可以同时取出数组中的值和值对应的下标）
for --- of遍历
for --- in遍历（常见用在对象中，遍历对应的key值和value值）
map循环
every循环
Each循环
while循环
9.Js数据类型强制转换的方法（写出三种即可）
转换函数、强制类型转换、利用js变量弱类型转换。
10.说明全局变量和局部变量的作用范围和生命周期
局部变量：
1.局部变量：在函数内部用var声明的变量
2.局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量
（函数参数只在函数内起作用，属于局部变量）
3.局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁
全局变量：
全局变量：变量在函数外定义，网页上的所有脚本和函数都能访问它
变量生命周期：
1.变量生命周期在声明变量时开始
2.局部变量在函数执行完毕后被销毁-
3.全部变量在页面关闭后被销毁
11.例举3种强制类型转换和2种隐式类型转换?
强制：to string string number Boolean
隐式：“+”“-”“!!”
12.向数组中添加和删除元素的方法有哪些？至少各写一个
1)push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
2)unshift方法就是将要添加的元素添加到数组头部
3)pop方法是与push对应的，删除最后一个元素，数组长度-1
4)splice方法是修改方法，具有添加和删除功能
5)shift删除数组中第一个元素
13.什么是事件委托
事件委托就是利用冒泡的原理，把本应该添加到某个元素上的事件委托给他的父级，从而减少DOM交互达到网页优化。
14.闭包是什么？有什么特性？对页面有什么影响？
闭包是将函数内部和函数外部连接起来的桥梁。 特性：函数嵌套函数；内部函数可以读取到外部函数的变量和参数；不会被垃圾回收制度回收。
使用闭包会占有内存资源，过多的使用闭包会导致内存溢出，影响页面刷新速度。
15.如何创建新元素并添加到页面中
先在html页面创建一个空div var div = document.createElement(‘p’);
Div.appendChild(p);先创建元素然后插入页面中的空div
16.希望获取到页面中所有的checkbox怎么做
var type = document.getElementByClass(input).type=’checkbox‘
var checkBoxList = [];
var len = domList.length; //缓存到局部变量
while (len--) { //使用while的效率会比for循环更高
if (domList[len].type == 'checkbox') {
checkBoxList.push(domList[len]);
}
}
console.log(checkBoxList)
17.创建一个数组 每一项都是0到50之间的随机数字，请写出关键代码
var randNums = [];
for (i = 0; i < 50; i++) {
var randNum = Math.floor(Math.random() * i);
randNums.push(randNum);
}
console.log(randNums);
18.函数调用的方式有几种（写出三种即可）
1.函数调用模式声明式: function fuc() {}
表达式式: var func = function() {};
Function: new Function( ‘参数’,…,’函数体’ );
2.方法调用 模式 method
3.构造器模式(构造函数模式, 构造方法模式)
特点：使用 new 关键字引导
19.JS有几种引入方式
内部引入。行内引入，外部引入
20.null和undefined的区别是什么？
null是空值typeof返回的是object
undefined是未定义的，返回的是undefined
21.js的特点是什么
简单性，安全性，动态性，跨平台
22.怎样获取到页面中的<div id=”con”></div>
documentgetElementById(‘con’);
23.JavaScript输出数据的方法?
弹窗，console.log（）,document.write,innnerhtml,innertext。
24.什么是JavaScript
Js是一种脚本语言，不需要编译。主要用于web，它用于增强html页面；可以嵌入html和代码中。
25.javascript的typeof返回哪些数据类型？（写英文）
object，undefined，number，string，boolean
26.请写出添加 删除 替换 插入节点所用的方法？
创建元素节点：createElement
创建文本节点：createTextNode;
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
27.什么是数组，什么是对象，并说出他们的区别
对象，就是一种无序的数据集合，由若干个“键值对”构成
数组：组也是对象，数组只是将对象里面无序的数据有序化。
区别1、数组表示有序数据的集合，而对象表示无序数据的集合。
数组的数据没有”名称”，2但是有对应的索引；对象的数据有”名称”（属性名），而对象因为是无序数据的集合，所以不存在索引
28.请写出js中的两种定时器，区别是什么？
setTimeout 和 setInterval。
区别setTimeout 只执行一次 setInterval重复执行
29.js两要素是什么
选择器和函数
30.split和join的区别
join() 方法用于把数组中的所有元素放入一个字符串
split(a,b)方法：用于把一个字符串分割成字符串数组
31.请写出js的入口函数？并讲解入口函数的作用。
window.onload
作用1 . 等待页面加载完毕2 . 有一个独立的作用域,
32.pop、Push、unshift、shift的作用？
push：在数组的尾部加入一个元素，并返回原有length+1的长度。
unshift：在数组的头部加入一个元素，并返回原有length+1的长度。
pop：删除数组尾部第一个元素，并返回这个元素。
shift：删除数组头部的第一个元素，并返回这个元素。
33.函数分为几种，区别是什么
声明函数：使用function声明一个函数，并指定函数名，调用时直接调用该函数名
匿名函数：使用function关键字声明一个函数，但未给函数命名，所以叫匿名函数，匿名函数属于函数表达式，
闭包函数：内部函数可以调用外部函数的参数和变量
34.如何判断一个数是不是整数？
If判断用praseInt把这个数转换为整数再与的数
35.innerHTML和innerText的区别是什么？
innerHTML ：innerHTML设置或获取标签所包含的HTML+文本信息
innerText： innerText设置或获取标签所包含的文本信息
36.Break和continue的区别是什么？
“break是结束循环。 continue是结束本次循环并进行下一轮循环
37.this是指向的哪个全局变量，改变this指向的方法有几种（请写出三种）？
call,bind,apply,
38.addEventListener()方法中有几个参数，作用分别是什么?
三个参数
1：要触发的事件
2：要触发得类型
3：ture跟flase ture为捕获阶段 flase为冒泡阶段 默认为flase
39.http和https分别是什么？区别是什么？为什么https更安全？
http：是超文本传输协议；
https：是超文本传输安全协议；
区别：
1．HTTPS是加密传输协议，HTTP是名文传输协议;
2．HTTPS需要用到SSL证书，而HTTP不用;
3．HTTPS比HTTP更加安全，对搜索引擎更友好，利于SEO
4．HTTPS标准端口443，HTTP标准端口80;
5．HTTPS基于传输层，HTTP基于应用层;
6．HTTPS在浏览器显示绿色安全锁，HTTP没有显示;
40.请讲述一下什么是dom？作用是什么？
Dom是文档对象模型；
使JS有访问HTML的能力，能够实现对HTML中内容的操作
41.dom中的节点分为几种类型？
元素节点 Node.ELEMENT_NODE(1)
属性节点 Node.ATTRIBUTE_NODE(2)
文本节点 Node.TEXT_NODE(3)
42.访问节点和创建节点的方法都有什么？
创建： createElement、document.innerHTML、createTextNode、createComment
访问：dcoument.getElementById()、dcoument.getElementsByTagName()、getElementsByClass()和dcoument.queryselector(‘.class，p，#div’);
43.数组是什么？声明数组的方法有几种？数组的三大特性是什么？
数组：数组是可以存储着一些任意类型或者相同类型数据的集合。
声明数组的方法：3种
var arr = [1,2,3]
var arr = new Array()
var arr=new Array(3)
数组三大特性：length属性、prototype属性、constructor属性
44.new关键字的作用？
1.创建一个空对象，并使该空对象继承Func.prototype；
2.执行构造函数，并将this指向刚刚创建的新对象；
3.返回新对象；
45.js绑定事件的方法有几种？
在DOM元素中直接绑定；function divFun(){}
在JavaScript代码中绑定；div.Onclick=function{}
绑定事件监听函数。addEventlistener（）
46.你对面向对象编程的理解
面向对象是基于万物皆对象这个哲学观点. 把那里一个对象抽象成类,具体上就是把一个对象的静态特征和动态特征抽象成属性和方法,也就是把一类事物的算法和数据结构封装在一个类之中,程序就是多个对象和互相之间的通信组成的.
面向对象具有封装性,继承性,多态性.封装隐蔽了对象内部不需要暴露的细节,使得内部细节的变动跟外界脱离,只依靠接口进行通信.封装性降低了编程的复杂性. 通过继承,使得新建一个类变得容易,一个类从派生类获得其非私有的方法和公用属性的繁琐工作交给了编译器. 而 继承和实现接口和运行时的类型绑定机制 所产生的多态,使得不同的类所产生的对象能够对相同的消息作出不同的反应,极大地提高了代码的通用性.
总之,面向对象的特性提高了大型程序的重用性和可维护性.
47.请讲讲原型链
当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype中去找，这个prototype中会有自己的原型，于是就这样一直找下去，这就是原型链
48.创建对象的方法有哪些？
var obj={};
var obj=new Object();
49.如何阻止事件冒泡和浏览器默认事件？
阻止事件冒泡：
event.stoppropagation()
event.cancelBubble = true;
return false;
阻止默认事件：
event.preventDefault();
event.returnValue=false;
return false;
50.事件流有几种？dom事件流分为几个阶段？
事件流有两种：捕获型事件、冒泡型事件
dom事件流分为三种：
捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；
目标阶段：真正的目标节点正在处理事件的阶段；
冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段。
51.return的作用是什么?
v可以阻止浏览器默认事件
v返回函数值，当函数执行到return,函数后面将不会在执行后面的代码
52.函数声明与函数表达式的区别？
以函数声明的方法定义的函数，函数名是必须的，而函数表达式的函数名是可选的。
以函数声明的方法定义的函数，函数可以在函数声明之前调用，而函数表达式的函数只能在声明之后调用。
以函数声明的方法定义的函数并不是真正的声明，他们仅仅可以出现在全局中或者嵌套在其它函数中。
53.请谈谈cookie、localStorage和SessionStorage的区别和特点
cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效，数据只能存放4KB左右
localStorage：除非被手动清除，否则将会永久保存。
sessionStorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除
localStorage和sessionStorage可以保存5MB的信息
54.什么是cookie？cookie的优缺点。
优点：
1.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
2.控制cookie的生命期，使之不会永远有效。就算被盗了偷盗者很可能拿到的是一个过期的cookie。
3.cookie帮助服务端承担了很大的压力，可以利用cookie在和客户端做很多判断而不应经过服务端。
4.极高的扩展性和可用性，使用简单，操作方法方便
缺点：
1.cookie数量和长度的限制。每个cookie长度不能超过4KB，否则会被截掉
2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。
3.局限性。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
55.js本地存储有两种，分别是什么？区别是什么？
localStorage和sessionStorage
localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
56.cookie和本地存储的区别是什么？
cookie：不能超过4KB；可设置失效时间，没有设置的话，默认是关闭浏览器后失效，
本地存储：有更大的储存，使用更简单
57.什么是json？json的三种值类型是什么？
Json是一种轻量级的数据交互格式
JSON数据类型：字符串、数字、对象（JSON 对象）、数组、布尔值、Null
json的三种值类型：数组、对象、组合型
58.请解释一下冒泡排序的原理？
1.原理：比较两个相邻的元素，将值大的元素交换到右边
2.思路：依次比较相邻的两个数，将比较小的数放在前面，比较大的数放在后面。
59.js常用的几种事件，请分别描述一下
键盘事件：
onkeydown：键盘的键按下时触发
onkeyup：键盘的键放开时触发
onkeypress：按下或按住键盘键时触发
鼠标事件：
onclick：点击某个对象时触发
ondblclick：双击某个对象时触发
onmouseover：鼠标移入某个元素时触发
onmouseout：鼠标移出某个元素时触发
onmouseenter：鼠标进入某个元素时触发
onmouseleave：鼠标离开某个元素时触发
onmousedown：鼠标按下时触发
onmouseup：鼠标抬起时触发
onmousemove：鼠标被移动时触发
onwheel：鼠标滚轮滚动时触发
oncontextmenu：点击鼠标右键时触发
60.请将此数组进行排序，arr=[22,1,43,12,75,32]（两种方法）
冒泡排序，sort排序
61. IE和标准下有哪些兼容性的写法
1）获取事件对象：var ev = ev || window.event
2）获取页面的可视区的宽度：document.documentElement.clientWidth || document.body.clientWidth
3）获取触发事件的事件源：var target = ev.srcElement||ev.target
62.call和apply的区别
apply：最多只能有两个参数——新this对象和一个数组argArray。
call：它可以接受多个参数，主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针
63. js延迟加载的方式有哪些？
1、defer属性
2、async属性
3、动态创建DOM方式
4、使用jQuery的getScript()方法
5、使用setTimeout延迟
6、让JS最后加载
64.说说TCP传输的三次握手四次挥手策略
握手：
第一次握手：“主动方”向“被动方”发送SYN包
第二次握手：“被动方”回给“主动方”一个SYN/ACK包表达确认
第三次握手：“主动方”再向“被动方”发送SYN包，代表握手结束
挥手：
1）Client：我所有东西都说完了
2）Server：我已经全部听到了，但是等等我，我还没说完
3）Server：好了，我已经说完了
4）Client：好的，那我们的通信结束
65.网络传输的七层协议是哪七层？
物理层 数据链层 传输层 网络层 会话层 表示层 应用层
4 / Jquery
1.请写出js和jquery的入口函数，并简述他们的不同
window.οnlοad= function () {}原生js
$(document).ready(function () {}jquery
1．原生Js和jQuery入口函数加载模式不同。
2．编写多个入口函数的区别。
2.请写出jquery动画的显示和隐藏
show（）显示，hide（）隐藏
3.请写出jquery中绑定事件的四种方式
$(“div”).click(function(){})
$(“div”).bind(click, function(){})
$(“div”).delegate(“p”,“click”,function(){})
$(“div”).on(“click”,“p”,function(){})
4.什么是jQuery？
jQuery是一个简洁而快速的JavaScript库，可用于简化事件处理，duHTML文档遍历，Ajax交互和动画，以便快速开发网站。
5.jQuery 库中的 $() 是什么
在Jquery中，$是JQuery的别名，所有使用$的地方也都可以使用JQuery来替换。
6.网页上有 5 个 <div> 元素，如何使用 jQuery来选择它们？
$(“div”)，
7.jQuery 里的 ID 选择器和 class 选择器有何不同？
ID选择器使用ID来选择元素，例： $("#idtest1"). 而 class选择器使用CSS class 来选择元素，例：$(".classtest1")。当只需要选择一个元素时，使用ID选择器，如果需要选择具有相同 CSS class的元素，就要用class 选择器。
8. jQuery 里的 each() 是什么函数？你是如何使用它的？
each() 函数就像是 Javascript里的一个 for，它允许你遍历一个元素集合。
$('div').each(function(selected) {
执行的代码
});
9.$(this) 和 this 关键字在 jQuery 中有何不同？
1、表示对象不同：this表示的是javascript提供的当前对象，$(this)表示的是用jquery封装的当前对象。
2、过程不同：this对象可以直接用this.style修改样式，$(this)可以使用jquery提供的方法访问样式。
10.你如何利用jQuery来向一个元素中添加和移除CSS类?
添加：addClass()方法
移除：removeClass()方法
11.什么是ajax，为什么使用ajax？
AJAX 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。它并非一种新的技术，而是以下几种原有技术的结合体。
在我们之前的开发，每当用户向服务器发送请求，哪怕只是需要更新一点点的局部内容，服务器都会将整个页面进行刷新。
性能会有所降低(一点内容，刷新整个页面！)
用户的操作页面会中断(整个页面被刷新了)
Ajax就是能够做到局部刷新！
12.ajax都有哪些优点和缺点？
ajax的优点：
1、最大的一点是页面无刷新。
2、使用异步方式与服务器通信。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术。
Ajax的缺点：
1,ajax干掉了back按钮，即对浏览器后退机制的破坏。
2,安全问题
3,对搜索引擎的支持比较弱。
4,破坏了程序的异常机制。
5,另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷。
6,一些手持设备（如手机、PDA等）现在还不能很好的支持ajax.
13.post请求和get请求的区别？
1. get是从服务器上获取数据，post是向服务器传送数据。
2. GET请求把参数包含在URL中，将请求信息放在URL后面，POST请求通过request body传递参数，将请求信息放置在报文体中。
3. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
4. get安全性非常低，get设计成传输数据，一般都在地址栏里面可以看到，post安全性较高，post传递数据比较隐私，所以在地址栏看不到， 如果没有加密，他们安全级别都是一样的，随便一个监听器都可以把所有的数据监听到。
5. GET请求能够被缓存，GET请求会保存在浏览器的浏览记录中，以GET请求的URL能够保存为浏览器书签，post请求不具有这些功能。
6. HTTP的底层是TCP/IP，GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。你要给GET加上request body，给POST带上url参数，技术上是完全行的通的。
7.GET产生一个TCP数据包，对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；POST产生两个TCP数据包，对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据），并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。
14.什么是跨域?
当协议、域名、端口三者之间任意一个不同即为跨域
15.请简述同步和异步的区别.
在计算机领域，同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
16.HTTP协议中，GET和POST有什么区别？分别适用什么场景？
Post使用方法：
1、请求的结果有持续的副作用，例如数据库内添加新的数据行
2、若使用GET方法，则表单上收集的数据可能让URL过长
3、要传送的数据不是采用7位的ASCII编码
GET使用方法：
1、请求是为了查找资源，HTML表单数据仅用来帮助搜索
2、请求结果无持续性的副作用
3、收集的数据及HTML表单内输入字段名称的总长度不超过1024个字符
区别：
①传送方式不同：get通过地址栏传输，post通过报文传输。
②get产生一个TCP数据包，post产生两个数据包，对于get方式的请求，浏览器会把http header和data一并发送出去，服务器响应200；而对于post浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200。
③get参数有长度限制，传送数据量不能大于2kb，post传送数据量不受限制（一般会受服务器配置限制或者内存大小）。
④get安全性非常低，post安全性较高，但是执行效率比post方法好。
⑤get方式服务器端用Request.QueryString获取变量的值，post方式服务器端用Request.Form获取提交的数据。
⑥get是从服务器上获取数据，post是向服务器传送数据。
17.将以下jquery选择符翻译成中文描述：$(“#d div.cls input[type=text][name^=text_]”);
找到ID选择器d 的元素从中找到class为cls的DIV，然后找到input的输入框，输入的typt类型等于text,name为text_开头的元素
18.请说出你知道的跨域的方法有哪些？最常用的是哪个？怎么使用的？
window.name来跨域（最常用）window.name="父页面的值";
document.domain
jsonp
使用HTML5中的window.postMessage方法来跨域传送数据
利用WebSocket跨域
19.常见请求头与响应头你了解哪些？
HTTP请求头：
请求头用于说明是谁或什么在发送请求、请求源于何处，或者客户端的喜好及能力。服务器可以根据请求头部给出的客户端信息，试着为客户端提供更好的响应。
HTTP响应头：
响应头向客户端提供一些额外信息，比如谁在发送响应、响应者的功能，甚至与响应相关的一些特殊指令。这些头部有助于客户端处理响应，并在将来发起更好的请求。
20. 如何设置ajax为同步或异步
Async：ture；异步
Async：flase; 同步
21.请写出ajax框架格式，并简述每个属性的作用
$.ajax({
url:'',//接口地址
type:'POST',//传值方式
data:'',//需要提供的参数
success:function(res){
//成功后需要进行的操作
}
})
22.$(document).ready()方法和window.onload有什么区别？
1.执行时间不同
window.onload必须等到页面内的所有元素（）加载完毕后才能执行
$(document).ready()是页面DOM结构绘制完毕后就执行，不必等到加载完毕
2.执行次数不同
window.onload不能同时执行多个，如果同一个页面上面有多个window.onload方法（包括关联js文件中），只会执行最后一个window.onload，也就是向上覆盖。
$(document).ready()可以同时执行多个，如果同一个页面上有多个$(document).ready()方法（包括关联js文件中），JQuery能够很好地处理这些情况，每次调用$(document).ready()方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行
3.简化写法不同
window.onload没有简化写法。
$(document).ready()有两种简化写法：$().ready(function)、$(function)
23.Flash、Ajax各自的优缺点，在使用中如何取舍
Flash ajax对比
Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。
Ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。
共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM
5 / vue
1.简述框架和函数库的区别
库更多是一个封装好的特定的集合，提供给开发者使用；
框架则是为解决一类问题而开发的产品；
库的使用非常灵活，但没有框架方便，这就是框架和库本质的区别。
2.什么是渐进式框架
可以先使用vue的基础功能，然后在此基础上逐渐使用你所需要的其他的功能
3.Vue有哪些优点
优点：
1)组件化开发
2)单页面路由
3)双向的数据绑定
4)单向数据流
5)易于结合其他第三库
6)轻巧、高性能
7)渐进式框架
8)是已数据驱动执行的
缺点：
1)生态系统不够完善
2)可扩展性稍差
3)吃内存
4)报错不明显
5)不支持IE8
6)入门简单,但是缺少高阶文档
7)不利于seo优化
4.简述mvvm模式
MVVM 是 Model-View-ViewModel 的缩写
Model: 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。我们可以把Model称为数据层，因为它仅仅关注数据本身，不关心任何行为
View: 用户操作界面（DOM）。当ViewModel对Model进行更新的时候，会通过数据绑定更新到View
ViewModel： 业务逻辑层（创建Vue实例），View需要什么数据，ViewModel要提供这个数据；View有某些操作，ViewModel就要响应这些操作，所以可以说它是Model for View.
总结： MVVM模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用双向绑定技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化。
5.Vue常见属性和指令有哪些？（各写出7个以上）
属性：el、data、methods、computed、watch、component、props、filters、render
指令：v-text、v-html、v-if、v-else-if、v-else、v-bind:src或@:src、v-model、v-on或@click、v-show、v-for、v-pre、v-clock
6.计算属性和侦听属性有什么区别？怎样选择
区别：
1、computed不会主动监听数据变化，但是watch会去主动监听，也就是说watch会主动处理数据变化，computed是依赖数据变化才去计算。
2、computed在依赖数据未发生改变时/或者没有依赖数据，自动缓存到应用中，下次获取时不重新计算。
各自使用场景：
watch：适合处理 一个数据影响多个数据更适合处理数据相互独立的场景，主动监听
computed：适合处理一个数据受多个数据的影响 / 多个数据影响一个数据时。数据相互不独立的场景。
7.Vue的生命周期函数有哪些？
创建：beforeCreate、created
挂载：beforeMount、mounted
更新：beforeUpdate、updated
销毁：beforeDestroy、destroyed
8.vue怎样自定义指令？
使用
<div id = "nav" v-name>
<p>{{nav}}</p>
</div>
设置自定义指令 directive
<script>
Vue.directive('name',{//name是指令名字
inserted:function(el,obj){
console.log(el)//指令所绑定的元素
console.log(obj)//obj一个对象，包含一系列属性
el.style.width = "100%"
}
})
</script>
9.简述axios的安装和引入
安装插件依赖包
npm install axios --save 在命令提示符中进行安装；
在项目中的main.js中引用
import axios from 'axios';
Vue.prototype.$axios = axios;
import qs from 'qs';
Vue.prototype.qs = qs;
10.DOM 渲染在哪个周期中就已经完成？
mounted中
11.请说明Vue父组件向子组件传值的方法（代码或文字描述均可）
父组件在调用子组件的时候通过添加自定义属性向子组件传值。子组件通过props接收。
在父调用子的时候添加自定义属性，如：传一个字符串< zi mydata=”father”></zi>,子组件中使用props接收，简单的值可以用数组接收props:[‘mydata’]。当父组件没有传值的时候也可以有默认值，这时候就得使用对象进行接收
props: {
myclass: {
default: "默认值"
},
text: {
default: ""
}
},
12.请说出下列axios配置项的含义（五条）
method:创建请求时使用的方法
url:请求的服务器地址
header:即将被发送的自定义请求头
data:请求接口所需要传递的参数
params:即将与请求一起发送的 URL 参数
13.V-for中 key 值的作用
key的作用主要是为了高效的更新虚拟DOM！！！下次v-for不用再重新渲染
15.v-show和v-if指令的共同点和不同点?
相同点：v-show和v-if都能控制元素的显示和隐藏。
不同点：
实现本质方法不同
v-show本质就是通过设置css中的display设置为none，控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素
编译的区别
v-show其实就是在控制css
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
编译的条件
v-show都会编译，初始值为false，只是将display设为none，但它也编译了
v-if初始值为false，就不会编译了
如果要频繁切换某节点时，使用v-show，如果不需要频繁切换某节点时，使用v-if
16.子组件向父组件传参的方式？（请写出关键代码）
子组件通过 $emit 触发自定义事件（一个是父组件事件的名字，一个是传递的参数），通过回传参数向父组件传值。
子：this.$emit(“name”,”param”)
父：@name=fun methods:{fun(data){console.log(data)}}
子组件向父组件传值成功总结一下：
子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法，在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听。
在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了。
17.使用axios发送请求的格式是什么？请写出示例代码
get:this.$axios({
url:'请求的接口路径',
params: {3
id:要传递的参数
}
}).then(function(res) {
}).catch（function(err) {
})
gost：this.$axios({
url: '要请求的接口地址',
method: 'post',
data: this.qs.stringify({
id:参数
})
}).then(function(succ) {
}).catch(function(err){
})
18.Vue中引入组件需要哪三步？
1）使用import 别名 “@/components/组件名”进行组件引用，
2）然后在components 中注册，
3）在html输出别名标签即可
19.在Vue中使用插件的步骤？
1、安装插件依赖包
#npm install -D open-browser-webpack-plugin
2、引入文件
import Vue from ‘vue’
3、引入使用的组件
import 组件 from ‘组件包名’
Vue.use(组件)
4、在需要位置使用
20.说一下你对dom驱动和数据驱动的理解
dom驱动：直接通过代码操作页面上的html元素。更改页面内容时需重新获取并赋值
数据驱动：通过数据来驱动页面的变化。数据改变时，页面上的内容也会改变
在数据驱动的开发模式下，开发者更多的是关心数据怎么流转，数据怎么变，而不需要通过代码去操作元素。开发过程更加简洁，代码更加简洁专一。
21.请说出路由传参和获取参数的三种方式
先在index.js中注册组件{name：,path: ,component: }
1）需要配置路由参数xxx/:p1/p2
:to="{path:'/btn/p1/p2'}" param=this.$route.params;
2）需要命名路由
:to="{name:'btn',params:{ }}" param=this.$route.params;
3）需要用query接收
:to="{name:'btn',query:{ }}" param=this.$route.query;
22.子路由的配置方法？
子路由：在父路由中配置children:[]
子路由中的path不能加/，否则会成为跟路径
当匹配到子路由时会将内容放置在子页面的路由出口，而不是跟路由的出口，匹配到的非子
23.Vue-router的编程式导航有哪些方法？
router.go() router. push()可以返回上一页 router.replace()不能保存，直接替换了
24.导航守卫有哪三种？分别有什么作用
全局路由守卫:
router.beforeEach
router.beforeResolve
router.beforeAfter
组件路由守卫:
const Foo = {
template: '...',
beforeRouteEnter(to, from, next) {
//再渲染该组件的对应的对应路由被confirm前调用
//不能获取组件实例'this'
//因为当前守卫执行前，组件实例化还没有被创建
},
beforeRouteUpdate(to,from,next) {
//在当前路由改变， 但是该组件被复用时调用。
//举例来说， 对于一个带有动态参数的路径 / foo /: id， 在 / foo / 1 和 / foo / 2 之间跳转的时候，。 由于会渲染同样的 Foo 组件， 因此组件实例会被复用。 而这个钩子就会在这个情况下被调用。
//可以访问组件实例 `this`
},
beforeRouteLeave() {
// 导航离开该组件的对应路由时调用。
//可以访问组件实例 `this`
}
}
路由独享守卫:
const router = new VueRouter({
routes:[{
path:'/foo',
component:Foo,
beforeEnter: (to,from,next) => {
}
}]
})
25.简述vuex中的常用属性
vuex： 这个东西就相当于一个公共管理的仓库。在这里定义的东西可以在各个页面获取到。常用来解决同级组件之间的传值问题。
1.state： 用来存储变量。在别的页面就可以使用this.$store.state.这里定义的变量，获取到这个变量的值。
2.mutations和actions： 这两个地方的功能都差不多，是用来执行回调函数从而更改状态的地方。不同的是actions可以进行异步操作。
3.getters: 这个东西就相当于组件中的计算属性。
4.modules: 这个是对处理过后的状态进行分类。它里面可以有很多个组成。而每个组成里面都可以有自己的state,mutations,actions, getters.
26.Vue中如何获取元素？
方法一：直接给相应的元素加id,然后再document.getElementById("id");获取，然后设置相应属性或样式，或者使用document.querySelector(‘ #tet‘)来获取
方法二：使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素
27.单页面应用和多页面应用区别及优缺点
单页面：
概念：只有一个html页面，所有跳转方式都是通过组件切换完成的。
优点：页面之间跳转流畅、组件化开发、组件可复用、开发便捷、易维护。
缺点：首屏加载较慢，加载整个项目中使用的css、js，SEO优化不好。
多页面：
概念：整个项目有多个html，所有跳转方式都是页面之间相互跳转的。
优点：首屏加载较快，只加载本页所使用的的css、js，SEO优化较好。
缺点：页面跳转较慢
28.vue组件中data为什么必须是一个函数？
如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
6 / 小程序
1.简单描述下微信小程序的目录结构？
app.js 小程序逻辑
app.json 小程序公共配置
app.wxss 小程序公共样式表
xxx.js 页面逻辑
xxx.wxml 页面结构
xxx.json 页面配置
xxx.wxss 页面样式表
2.wxml与标准的html的异同？
开发工具限制：WXML仅能在微信小程序开发工具中预览，而HTML可以在浏览器内预览。
组件封装不同：WXML对组件进行了重新封装，为后续的性能优化提供了可能，同时避免开 发者写出低质量的代码。
没有DOM树：小程序运行在JS Core内，没有DOM树和window对象，没有办法使用相关 API。
4.分析下微信小程序的优劣势？
微信小程序优势：
1）、使用方便：扫码即用，相较于APP而言不用下载、不用安装，还可以直接添加到手机桌面，为手机节省了电量和大量内存；
2）、流量入口众多：公众号菜单、朋友圈（太阳码）、微信群、支持长按二维码识别、附近的小程序、统一的小程序入口、搜一搜、公众号图文推送、支持发会员卡券（官方的）、支持会员卡直接打开小程序；
3）、潜在用户多：小程序依托在微信9亿多用户群体上，不用担心找不到用户，只需专心做好小程序营销；
4）、助力新零售：小程序是新零售的最好载体，将是未来线下门店的发展趋势，如果企业拥有线下实体门店，小程序是最佳选择，可以为企业更好地切合线上线下的流量；
5）、符合消费场景：小程序可以与消费者在任意场景建立链接，即用即走，符合大多数消费场景。
信小程序劣势：
1）、功能不多：微信小程序属于微信，自然也就受限于微信。由于API的限制，小程序的总代码量不能超过2M，这意味着小程序规模有限，这对一些中大型的应用而言是一个致命的缺陷。目前相较于APP而言，微信小程序只是能够实现基本操作，虽然随着开发技术的发展，小程序已经和APP很接近，但差距肯定是存在的；
2）、所有更新需要经过腾讯的审核，才能应用到小程序中，这给应用的更新带来一定的风险，企业希望新加的功能若无法审核通过，则毫无解决办法；
3）、不能用小程序来发推送通知，必须要由用户操作才可以；
4）、小程序无法被分享到微信朋友圈，错失这一流量巨大的入口；
5）、用户留存差，正是因为即用即走的特点，微信小程序对于用户的留存相较于APP、
微信公众号都是非常薄弱的，这就要求企业的营销能力非常突出，才能持续增加用户对小程序的粘性。
5.小程序的数据驱动和vue的双向绑定有何异同？
小程序中的数据驱动
（1）、通过 bindinput 绑定文本框的输入事件
（2）、在 data 中声明一个变量 content ，将其动态绑定成文本框的 value 值
（3）、在 bindinput 事件中通过事件参数 e.detail.value 可以获取到文本框中最新的 value 值
（4）、通过 this.setData 将文本框最新的 value 值 赋值给 动态绑定的value值 content 即可实现数据的双向绑定
vue中的数据双向绑定
（1）、首先为文本框绑定 @input 监听文本框的输入事件
（2）、为文本框动态绑定 value 属性，其值是在data中定义的变量
（3）、在 @input绑定的事件中 通过事件参数 event.target.value 可以获取到 input 框中最新的value值
（4）、将其重新获取到的 value 赋值给 value值动态绑定的那个变量
区别
绑定事件不同，以及获取value值的具体方式不同，
以及在小程序中设置data中的数据，
需要调用 this.setData方法进行设置
6.简述下微信小程序跳转页面wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别？
（1）wx.navigateTo（）：
用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页 面。对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转， 以便返回 原页面，以提高加载速度。当页面特别多时，则不推荐使用。
（2）wx.redirectTo（）：
当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的 5 层页面栈。这时应该考虑选择 wx.redirectTo。wx.redirectTo()用于关闭当前页面，跳转到应用内的某个页面。这样的跳转，可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间。
（3）wx.switchTab（）：
对于跳转到 tab bar 的页面，最好选择 wx.switchTab()，它会先关闭所有非 tab bar 的页面。其次，也可以选择 wx.reLaunch()，它也能实现从非 tab bar 跳转到 tab bar，或在 tab bar 间跳转，效果等同 wx.switchTab()。使用其他跳转 API 来跳转到 tab bar，则会跳转失败。
（4）wx.navigateBack（）：
用于关闭当前页面，并返回上一页面或多级页面。开发者可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。这个 API 需要填写的参数只有 delta，表示要返回的页面数。若 delta 的取值大于现有可返回页面数时，则返回到用户进入小程序的第一个页面。当不填写 delta 的值时，就默认其为 1（注意，默认并非取 0），即返回上一页面。
（5）wx.reLaunch（）：
wx.reLaunch()与 wx.redirectTo()的用途基本相同， 只是 wx.reLaunch()先关闭了内存中所有保留的页面，再跳转到目标页面。
7.小程序页面路由传参方法？
通过路径传递参数：wx.navigateTo（）、wx.redirectTo（）和标签<navigator/>等
参数与路径之间使用?分隔，参数键与参数值用=相连，多个参数用&分隔
例：test?id=1 中id为参数键，1 为参数值
在目的页面中onLoad（）方法中option对象即为参数对象，可以通过参数键来取出参数值
8.小程序怎样进行本地存储的读写？
同步：（1）wx.setStorageSync(); //存储值
（2）wx.removeStorageSync(); // 移除指定的值
（3）wx.getStorageSync(); // 获取值
（4）wx.getStorageInfoSync(); // 获取当前 storage 中所有的 key
（5）wx.clearStorageSync(); // 清除所有的key
异步：（1）wx.setStorage(); //存储值
（2）wx.removeStorage(); // 移除指定的值
（3）wx.getStorage(); // 获取值
（4）wx.getStorageInfo(); // 获取当前 storage 中所有的 key
（5）wx.clearStorage(); // 清除所有的key
9.请说明小程序的生命周期以及页面生命周期
小程序生命周期：
onLaunch()
onShow()
onHide()
onError()
onPageNotFound()
页面生命周期：
onLoad()
onReady()
onShow()
onHide()
onUnload()
10.小程序如何刷新当前页面？
方法一：this.onLoad()
方法二：this.onReady() 或者 this.onShow()
方法三：定义标志
在app.js中，定义一个全局变量Flag，默认值为false，
进入其它页面的时候将它置为true,在页面的onShow方法里加一个判断,如果Flag为true的话，
先将它的值设置为false，再调用接口获取数据。
11.小程序中获取openid的方法？
第一步，获取code
第二步，根据code获取openid和session_key
第三步，检测用户登录状态是否有效
12.小程序中获取用户的手机号需要请求哪些aip？并且解密的参数有哪些？
wx.login获取到code，通过code获取到session_key和openid，之后通过button按钮，获取iv（加密算法的初始向量）和encryptedData（加密的用户信息）
<button open-type=”getPhoneNumber” @getphonenumber=”onfun”>获取手机号</button>
onfun(e){
用户授权后获取到
console.log(e.detail.iv)//加密算法的初始向量
console.log(e.detail.encryptedData)//加密的用户信息
通过后台接口传入参数session_key、iv、encryptedData获取到用户解密过的手机号
}
13.在小程序中设置背景图片在开发者工具中可以显示背景图片，但是在手机上背景图片不显示，怎么解决？
图片转成Base64格式
在线转换：https://www.sojson.com/image2base64.html
14.小程序中页面跳转传参的方式有哪些？
微信小程序导航有两种形式：一种是在写在js中进行跳转，
另一种是写在wxml页面中进行跳转。
15.bindtap和catchtap的区别？
bindtap事件绑定不会阻止冒泡事件向上冒泡
catchtap事件绑定可以阻止冒泡事件向上冒泡
16.如何实现下拉刷新？
在app.json中enablePullDownRefresh:true//开启下拉刷新
在页面js中onPullDownRefrsh(){this.onload}/实现下拉刷新
wx.startPullDownRefresh（）
开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
17.请写出小程序的完整开发流程
（1）申请小程序账号
（2）申请服务器域名
（3）下载并安装开发工具（登录注册的账号）
（4）小程序框架配置并开发
（5）window服务器IIS配置和搭建打包文件上传服务器
扫一扫
1381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
