宣传部网站建设方案,seo领导屋,中国企业网站模板,wordpress主题下载zip前端面试基础知识题
1.如何实现单行#xff0f;多行文本溢出的省略样式#xff1f;
在日常开发展示页面#xff0c;如果一段文本的数量过长#xff0c;受制于元素宽度的因素#xff0c;有可能不能完全显示#xff0c;为了提高用户的使用体验#xff0c;这个时候就需要…
前端面试基础知识题
1.如何实现单行多行文本溢出的省略样式
在日常开发展示页面如果一段文本的数量过长受制于元素宽度的因素有可能不能完全显示为了提高用户的使用体验这个时候就需要我们把溢出的文本显示成省略号。
对于文本的溢出我们可以分成两种形式
单行文本溢出 多行文本溢出
实现方式
单行文本溢出省略
理解也很简单即文本在一行内显示超出部分以省略号的形式展现
实现方式也很简单涉及的css属性有
text-overflow规定当文本溢出时显示省略符号来代表被修剪的文本 white-space设置文字在一行显示不能换行 overflow文字长度超出限定宽度则隐藏超出的内容
overflow设为hidden普通情况用在块级元素的外层隐藏内部溢出元素或者配合下面两个属性实现文本溢出省略 white-space:nowrap作用是设置文本不换行是overflow:hidden和text-overflowellipsis生效的基础 text-overflow属性值有如下
clip当对象内文本溢出部分裁切掉 ellipsis当对象内文本溢出时显示省略标记…
text-overflow只有在设置了overflow:hidden和white-space:nowrap才能够生效的
多行文本溢出省略
多行文本溢出的时候我们可以分为两种情况
基于高度截断 基于行数截断
基于高度截断
伪元素 定位 核心的css代码结构如下
position: relative为伪元素绝对定位 overflow: hidden文本溢出限定的宽度就隐藏内容 position: absolute给省略号绝对定位 line-height: 20px结合元素高度,高度固定的情况下,设定行高, 控制显示行数 height: 40px设定当前元素高度 ::after {} 设置省略号样式
代码如下所示
style.demo {position: relative;line-height: 20px;height: 40px;overflow: hidden;}.demo::after {content: ...;position: absolute;bottom: 0;right: 0;padding: 0 20px 0 10px;}
/stylebodydiv classdemo这是一段很长的文本/div
/body实现原理很好理解就是通过伪元素绝对定位到行尾并遮住文字再通过 overflow: hidden 隐藏多余文字 这种实现具有以下优点
兼容性好对各大主流浏览器有好的支持 响应式截断根据不同宽度做出调整
一般文本存在英文的时候可以设置word-break: break-all使一个单词能够在换行时进行拆分
基于行数截断
纯css实现也非常简单核心的css代码如下
-webkit-line-clamp: 2用来限制在一个块元素显示的文本的行数为了实现该效果它需要组合其他的WebKit属性 display: -webkit-box和1结合使用将对象作为弹性伸缩盒子模型显示 -webkit-box-orient: vertical和1结合使用 设置或检索伸缩盒对象的子元素的排列方式 overflow: hidden文本溢出限定的宽度就隐藏内容 text-overflow: ellipsis多行文本的情况下用省略号“…”隐藏溢出范围的文本
stylep {width: 400px;border-radius: 1px solid red;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
/style
p这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
/p 可以看到上述使用了webkit的CSS属性扩展所以兼容浏览器范围是PC端的webkit内核的浏览器由于移动端大多数是使用webkit所以移动端常用该形式。 需要注意的是如果文本为一段很长的英文或者数字则需要添加word-wrap: break-word属性。
2.flexbox弹性盒布局模型是什么适用什么场景
Flexible Box 简称 flex意为”弹性布局”可以简便、完整、响应式地实现各种页面布局。
采用Flex布局的元素称为flex容器container。
它的所有子元素自动成为容器成员称为flex项目item。 容器中默认存在两条轴主轴和交叉轴呈90度关系。项目默认沿主轴排列通过flex-direction来决定主轴的方向。
每根轴都有起点和终点这对于元素的对齐非常重要。
属性
关于flex常用的属性我们可以划分为容器属性和容器成员属性。 容器属性有
flex-direction flex-wrap flex-flow justify-content align-items align-content 关于flex可以看我的csdn的flex弹性盒子教程里面更详细。 地址https://blog.csdn.net/weixin_45822171/article/details/114289990 应用场景
实现元素水平垂直方向的居中以及在两栏三栏自适应布局中包括现在在移动端、小程序这边的开发都建议使用flex进行布局。
3.em/px/rem/vh/vw 这些单位有什么区别
px绝对单位页面按精确像素展示 em相对单位基准点为父节点字体的大小如果自身定义了font-size按自身来计算整个页面内1em不是一个固定的值 rem相对单位可理解为root em, 相对根节点html的字体大小来计算 vh、vw主要用于页面视口大小布局在页面布局上更加方便简单
4.CSS 垂直居中有哪些实现方式 可以看我的csdn博客https://blog.csdn.net/weixin_45822171/article/details/118392923 5.css加载会造成阻塞吗
先说下结论
css加载不会阻塞DOM树的解析css加载会阻塞DOM树的渲染css加载会阻塞后面js语句的执行
为了避免让用户看到长时间的白屏时间我们应该尽可能的提高css加载速度比如可以使用以下几种方法:
使用CDN(因为CDN会根据你的网络状况替你挑选最近的一个具有缓存内容的节点为你提供资源因此可以减少加载时间)对css进行压缩(可以用很多打包工具比如webpack,gulp等也可以通过开启gzip压缩)合理的使用缓存(设置cache-control,expires,以及E-tag都是不错的不过要注意一个问题就是文件更新后你要避免缓存而带来的影响。其中一个解决防范是在文件名字后面加一个版本号)减少http请求数将多个css文件合并或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)
原理解析
浏览器渲染的流程如下
HTML解析文件生成DOM Tree解析CSS文件生成CSSOM Tree将Dom Tree和CSSOM Tree结合生成Render Tree(渲染树)根据Render Tree渲染绘制将像素渲染到屏幕上。
从流程我们可以看出来:
DOM解析和CSS解析是两个并行的进程所以这也解释了为什么CSS加载不会阻塞DOM的解析。然而由于Render Tree是依赖于DOM Tree和CSSOM Tree的所以他必须等待到CSSOM Tree构建完成也就是CSS资源加载完成(或者CSS资源加载失败)后才能开始渲染。因此CSS加载是会阻塞Dom的渲染的。由于js可能会操作之前的Dom节点和css样式因此浏览器会维持html中css和js的顺序。因此样式表会在后面的js执行前先加载执行完毕。所以css会阻塞后面js的执行。
6.怎么触发BFCBFC有什么应用场景
文档流
在介绍BFC之前需要先给大家介绍一下文档流。
我们常说的文档流其实分为定位流、浮动流、普通流三种。
绝对定位(Absolute positioning)
如果元素的属性 position 为 absolute 或 fixed它就是一个绝对定位元素。
在绝对定位布局中元素会整体脱离普通流因此绝对定位元素不会对其兄弟元素造成影响而元素具体的位置由绝对定位的坐标决定。
它的定位相对于它的包含块相关CSS属性top、bottom、left、right
对于 position: absolute元素定位将相对于上级元素中最近的一个relative、fixed、absolute如果没有则相对于body
对于 position:fixed正常来说是相对于浏览器窗口定位的但是当元素祖先的 transform 属性非 none 时会相对于该祖先进行定位。
浮动 (float)
在浮动布局中元素首先按照普通流的位置出现然后根据浮动的方向尽可能的向左边或右边偏移其效果与印刷排版中的文本环绕相似。
普通流 (normal flow)
普通流其实就是指BFC中的FC。FC(Formatting Context)直译过来是格式化上下文它是页面中的一块渲染区域有一套渲染规则决定了其子元素如何布局以及和其他元素之间的关系和作用。
在普通流中元素按照其在 HTML 中的先后位置至上而下布局在这个过程中行内元素水平排列直到当行被占满然后换行。块级元素则会被渲染为完整的一个新行。
除非另外指定否则所有元素默认都是普通流定位也可以说普通流中元素的位置由该元素在 HTML 文档中的位置决定。
BFC 概念
先看下MDN上关于BFC的定义 块格式化上下文Block Formatting ContextBFC 是Web页面的可视CSS渲染的一部分是块盒子的布局过程发生的区域也是浮动元素与其他元素交互的区域。 具有 BFC 特性的元素可以看作是隔离了的独立容器容器里面的元素不会在布局上影响到外面的元素并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲可以把 BFC 理解为一个封闭的大箱子箱子内部的元素无论如何翻江倒海都不会影响到外部。 除了 BFC还有
IFC行级格式化上下文- inline 内联GFC网格布局格式化上下文- display: gridFFC自适应格式化上下文- display: flex或display: inline-flex
注意同一个元素不能同时存在于两个 BFC 中。
BFC的触发方式
MDN上对于BFC的触发条件写的很多总结一下常见的触发方式有只需要满足一个条件即可触发 BFC 的特性
根元素即 浮动元素float 值为 left 、rightoverflow 值不为 visible即为 auto、scroll、hiddendisplay 值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、 - inline-grid绝对定位元素position 值为 absolute、fixed
BFC的特性
BFC 是页面上的一个独立容器容器里面的子元素不会影响外面的元素。BFC 内部的块级盒会在垂直方向上一个接一个排列同一 BFC 下的相邻块级元素可能发生外边距折叠创建新的 BFC 可以避免外边距折叠每个元素的外边距盒margin box的左边与包含块边框盒border box的左边相接触从右向左的格式的话则相反即使存在浮动浮动盒的区域不会和 BFC 重叠计算 BFC 的高度时浮动元素也会参与计算
应用
自适应两列布局防止外边距margin重叠父子元素的外边距重叠清除浮动解决令父元素高度坍塌的问题
7.为何CSS不支持父选择器
这个问题的答案和“为何CSS相邻兄弟选择器只支持后面的元素而不支持前面的兄弟元素”是一样的。
浏览器解析HTML文档是从前往后由外及里的。所以我们时常会看到页面先出现头部然后主体内容再出现的加载情况。
但是如果CSS支持了父选择器那就必须要页面所有子元素加载完毕才能渲染HTML文档因为所谓“父选择器”就是后代元素影响祖先元素如果后代元素还没加载处理如何影响祖先元素的样式于是网页渲染呈现速度就会大大减慢浏览器会出现长时间的白板。加载多少HTML就可以渲染多少HTML在网速不是很快的时候就显得尤为的必要。比方说你现在看的这篇文章只要文章内容加载出来就可以了就算后面的广告脚本阻塞了后续HTML文档的加载我们也是可以阅读和体验。但是如果支持父选择器则整个文档不能有阻塞页面的可访问性则要大大降低。
有人可能会说要不采取加载到哪里就渲染到哪里的策略这样子问题更大因为会出现加载到子元素的时候父元素本来渲染的样式突然变成了另外一个样式的情况体验非常不好。 “相邻选择器只能选择后面的元素”也是一样的道理不可能说后面的HTML加载好了还会影响前面HTML的样式。
所以从这一点来讲CSS支持“父选择器”或者“前兄弟选择器”的可能性要比其他炫酷的CSS特性要低倒不是技术层面而是CSS和HTML本身的渲染机制决定的。当然以后的事情谁都说不准说不定以后网速都是每秒几个G的网页加载速度完全就忽略不计说不定就会支持了。
8.js和css是如何影响DOM树构建的
先做个总结然后再进行具体的分析 CSS不会阻塞DOM的解析但是会影响JAVAScript的运行javaSscript会阻止DOM树的解析最终cssCSSOM会影响DOM树的渲染也可以说最终会影响渲染树的生成。 接下来我们先看javascript对DOM树构建和渲染是如何造成影响的分成三种类型来讲解 JavaScript脚本在html页面中
htmlbodydiv1/divscriptlet div1 document.getElementsByTagName(div)[0]div1.innerText time.geekbang/scriptdivtest/div/body
/html两段div中间插入一段JavaScript脚本这段脚本的解析过程就有点不一样了。 当解析到script脚本标签时HTML解析器暂停工作javascript引擎介入并执行script标签中的这段脚本。 因为这段javascript脚本修改了DOM中第一个div中的内容所以执行这段脚本之后div节点内容已经修改为time.geekbang了。脚本执行完成之后HTML解析器回复解析过程继续解析后续的内容直至生成最终的DOM。
html页面中引入javaScript文件
//foo.js
let div1 document.getElementsByTagName(div)[0]
div1.innerText time.geekbanghtmlbodydiv1/divscript typetext/javascript srcfoo.js/scriptdivtest/div/body
/html这段代码的功能还是和前面那段代码是一样的只是把内嵌JavaScript脚本修改成了通过javaScript文件加载。 其整个执行流程还是一样的执行到JAVAScript标签时暂停整个DOM的解析执行javascript代码不过这里执行javascript时需要现在在这段代码。这里需要重点关注下载环境因为javascript文件的下载过程会阻塞DOM解析而通常下载又是非常耗时的会受到网络环境、javascript文件大小等因素的影响。
优化机制
谷歌浏览器做了很多优化其中一个主要的优化就是预解析操作。当渲染引擎收到字节流之后会开启一个预解析线程用来分析HTML文件中包含的JavaScript、CSS等相关文件解析到相关文件之后会开启一个预解析线程用来分析HTML文件中包含的javascprit、css等相关文件、解析到相关文件之后预解析线程会提前下载这些文件。 再回到 DOM 解析上我们知道引入 JavaScript 线程会阻塞 DOM不过也有一些相关的策略来规避比如使用 CDN 来加速 JavaScript 文件的加载压缩 JavaScript 文件的体积。 另外如果 JavaScript 文件中没有操作 DOM 相关代码就可以将该 JavaScript 脚本设置为异步加载通过 async 或 defer 来标记代码使用方式如下所示
script async typetext/javascript srcfoo.js/script
script defer typetext/javascript srcfoo.js/scriptasync和defer区别
async脚本并行加载加载完成之后立即执行执行时机不确定仍有可能阻塞HTML解析执行时机在load事件派发之前。
defer脚本并行加载等待HTML解析完成之后按照加载顺序执行脚本执行时机DOMContentLoaded事件派发之前。
html页面中有css样式
//theme.css
div {color:blue}html
headstyle srctheme.css/style
/head
bodydiv1/divscriptlet div1 document.getElementsByTagName(div)[0]div1.innerText time.geekbang // 需要 DOMdiv1.style.color red // 需要 CSSOM/scriptdivtest/div
/body
/html该示例中JavaScript 代码出现了 div1.style.color ‘red’ 的语句它是用来操纵 CSSOM 的所以在执行 JavaScript 之前需要先解析 JavaScript 语句之上所有的CSS 样式。所以如果代码里引用了外部的 CSS 文件那么在执行 JavaScript 之前还需要等待外部的 CSS 文件下载完成并解析生成 CSSOM 对象之后才能执行 JavaScript 脚本。
而 JavaScript 引擎在解析 JavaScript 之前是不知道 JavaScript 是否操纵了 CSSOM的所以渲染引擎在遇到 JavaScript 脚本时不管该脚本是否操纵了 CSSOM都会执行CSS 文件下载解析操作再执行 JavaScript 脚本。所以说 JavaScript 脚本是依赖样式表的这又多了一个阻塞过程。
总结通过上面三点的分析我们知道了 JavaScript 会阻塞 DOM 生成而样式文件又会阻塞js的执行。
9.Js 动画与 CSS 动画区别及相应实现
CSS3 的动画的优点
在性能上会稍微好一些浏览器会对 CSS3 的动画做一些优化 代码相对简单
缺点
在动画控制上不够灵活 兼容性不好
JavaScript 的动画正好弥补了这两个缺点控制能力很强可以单帧的控制、变换同时写得好完全可以兼容 IE6并且功能强大。对于一些复杂控制的动画使用 javascript 会比较靠谱。而在实现一些小的交互动效的时候就多考虑考虑 CSS 吧。
10.html和css中的图片加载与渲染规则是什么样的
Web浏览器先会把获取到的HTML代码解析成一个DOM树HTML中的每个标签都是DOM树中的一个节点包括display: none隐藏的标签还有JavaScript动态添加的元素等。浏览器会获取到所有样式并会把所有样式解析成样式规则在解析的过程中会去掉浏览器不能识别的样式。
浏览器将会把DOM树和样式规则组合在一起DOM元素和样式规则匹配后将会合建一个渲染树Render Tree渲染树类似于DOM树但两者别还是很大的渲染树能识别样式渲染树中每个节点NODE都有自己的样式而且渲染树不包含隐藏的节点比如display:none的节点还有内的一些节点因为这些节点不会用于渲染也不会影响节点的渲染因此不会包含到渲染树中。一旦渲染树构建完毕后浏览器就可以根据渲染树来绘制页面了。
简单的归纳就是浏览器渲染Web页面大约会经过六个过程
解析HTML构成DOM树解析加载的样式构建样式规则树加载JavaScript执行JavaScript代码DOM树和样式规则树进行匹配构成渲染树计算元素位置进行页面布局绘制页面最终在浏览器中呈现
是不是会感觉这个和我们图像加载渲染没啥关系一样事实并非如此因为img、picture或者background-image都是DOM树或样式规则中的一部分那么咱们套用进来图片加载和渲染的时机有可能是下面这样
解析HTML时如果遇到img或picture标签将会加载图片解析加载的样式遇到background-image时并不会加载图片而会构建样式规则树加载JavaScript执行JavaScript代码如果代码中有创建img元素之类会添加到DOM树中如查有 - 添加background-image规则将会添加到样式规则树中DOM树和样式规则匹配时构建渲染树如果DOM树节点匹配到样式规则中的backgorund-image则会加载背景图片计算元素图片位置进行布局开始渲染图片浏览器将呈现渲染出来的图片
上面套用浏览器渲染页面的机制但图片加载与渲染还是有一定的规则。因为页面中不是所有的或picture元素引入的图片和background-image引入的背景图片都会加载的。那么就引发出新问题了什么时候会真正的加载加载规则又是什么 先概括一点
Web页面中不是所有的图片都会加载和渲染
根据前面介绍的浏览器加载和渲染机制我们可以归纳为
、和设置background-image的元素遇到display:none时图片会加载但不会渲染、和设置background-image的元素祖先元素设置display:none时background-image不会渲染也不会加载而img和picture引入的图片不会渲染但会加载、和background-image引入相同路径相同图片文件名时图片只会加载一次样式文件中background-image引入的图片如果匹配不到DOM元素图片不会加载伪类引入的background-image比如:hover只有当伪类被触发时图片才会加载
