看看这些前端面试题，带你搞定高频知识点（四）-9543建站博客

广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

看看这些前端面试题，带你搞定高频知识点（四）

每天10道题，100天后，搞定所有前端面试的高频知识点，加油！！！，在看文章的同时，希望不要直接看答案，先思考一下自己会不会，如果会，自己的答案是什么？想过之后再与答案比对，是不是会更好一点，当然如果你有比我更好的答案，欢迎评论区留言，一起探讨技术之美。

面试官：请你谈一下自适应(适配)的方案

我：呃~，好的，解决自适应问题可以采用 “ 淘宝无限适配 + 布局单位使用rem ” ，适配所需的js还有说明文档：淘宝的github网址，整出代码如下：

<style>    *{margin: 0;padding: 0;}    html{        height: 37.5px;    }    .container{        width: 1rem;        height: 1rem;        background-color: #f00;    }</style><script src="../index.js"></script><body>    <div class="container">111</div></body>

登录后复制

【相关推荐：web前端开发】

面试官：谈谈你对响应式的理解

我：呃~，好的，通俗来讲，在html+css中，响应式意为：一个URL可以响应多端，简言之在不同的设备不同尺寸的情况下，相同的url都能对其进行适配，如何做？整出代码如下：

<style>    *{margin: 0;padding: 0;}    ul{        list-style: none;    }    ul li {        display: inline-block;        width: 100px;        background-color: #f00;    }    @media only screen and (max-width: 1000px){        ul li:last-child{            display: none;        }    }    @media only screen and (max-width: 800px){        ul li:nth-child(5){            display: none;        }    }    @media only screen and (max-width: 500px){        ul li:nth-child(4){            display: none;        }    }</style><body>    <ul>        <li>首页</li>        <li>消息</li>        <li>题库</li>        <li>面试</li>        <li>内容</li>        <li>offer</li>    </ul></body>

登录后复制

当然也可以给图片添加响应式，整出代码如下：

<style>    *{margin: 0;padding: 0;}    picture{        width: 300px;    height: 300px;    }    img {width: 100%;    height: 100%;    object-fit: contain;};    source {width: 80%;    height: 80%;    object-fit: contain;};</style><body>    <picture>        <!-- 如果切换到不同设备上 -->        <source srcset="../7.jpeg" media="(min-width: 1000px)">        <source srcset="../004.jpeg" media="(min-width: 700px)">        <!-- 默认加载该图片 -->        <img src="../4.jpeg">    </picture></body>

登录后复制

面试官：谈谈你对布局方案的理解

我：呃~，好的，布局方案根据项目特点，有以下选择：
一、什么情况下采用响应式布局 数据不是特别多，用户量不是特别大，纯展示类的项目适合响应式布局例如:公司的官网、专题页面特别追求性能的项目，不太适合响应式，因为如果添加了很多的响应式就会造成加载速度变慢。二、pc +移动端应该做什么样的布局方案 注意:访问量还可以或者比较大，类似于淘宝网。 pc是一套，会加入一点点响应式。移动端是一套，会使用自适应的布局方式。三、pc的设计图 ui: 1980 笔记本电脑:1280 ui图的宽度和电脑的宽度不对应该怎么办? 1．把ui图进行等比缩放，缩放成和电脑一样的尺寸
2．换1980的电脑
四、移动端的设计图 宽度:750 因为750设计图/2就是375，正好是iphone6的尺寸，我们要把iphone6的尺寸做为基准点。

面试官：什么是重排重绘，如何减少重拍重绘？

我：呃~，好的，总结如下：
重排(Reflow)：元素的位置发生变动时发生重排，也叫回流。此时在关键渲染路径中的 Layout 阶段，计算每一个元素在设备视口内的确切位置和大小。当一个元素位置发生变化时，其父元素及其后边的元素位置都可能发生变化，代价极高。
重绘(Repaint): 元素的样式发生变动，但是位置没有改变。此时在关键渲染路径中的 Paint 阶段，将渲染树中的每个节点转换成屏幕上的实际像素，这一步通常称为绘制或栅格化。
另外，重排必定会造成重绘。以下是避免过多重拍重绘的方法
1）使用 DocumentFragment 进行 DOM 操作，不过现在原生操作很少也基本上用不到
2）CSS 样式尽量批量修改
3）避免使用 table 布局
4）为元素提前设置好高宽，不因多次渲染改变位置

面试官：css 动画与 js 动画哪个性能更好？

我：呃~，我对这两者的看法以及优缺点总结如下：
CSS3 的动画：
1.在性能上会稍微好一些，浏览器会对 CSS3 的动画做一些优化（比如专门新建一个图层用来跑动画）
2.代码相对简单
3.在动画控制上不够灵活　
4.兼容性不好
5.部分动画功能无法实现（如滚动动画，视差滚动等）
JavaScript 的动画：
弥补了 css 缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容 IE6，并且功能强大。
总结：对于一些复杂控制的动画，使用 javascript 会比较好。而在实现一些小的交互动效的时候，可以多考虑 CSS。

面试官：为什么会发生样式抖动？

我：呃~，因为没有指定元素具体高度和宽度,比如数据还没有加载进来时元素高度是 100px(假设这里是 100px),数据加载进来后,因为有了数据,然后元素被撑大,所有出现了抖动。

面试官：你做前端有多少时间花在写 css 上？

我：呃~，如果说是开发阶段，我会用 20%-30% 的时间写 CSS。但是如果项目是采用某种组件库的时候，比如：UI 设计时遵循了 element-ui 的规范，而开发使用的 UI 框架为 element-ui，因此大多数的界面并不需要写大量的 CSS，因为预设样式已足够使用。

面试官：介绍 CSS 隐藏页面中某个元素的几种方法

我：呃~，好的，隐藏元素的方法有如下几种：
display: none; ：通过 CSS 操控 display，移出文档流。
opacity: 0; ：透明度为 0，仍在文档流中，当作用于其上的事件(如点击)仍有效。
visibility: hidden; ：透明度为 0，仍在文档流中，但作用于其上的事件(如点击)无效，这也是 visibility:hidden 与 opacity: 0 的区别。
content-visibility; ：移出文档流，但是再次显示时消耗性能低。
position: absolute;top: -9000px;left: -9000px; ：绝对定位于当前页面的不可见位置。
font-size: 0; ：字体大小设置为 0

面试官：CSS 如何设置一行或多行超出显示省略号？

我：呃~，好的，整出代码如下：

<style>  div{    width: 100px;    /* 使用如下来设置一行行超出显示省略号 */    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;  }  p{    width: 100px;    /* 使用 -webkit-line-clamp 来设置多行超出显示省略号 */    overflow: hidden;    display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 2;  }</style><body>  <div>    1222222222222222222222222222222  </div>  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste esse velit illum vel cumque obcaecati. Quae, dicta nihil quod vero mollitia dignissimos autem, necessitatibus, iure a debitis temporibus eaque ratione.</p></body>

登录后复制

面试官：flex 布局中 order 有何作用？

我：呃~，order 属性定义 Flex 布局中子元素的排列顺序，数值越小，排列越靠前，默认为 0。整出代码如下：

<style>  .container{    width: 500px;    border: 5px solid #ddd;    display: flex;    justify-content: space-around;  }  .container div{    width: 100px;    height: 100px;    background-color: #f00;  }  #d1{    order: 3;  }  #d2{    order: 2;  }  #d3{    order: 1;  }</style><body>  <div class="container">    <div id="d1">老大</div>    <div id="d2">老二</div>    <div id="d3">老三</div>  </div></body>

登录后复制

（学习视频分享：web前端入门、编程基础视频）

以上就是看看这些前端面试题，带你搞定高频知识点（四）的详细内容，更多请关注9543建站博客其它相关文章！