韶关网站建设公司,网页制作第3版素材,企业年报申报入口官网,网站微信建设运维经验分享图#x1f469; 个人主页#xff1a;不爱吃糖的程序媛 #x1f64b;♂️ 作者简介#xff1a;前端领域新星创作者、CSDN内容合伙人#xff0c;专注于前端各领域技术#xff0c;成长的路上共同学习共同进步#xff0c;一起加油呀#xff01; ✨系列专栏#xff1a;前端… 个人主页不爱吃糖的程序媛 ♂️ 作者简介前端领域新星创作者、CSDN内容合伙人专注于前端各领域技术成长的路上共同学习共同进步一起加油呀 ✨系列专栏前端面试宝典、JavaScript进阶、vue实战 资料领取前端进阶资料以及文中源码可以在公众号“不爱吃糖的程序媛”领取 前端面试基础知识题
1.为什么有时候⽤translate来改变位置⽽不是使用position进行定位
translate 是 transform 属性的⼀个值。
改变transform或opacity不会触发浏览器重新布局reflow或重绘repaint只会触发复合compositions。
⽽改变绝对定位会触发重新布局进⽽触发重绘和复合。
transform使浏览器为元素创建⼀个 GPU 图层但改变绝对定位会使⽤到 CPU。
因此translate()更⾼效可以缩短平滑动画的绘制时间。
⽽translate改变位置时元素依然会占据其原始空间绝对定位就不会发⽣这种情况。
2.什么是硬件加速
硬件加速就是将浏览器的渲染过程交给GPU处理而不是使用自带的比较慢的渲染器。这样就可以使得 animation 与 transition 更加顺畅。
我们可以在浏览器中用css开启硬件加速使GPU (Graphics Processing Unit) 发挥功能从而提升性能。
现在大多数电脑的显卡都支持硬件加速。鉴于此我们可以发挥GPU的力量从而使我们的网站或应用表现的更为流畅。
3.怎么使用 CSS3 实现动画
CSS动画CSS Animations是为层叠样式表建议的允许可扩展标记语言XML元素使用CSS的动画的模块即指元素从一种样式逐渐过渡为另一种样式的过程。
常见的动画效果有很多如平移、旋转、缩放等等复杂动画则是多个简单动画的组合。
css实现动画的方式有如下几种
transition 实现渐变动画transform 转变动画animation 实现自定义动画
实现方式
transition 实现渐变动画
transition的属性如下
property:填写需要变化的css属性duration:完成过渡效果需要的时间单位(s或者ms)timing-function:完成效果的速度曲线delay: 动画效果的延迟触发时间
其中timing-function的值有如下 注意并不是所有的属性都能使用过渡的如display:none-display:block 举个例子实现鼠标移动上去发生变化动画效果
style.base {width: 100px;height: 100px;display: inline-block;background-color: #0EA9FF;border-width: 5px;border-style: solid;border-color: #5daf34;transition-property: width, height, background-color, border-width;transition-duration: 2s;transition-timing-function: ease-in;transition-delay: 500ms;}/*简写*//*transition: all 2s ease-in 500ms;*/.base:hover {width: 200px;height: 200px;background-color: #5daf34;border-width: 10px;border-color: #3a8ee6;}
/style
div classbase/divtransform 转变动画
包含四个常用的功能
translate位移scale缩放rotate旋转skew倾斜
一般配合transition过度使用。
注意的是transform不支持inline元素使用前把它变成block。
举个例子
style.base {width: 100px;height: 100px;display: inline-block;background-color: #0EA9FF;border-width: 5px;border-style: solid;border-color: #5daf34;transition-property: width, height, background-color, border-width;transition-duration: 2s;transition-timing-function: ease-in;transition-delay: 500ms;}.base2 {transform: none;transition-property: transform;transition-delay: 5ms;}.base2:hover {transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);}
/stylediv classbase base2/div可以看到盒子发生了旋转倾斜平移放大。
animation 实现自定义动画
animation是由 8 个属性的简写分别如下 CSS 动画只需要定义一些关键的帧而其余的帧浏览器会根据计时函数插值计算出来
通过 keyframes 来定义关键帧
因此如果我们想要让元素旋转一圈只需要定义开始和结束两帧即可
keyframes rotate{from{transform: rotate(0deg);}to{transform: rotate(360deg);}
}from 表示最开始的那一帧to 表示结束时的那一帧。
也可以使用百分比刻画生命周期
keyframes rotate{0%{transform: rotate(0deg);}50%{transform: rotate(180deg);}100%{transform: rotate(360deg);}
}定义好了关键帧后下来就可以直接用它了
animation: rotate 2s;总结 4.怎么让Chrome支持小于12px 的文字
背景 Chrome 中文版浏览器会默认设定页面的最小字号是12px英文版没有限制原由 Chrome 团队认为汉字小于12px就会增加识别难度。
中文版浏览器
与网页语言无关取决于用户在Chrome的设置里chrome://settings/languages把哪种语言设置为默认显示语言。
系统级最小字号
浏览器默认设定页面的最小字号用户可以前往 chrome://settings/fonts 根据需求更改。
而我们在实际项目中不能奢求用户更改浏览器设置。
对于文本需要以更小的字号来显示就需要用到一些小技巧。
解决方案
常见的解决方案有
zoom-webkit-transform:scale()-webkit-text-size-adjust:none
Zoom
zoom 的字面意思是“变焦”可以改变页面上元素的尺寸属于真实尺寸。
其支持的值类型有
zoom:50%表示缩小到原来的一半zoom:0.5表示缩小到原来的一半
使用 zoom 来”支持“ 12px 以下的字体 代码如下
style typetext/css.span1{font-size: 12px;display: inline-block;zoom: 0.8;}.span2{display: inline-block;font-size: 12px;}
/style
bodyspan classspan1测试10px/spanspan classspan2测试12px/span
/body效果如下
需要注意的是Zoom 并不是标准属性需要考虑其兼容性。
-webkit-transform:scale()
针对chrome浏览器,加webkit前缀用transform:scale()这个属性进行放缩。
注意的是使用scale属性只对可以定义宽高的元素生效所以下面代码中将span元素转为行内块元素 实现代码如下
style typetext/css.span1{font-size: 12px;display: inline-block;-webkit-transform:scale(0.8);}.span2{display: inline-block;font-size: 12px;}
/style
bodyspan classspan1测试10px/spanspan classspan2测试12px/span
/body效果如下
-webkit-text-size-adjust:none
该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小。
属性值
percentage字体显示的大小 auto默认字体大小会根据设备/浏览器来自动调整 none:字体大小不会自动调整
html { -webkit-text-size-adjust: none; }这样设置之后会有一个问题就是当你放大网页时一般情况下字体也会随着变大而设置了以上代码后字体只会显示你当前设置的字体大小不会随着网页放大而变大了。
所以我们不建议全局应用该属性而是单独对某一属性使用。
需要注意的是自从chrome 27之后就取消了对这个属性的支持。同时该属性只对英文、数字生效对中文不生效。
总结
Zoom 非标属性有兼容问题缩放会改变了元素占据的空间大小触发重排。-webkit-transform:scale() 大部分现代浏览器支持并且对英文、数字、中文也能够生效缩放不会改变了元素占据的空间大小页面布局不会发生变化。-webkit-text-size-adjust对谷歌浏览器有版本要求在27之后就取消了该属性的支持并且只对英文、数字生效。
5.css选择器有哪些优先级分别是什么哪些属性可以继承
关于css属性选择器常用的有
id选择器#box选择id为box的元素类选择器.one选择类名为one的所有元素标签选择器div选择标签为div的所有元素后代选择器#box div选择id为box元素内部所有的div元素子选择器.oneone_1选择父元素为.one的所有.one_1的元素相邻同胞选择器.one.two选择紧接在.one之后的所有.two元素群组选择器div,p选择div、p的所有元素
还有一些使用频率相对没那么多的选择器
伪类选择器
:link 选择未被访问的链接
:visited选取已被访问的链接
:active选择活动链接
:hover 鼠标指针浮动在上面的元素
:focus 选择具有焦点的
:first-child父元素的首个子元素伪元素选择器
:first-letter 用于选取指定选择器的首字母
:first-line 选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容属性选择器
[attribute] 选择带有attribute属性的元素
[attributevalue] 选择所有使用attributevalue的元素
[attribute~value] 选择attribute属性包含value的元素
[attribute|value]选择attribute属性以value开头的元素在CSS3中新增的选择器有如下
层次选择器p~ul选择前面有p元素的每个ul元素伪类选择器
:first-of-type 父元素的首个元素
:last-of-type 父元素的最后一个元素
:only-of-type 父元素的特定类型的唯一子元素
:only-child 父元素中唯一子元素
:nth-child(n) 选择父元素中第N个子元素
:nth-last-of-type(n) 选择父元素中第N个子元素从后往前
:last-child 父元素的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择被禁用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择非 selector 元素的所有元素属性选择器
[attribute*value]选择attribute属性值包含value的所有元素
[attribute^value]选择attribute属性开头为value的所有元素
[attribute$value]选择attribute属性结尾为value的所有元素优先级
内联 ID选择器 类选择器 标签选择器
内联样式的优先级最高如果外部样式需要覆盖内联样式就需要使用!important。
继承属性
在css中继承是指的是给父元素设置一些属性后代元素会自动拥有这些属性 关于继承属性可以分成
字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体文本系列属性
text-indent文本缩进
text-align文本水平对齐
line-height行高
word-spacing增加或减少单词间的空白
letter-spacing增加或减少字符间的空白
text-transform控制文本大小写
direction规定文本的书写方向
color文本颜色元素可见性
visibility表格布局属性
caption-side定位表格标题位置
border-collapse合并表格边框
border-spacing设置相邻单元格的边框间的距离
empty-cells单元格的边框的出现与消失
table-layout表格的宽度由什么决定列表属性
list-style-type文字前面的小点点样式
list-style-position小点点位置
list-style以上的属性可通过这属性集合引用
quotes设置嵌套引用的引号类型光标属性
cursor箭头可以变成需要的形状继承中比较特殊的几点
a 标签的字体颜色不能被继承 h1-h6标签字体的大下也是不能被继承的
无继承的属性
display文本属性vertical-align、text-decoration盒子模型的属性宽度、高度、内外边距、边框等背景属性背景图片、颜色、位置等定位属性浮动、清除浮动、定位position等生成内容属性content、counter-reset、counter-increment轮廓样式属性outline-style、outline-width、outline-color、outline页面样式属性size、page-break-before、page-break-after
6.怎么实现一个宽高自适应的正方形
利用vw来实现
.square {width: 10%;height: 10vw;background: tomato;
}利用元素的margin/padding百分比是相对父元素width的性质来实现
.square {width: 20%;height: 0;padding-top: 20%;background: orange;
}利用子元素的margin-top的值来实现
.square {width: 30%;overflow: hidden;background: yellow;
}
.square::after {content: ;display: block;margin-top: 100%;
}7.CSS预处理器/后处理器是什么为什么要使用它们
预处理器 如lesssassstylus用来预编译sass或者less增加了css代码的复用性。层级mixin 变量循环 函数等对编写以及开发UI组件都极为方便。
后处理器 如 postCss通常是在完成的样式表中根据css规范处理css让其更加有效。目前最常做的是给css属性添加浏览器私有前缀实现跨浏览器兼容性的问题。
css预处理器为css增加一些编程特性无需考虑浏览器的兼容问题可以在CSS中使用变量简单的逻辑程序函数等在编程语言中的一些基本的性能可以让css更加的简洁增加适应性以及可读性可维护性等。 其它css预处理器语言SassScss, Less, Stylus, Turbine, Swithch css, CSS Cacheer, DT Css。
使用原因
结构清晰 便于扩展可以很方便的屏蔽浏览器私有语法的差异可以轻松实现多重继承完美的兼容了CSS代码可以应用到老项目中
8.硬件加速的原理是什么
面试中可能会经常会碰到怎么解决动画卡顿的问题然后会引导到硬件加速。那么究竟什么是硬件加速为什么它可以提高咱们的动画效率我们今天就来一探究竟。 首先我们先从 CPU 和 GPU 开始了解。
CPU 和 GPU 的区别
CPU 即中央处理器GPU 即图形处理器。 CPU是计算机的大脑它提供了一套指令集我们写的程序最终会通过 CPU 指令来控制的计算机的运行。它会对指令进行译码然后通过逻辑电路执行该指令。整个执行的流程分为了多个阶段叫做流水线。指令流水线包括取指令、译码、执行、取数、写回五步这是一个指令周期。CPU会不断的执行指令周期来完成各种任务。
GPU是Graphics ProcessingUnit的简写是现代显卡中非常重要的一个部分其地位与CPU在主板上的地位一致主要负责的任务是加速图形处理速度。GPU是显卡的“大脑”它决定了该显卡的档次和大部分性能同时也是2D显示卡和3D显示卡的区别依据。2D显示芯片在处理3D图像和特效时主要依赖CPU的处理能力称为“软加速”。3D显示芯片是将三维图像和特效处理功能集中在显示芯片内也即所谓的“硬件加速”功能。
要解释两者的区别要先明白两者的相同之处两者都有总线和外界联系有自己的缓存体系以及数字和逻辑运算单元。 一句话两者都为了完成计算任务而设计。
两者的区别在于存在于片内的缓存体系和数字逻辑运算单元的结构差异 CPU虽然有多核但总数没有超过两位数每个核都有足够大的缓存和足够多的数字和逻辑运算单元并辅助有很多加速分支判断甚至更复杂的逻辑判断的硬件 GPU 的核数远超CPU被称为众核NVIDIA Fermi有512个核。每个核拥有的缓存大小相对小数字逻辑运算单元也少而简单GPU初始时在浮点计算上一直弱于CPU。
从结果上导致CPU擅长处理具有复杂计算步骤和复杂数据依赖的计算任务如分布式计算数据压缩人工智能物理模拟以及其他很多很多计算任务等。
GPU由于历史原因是为了视频游戏而产生的至今其主要驱动力还是不断增长的视频游戏市场在三维游戏中常常出现的一类操作是对海量数据进行相同的操作如对每一个顶点进行同样的坐标变换对每一个顶点按照同样的光照模型计算颜色值。
GPU的众核架构非常适合把同样的指令流并行发送到众核上采用不同的输入数据执行。在通用计算领域有广泛应用包括数值分析海量数据处理排序Map-Reduce等金融分析等等。 简而言之当程序员为CPU编写程序时他们倾向于利用复杂的逻辑结构优化算法从而减少计算任务的运行时间即 Latency。当程序员为GPU编写程序时则利用其处理海量数据的优势通过提高总的数据吞吐量Throughput来掩盖 Lantency。
目前CPU 和 GPU 的区别正在逐渐缩小因为GPU也在处理不规则任务和线程间通信方面有了长足的进步。
每一帧的执行步骤
一般浏览器的刷新率为60HZ即1秒钟刷新60次。 1000ms / 60hz 16.6 也就是大概每过 16.6ms 浏览器就会渲染一帧画面。 浏览器对每一帧画面的渲染工作都要在 16ms 内完成超出这个时间页面的渲染就会出现卡顿现象影响用户体验。 简单概括下浏览器在每一帧里会依次执行以下这些动作
JavaScriptJavaScript 实现动画效果DOM 元素操作等。Style计算样式确定每个 DOM 元素应该应用什么 CSS 规则。Layout布局计算每个 DOM 元素在最终屏幕上显示的大小和位置。由于 web 页面的元素布局是相对的所以其中任意一个元素的位置发生变化都会联动的引起其他元素发生变化这个过程叫 reflow。Paint绘制在多个层上绘制 DOM 元素的的文字、颜色、图像、边框和阴影等。 VComposite渲染层合并按照合理的顺序合并图层然后显示到屏幕上。
减少或者避免 layoutpaint 可以让页面减少卡顿动画效果更加流畅。
完整的渲染流程
更具体一些一个完整的渲染步骤大致可总结为如下
渲染进程将HTML内容转换为能够读懂的DOM树结构。渲染引擎将CSS样式表转化为浏览器可以理解的 styleSheets 计算出DOM节点的样式。创建布局树并计算元素的布局信息。对布局树进行分层并生成分层树。为每个图层生成绘制列表并将其提交到合成线程。合成线程将图层分成图块并在光栅化线程池中将图块转换成位图。合成线程发送绘制图块命令DrawQuad给浏览器进程。浏览器进程根据DrawQuad消息生成页面并显示到显示器上
普通图层和复合图层
上面的介绍中提到了 composite 概念。 可以简单的这样理解浏览器渲染的图层一般包含两大类渲染图层普通图层以及复合图层
渲染图层又称默认复合层是页面普通的文档流。我们虽然可以通过绝对定位相对定位浮动定位脱离文档流但它仍然属于默认复合层共用同一个绘图上下文对象GraphicsContext。复合图层它会单独分配资源当然也会脱离普通文档流这样一来不管这个复合图层中怎么变化也不会影响默认复合层里的回流重绘
某些特殊的渲染层会被提升为复合成层Compositing Layers复合图层拥有单独的 GraphicsLayer而其他不是复合图层的渲染层则和其第一个拥有 GraphicsLayer 父层共用一个。
每个 GraphicsLayer 都有一个 GraphicsContextGraphicsContext 会负责输出该层的位图位图是存储在共享内存中作为纹理上传到 GPU 中最后由 GPU 将多个位图进行合成然后 draw 到屏幕上此时我们的页面也就展现到了屏幕上。 可以 Chrome源码调试 - More Tools - Rendering - Layer borders中看到黄色的就是复合图层信息。
硬件加速
硬件加速直观上说就是依赖 GPU 实现图形绘制加速软硬件加速的区别主要是图形的绘制究竟是 GPU 来处理还是 CPU如果是 GPU就认为是硬件加速绘制反之则为软件绘制。 一般一个元素开启硬件加速后会变成复合图层可以独立于普通文档流中改动后可以避免整个页面重绘提升性能。
常用的硬件加速方法有
最常用的方式translate3d、translateZopacity 属性/过渡动画需要动画执行的过程中才会创建合成层动画没有开始或结束后元素还会回到之前的状态will-change属性这个知识点比较冷僻一般配合 opacity 与 translate 使用而且经测试除了上述可以引发硬件加速的属性外其它属性并不会变成复合层作用是提前告诉浏览器要变化这样浏览器会开始做一些优化工作这个最好用完后就释放video、iframe、canvas、webgl 等元素其它譬如以前的 flash 插件
当然有的时候我们想强制触发硬件渲染就可以通过上面的属性比如
will-change: transform; 或者
transform:translate3d(0, 0, 0);使用硬件加速的注意事项
使用硬件加速并不是十全十美的事情比如
内存。如果GPU加载了大量的纹理那么很容易就会发生内容问题这一点在移动端浏览器上尤为明显所以一定要牢记不要让页面的每个元素都使用硬件加速。使用GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制。即使最终硬件加速停止了文本还是会在动画期间显示得很模糊。
所以不要大量使用复合图层否则由于资源消耗过度页面可能会变的更加卡顿。 同时在使用硬件加速时尽可能的使用z-index防止浏览器默认给后续的元素创建复合层渲染。
具体的原理是这样的 webkit CSS3中如果一个元素添加了硬件加速并且z-index层级比较低那么在这个元素的后面其它元素层级比这个元素高的或者相同的并且releative或absolute属性相同的会默认变为复合层渲染如果处理不当会极大的影响性能。 简单点理解其实可以认为是一个隐式合成的概念如果a是一个复合图层而且b在a上面那么b也会被隐式转为一个复合图层这点需要特别注意。
9.CSS动画和JS实现的动画分别有哪些优缺点
CSS动画
优点
浏览器可以对动画进行优化代码相对简单,性能调优方向固定对于帧速表现不好的低版本浏览器CSS3可以做到自然降级而JS则需要撰写额外代码
缺点
运行过程控制较弱,无法附加事件绑定回调函数代码冗长想用CSS实现稍微复杂一点动画,最后CSS代码都会变得非常笨重
JS动画
优点
控制能力很强, 可以在动画播放过程中对动画进行控制开始、暂停、回放、终止、取消都是可以做到的动画效果比css3动画丰富,有些动画效果比如曲线运动,冲击闪烁,视差滚动效果只有js动画才能完成 CSS3有兼容性问题而JS大多时候没有兼容性问题
缺点
代码的复杂度高于CSS动画JavaScript在浏览器的主线程中运行而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞从而造成丢帧的情况
10.前端实现动画有哪些方式
前端常用的动画实现方式有以下几种
css3的transition 属性css3的animation 属性原生JS动画使用canvas绘制动画SVG动画Jquery的animate函数使用gif图片
