茫茫人海中与你相遇
![79c3aae92b9682ca0ebeec98b5ebcbce.png](https://i-blog.csdnimg.cn/blog_migrate/81962ceffe3146887cfd20caa25abbad.png)
相信未来的你不会很差
作者:hh_phoebe
来源:https://juejin.im/post/5ee0cf335188254ec9505381
一. ?如何优化图像以及图像格式有什么区别?
优化图像:
不用图片,尽量使用
CSS3
代替。对于一些要实现的修饰效果,例如阴影,圆角,半透明等,可以用CSS3
完成;尽可能使用矢量图
SVG
代替位图。对于绝大多数图案和图标等,矢量图更小,而且可以缩放而无需生成多套图。现代的主流浏览器大多数都能稳定的支持SVG
。
图像格式区别:
矢量图: 图标字体,如
font-awesome
、svg
;位图:
GIF
、jpg(JPEG)
、png
;
矢量图和位图的区别:
PNG
:它可以细分为三种格式:PNG8
,PNG24
,PNG32
。后面的数字代表这种PNG
格式最多可以索引和存储的颜色值;JPG
: 一种大小与质量相对平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片,不适用于色彩简单(色调少)的图片,比如图标啊,logo
等;GIF
: 一种无损的,8位图片格式。具有支持动画,索引透明,压缩等特性。使用色彩简单的图片。
优点: 能保证在最不失真的情况下尽可能压缩图像文件的大小;
缺点: 对于需要高保真的较为复杂的图像,PNG
虽然能无损压缩,但是图片较大,不适合应用在web页面上;
二. position:fixed;在手机端下无效怎么处理?
fixed
的元素实现相对于整个页面是固定位置的,当在屏幕上滑动时是在滑动整个viewport
。原来的网页还在,fixed也没有变过位置,所以说并不是手机端不支持fixed
,只是fixed
元素不是相对于手机屏幕固定的,因此我们按照以下方式来设计:
三. css样式引入方式的优缺点对比
内嵌样式: 优点: 方便书写,权重高;缺点: 没有做到结构和样式分离;
内联样式: 优点:结构样式相分离; 缺点:没有彻底分离;
外联样式: 优点: 完全实现了结构和样式相分离; 缺点: 需要引入才能使用;
四. border:none;与border:0;有什么区别?
首先是性能差异:
{border:0;}
: 把border
设置为0像素,虽然在页面上看不到,但是按border
默认值理解,浏览器依然对border-width/border-color
进行了渲染,即已经占用内存值;{border:none;}
被理解为border-style:none
。boder:0
;比border:none
多渲染了一个border-width:0
,也就是为什么border:none
的性能要比border:0
高;
兼容性差异:
{border:none;}
当border
为“none”
时似乎对IE6/7
无效边框依然存在当border
为“0”时,感觉比“none”
更有效,所有浏览器都一致把边框隐藏。
display
属性规定元素应该生成的框的类型;position
属性规定元素的定位类型;float
属性是一种布局方式,定义元素往哪个方向浮动;
叠加结果:有点类似于优先机制。position
的值-- absolute/fixed
优先级最高,有他们在时,float
不起作用,display
值需要调整。float
或者absolute
定位的元素,只鞥是块元素或者表格
六. 什么是critical CSS?
Critical CSS
是一种提取首屏中 CSS
的技术,以便尽快将内容呈现给用户。这是快速加载网页首屏的好方法。
核心思路:
(1)、抽取出首页的CSS
;
(2)、用行内css样式,加载这部分的css(critical CSS)
;
(3)、等到页面加载完之后,再加载整个css
,会有一部分css
与critical css
重叠;
七. 什么是回流(重排)和重绘以及其区别?
回流(重排),
reflow
:当render tree
中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变时而需要重新构建;重绘
(repaint
):当render tree
中的一些元素需要更新属性,而这些属性只影响元素的外观,风格,而不会影响布局时,称其为重绘,例如颜色改变等。
?注意:每个页面至少需要引发一次重排+重绘,而且重排(回流)一定会引发重绘。
触发重排(回流)的条件:
增加或者删除可见的
dom
元素;元素的位置发生了改变;
元素的尺寸发生了改变,例如边距,宽高等几何属性改变;
内容改变,例如图片大小,字体大小改变等;
页面渲染初始化;
浏览器窗口尺寸改变,例如
resize
事件发生时等;
八. css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
垂直方向:
line-height
;水平方向:
letter-spacing
;
?注意: letter-spacing
还可以用来消除inline-block
元素间的换行符空格间隙等问题。
九. 对 WEB 标准以及 W3C 有什么理解与认识?
- 标签闭合,标签小写,不乱嵌套;
- 提高搜索机器人的搜索几率;
- 使用外链
CSS
和JS
脚本; - 结构行为标签分离;
- 文件下载和页面速度更快;
- 内容能被更多的用户以及更广泛的设备访问;
- 更少的代码和组件,易于维护,改版方便;
- 不需要动页面内容,同时提供打印版本也不需要复制内容,提高网站的易用性;
十. Happy Ending??
到了这儿,小编希望本文能帮助到有需要的童鞋,扎实基础知识(亦或是温习遗忘的知识点),温故而知新,逐渐提升。
![73f40b8e914b33877f2605f55a3ca468.png](https://i-blog.csdnimg.cn/blog_migrate/90a67e8ce953b6f28f5f831e1681c4c1.png)
我们在虚拟的空间与你相遇,期待可以碰撞出不一样的火花
![4a5ea7706571200f887c1b549f9d3d66.png](https://i-blog.csdnimg.cn/blog_migrate/231fe870bc25d3577140b8342d657e72.png)
![f06c9aeca738ba56295293fbc37c3bce.png](https://i-blog.csdnimg.cn/blog_migrate/04e7043a4d707c43f0f4dfc9e085121b.jpeg)