前端面试题汇总 2018/12/04

Posted 2021-01-26 heson

盒模型

标准盒模型：由里向外content,padding,border,margin
IE怪异和模型：宽高是内容(content)+填充(padding)+边框(border)的总宽高

通过JS获取盒模型对应的宽和高，有以下几种方法：

为了方便书写，以下用dom来表示获取的html的节点。

1.  dom.style.width/height 

　　这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。

 2. dom.currentStyle.width/height 

　　这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。

　　但这种方式只有IE浏览器支持。

 3. window.getComputedStyle(dom).width/height

　　这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。

 4. dom.getBoundingClientRect().width/height

　　这种方式是根据元素在视窗中的绝对位置来获取宽高的

 5.dom.offsetWidth/offsetHeight

　　这个就没什么好说的了，最常用的，也是兼容最好的。

弹性布局的使用

① 给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；

② 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；

③ display:flex; 容器添加弹性布局后，显示为块级元素；

display:inline-flex; 容器添加弹性布局后，显示为行级元素；

④ 设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。

行快标签

一、块级标签

1.独占一行，不和其他元素待在同一行

2.能设置宽高

常见的块级标签：div,? p,? h1-h6,? ul,? li,? dl,? dt,? dd



二、行级标签

1.能和其他元素待在同一行

2.不能设置宽高

常见的行级标签：a， span,? strong,? u,? em-->



三、行内块标签
1.能和其他元素待在一行

2.能设置宽高

常见的行内块标签：img,? input,? ?textarea

空标签

没有闭合标签的标签被称作为空标签。
常见的有
<input />  <img />   <area /> <col /> <link />  <bgsound /> <base /> 

JQuery版本区别

   1.3一般功能够

             1.4.2一般功能够而且稳定

            1.7+比较新特性

            2不支持老IE

            兼容的话最好选 1.x。稳定性就用1.7或者1.4，其中1.4的体积相对小

            另外更加情况选用1系列还是2系列，2系列不支持ie6，7，8
常用1.4和1.7  详细信息自己看  https://www.cnblogs.com/vivijiang/p/6121003.html

Js基本类型，怎么检测类型

应用数据类型 Array Object function
基本数据类型  number String null undefined  Boolean
检测方法：
1.typeof    返回类型
console.log(typeof "");
console.log(typeof 1);
2.instanceof   返回1或0  不考虑null  undefined
console.log("1" instanceof String);
console.log(1 instanceof Number);
3.constructor  返回1 或0
console.log(("1").constructor === String);
console.log((1).constructor === Number);
4.Object.prototype.toString.call()  返回   [object +具体类型]
var a = Object.prototype.toString;
console.log(a.call("aaa"));
console.log(a.call(1));

巧用 localStorage 实现跨浏览器tab页互动

跨浏览器tab页的互动，比如说一个网站有一个模块是通过超链接_blank在一个新tab页打开，但是这是点击新tab页的内容需要网站也有反应，这时就可以运用localStorage。只要是同一个域名下就都能访问到。 
新tab页里的表格有个点击事件，点击完后网站页弹出这行的信息。可以这样操作：

//表格点击事件回调
function clkTb(row) {
    localStorage.setItem('curRowId', row.id);//前面是键，后面是值
}

//网站页接收
$(function() {
    window.addEventListener('storage', function(ev) {
        console.log(ev);//在这里可以找到你刚刚设置的值。
    })
})

Commonjs require.js 区别

https://blog.csdn.net/crystal6918/article/details/74906757/

冒泡捕获

事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。

Vue相关问题？

http://www.cnblogs.com/Renyi-Fan/p/9419742.html

h5如何做浏览器适配

1、viewport 简单粗暴的方式
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
2、ip6+ 的CSS media query
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ /*iphone 6*/ }
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ /*iphone 6 plus*/ }
3、REM布局
REM是CSS3新增的一种单位，并且移动端的支持度很高，android2.x+，ios5+都支持。REM是相对于dom结构的根元素来设置大小，也就是html这个元素。相较于em单位，rem使用上更容易理解及运用。
4、百分比布局--面临图片自适应
刚说完REM布局，那么用百分比布局也能实现一样的效果，但是用百分比布局，必须要面临一个问题：图片宽度100%，页面加载时会存在高度塌陷的问题。
那么可以用padding-top设置百分比值来实现自适应。
公式如下：
padding-top = (Image Height / Image Width) * 100%
原理：padding-top值为百分比时，取值是是相对于宽度的。
5、移动端适配解决方案-rem

Vuex怎么用?

https://www.cnblogs.com/liningstyle/p/8335129.html

闭包？应用场景

https://blog.csdn.net/qq_21132509/article/details/80694517
setTimeout callback 封装变量 为节点循环绑定click事件

原型 原型链

https://www.cnblogs.com/shuiyi/p/5305435.html

Webpack打包流程

https://www.jianshu.com/p/b47616a75f82

面向对象

https://www.cnblogs.com/chiangchou/p/js-oop1.html

跨域

https://www.cnblogs.com/heson/p/10015794.html

未知宽高元素水平垂直居中方法

https://www.cnblogs.com/heson/p/10019794.html

window.onload和$.ready区别

$(document).ready:是DOM结构绘制完毕后就执行，不必等到加载完毕。 意思就是DOM树加载完毕，就执行，不必等到页面中图片或其他外部文件都加载完毕。并且可以写多个.ready。

window.onload:是页面所有元素都加载完毕，包括图片等所有元素。只能执行一次。


所以，$(document).ready的执行时间要早于window.onload。并且可以写多个

AJAX get() 和 post() 方法

https://www.cnblogs.com/heson/p/10014471.html

session,cookie,sessionStorage,localStorage的区别及应用场景

https://www.cnblogs.com/heson/p/10029857.html

深拷贝和浅拷贝

https://www.cnblogs.com/echolun/p/7889848.html

H5的新标签有哪些 链接里有兼容情况

https://blog.csdn.net/a772116804/article/details/80625385

ES的新特性

去博客看 https://www.cnblogs.com/heson/default.html?page=2

数组去重的方法

1.最基本的去重方法
思路：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。

function unique(arr){

　　var res = [arr[0]];

　　for(var i=1;i<arr.length;i++){

　　　　var repeat = false;

　　　　for(var j=0;j<res.length;j++){

　　　　　　if(arr[i] == res[j]){

　　　　　　　　repeat = true;

　　　　　　　　break;

　　　　　　}

　　　　}

　　　　if(!repeat){

　　　　　　res.push(arr[i]);

　　　　}

　　}

　　return res;

}

2.先排序在去重
思路：先将原数组排序，在与相邻的进行比较，如果不同则存入新数组

function unique(arr){

　　var arr2 = arr.sort();

　　var res = [arr2[0]];

　　for(var i=1;i<arr2.length;i++){

　　　　if(arr2[i] !== res[res.length-1]){

　　　　　　res.push(arr2[i]);

　　　　}

　　}

　　return res;

}

3.利用对象的属性去重（推荐）
思路：每次取出原数组的元素，然后再对象中访问这个属性，如果存在就说明重复

function unique(arr){

　　var res =[];

　　var json = {};

　　for(var i=0;i<arr.length;i++){

　　　　if(!json[arr[i]]){

　　　　　　res.push(arr[i]);

　　　　　　json[arr[i]] = 1;

　　　　}

　　}

　　return res;

}

4.利用下标查询
  function unique(arr){
   　　var newArr = [arr[0]];
  　　 for(var i=1;i<arr.length;i++){
　　　　if(newArr.indexOf(arr[i]) == -1){
          　　 newArr.push(arr[i]);
    　　  }
        }
        return newArr;
   }

排序算法

https://www.cnblogs.com/onepixel/articles/7674659.html

REST ful

REST ful
Representational State Transfer，翻译是”表现层状态转化”。 
面向资源是REST最明显的特征，对于同一个资源的一组不同的操作。资源是服务器上一个可命名的抽象概念，资源是以名词为核心来组织的，首先关注的是名词。REST要求，必须通过统一的接口来对资源执行各种操作。对于每个资源只能执行一组有限的操作。（7个HTTP方法：GET/POST/PUT/DELETE/PATCH/HEAD/OPTIONS）