2019前端开发面试题知识点(不断整理中)

最新推荐文章于 2022-01-27 11:02:55 发布

置顶

Elon丶

最新推荐文章于 2022-01-27 11:02:55 发布

阅读量933

点赞数 2

分类专栏：经验总结前端基础

本文链接：https://blog.csdn.net/daiwu4044/article/details/94357840

版权

前端知识梳理

HTML 部分

h5新增了那些内容?

新元素
- 画布canvas
- 音频audio、视频video
- 新增语义标签article nav footer section aside等
新属性
- placeholder
- autofocus
- form等
新事件
- 拖放事件
- 窗口改变的事件(onresize)
取消了一些元素(font，center等)
新增DOCTYPE声明
完全支持css3
本地存储

语义化标签

什么是语义化标签
- 根据内容结构，选择合适的标签，便于开发和阅读，同时有利于爬虫更好的解析
为什么用
1. 在没有css的情况下，页面也可以良好的展现页面的结构
2. 更好的用户体验。
3. 有利于SEO搜索引擎优化
4. 方便其他设备的使用（比如屏幕阅读器、盲人阅读器）
5. 便于开发维护
怎样用
1. 尽可能的使用无语义化的标签div和span
2. 在语义不明时，既可以使用div也可以使用p标签是，尽量使用p标签
3. 不要使用纯样式标签比如b font u等，改用css设置
4. 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

从前端的角度谈谈做好seo需要考虑什么

语义化标签
合理的添加 title 网页描述，关键词等
重要的html代码放在前面
少用iframe，搜索引擎不会抓取当中的内容
图片加上alt

文档类型

作用
- doctype声明位于文档的最前面，告知浏览器用的是哪种规范。如果不声明的话浏览器会进入quirks mode（混杂模式）

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie
- cookie是网站为了标识用户身份和存储在用户本地终端上的数据（一般经过加密处理）
- cookie数据始终在同源的http请求中携带，即会在浏览器和服务器之间相互传递
- 服务器可以主动添加cookie
sessionStorage和localStorage不会讲数据发送给服务器，仅仅保存在本地
存储大小
- cookie数据大小不超过4k
- sessionStorage和localStoreage可以达到5M或者更大(主要是各浏览器之间的区别)
存储时间
- localStorage是储存持久数据，浏览器关闭了不会丢失
- sessionStorage 浏览器关闭后自动删除
- cookie 设置过期时间之前一直有效，如果不设置则浏览器关闭自动删除
作用域不同
- sessionStorage相同的文档源的页面渲染在不同的标签中，数据是无法共享的。
- localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

canvas和svg的区别

SVG
- svg是一种使用XML描述2D图形的语言
- svg基于SML，意味着svg DOM中的每个元素都是可用的，所以可以为每个元素添加js事件。
- 在svg中，每个被绘制的图像均被视为对象，如果svg对象的属性发生变化，那么浏览器能够自动的重现图像
canvas
- 通过js来绘制2D图像
- canvas是逐像素进行渲染的
- 如果有地方发生改变那么整个图像都得重新绘制
区别
- canvas支持分辨率，svg不支持
- canvas不支持事件处理，svg支持
- canvas能够以.png 或者 .jpg格式保存文本
- svg渲染复杂度较高的程序会减慢渲染速（任何过度的使用dom的应该都不快）
- canvas适合图像密集型的游戏。
- canvas是基于位图的，svg是基于矢量图的。
- canvas绘制完成后不能使用脚本和css对其进行更改，而svg是文档对象模型的一部分，所以可以随时修改

src和href的区别

src是指向尾部资源的位置，用于替换当前元素，比如js脚本，图片等。
href指向网络资源所在的位置，用于应用建立连接确定之间的联系。

css部分

简述盒模型

盒模型由content padding border margin组成

两个标准：标准盒模型和IE盒模型

两种盒模型的区别
- 标准盒模型认为宽高只是内容的宽高
- IE盒模型认为宽高是内容+内边距+边框的总宽高。

如何设置这两种盒模型？

css3的属性box-sizing

//标准盒模型
box-sizing:content-box

//IE盒模型
box-sizing:border-box

边距重叠的解决方案(BFC)

BFC块级格式化上下文。它是一个独立的渲染区域，规定和内部如何布局，并且这个区域和外部毫不相干

BFC原理
1. 内部box会在垂直方向上一个接一个放
2. box垂直方向的距离由margin决定。属于同一个BFC的两个相邻的margin会重叠。
3. 每个元素margin box的左边，与包含border box左边相接触
4. BFC的区域不会与float box重叠
5. BFC就是页面上的一个独立的容器，容器里面的子元素不会影响到外面的元素，反之如此
6. 计算BFC高度是，浮动元素也参与计算。
怎么创建BFC？
1. float属性不为none时.
2. position为absolute或者fixed
3. display为inline-block table-cell，table-caption，flex，inine-flex
4. overflow不为visible
5. 根元素
应用场景
1. 自适应两栏布局
2. 清楚内部浮动
3. 防止垂直margin重叠

清除浮动方法

使用带有clear属性的元素

.news {
 background-color: gray;
 border: solid 1px black;
 }

.news img {
 float: left;
 }

.news p {
 float: right;
 }

.clear {
 clear: both;
 }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

优点：简单代码少，浏览器的兼容好。

缺点：需要添加无语义的html元素，代码不够优雅，不利于维护。

使用CSS的overflow属性

触发BFC清楚浮动

.news {
  background-color: gray;
  border: solid 1px black;
  overflow: hidden;
  *zoom: 1;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

使用CSS的:after伪元素

结合:after伪元素和IEhack，完美兼容各大主流浏览器.

.clearfix:after{
     
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }

.clearfix {
     
  /* 触发 hasLayout */ 
  zoom: 1; 
  }

css3选择器有哪些？

结构类型伪类选择器
- :first-child选择某个元素的第一个子元素；
- :last-child选择某个元素的最后一个子元素
- :nth-child()选择某个元素的一个或多个特定的子元素
- :nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算
- :nth-of-type()选择指定的元素
- :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
- :first-of-type选择一个上级元素下的第一个同类子元素；
- :last-of-type选择一个上级元素的最后一个同类子元素；
- :only-child选择的元素是它的父元素的唯一一个了元素；
- :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；:empty选择的元素里面没有任何内容。
否定选择器
- :not
伪元素选择器
- ::first-line：选中元素的第一行
- ::first-letter：选中元素的第一个字母
- ::before和::after这两个主要用来给元素的前面或后面插入内容，通常和"content"一起配合使用，经常用来清除浮动。

JavaScript部分

ES6新特性

支持类
字符串模板
展开运算符
结构赋值
函数类
1. 默认参数
2. 不定参数
3. 箭头参数
let和const关键字
generator
pormises
symbol
poxy

Null和Undefined区别？

null表示一个对象是“没有值”的值，也就是为空
undefined表示一个变量声明了但是没有初始化（赋值）
undefined不是一个有效的json值，而null是
undefined的typeof的值是undefined，null的typeof的值是object

apply和call的用法和区别

用法

 /*apply()方法*/
 function.apply(thisObj，[arg1，arg2，arg3])
 
 /*call()方法*/
 function.call(thisObj，agr1，arg2，arg3);

共同点
- 代替一个对象调用一个方法，将一个函数，将一个函数的上下文从初始的上下文改为指定的新对象
- 如果没有提供新的this对象，则将使用全局对象
不同点
- apply最多只能有两个参数–新的this对象和一个数组。
- call可以接受多个参数，第一个与apply一样接受新的this对象。后面这是一串参数列表。

什么是闭包，闭包有什么作用？

闭包是指有权访问另一个函数作用域变量的函数。
作用
1. 匿名自执行函数(function(){...})() 创建一个匿名函数并且立刻执行，由于外部无法引用到它的内部变量，因此在执行完毕后就可以立刻被释放，不会污染全局变量
2. 缓存可以保留函数内部的值
3. 实现函数的封装
4. 实现模板

js有哪些基本类型?

Undefined
Null
Boolean
NaN
String
Number

Object是复杂数据类型

基本类型和引用类型的区别?

存储
- 基本类型值是在内存中占有固定大小的空间，因此是保存在栈内存中的
- 引用类型的值是对象，保存在堆内存中。包含引用类型的变量实际上并不是保存对象本身，而是指向该对象的一个指针。
复制
- 从一个变量向另一个变量复制基本类型的值，会创建该值得一个副本
- 从一个变量向另一个变量复制引用类型的值，复制的其实仅仅是指针，所以这两个变量始终都指向同一个对象。
检查类型
- 确定一个值是哪种基本类型可以使用typeof操作符
- 确定一个引用类型可以使用instanceod操作符