2020前端知识点汇总(一)

1、JavaScript中 == 和 ===的区别

== 用于一般比较，==在比较的时候可以转换数据类型;
严格比较，只要类型不匹配就返回flase。

2、下面这段代码的运行结果是什么？

var a = 10;
a.pro = 10;
console.log(a.pro + a); // NaN

var s = 'hello';
s.pro = 'world';
console.log(s.pro + s); // undefinedhello

3、 em 和 rem 的区别

em:定义字体大小时以父级字体大小为准，定义长度单位时以当前字体的大小为基准，
rem:以根元素的字体大小为基准。

4、什么是盒模型？

盒模型（内容（content）,内边距（padding）,边框（border）,外边距（margin））

5、简述src和href的区别？

• src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
• src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
• href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，例如link和a标签等元素。

6、css定位方式有哪几种

• 默认static
• 相对定位relative
• 绝对定位absolute
• 固定定位fixed

7、什么是css Hack？

• 由于不同厂商的流览器或某阅读器的不同版本（如IE,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，招致在不同阅读器的环境中呈现出不分歧的页面展示效果。这时，我们为了取得统一的页面效果，就需求针对不同的阅读器或不同版本写特定的CSS款式。
• 我们把针对不同的阅读器/不同版本写相应的CSS code的过程，叫做CSS hack!

8、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？

• 行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
• 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
• 空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
• 区别：
  1）行内元素：不独占一行，不能设置宽高
  2）块级元素：独占一行，能设置宽高
  3）行内块元素：不独占一行，但可以设置宽高

9、Http和https的区别？

• https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
• http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
• http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
• http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

10、阐述一下CSS Sprites?

• CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

11、为什么要初始化CSS样式？

• 浏览器差异
  不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异
• 提高编码质量
  如果不初始化，整个页面做完会很糟糕，重复的css样式很多

12、iframe有那些优缺点？

• iframe的优点：
  1）iframe能够原封不动的把嵌入的网页展现出来。
  2）如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
  3）网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
  4）如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
• iframe的缺点：
  1）会产生很多页面，不容易管理。
  2）iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
  3）代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
  4）很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差。
  5）iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

13、Canvas和SVG有什么区别？

• svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布
• svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿

14、title和alt有什么区别？

• alt 用来给图片来提示的。
• Title用来给链接文字或普通文字提示的。

15、style标签写在body后与body前有什么区别？

• 写在body标签前利于浏览器逐步渲染：
  resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint
• 写在body标签后：
  1）由于浏览器以逐行方式对html文档进行解析；
  2）当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染；
  3）在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）；

16、margin和padding分别适合什么场景使用?

• margin:
  需要在border外侧添加空白时；
  空白处不需要背景（色）时；
  上下相连的两个盒子之间的空白，需要相互抵消时。

• padding：
  需要在border内测添加空白时；
  空白处需要背景（色）时；
  上下相连的两个盒子之间的空白，希望等于两者之和时。

17、data-属性的作用是什么

• data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过
  getAttribute方法获取。ppk提到过使用rel属性，lightbox库推广了rel属性，HTML5提供了data-做替代，这样可以更好
  地使用自定义的属性。
• 需要注意的是，data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。
• 并不是所有的浏览器都支持.dataset属性，测试的浏览器中只有Chrome和Opera支持。

18、简述http 1.1 与 http 1.0的区别？

• http 1.0 对于每个连接都得建立一次连接, 一次只能传送一个请求和响应, 请求就会关闭, http1.0没有Host字段
• 而http1.1 在同一个连接中可以传送多个请求和响应, 多个请求可以重叠和同时进行, http1.1必须有host字段
• http1.1中引入了ETag头, 它的值entity tag可以用来唯一的描述一个资源.
  请求消息中可以使用If-None-Match头域来匹配资源的entitytag是否有变化
• http1.1 新增了Cache-Control头域(消息请求和响应请求都可以使用), 它支持一个可扩展的指令子集
• http1.0中只定义了16个状态响应码, 对错误或警告的提示不够具体. http1.1引入了一个Warning头域,
  增加对错误或警告信息的描述. 且新增了24个状态响应码

19、CSS选择符有哪些？哪些属性可以继承，哪些不可以？

• id选择器（ # myid）
• 类选择器（.myclassname）
• 标签选择器（div, h1, p）
• 相邻选择器（h1 + p）
• 子选择器（ul > li）
• 后代选择器（li a）
• 通配符选择器（ * ）
• 属性选择器（a[rel = “external”]）
• 伪类选择器（a:hover, li:nth-child）

可继承的样式： font-size font-family color, UL LI DL DD DT
不可继承的样式：border padding margin width height

20、请列举几种隐藏元素的方法

• visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在
• opacity: 0; CSS3属性，设置0可以使一个元素完全透明
• position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外
• display: none; 元素会变得不可见，并且不会再占用文档的空间。
• transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留
• HTML5属性,效果和display:none;相同，但这个属性用于记录一个元素的状态
• height: 0; 将元素高度设为 0 ，并消除边框
• filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

21、CSS优化、提高性能的方法有哪些？

• 多个css合并，尽量减少HTTP请求
• 将css文件放在页面最上面
• 移除空的css规则
• 避免使用CSS表达式
• 选择器优化嵌套，尽量避免层级过深
• 充分利用css继承属性，减少代码量
• 抽象提取公共样式，减少代码量
• 属性值为0时，不加单位
• 属性值为小于1的小数时，省略小数点前面的0
• css雪碧图

22、display:inline-block 什么时候会显示间隙？

• 有空格时候会有间隙 解决：移除空格
• margin正值的时候 解决：margin使用负值
• 使用font-size时候 解决：font-size:0、letter-spacing、word-spacing

23、浏览器是怎样解析CSS选择器的?

• CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
• 而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render
• Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM
• Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

24、javascript的typeof返回哪些数据类型？

string,
boolean,
number,
undefined,
function,
object

25、例举3种强制类型转换和2种隐式类型转换?

• 强制（parseInt,parseFloat,number）
• 隐式（== ===）