web前端面试题实例题目分析

今天小编给大家分享一下web前端面试题实例题目分析的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

成都创新互联公司基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽,联通大带宽,移动大带宽,多线BGP大带宽租用,是为众多客户提供专业达州主机托管报价,主机托管价格性价比高,为金融证券行业服务器托管,ai人工智能服务器托管提供bgp线路100M独享,G口带宽及机柜租用的专业成都idc公司。

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

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




    111

web前端面试题实例题目分析

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

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



    
            
  • 首页
  •         
  • 消息
  •         
  • 题库
  •         
  • 面试
  •         
  • 内容
  •         
  • offer
  •     

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



    
        
        
        
        
        
    

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

我:呃~,好的,布局方案根据项目特点,有以下选择:

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

2.换1980的电脑

四、移动端的设计图
宽度:750
因为750设计图/2就是375,正好是iphone6的尺寸,我们要把iphone6的尺寸做为基准点。

面试官:什么是重排重绘,如何减少重拍重绘?

我:呃~,好的,总结如下:

重排(Reflow):元素的位置发生变动时发生重排,也叫回流。此时在关键渲染路径中的 Layout 阶段,计算每一个元素在设备视口内的确切位置和大小。当一个元素位置发生变化时,其父元素及其后边的元素位置都可能发生变化,代价极高。

web前端面试题实例题目分析

重绘(Repaint): 元素的样式发生变动,但是位置没有改变。此时在关键渲染路径中的 Paint 阶段,将渲染树中的每个节点转换成屏幕上的实际像素,这一步通常称为绘制或栅格化。

web前端面试题实例题目分析

另外,重排必定会造成重绘。以下是避免过多重拍重绘的方法

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 如何设置一行或多行超出显示省略号?

我:呃~,好的,整出代码如下:



  
    1222222222222222222222222222222   
  

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.

web前端面试题实例题目分析

面试官:flex 布局中 order 有何作用?

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



  
    老大
    老二
    老三
  

web前端面试题实例题目分析以上就是“web前端面试题实例题目分析”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


本文标题:web前端面试题实例题目分析
标题URL:http://pwwzsj.com/article/gdhsjc.html

其他资讯