前端面试总结

1.浮动的div怎么居中?

2.绝对定位div居中?

        .test{

        width:100px;height:100px;

        position:absolute;

        top:0; left:0;bottom:0;right:0

        marign:auto;

}

3.使用原生js实现点击table切换不同内容

4.原生js实现轮播

        大体思路: 先创建一个div,限定其宽度和高度,overflow:hidden,且设置其position为relative。然后创建一个装图片的div,宽度为所有图片的总宽度,且设置其position为absolute,并且使其中的内容浮动,这样所有的图片就处于一行中。然后为了实现无缝滚动,所以需要在首尾分别添加一张过渡图片。 先添加两个按钮, 使其可以手动轮播,然后只需要添加一个定时器使其朝一个方向自动轮播即可,因为用户有时需要查看详情,所以当鼠标进入时就clear定时器,滑出再定时播放。为了更好地用户体验,我们再下面添加了一排小圆点,用户可以清楚地知道现在所处的位置, 最后, 利用闭包使得用户可以直接通过点击小圆点切换图片。

5.h1与title的区别,b与strong的区别,i和em的区别?

        h1突出文章主题,面对用户,更突出其视觉效果,突出网站标题或关键字用title。一篇文章,一个页面最好只用一个h1,多个h1会稀释主题。一个网站可以有多个title,最好一个单页用一个title,以便突出网站页面主体信息,从seo看,title权重比h1高,适用性比h1广。标记了h1的文字页面给予的权重会比页面内其他权重高很多。一个好的网站是h1和title并存,既突出h1文章主题,又突出网站主题和关键字。达到双重优化网站的效果。

        strong与em是结构化标签,而b与i是表现化标签

6.lable的作用?常怎么用?

    作用: 为 input 元素定义标注(标记)。

    使用:

    label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

7.js回调函数的作用:  js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数。

8.vue计算属性,什么情景使用

9.选择器优先级(笔试都会有)

10.typeof undefined //undefined

11.循环遍历加监听

12.mui实现底部加载更多时没有数据,显示底部图片

13.vue常用指令

14.vux怎么使用插件

15.vue中各生命周期钩子执行时机:

    beforeCreate:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

    created:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

    beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。

    mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。

    beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

    updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

    当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

    beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。

    destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

16.dom事件阻塞:

        event.stopPropagation(); //只会阻止事件传递,不会阻止事件的默认行为;

        clike事件函数返回false, //即会阻止事件传递,不会阻止事件的默认行为;

17.vue操作数组哪个方法可以触发双向数据绑定:数组的变异操作方法都能触发

18.js中怎么处理浮点数相加不精确问题,如0.1+0.2=0.300000004;

        使用阶乘

19.多终端多分辨率适配方案:

        1.使用百分比自适应布局

        2.使用rem单位适配网页,效果很好,浏览器的兼容性也不错只要一行代码就能适配多个分辨率终端

        (function(doc,win){

                    var docEl =doc.documentElement,

                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

                    recalc = function(){

                            var clientWidth = docEl.clientWidth>750 ? 750 :docEl.clientWidth;

                if (!clientWidth) {return};

                    docEl.style.fontSize = 100 * (clientWidth/750) + 'px';

                };

                recalc();

            if (!doc.addEventListener) return;

                    win.addEventListener(resizeEvt, recalc, false);

                    doc.addEventListener('DOMContentLoaded', recalc, false);

            })(document,window)

      3.响应式布局来做,用媒体查询,可以使用bootstrap框架

20.vue组件中data为什么必须是一个函数?

        Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了;javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域),data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响

    当一个组件被定义, data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。

21.js中的隐式转换和强制类型转换

            两个不同类型比较时,会产生隐式类型转换,如false==1;//false, false先转换为数字0

            js中的不同的数据类型之间的比较转换规则如下:

        1. 对象和布尔值比较

        对象和布尔值进行比较时,对象先转换为字符串,然后再转换为数字,布尔值直接转换为数字

        [] == true;  //false  []转换为字符串'',然后转换为数字0,true转换为数字1,所以为false

        2. 对象和字符串比较

            对象和字符串进行比较时,对象转换为字符串,然后两者进行比较。

            [1,2,3] == '1,2,3' // true  [1,2,3]转化为'1,2,3',然后和'1,2,3', so结果为true;

        3. 对象和数字比较

            对象和数字进行比较时,对象先转换为字符串,然后转换为数字,再和数字进行比较。

            [1] == 1;  // true  `对象先转换为字符串再转换为数字,二者再比较 [1] => '1' => 1 所以结果为true

        4. 字符串和数字比较

            字符串和数字进行比较时,字符串转换成数字,二者再比较。

            '1' == 1 // true

        5. 字符串和布尔值比较

            字符串和布尔值进行比较时,二者全部转换成数值再比较。

                '1' == true; // true

        6. 布尔值和数字比较

                布尔值和数字进行比较时,布尔转换为数字,二者比较。

                true == 1 // true

      强制类型转换:如let str = '123',  let num = Number(str)  //num = 123;

22.数组打乱

23.js的哪些操作会造成内存泄漏

      1>. 闭包

        2>.没有及时清理的定时器和回调函数

        3>.意外的全局变量

24.vux的全局钩子:导航守卫怎么使用的

25.清除浮动的6种方式:如 父子两层div,子元素浮动

        ①父元素设置高度

        ②父元素设置overflow:hidden

        ③父元素开始绝对定位

        ④添加
空标签,并设置属性clear='all'

        ⑤添加空

标签,并设置属性clear:'both',

                会有最小高度问题,添加font-size:'0px';可以解决,但是还会遗留2px的高度

        ⑥终极解决方案

            .clearfix{

                /* 兼容IE6,7以下不支持伪元素,,可以开启HasLayout */

                *zoom: 1;

              }

            .clearfix:after,

            .clearfix:before{

                  content: "";

                  display: block;

                  clear: both;

            }

26.三列等分布局实现,使用百分比布局

27.性能优化:

        ①减少http请求次数, 合并图片/合并多个css或多个js/图片懒加载

        ②控制资源文件加载优先级,优先加载css,最后加载javascript

        ③浏览器缓存

        ④减少重排, 尽量使用增加class属性,而不是通过style操作样式

        ⑤减少DOM操作

        ⑥图标使用IconFont替换

28.数组的变异方法有哪些?

29.display属性有几个值,分别什么含义?

30.异步和同步的区别

31.什么是事件委托

32.http状态码和含义: 404:找不到文件/500:服务器异常/200:成功

33.split()和join()方法是什么意思?

      split:用于把一个字符串分割成字符串数组。

      join:把数组中的所有元素放入一个字符串,元素通过指定的分隔符进行分隔

34.HTML5有哪些新增的表单元素(大多数浏览器都还不支持)

        datalist: 元素规定输入域的选项列表

                        列表是通过 datalist 内的 option 元素创建的(option 元素永远都要设置 value 属性)。

                        如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:

        keygen:元素的作用是提供一种验证用户的可靠方法

        output:用于不同类型的输出,比如计算或脚本输出

35.HTML5 input新增输入类型:

        email, url, number, Date pickers (date, month, week, time, datetime, datetime-local),

        color,search

35.选择器都有哪些?

        类:  .className;

        id:  #id

        属性:  [title]

        子选择器: p > span

        相邻兄弟选择器:  p + p

        后代选择器:  div  .className或 div  p

36.vue组件间通信

37.自定义组件,插槽

38.行高line-height设置2和2em什么区别:

        line-height:2; 行高是2倍的文字大小,均以相应的字体为基准。 

        line-htight:2em; 行高是2倍的文字大小,文字大小是指父元素中设定的字体大小。

39.marign百分比

40.loading和ready的区别

41.JSONP跨域时cookies是否有效

你可能感兴趣的:(前端面试总结)