乐趣区

关于前端:2020年前端工程师面试题一

1、简述一下 HTML5 新个性

1)减少了 section footer header nav 等自定义语义化标签

2)减少了表单输入框新 time color number tel search 等个性

3)提供了视频音频标签

4)增加了 canvas 绘画性能

5)反对展现 SVG 矢量图形

6)应用 getCurrentPosition() 办法获取以后终端地理位置

7)提供 drag 拖拽,任何元素都能被拖拽

8)webStorage 是 HTML5 最风行的缓存之一

sessionStorage 缓存是基于浏览器会话的缓存,敞开浏览器就会革除缓存

localStroage 缓存没有工夫限度,只能手动革除

9)提供 WebSocket 全双工通信机制

客户端与服务器单方握手采纳 http 协定,默认 80、443 端口

没有同源限度,任何客户端能够与服务器通信,罕用于长期社交通信,例如聊天室

10)WebWork

WebWork 基本原理是在以后 JavaScript 主线程中,加载一个 js 文件从而创立一个新线程

目标为了起到相互不阻塞运行其余脚本文件

WebWork 线程与主线程之间能够实现数据传输

var webWorker =new Worker("webWorker.js");
webWorker.postMessage("主线程发送的数据");
webWorker.onmessage = function(event){console.log(event)
}

2、讲述一下 js 的循环有哪些形式

// 传统的 for 循环形式
for(var i = 0;i < 20;i++){console.log(i);// 输入索引
}
// ES6for 形式,用于循环 json 对象
var arr = [{b:2},{c:3}];
for(var i in arr){console.log(i);// 输入索引
  console.log(arr[i]);// 输入对象值 1,2,3
}
// ES5foreach 循环获取 key、value,但过程中不能跳出循环
var array = ['1','2','3'];
array.forEach((currentValue, index, arr)=>{console.log(currentValue); // 输入 1,2,3
  console.log(index); // 输入索引
  console.log(arr); // 输入 arr 数组自身
})

3、浏览器及浏览器内核

IE 浏览器:Trident 内核

Chrome 谷歌:之前始终都是和苹果共用 Webkit 内核,当初的谷歌浏览器是 Blink 内核,Blink 是在 webkit 根底上衍生而来的

Firefox 火狐:Gecko 内核

Safari 苹果浏览器:Webkit 内核

Opera 欧朋浏览器:由 Presto 内核,转成 Webkit 内核,再转成 Blink 内核

360、搜狗、漫游、QQ 等一系列浏览器基本上为 Trident(兼容模式)+Webkit(高速模式)双核浏览器

4、不同浏览器有不同兼容问题,如何解决?

兼容性问题太多,此处列举 3 处

1)默认内外边距的不同,设置通配符选择器

*{margin:0;padding:0;}

2)在 IE6、7 中设置 float 浮动再设置 margin 后,会呈现双边距景象,如何解决?

.dom{display:inline;}

3)margin 边距重叠问题

高低两 div 之间别离设置 5px、10px

量元素之间的间距造成重叠为 10px

解决:两元素最好给下面的元素设置 margin-bottom

或者将元素再套一层 div,再设置 margin

5、HTML 网页的造成过程

浏览器先解析 html 源代码,生成一个 DOM 树,再解析 css 代码,计算出款式数据,两者合为渲染树,再由浏览器将渲染树绘制到浏览器页面中

6、jQuery 异步接口申请代码

get 是从服务器上获取数据,post 是向服务器传送数据

get 参数通过地址栏传递,post 放在 request body 中

get 申请只能进行 encodeURI 编码,而 post 反对多种编码方式

get 传送的数据量较小,不能大于 2KB。post 传送的数据量较大,个别被默认为不受限制

get 参数类型只承受 ASCII 字符串类型,而 post 没有限度

get 安全性非常低,可间接裸露在地址栏中,post 安全性较高

get 在浏览器回退时是有害的,而 post 会再次提交申请

get 申请会被浏览器被动 cache,而 post 不会,除非手动设置

$.ajax({
  type: "POST",
  url: "http://xxxxxx.com/requestUrl",
  data: {name:$("#name").val(),},  dataType: "json",
  success: function(result,status,xhr){
    // 输入申请胜利返回后果
    console.log(result);
  },
  error:function(xhr,status,error){// 输入申请失败回调}})

7、长度有哪些单位

px

% 百分比

em

rem

vw、vh

8、盒模型了解

盒模型包含:content 内容体、padding 内边距、border 边框、margin 外边距

9、革除浮动形式

父级元素增加 overflow:hidden;

子级元素增加 <div style=”clear:both;”></div>

10、图片的 title 和 alt 有什么区别?

alt 是图片加载失败时,在网页上显示的代替文字

title 是鼠标放在图片上显示的提醒文字

11、相对定位和绝对定位的区别?

position:absolut

相对定位:以后元素是绝对于最近定位的先人元素进行定位

position:relative

绝对定位:以后元素是绝对于该元素的初始地位进行挪动

12、display:inline-block 怎么不显示间隙?

margin 设置负值

或者父级元素设置 font-size:0

13、垂直居中有哪些办法?

单行文本垂直居中能够把 hight 和 ilne-hight 设置雷同的高度值

块级元素能够应用子绝父相 + 指定高度解决,例如:

父元素设置 position:relative; 子元素设置 hight :10px;position:absolute;top:50%;margin-top:-5px;

或者应用子绝父相 +transform,不必指定高度也能够解决,例如:

父元素设置 position:relative; 子元素设置 position:absolute;top:50%;transform:translate (0 -50%);

14、程度居中有哪些办法?

行内元素能够设置父元素 text-align:center;

元素宽度固定时,也能够设置元素的左右 margin 值为 auto

子元素为相对定位时,能够设置父元素绝对定位,子元素设置 left:0;right:0;margin:auto;

15、content 属性有什么作用?能够怎么利用?

content 属性用在 before 和 after 伪类元素里,用来生成插入内容;常见的利用是作用在伪类元素里革除浮动

16、CSS 优先级怎么确定?

优先级关系:

!important> 内联款式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

存在多个优先级时,相加计算比拟;优先级雷同时,显示后写的款式;

退出移动版