前端面试题

1. link引入和script会堵塞页面吗
2. 原生获取DOM元素的方法
3. 图片懒加载
4. 怎么清除浮动
5. BFC

 

---

link引入css

llink标签引入的 CSS 被同时加载，不阻塞解析

script引入js文件

script元素会阻塞渲染(实际是上阻塞解析, 因此延迟了渲染). 于是我们把script元素放到了文档末尾. 

---

原生获取DOM元素的方法

1. document.querySelector() 选择一个
2. document.querySelectorAll() 选择一组
3. document.getElementById()
4. document.getElementsByName() 通过名字属性
5. document.getElementsByTagName() 通过标签名
6. document.getElementsByClassName（）通过类名
7. document.documentElement() 获取html标签方法
8. document.body() 获取body标签

---

图片懒加载

懒加载也叫按需加载或者延迟加载。

性能优化的一种方式。

实现原理

通过利用图片的src属性，将图片src属性设置为自定义属性data-src，这样图片就不知道去哪里找图片的路径地址。等图片将要加载的时候，把自定义属性data-src赋值给原本的src属性。

实现方式

1.JS原生实现---通过监听滚动事件

需要知道两个条件：

窗口显示区的高度 window.innerHeight

图片到视窗上边的距离getBoundingClientRect().top

 

当图片到视窗上边的距离>窗口显示区的高度，则图片就看不见，不需要加载；

当图片到视窗上边的距离<=窗口显示区的高度，则图片就能看到或者将要看到，需要加载。

 局限：滚动事件即使在图片出现以后，监听的滚动事件会一直被触发，比较耗费资源。

2.通过构造函数IntersectionObserver (交叉观察)

即目标元素与可视区域会产生交叉区域

const observer = new IntersectionObserver（callback）  //  new一个observer实例

（callback回调函数需要触发两次，看见目标元素触发一次，看不见了触发一次）

observer.observe(DOM节点)  //需要观察的DOM节点

observer.unobserve(DOM节点)  //不需要观察时，取消观察

 3.vue中通过lazyload:

step1 安装

$ npm I vue-lazyload --save

step2 入口文件引入

 step3 使用

在图片标签img后加v-lazy="img.src" 

---

怎么清除浮动

1.clear属性

在父元素的最后添加一个空元素，需要是块级元素，给这个空元素添加clear:both属性

 局限：会产生大量的空元素，比较浪费资源

2.BFC

给父元素添加overflow:hidden/ overflow:auto  属性

3.给父级添加after伪元素

 

---

BFC

Block Formatting Context 格式化上下文

就是符合一些特性的HTML标签。

含义

一个独立的渲染区域或者说是一个隔离的独立容器，容器里面的子元素不会影响到外界元素。

形成条件

1. position 绝对定位元素 absolute fixed

2. float 浮动元素 left right

3. overflow 除了visible以外的值，如hidden，auto,scroll

4. body根元素

5. display需要为下列值的任意一个：

flex, inline-block,  

table-cell

(css的table,用来创建表格和excel单元格)

 table-caption

(此元素会作为一个表格标题来显示，类似于 <caption>。)

 

BFC特性

1. 内部的盒子会在垂直方向上一个接一个放置
2. 垂直方向上的距离由margin决定
3. BFC的区域不会与float的元素区域重叠
4. 计算BFC的高度，浮动元素也参与计算
5. BFC是页面上的一个独立容器，容器里面的子元素不会影响到外界元素。

 

总结一下：

BFC是一个抽象概念，一个容器满足了上述的一些特性就成为了BFC。

 

---