css优化提高性能的方法有哪些?
作为页面渲染和内容展现的重要环节,css
影响着用户对整个网站的第一体验
因此,在整个产品研发过程中,css
性能优化同样需要贯穿全程
- 内联首屏关键css
在打开一个页面,页面首要内容出现在屏幕的时间影响着用户的体验,而通过内联css
关键代码能够使浏览器在下载完html
后就能立刻渲染
而如果外部引用css
代码,在解析html结构过程中遇到外部css
文件,才会开始下载css
代码,再渲染
所以,CSS
内联使用使渲染时间提前
注意:但是较大的css代码并不合适内联(初始拥塞窗口、没有缓存),而其余代码则采取外部引用方式
- 异步加载css
在CSS文件请求、下载、解析完成之前,CSS会阻塞渲染,浏览器将不会渲染任何已处理的内容
前面加载内联代码后,后面的外部引用css则没必要阻塞浏览器渲染。这时候就可以采取异步加载的方案,主要有如下:
- 使用javascript将link标签插到head标签最后
// 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
- 设置link标签media属性为noexis,浏览器会认为当前样式表不适用当前类型,会在不阻塞页面渲染的情况下再进行下载。加载完成后,将`media`的值设为`screen`或`all`,从而让浏览器开始解析CSS
<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">
- 通过rel属性将link元素标记为alternate可选样式表,也能实现浏览器异步加载。同样别忘了加载完成之后,将rel设回stylesheet
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
- 资源压缩
利用webpack
、gulp/grunt
、rollup
等模块化工具,将css代码进行压缩,使文件变小,大大降低了浏览器的加载时间
-
合理使用选择器
我们在编写选择器的时候,可以遵循以下规则: -
不要嵌套使用过多复杂选择器,最好不要三层以上
-
使用id选择器就没必要再进行嵌套
-
通配符和属性选择器效率最低,避免使用
- 减少使用昂贵的属性
在页面发生重绘的时候,昂贵属性如box-shadow
/border-radius
/filter
/透明度
/:nth-child
等,会降低浏览器的渲染性能
- 不要使用@import
css样式文件有两种引入方式,一种是link
元素,另一种是@import
其他
- 减少重排操作,以及减少不必要的重绘
- 了解哪些属性可以继承而来,避免对这些属性重复编写
- cssSprite,合成所有icon图片,用宽高加上backgroud-position的背景图方式显现出我们要的icon图,减少了http请求
把小的icon图片转成base64编码 - CSS3动画或者过渡尽量使用transform和opacity来实现动画,不要使用left和top属性
js:说说正则表达式和它的应用场景?
正则表达式是一种用来匹配字符串的强有力的武器
匹配规则
- 常见校验规则
|规则|描述 |
|–|--|
| \ | 转义 |
| ^ | 匹配输入的开始 |
| $ | 匹配输入的结束 |
| * | 匹配前一个表达式 0 次或多次 |
| + | 匹配前面一个表达式 1 次或者多次。等价于 {1,} |
| ? | 匹配前面一个表达式 0 次或者 1 次。等价于{0,1} |
| . | 默认匹配除换行符之外的任何单个字符 |
| x(?=y) | 匹配’x’仅仅当’x’后面跟着’y’。这种叫做先行断言 |
| (?<=y)x | 匹配’x’仅当’x’前面是’y’.这种叫做后行断言 |
|x(?!y) | 仅仅当’x’后面不跟着’y’时匹配’x’,这被称为正向否定查找 |
|(?<!y)x | 仅仅当’x’前面不是’y’时匹配’x’,这被称为反向否定查找 |
|x|y |匹配‘x’或者‘y’ |
|{n} | n 是一个正整数,匹配了前面一个字符刚好出现了 n 次 |
|{n,} | n是一个正整数,匹配前一个字符至少出现了n次 |
| {n,m} |n 和 m 都是整数。匹配前面的字符至少n次,最多m次 |
|[xyz] |一个字符集合。匹配方括号中的任意字符 |
| [^xyz] |匹配任何没有包含在方括号中的字符 |
| \b | 匹配一个词的边界,例如在字母和空格之间 |
|\B |匹配一个非单词边界 |
| \d | 匹配一个数字 |
| \D |匹配一个非数字字符 |
|\f | 匹配一个换页符 |
|\n |匹配一个换行符 |
|\r |匹配一个回车符 |
|\s | 匹配一个空白字符,包括空格、制表符、换页符和换行符 |
|\S |匹配一个非空白字符 |
|\w | 匹配一个单字字符(字母、数字或者下划线) |
|\W | 匹配一个非单字字符 |
- 正则表达式标记
标志 | 描述 |
---|---|
g | 全局搜索。 |
i | 不区分大小写搜索。 |
m | 多行搜索。 |
s | 允许 . 匹配换行符。 |
u | 使用unicode码的模式进行匹配。 |
y | 执行“粘性(sticky)”搜索,匹配从目标字符串的当前位置开始。 |
应用场景
- 验证qq合法性(5-15位,数字,不是0开头):
const reg=/^[1-9][0-9]{4,14}$/
const isvalid=reg.exec(s)
- 校验用户账号合法性(5-20以字母开头,可带数字"_""."等字符串)
const reg=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/
const isvalid=reg.exec(s)
vue:什么是虚拟DOM?
虚拟DOM这个概念相信大家都不陌生,从React到Vue,虚拟DOM位这两个框架都带来了跨平台的能力(React-Native
和weex
)
实际上它只是一层对真实DOM的抽象,以JavaScript
对象 (VNode
节点) 作为基础的树,用对象的属性来描述节点,最终可以通过一系列操作使这棵树映射到真实环境上
在Javascript对象中,虚拟DOM 表现为一个 Object对象。并且最少包含标签名 (tag
)、属性 (attrs
) 和子元素对象 (children
) 三个属性,不同框架对这三个属性的名命可能会有差别
为什么需要虚拟DOM?
DOM是很慢的,其元素非常庞大,页面的性能问题,大部分都是由DOM操作引起的
很多人认为虚拟 DOM 最大的优势是 diff 算法
,减少 JavaScript 操作真实 DOM 的带来的性能消耗。虽然这一个虚拟 DOM 带来的一个优势,但并不是全部。虚拟 DOM 最大的优势在于抽象了原本的渲染过程
,实现了跨平台
的能力,而不仅仅局限于浏览器的 DOM,可以是安卓
和 IOS
的原生组件,可以是近期很火热的小程序
,也可以是各种GUI