Javascript -- 加载时间线 正则表达式
迪丽瓦拉
2024-05-29 00:44:25
0

js加载时间线

1、创建Document对象,开始解析web页面,解析html元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段的document.readyState = ‘loading’
2、遇到link外部css,创建线程加载,并继续解析文档
3、遇到script外部js,并且没有设置async,defer,浏览器加载,并阻塞,等待js加载完成并执行这个脚本,然后继续解析文档
4、遇到script外部js,并且设置有async,defer,浏览器创建线程加载,并继续解析文档,对于async属性的脚本,脚本加载完成后立即执行(异步禁止使用document.write())
5、遇到img等,先正常解析dom结构,然后浏览器异步加载src,并继续解析文档
当解析完成,document.readyState = ‘interactive’
6、当文档解析完成后,所有设置有defer的脚本会按照顺序自画像。
7、document对象触发DOMContentLoaded事件,这也标志着程序执行从同步脚本执行阶段,转化为事件驱动阶段。
8、当所有的async的脚本加载完成执行后,,img等加载完成后,document.readyState = ‘complete’,window对象触发load事件。

正则表达式

正则表达式是构成搜索模式(search pattern)的字符序列。

当您搜索文本中的数据时,您可使用搜索模式来描述您搜索的内容。

正则表达式可以是单字符,或者更复杂的模式。

正则表达式可用于执行所有类型的文本搜索和文本替换操作。
1、转义符号
2、多行字符串
3、高级转义符\n \t \r

RegExp

正则表达式的作用:匹配特殊字符串或有特殊搭配原则的字符的最佳选择。

两种创建方式

直接量

new RegExp();

个人推荐使用直接量

正则表达式不是单纯的规则 而是一个规则对象需要我们去实例化它

语法

/pattern/modifiers;
pattern(在搜索中使用)
modifiers是修饰符。

正则表达式修饰符
修饰符可用于大小写不敏感的更全局的搜素:


var reg = /abc/
var str = "abcd"reg.test(str)

返回值为true 说明str中有abc

var reg = /abc/i
var str = "ABCD"reg.test(str)

返回值也是true 因为载/后面加了个i 表示忽视大小写

var str = "abc"
var reg = new RegExp("abc")

g:全局匹配

var reg = /ab/g
var str = "ababababab"console.log(str.match(reg))

输出为abababab 如果不用g的话只会输出ab

m:执行多行匹配

var reg = /^a/gm
var str = "abcd\na"str.martch(reg)

返回值为a a

  • reg.text()
  • str.martch

使用字符串方法

在 JavaScript 中,正则表达式常用于两个字符串方法:search() 和 replace()。

search() 方法使用表达式来搜索匹配,然后返回匹配的位置。

replace() 方法返回模式被替换处修改后的字符串。

使用字符串方法 search() 来处理字符串

search() 方法也接受字符串作为搜索参数。字符串参数将被转换为正则表达式

例子:

var str = "123123";
var n = str.search("123"); 

在字符串方法 search() 中使用正则表达式:

var str = "123123";
var n = str.search(/123/i); 

n的结果是3

使用字符串方法 replace() 处理字符串

replace() 也接受字符串作为搜索参数

例子:

var str = "HEllo Microsoft!";
var res = str.replace("Microsoft", "CSDN"); 

replace会把Microsoft替换为CSDN

最终res的值为HEllo CSDN

正则表达式模式

括号用于查找一定范围的字符串

[abc] : 查找方括号之间的任何字符串
[0-9] : 查找任何从 0 至 9 的数字。
[x|y] : 查找由 | 分隔的任何选项。

元字符(Metacharacter)是拥有特殊含义的字符

\d : 查找数字。
\s : 查找空白字符
\b : 匹配单词边界。
\uxxxx : 查找以十六进制数 xxxx 规定的 Unicode 字符。

使用 test()

test() 是一个正则表达式方法。

它通过模式来搜索字符串,然后根据结果返回 true 或 false。

var patt = /e/;
patt.test("The best things in life are free!"); 

由于字符串中有一个 “e” 所以上述代码的返回值为true

相关内容