美文网首页
前端面试总结

前端面试总结

作者: 慕名66 | 来源:发表于2019-03-07 22:09 被阅读0次

    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> 标签的 for 属性应当与input元素的 id 属性相同。

        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

            ③父元素开始绝对定位

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

            ⑤添加空<div>标签,并设置属性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是否有效

    42.

    相关文章

      网友评论

          本文标题:前端面试总结

          本文链接:https://www.haomeiwen.com/subject/lgphpqtx.html