差不多快两年没碰过技术了，人生一直在各种试错。不过我坚信走过更多的路，才能找到更好的自己～～
19年的第一场面试，忐忑不安，昨晚尽然还失眠了-.- 尽管面试官很和蔼，但表现并不是很好，如果10分满分那只能给5分，回来查找资料后发现问的都是基础的问题，不过是换了一种形式。
记录一下面试问题。
1、对于页面布局有没有什么比较好的地方？
说实话对于这个问题我真的是一脸懵逼，页面布局就页面布局呗，什么叫有什么比较好的地方？没办法就说了我觉得bootstrap的布局就很不错，都是自适应响应式的。
参考答案：
常用布局方式
三列布局
特点
a、三列布局，中间宽度自适应，两边定宽；
b、中间栏要在浏览器中优先展示渲染；
c、允许任意列的高度最高；
d、要求只用一个额外的DIV标签；
e、要求用最简单的CSS、最少的HACK语句；
多栏布局
a、栏栅格系统：就是利用浮动实现的多栏布局，在bootstrap中用的非常多。
b、多列布局：栅格系统并没有真正实现分栏效果（如word中的分栏），CSS3为了满足这个要求增加了多列布局模块
弹性布局（Flexbox）
CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。
优点：Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。
主要特点：
a、屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
b、可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
c、可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
d、可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
e、可以控制元素在页面上的布局方向；
f、可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
瀑布流布局
瀑布流布局是流式布局的一种。视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
优点
a、有效的降低了界面复杂度，节省了空间：我们不再需要臃肿复杂的页码导航链接或按钮了。
b、对触屏设备来说，交互方式更符合直觉：在移动应用的交互环境当中，通过向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮。
c、更高的参与度：以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。
缺点
a、有限的用例：
无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。
例如，在电商网站当中，用户时常需要在商品列表与详情页面之间切换，这种情况下，传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中。
b、额外的复杂度：
那些用来打造无限滚动的JS库虽然都自称很容易使用，但你总会需要在自己的产品中进行不同程度的定制化处理，以满足你们自己的需求;另外这些JS库在浏览器和设备兼容性等方面的表现也参差不齐，你必须做好充分的测试与调整工作。
c、再见了，页脚：
如果使用了比较典型的无限滚动加载模式，这就意味着你可以和页脚说拜拜了。
最好考虑一下页脚对于你的网站，特别是用户的重要性;如果其中确实有比较重要的内容或链接，那么最好换一种更传统和稳妥的方式。
千万不要耍弄你的用户，当他们一次次的浏览到页面底部，看到页脚，却因为自动加载的内容突然出现而无论如何都无法点击页脚中的链接时，他们会变的越发愤怒。
d、集中在一页当中动态加载数据，与一页一页的输出相比，究竟那种方式更利于SEO，这是你必须考虑的问题。对于某些以类型网站来说，在这方面进行冒险是很不划算的。
e、关于页面数量的印象：
其实站在用户的角度来看，这一点并非负面;不过，如果对于你的网站来说，通过更多的内容页面展示更多的相关信息(包括广告)是很重要的策略，那么单页无限滚动的方式对你并不适用。
流式布局（Fluid）
固定布局和流式布局在网页设计中最常用的两种布局方式。固定布局能呈现网页的原始设计效果，流式布局则不受窗口宽度影响，流式布局使用百分比宽度来限定布局元素，这样可以根据客户端分辨率的大小来进行合理的显示。
响应式布局
一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
优点
a、面对不同分辨率设备灵活性强
b、能够快捷解决多设备显示适应问题
缺点
a、兼容各种设备工作量大，效率低下
b、代码累赘，会出现隐藏无用的元素，加载时间加长
c、其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
d、一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
固定布局
也就是positon：absolute的情况
2、页面之间是如何传递参数的（上一页的参数传递到下一页）
这个其实就是cookie和weblStorage的东西，复习的时候看过，不过看的是他们之间的区别，没想到换了一种方式来问，哎。
1、url携带参数
优点：取值方便，可以跨域，利于页面分享，没有环境限制。
缺点：url携带参数值的长度有限制。
2、cookie
cookie能够存储少量数据到客户端的磁盘中，特定的网页之间是可以共享cookie中的数据。
优点：可以在同源内的的任意网页中访问，存储数据的周期可以自由设置。
缺点：有长度限制。
3、H5中的localStorage对象
优点：储存空间大，有5M存储空间。
缺点：不是所有浏览器都支持。
4、设置窗口之间的父子关联关系
window.open可以打开一个新的页面，在新的页面中可以通过window.opener获取父页面的窗口对象，从而可以获取父窗口中的参数。
优点：取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制。
缺点:两窗口要存在着关系.就是利用window.open打开的窗口。不能跨域。
3、页面是如何换祯的？比如中英文版本的切换，网站整体色调的切换是如何实现的？
不是很清楚，就随便说的，我回答的是写两套css方案，用户选择不同色调的时候调用不同的js来选择不同的css。翻译的话我说的是js里有可以直接翻译-.- 其实早知道说用插件就可以实现好了-.-
翻译：
1、使用谷歌整站翻译Api
2、使用js动态替换内容
1）在用户点击切换语言后，把选择的语言版本保存在cookie中
2）在包含静态文本的标签中，添加一个属性：set-lan=”html:name”
属性值中的html代表内容的位置，name代表要替换的文字的标识
3）定义3个语言的标识+内容的json字符串
4）遍历带set-lan属性的标签，进行文本替换
3、使用插件
换肤：
思路：加载对应的css，后加载的css覆盖默认显示样式，即可达到换主题的目的。可以先将默认主题写到页面中，然后通过js触发事件加载其他主题的css。后加载的css会覆盖之前样式从而达到切换主题的效果。利用cookie保持选中的cookie避免切换到其他页面时又变回默认主题。
1）准备两份不同主题的css
2）使用js实现切换(加载)css的方法
生成不同主题的css：
最简单的调整颜色的方法是使用适当的工具来生成css，比如less，scss等
4、你了解过xml吗？json与xml有什么区别？json的格式是什么？用json有什么好处？对于后台返回的json数据如何处理，如何取到返回值中的数据？
复习的时候看过，有点紧张，只说了json比较小，效率比较高-.-
xml：指可扩展标记语言，被设计用来传输和存储数据。
xml格式：树形结构
json：是存储和交换文本信息的语法，是轻量级的文本数据交换格式。
json格式：以键值对的形式存在，key:value 使用冒号分隔，使用逗号分隔，括号保存对象，括号保存数组，如：{“age”:“12”, “name”:“back”,“phone”};
用 json有什么好处：json 比 xml 更小、更快，更易解析
对于后台返回的json数据如何处理。json是轻量级的，文件都是压缩的，占用宽带小，二xml是重量级的。
对于后台返回的json数据如何处理：json 文本格式在语法上与创建 javascript对象的代码相同。由于这种相似性，无需解析器，javascript 程序能够使用内建的 eval() 函数，用 json 数据来生成原生的 javascript 对象。
如何取到返回值中的数据：其实我觉得是没啥处理的，因为javascript能够使用内建的eval()函数，使json数据直接生成原生的javascript对象。
分别在哪里用到了json和xml：一般现在移动APP接口都采用JSON，因为json占宽带小，在微信开发里，微信接口都是JSON格式的， 微信事件推送是XML。
5、对于vue的model的使用有没有什么注意事项？
答：不太清楚****（心想本次面试以失败告终）
暂时没找到答案，找到后更新。