面试题

1.Html和xhtml的区别

• 1.功能 ：xhtml可兼容各大浏览器，手机设备等，浏览器能够快速编译网页

• 2.书写习惯，xhtml书写更加严格，所有标签必须小写，标签必须成对出现，标签顺序必须正确，所有属性都必须使用双引号。

2.div+css布局有什么优点

• 1.实现html结构和css表现分离，使得html文档更加简洁清晰，加载速度更快，编写效率提高
• 2.想要html文档有不同的呈现，只要引入不同的css文档就可以了，增强文档的可复用性和设计的灵活性
• 3.浏览器会缓存静态文件，css文件，这样就可以提升网站的性能和SEO的评估
• 4.因为实现表现和结构分离，代码上线后的可维护性更好

3.doctype作用？严格模式和混杂模式如何区分？它们有何意义？

• 1.告诉浏览器该文件的类型，让浏览器解析器知道应该用哪个规范来解析文档
• 2.可以根据doctype的dtd声明区分（文档类型定义），如果dtd声明的是严格型，就会以严格模式去重显，如果dtd声明的是过渡型并且有url地址，那么依然会以严格模式进行重显，如果没有url地址就会以混杂模式进行重显。如果写错或者不写都会进入混杂模式。html5没有dtd，所以没有严格模式和混杂模式的区分
• 意义，解析html标签的速度快，不易出错

4.iframe的优缺点？iframe的作用（不重要）

• 1.iframe的作用是可以把一个网页的框架和内容嵌入在现有的页面里
• 2.iframe的优点：iframe 能够原封不动的把嵌入的网页展示出来。
• 如果遇到加载缓慢的第三方内容，比如图标和广告等，都可以用iframe来解决
• 3.缺点:

• 1.会产生很多页面，不易管理。
• 2.在几个框架中，都出出现上下左右滚动条的时候，这些滚动条会挤占有限的页面空间，还会分散访问者的注意力
• 3.使用框架结构时必须保证正确设置所有的导航链接，否则会给访问者带来很大的麻烦，比如被链接的页面出现在导航框架内，这种情况会出现链接死循环。
• 4.很多移动设备无法完全显示框架，设备兼容性差
• 5.iframe框架页面会增加服务器的http请求，对于大型的网站是不可取的
  iframe很少使用，目前用ajax代替iframe

5.label的作用是什么，如何使用

• 1.定义:为input的元素定义标注或者是标记的
• 2.使用:点击文本输入框边上的标记，input就会自动聚焦。label的 for属性值和input的id值相同即可

6.传统布局如何做语义化？缺点在哪？说说你对标签语义化的理解？

• 1.前端的页面布局一直采用div，但是div本身并没有实际的意义，它只是定义了一个区域，但是这些区域是做什么的，浏览器并不知道，不利于页面的SEO优化。
• 2.但是语义化标签没有这样的问题，看见了标签就知道它的用途和表示的区域，有利于SEO的优化，
• 3.语义化可以增加代码的可读性，让团队成员可以更好地理解彼此代码的表达意图

7.如何让Chrome显示小于12px的文本

利用css3的转换属性的缩放函数来实现，
举例：让p标签的文本显示6px；css:font-size:6px;transform:sacle(.5)
如果这个样式只是在谷歌中显示，那要加上浏览器内核前缀webkit

8.flex弹性盒布局与传统盒模型布局的区别和优点

• 1.区别1:普通盒模型中的子元素分配其父元素的空间，而弹性盒模型的子元素分配其父元素的可用空间
• 2.区别2:普通盒模型中主要针对块级元素和行间元素的布局，而弹性盒子是建立在弹性流上，也就是元素可以随着可视区域的变化呈现流式布局
• 3.弹性盒子的优点是能为盒模型提供最大的灵活性，即使是不定宽高的元素依然可用。可以实现响应式的页面布局

9.iphoneX如何适配

• 1.问题定位:如何让页面适配iPhoneX的齐刘海，底部的操作区域以及大圆角的问题
• 2.iphonex虽然和其他手机一样都是一个屏幕，但是内部分为了好几个模块。
  正常的网页放到iPhonex里面来的话，头部和底部会出现白框。(iPhonex里面有一个safedArea安全区域，也就是中间的大部分区域，而非安全区域部分是没有网页内容的。)
• 3.解决方案:

• 1.给body添加背景色，之前说头部和底部会出现白框，实际上不一定是白色，这个颜色是body的背景色。另外当我们上拉或者下拉内容的时候，显示网页下方的颜色其实也就是body的背景色。
• 2.在meta标签中引入viewport-fit=cover属性。使页面占满整个屏幕。但是导航栏却会被齐刘海遮住部分内容，并且发现原来设置了100%的高度并没有占据全部内容空间
• 3.首先对于头部和底部的高度是在iPhone X中是有匹配值的，另外的话在ios11的浏览器Chrome内核提供了一些属性类似于safe-area-inset-top、-right、-left、-bottom。
  给body上加一个css样式：content只有加上了viewport-fit=cover才会生效

padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

在安卓手机上constant是不会被识别的。

• 4.100%的高度并没有占据全部内容空间：
  设置body的高度为100vh，占满全屏高度

10.px，em，rem分别是什么，有什么区别?

• 1.px表示绝对尺寸，这里并非真正的绝对，实际上就是css中定义的像素，利用px设置字体大小及元素宽高等，比较稳定，很精确

• px缺点，不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站

• 2.em表示相对尺寸，其相对于当前对象内文本的font-size，如果当前对象内文本的font-size计量单位也是em，则参考对象为父元素文本的font-size

• 使用em可以较好的响应设备尺寸的变化，但是在进行元素设置，都需要知道父级元素的fontsize以及当前文本的fontsize，如果有遗漏可能会导致错误。

• 3.rem表示相对尺寸，其参考对象为根元素html的font-size，因此只需要确定一个font-size就可以了

11.弹性盒的缩放机制是怎样的

弹性盒中的项目设置

• 1.flex-grow定义项目的放大比例，默认值是0，值越大放大越厉害，不支持负值。
• 2.flex-shrink定义项目的缩小比例，默认值是1，值越大缩小越厉害，不支持负值
• 3.flex-basis定义在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余的空间，默认值为auto，也就是项目的本来大小，可以设置根width或者height属性一样的值，比如给具体的像素值，则项目将占据固定空间

12.如何使用vw实现移动端适配（不是很理解)

根据不同设备的dpr值相应改变meta标签中viewport的值，从而让页面达到缩放的效果，实现页面适配的功能。主要的思想

• 1.根据dpr的值修改viewport，实现1px的线
• 2.根据dpr的值修改html的font-size，从而使用rem实现等比缩放
• 3.使用hank手段，用rem模拟vw特性（不是很理解)

13.什么是vw和视口

• 1.视口，在pc端中视口指的是浏览器的可视区域，而在移动端中涉及三个视口，一个是布局视口，二是视觉视口，三是理想视口。
• 2.视口单位中的视口，pc端指的是浏览器的可视区域，移动端就是指布局视口
  根据css3规范，视口单位主要包括以下四个:

• vw,1vw = 1%的视口宽度
• vh,1vh = 1%的视口高度
• vmin,选取vw和vh中的较小值
• vmax,选取vw和vh中的较大值

• 3.vw就是相对于视口的宽度，而不是父元素的宽度。（css百分比是相对于包含它的最近的父元素的宽度。）
  比如浏览器宽度为1920px,1vm = 19.2px

14.谈谈你是如何做移动端适配的

1.meta viewport的使用(字体)

为什么移动端初始视口默认都是980像素呢？原因是市面上绝大多数pc网页的版心宽度为980像素，如果网页没有专门做移动端适配，此时用手机访问网页旁边刚好没有留白，不过页面缩放后文字会变得非常小。
为了解决页面缩放的体验问题，在网页代码的头部，加入一行viewport元标签。

​这里的device-width告诉浏览器，将视口的宽度设置为设备宽度（这个宽度是人为预设的，不设的话就是980px）。

2.图片适配

通常对图片的处理时是这样的img { width: 100%;},但是这样的话，当容器大于图片宽度时，图片会无情的拉伸变形，一些图片会失真
解决方案:

img { max-width: 100%; }

此时图片会自动缩放，同时图片最大显示为其自身的100%（即最大只可以显示为自身那么大）

3.媒体查询（模块)

• 1.什么是媒体查询
  针对不用的设备提前为网页设定各种 CSS 样式.利用CSS3中的Media Query模块，自动检测屏幕宽度，然后加载相应的CSS文件
• 2.例子

@media screen and (min-width:1200px){
        body{        
            background-color: red; 
        }

4.动态 rem 方案(整体)

通常和媒体查询配合，实现响应式布局
如果我们做的H5页面只在移动端访问，这是因为REM不兼容低版本的浏览器。而如果移动端和PC端公用一套代码，建议使用流式布局（百分比布局)

1.px、em、rem 有什么不同？

px是pixel（像素），是屏幕上显示数据的最基本的点，在HTML中，默认的单位就是px；em 是一个相对大小，相对于父元素font-size的百分比大小；rem 是相对于根元素的font-size

2.rem响应式布局思想

• 1.一般不要给元素设置具体的宽度,但是对于一些小图标可以设定具体宽度值
• 2.高度值可以设置固定值,设计稿有多大,我们就严格写多大
• 3.所有设置的固定值都用REM做单位(首先在HTML中设置一个基准值：PX和REM的对应比例,然后在效果图上获取PX值,布局的时候转化为REM值)
• 4.JS获取真实屏幕的宽度,让其除以设计稿的宽度,算出比例,把之前的基准值按照比例进行重新的设定,这样项目就可以在移动端自适应了

3.如何实现动态 rem 方案

1.从UI设计师拿到PSD设计稿,然后在样式中给HTML设定一个font-size的值，我们一般都设置一个方便后面计算的值，例如：100px

html{

font-size:100px；//1rem=100px

}

2.写页面，写样式

首先按照设计稿的尺寸来写样式，然后在写样式值的时候，需要把得到的像素值除以100计算出对应的REM的值。

值得注意的是：真实项目中外层盒子的宽度我们一般还是不写固定值，沿用流式布局法的思想，我们用百分比的方式布局

margin:0 0.2rem

height:3rem;

3.根据当前屏幕的宽度和设计稿的宽度来计算我们HTML的font-size的值
例如：设计稿宽度为640px,其中有一个部分是轮播图，它的尺寸是600*300，在样式中给HTML设定一个font-size的值为100px,则轮播图大小应该为 6rem×3rem，那如果手机屏幕宽度为375px,其font-size应该设置为多少。

375/640*100->fontsize=58.59375//此时轮播图能自适应手机屏幕大小
但如果当前屏幕宽度大于设计稿宽度，图片会被拉长而失真，所以以上代码需要稍微做些修改

  

    
22 

15.移动端1像素边框方案

当设计稿的边框为1px

• 1.为什么会有这个问题？

  设备像素也被称之为物理像素，不同设备自带不同像素。逻辑像素指的是css中记录的像素，也就是css像素。因为移动端布局，根据不同的手机会有不同的dpr，设备独立像素比= 物理像素/逻辑像素

  iphone6 = 2，iPhone X = 3，当逻辑像素=1，在6和x中显示的就是2px和3px。所以说，因为dpr大于1，所以在手机上显示的要更粗一些。

• 2.解决方案

• 1.媒体查询
  非高清屏设置1px没有问题，如果在高清屏，比如说dpr=2，则设置边框为0.5px。
• 2.css3缩放（更常用)
  伪元素选择器，边框为1px,尺寸为父元素的2倍，通过transform:scale(.5).

16.bootstrap如何实现响应式布局

• 1.将一个页面分为12个格子区域，根据终端设备不同的宽度来设定模块内容所占格子区域的大小或者多少来最终决定模块所占空间的实际大小。
• 2.将模块分为container容器>row行>column列三个概念，
• 3.设定终端宽度，根据定义不同终端的宽度，来调整容器行列不同的显示效果，一般有xs,s,sm,md,lg五种显示方式，分别占1,2,3,4,6列，不同的宽度下，按照列的不同显示方式最终来实现响应式布局

17.什么是闭包，应用场景是什么？

• 1.可以保留局部变量不被释放的代码块被称作闭包
• 2.怎么形成：1.在外层函数中返回一个内层函数 2.在内存函数中能访问到外层函数中的变量 3.一定要定义一个变量接受内存函数
• 3.使用 ：定义一些有作用域局限的持久化变量，这些变量可以作为缓存或者计算的中间量
• 4.弊端：持久化变量不会被正常释放，会持续占用内存空间，很容易造成内存的浪费，一般需要额外手动去清理。
• 5.应用场景:封装变量，实现对数据的保护。
  实现设计模式：单例模式，策略模式，观察者模式等
  实现封装独立的作用域：轮播图的小圆点添加点击事件，解决循环变量i不正确的问题，防抖节流函数

18.谈谈你对函数式编程的理解

• 1.函数式编程是一种编程方式，主要思想是将运算过程尽量写成一系列嵌套的函数调用
• 2.特点：1.函数可以当做参数和返回值
  2.用的是表达式而不是语句，表达式有返回值而语句没有返回值（是一个操作）
  3.不修改状态，只返回新的值，不修改变量
• 3.优点：
  1.代码简洁，开发快
  2.接近自然语言，方便理解
  3.更方便代码管理，每一个函数可以看做独立单元，利于单元测试和排错以及模块化组合

19.![]===![] ，[]===![]执行结果？

布尔类型参与等于比较时，将数据类型转换为数值类型然后进行比较

![]===![] =>false ===false =>true
[]===![] => [] ===false=>0===0=>true

20.NaN能不能参与运算

• 1.NaN是其他数据类型转化为数值类型的执行结果，不能直接定义获取一个变量来存储NaN。不能转化为数值时结果是NaN，为了防止程序在执行过程当中，出现
  报错现象。NaN参与==，===判断结果都是false
• 2.因为NaN是转化为数值类型的结果，所以NaN是数值类型
• 3.NaN可以参与运算，结果还是NaN

21.git和svn的区别

控制版本的工具

• 1.svn使用比较简单，功能单一，倾向于集中式的管理。git命令多，使用起来要更复杂，功能丰富，有工作区和暂存区域，倾向于分布式管理
• 2.svn需要在联网的情况下才能工作。没网的情况下还可以使用git，在离线状态下查看版本，创建本地分支，提交文件等操作，有网的情况下再推送到远程。
• 3.svn和git的分支不同，git有本地分支，svn没有本地分支，git的分支是将指针指向某一次的提交。而svn的分支拷贝一个文件夹。这个特性让git的分支切换起来更加迅速。svn的分支合并起来也要比git复杂很多，查看合并记录也不如git容易
• 4.git的内存内容存储使用的是SHA-1 hash算法，可以确保内容的完整性,能确保磁盘在发生故障或者网络发生故障的时候，对版本库的破坏降到最低

22.聊聊amd和commonjs以及es6模块化的区别

• 1.amd的使用背景和基本语法
  异步模块定义规范，是早期为了解决浏览器异步加载JavaScript，因为加载顺序不一致导致代码报错的一种代码加载规范。原理上是把js的加载从script标签的src替换成了shr对象而把控制权完全掌握在js里一种加载模式。作为优化js代码结构的一种异步模块化编程方式。
  语法：define定义模块 require加载模块 require.js.config配置模块
• 2.commonjs的使用背景和基本语法
  是nodejs模块化规范，因为nodejs实现非常复杂的业务，需要把部分的功能划分成很多的小功能，所以需要一个js内部彼此调用的方法，这就是commonjs的由来。
  再者nodejs不涉及网络资源请求，所以commonjs是同步的
  语法:module.export或者exports定义模块 require js加载模块
• 3.es6模块化的使用背景和基本语法
  因为web端的模块化规范依赖的是原本作为加载器使用的，遵从amd规范的require.js,这个规范需要依赖插件，有冗余的成分存在，所以原生js推出es6module规范，这个规范用来拆分前端业务，因为是原生的模块化规范，所以更多的内容有原生的支持，比如定义模块时，可以定义常量，可以定义class，可以定义等等能想到的各种数据类型并保留各种数据类型的使用规则。这是任何插件都无法比拟的，但是es6模块化兼容性不好，通常不直接用于前端编程，大多用在框架中的webpack或者babel编译后才可以上线使用。
  语法:import导入 export导出

23.js单线程

• 1.什么是单线程？
  一次只能做一件事，这件事情做完之后才能做下一件事
• 2.js是如何实现异步的效果
  因为浏览器中v8引擎，包括堆和栈，webaps，事件轮询以及任务队列四个模块。当js遇到计时器的时候，会让webaps进行计数，当计数器完成的时候，会将定时器当中的回调函数放到任务队列中，当栈中的任务执行完毕，会使用事件轮询机制将回调函数放到栈中执行。js代码在执行之前都会放在栈中，事件轮询会一直观察栈和任务队列，如果栈空了，就将任务队列的第一个任务拿起来放到栈中去执行从而实现异步的效果。

24.promise解决异步的思路

• 1.解决异步回调嵌套的问题，比如说有多个ajax，他们之前的请求存在依赖关系，也就是说，一个请求必须使用另一个请求返回的结果才能做这次请求，那么就需要将这个请求嵌套在另一个请求的回调函数里面才能获取到另一个请求的返回结果。这样的话如果有多个请求之间有相互依赖的关系，那就说他需要在多个ajax的回调函数里面嵌套ajax操作，这样就形成了回调地狱。这在团队合作中，这样的项目对于后期的维护十分不利。
• 2.思路：将异步请求封装成一个对象，将执行成功与失败分别作为这个对象的方法，执行成功的时候将结果放在这个对象的then方法中处理后续的逻辑，失败了就调用这个对象的catch方法。这样调用方法的执行方式就能避免回调函数的嵌套。如果有多个依赖的异步操作，promise还可以将多个对象的then方法变成链式操作，从而避免回调函数的嵌套。
• 3.promise的使用场景，主要是用于保证多个异步请求都完成之后在进行后续的业务

25.js跨域的解决方案及原理 *****

• 1.如果可以操作目标服务器，在目标服务器的页面上设置一个响应头，允许跨域请求。这种方案用于，项目由多个服务器组成，服务器都是自己能操作到的，原理是利用http的头信息也叫作cos请求方式
• 2.jsonp跨域，浏览器的同源策略没有限制html的标签属性，比如说img标签的src属性可以引入别的网站的图片地址。script标签也可以用src引入线上的js文件。原理就是利用html标签的src属性不受同源策略的限制完成跨域请求。经常使用script标签的src去把别人的数据请求回来，因为script标签请求回来的数据会被当做js代码来解析，当时jsonp请求也有局限性，只能做get请求。如果数据量较大的话，jsonp就不适用了。
• 3.服务器代理。服务器之间是没有同源限制的。利用这点，前端请求当前服务器的一个路径是可以请求到的。然后让当前服务器代替前端做请求，然后将服务器请求回来的数据返回到前端。这样的话可以用服务器的后台语言代替自己做请求。比如说在前段，写一个ajax请求到php，然后让php请求别的网站上的数据，请求回来再返回给ajax，也可以在服务器的配置文件中，设置一个代理，比如说配置一个nginx的代理或者Apache的代理，请求到当前服务器设置的路径，然后服务器会自动实现跨域的请求。
• 4.跨域的使用场景主要是用于请求别的网站中的数据。比如说利用另一个网站的登录系统。我们发一个ajax请求给这个系统，然后实现自己网站的登录操作，会节省很多自己服务器的资源

26.cdn的特点和意义

• 1.什么是cdn

  内容分发网络

• 2.cdn的作用

  主要目的是为了解决因为分布，带宽，服务器性能带来的访问延迟问题。也就是当你请求第三方资源的时候，如果使用的是cdn资源，那么会根据你的网络运营商，地区等诸多因素给你从距离最近或者速度最快的服务器给你返回资源，解决了网络拥挤状况，提高用户访问网站的响应速度

• 3.cdn的特点

  • 1.本地cache加速度，提高了企业站点的访问速度，并提高站点的稳定性

  • 2.提高镜像服务，消除不同运营商之间物联的瓶颈造成的影响，实现跨运营商的网络加速度，保证不同网络的用户都能得到良好的访问质量

  • 3.远程加速，远程访问速度根据dns负载均衡技术，选择最快的cache服务器，加快远程访问速度

  • 4.集群抗攻击，广泛分布的cdn节点加上节点之间的智能冗余机制，可以有效预防黑客的攻击

26.函数节流和函数防抖

• 1.为什么要有函数节流和函数防抖
  解决高频触发函数而带来的负荷问题
• 2.什么是..
  函数节流就是当函数被高频触发时，每间隔固定时间会触发一次。简单理解为缩减函数执行频率，主要目的是稀释函数执行次数
  函数防抖就是函数在固定的时间内被触发时，不会立即执行，而是每一次触发都会重新计算时间。在达到固定时间后，仅仅执行一次
• 3.从代码层面说一下什么是...

函数节流，通过闭包的方式标记一个变量为true，在闭包内返回的函数里进行判断，如果标记为true，那么就执行，并且把标记改为false，如果标记为false就直接return。在闭包返回的函数里面放一个settimeout，在settimeout里面执行我们要执行的函数，并且把标记变为true。

函数防抖，准备一个变量来接受定时器的返回值，把我们要执行的函数放在一个settimeout里面，如果在固定时间内再次触发了函数，那么就把之前定时器关闭，再执行现在这个定时器。这样一来，时间记录会随着函数的执行重新进行计算，最后只会执行一次

• 4.举例

• 1.滚动条滚动到一定程度的时候会出现回到顶部按钮，使用函数防抖，不需要随着滚动每次都去判断浏览器向上卷曲的高度，而是在滚动过程中不进行判断，当滚动停止的时候才进行一次判断，决定顶部按钮是否出现
• 2.轮播图左右切换按钮，不停的快速点击会造成鬼畜效果，可以使用函数节流，在一个图片效果的滚动时间内只触发一次滚动，只有当这张图片滚动完毕以后，再次点击切换按钮的时候，才能触发下一次图片的滚动

27.为什么for循环比forEach性能高

for循环没有任何的函数调用栈和上下文，而forEach的使用方式是，数组.forEach调用，然后传递一个回调函数，在循环的过程中，每次都在执行这个回调函数，那么就会有诸多的参数，函数调用栈和执行上下文要考虑进来。这些内容都有可能会拖慢foreach的执行效率所以for循环的性能要高于foreach

28.token存储在localstorage里，当过期时过期的token怎么处理

token的工作原理：用户首次登录时，后端服务器判断用户账号密码正确之后，根据用户id，用户名定义好的秘钥，过期时间生成token，返回给前端。在node中我们会选择jsonwebtoken模块来进行token的生成与校验。前端拿到后端传过来的token，可以存在localstorge中，永久保存。

前端每次页面跳转或者进行其他操作之前都需要判断localStorge中有无token
没有则跳转到登录页，有则请求获取用户信息，改变登录状态。

每次请求接口，在ajax请求头携带token，后端接口判断请求头中有无token，没有或者token过期，返回401。前端得到401状态码，重定向到登录页面。过期以后，后端需要返回401的状态码，在前端接受到401以后，需要进行登录页面的跳转进行重新登录。