前端面试题(一)

1、swiper获取数据、css都没有问题,但图片不动,应该怎么解决?

    Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话)。主要使用于移动端的网站、移动web apps,native apps和hybrid apps。主要是为IOS而设计的,同时,在Android、WP8系统也有着良好的用户体验,Swiper从3.0开始不再全面支持PC端。因此,如需在PC上兼容更多的浏览器,可以选择Swiper2.x(甚至支持IE7)。

    话不多说,直接上代码。

    从swiper入手

   

       

           

               

           

           

               

           

           

               

           

       

       

       

   

   

   

很简单一个轮播图就实现了~

2、子组件能不能修改父组件传递过来的数据?

    父子组件传值时,父组件传递的参数,数组和对象,子组件接受之后可以直接进行修改,并且会传递给父组件相应的值也会修改。

    如果传递的值是字符串,直接修改会报错。(使用v-model传值,修改input里面的值,会报错)

    不推荐子组件直接修改父组件中的参数,避免这个参数多个子组件引用,无法找到造成数据不正常的原因。

3、px、em、rem的区别

            px:固定的像素,不能自适应页面大小.

            rem:相对于根元素(根元素是html).

            em:相对于父元素.

4、清除浮动的方式有哪些?最优的事哪一种?

    (1)给父级元素单独定义高度(height)

        原理:如果父级元素没有定义高度,父元素的高度完全由子元素撑开时,父级div手动定义height,就解决了父级div无法自动获取到高度的问题。

        优点:简单、代码少、容易掌握。

        缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题。对于响应式布局会有很大影响。

    (2)在标签结尾处加空div标签 clear:both

        原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度。

        优点:简单、代码少、浏览器支持好、不容易出现怪问题

        缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,不利于页面的优化。

    (3)父级div定义 伪类:after 和 zoom    ------------比较支持

        原理:元素生成伪类的作用和效果相当于方法2中的原理,但是IE8以上和非IE浏览器才支持:after,zoom(IE转有属性)可解决ie6,ie7浮动问题

        优点:浏览器支持好、不容易出现怪问题,写法是固定的,不理解也可以直接复制使用;(小编大力推荐使用此种方法,简单便捷,只需添加一个class即可解决问题)

        缺点:css代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。

    4)父级div定义 overflow:hidden

        优点:简单、代码少、浏览器支持好

        缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。(不建议使用此种方式,可能会影响页面元素布局)

    5,父级div定义 overflow:auto

        原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度

        优点:简单、代码少、浏览器支持好

        缺点:内部宽高超过父级div时,会出现滚动条。

        建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

5、css优先级算法如何计算?有什么不同?

        优先级就近原则,同权重情况下样式定义最近者为准;

        载入样式以最后载入的定位为准;

        优先级为:!important > id > class > tag

        important比内联优先级高(style)

6、readonly和disabled的区别

        

        

           这两种写法都会使显示出来的文本框不能输入文字,但disabled会使文本框变灰,而且通过通过表单提交时,获取不到文本框中的value值(如果有的话),而readonly只是使文本框不能输入,外观没有变化,而且表单提交时不影响获取value值。

注意:

    Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等。

7、浏览器中的回流和重绘是什么,分别在什么情况下触发?

    重绘(repaint)和回流(reflow)

  文档初次加载时,HTML解析器会解析元素构建DOM树,CSS解析器将样式解析为样式结构体,之后通过DOM树和样式结构体构建渲染树,渲染树具有样式属性。然后遍历渲染树的每个渲染器将器布局到页面,最后浏览器将器绘制到页面。

    重绘:当元素的外观或外观可见性(visibility)发生变化时会触发重绘

    回流:render树中的部分或全部因为元素的规模尺寸、布局、隐藏等改变,需要重新计算render树。

    回流时,浏览器会使渲染树中受影响的部分失效,然后重新构造这部分的render树。完成回流之后浏览器会重新布局、绘制受影响的部分到屏幕中,该过程就是重绘。所以回流必定会引起重绘,但重绘不一定引起回流。

    每个页面至少需要一次回流,就是页面第一次加载时。回流变化涉及到部分页面(或整个页面)的布局。一个元素的回流导致其所有子元素以及DOM中紧随其后的祖先元素和其子元素都发生回流。

是什么导致回流呢?

    (1) 调整窗口大小----发生resize事件时

    (2) 元素位置改变

    (3) 元素尺寸改变——边距、填充、边框、高度和宽度

    (4) 内容改变——比如文本字体或图片大小改变而引起的宽度和高度改变

    (5) 页面渲染初始化

    (6) 添加或删除可见的DOM元素

避免回流和重绘方法

     减少回流、重绘其实就是需要减少对render tree的操作,并减少对一些style信息的请求,尽量利用好浏览器的优化策略

   (1) 避免操作DOM,创建一个documentFragment或div,在它上面应用所有DOM操作,最后再把它添加到window.document。也可以在一个display:none的元素上进行操作,最终把它显示出来。因为display:none上的DOM操作不会引发回流和重绘。

   (2) 让要操作的元素进行"离线处理",处理完后一起更新,这里所谓的"离线处理"即让元素不存在于render tree中。如读取offsetLeft等属性。

   (3) 尽可能在DOM树的末端改变class ,尽可能在DOM树的里面改变class,可以限制回流的范围,使其影响尽可能少的节点。

   (4) 避免设置多层内联样式,因为每一个都会造成回流,样式合并在一个外部类,这样当该元素的class属性被操作时,只会产生一个reflow。

   (5) 将需要多次回流的元素position属性设为absolute或fixed,这样该元素就会脱离文档流,它的变化不会影响其他元素变化。比如动画效果应用到position属性为absolute或fixed的元素上。

    (6) 牺牲平滑度换取速度,动画元素每次移动3像素可能在非常快的机器上看起来平滑度低了,但它不会导致CPU在较慢的机器和移动设备中抖动

    (7) 避免使用table布局,在布局完全建立之前,table需要很多关口,table是可以影响之前已经进入的DOM元素的显示的元素。即使一些小的变化和会导致table中所有其他节点回流。

   (8) 避免使用css的JavaScript表达式,该规则较过时,但是个好主意。因为每次都需要重新计算文档,或部分文档、回流。

你可能感兴趣的:(前端面试题(一))