浏览器如何 'find' 网页上的东西?
How does a browser 'find' something on a webpage?
现在这可能是一个非常微不足道的问题,但是现代浏览器如何处理网页上的查找 ( Ctrl + F ) 操作?
他们是否通过正则表达式从网页中提取所有 HTML/CSS/JS 然后 运行 递归查找将其转换为某种纯文本表示形式?
我不知道其他浏览器,但 google chrome 使用 Boyer Moore 搜索算法在网页上查找单词。在此算法中,浏览器从右到左扫描您输入的单词。
要查找的字符串叫P
,叫"Pattern"。
我们正在搜索的字符串名为 T
,或 "Test"。
T
和P
的长度一般分别用m
和n
表示。该算法的优点是,它不是使用蛮力搜索(这将需要 m - n - 1
次试验),而是预处理 P
并尽可能跳过更多可能性。
根据维基百科:
The key insight in this algorithm is that if the end of the pattern is
compared to the text, then jumps along the text can be made rather
than checking every character of the text. The reason that this works
is that in lining up the pattern against the text, the last character
of the pattern is compared to the character in the text. If the
characters do not match, there is no need to continue searching
backwards along the text. If the character in the text does not match
any of the characters in the pattern, then the next character in the
text to check is located n characters farther along the text, where n
is the length of the pattern. If the character in the text is in the
pattern, then a partial shift of the pattern along the text is done to
line up along the matching character and the process is repeated.
Jumping along the text to make comparisons rather than checking every
character in the text decreases the number of comparisons that have to
be made, which is the key to the efficiency of the algorithm.
Boyer-Moore 算法采用两种方法:
- 坏字符启发式
- 好的后缀启发式
处理 P
并形成两种启发式的不同数组。
T
的字符与当前字符(P
的)不匹配的字符称为坏字符。
当 T
的子字符串与 P
的子字符串成功匹配时,就会出现一个好的后缀。
这个问题是一个相当繁重的问题,因为根据浏览器引擎的目的和设计,各种浏览器的性能可能会略有不同。但是,它们通常应该根据 W3C 标准产生相似的外观和感觉。了解每个浏览器如何工作的最好方法是访问浏览器制造商的个人网站,研究它使用的地图系统。 HTML 默认情况下是一个树节点系统,其中文档可以分支到其他子树中。一种可以使用的路径系统称为 XPath。下面是一些 link 分别是浏览器的功能、W3 Schools 和 XPath。希望这些至少能帮助您理解浏览器功能的概念。我会先从渲染引擎 link 开始。
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_rendering_engine
https://librarycarpentry.org/lc-webscraping/02-xpath/index.html
现在这可能是一个非常微不足道的问题,但是现代浏览器如何处理网页上的查找 ( Ctrl + F ) 操作?
他们是否通过正则表达式从网页中提取所有 HTML/CSS/JS 然后 运行 递归查找将其转换为某种纯文本表示形式?
我不知道其他浏览器,但 google chrome 使用 Boyer Moore 搜索算法在网页上查找单词。在此算法中,浏览器从右到左扫描您输入的单词。
要查找的字符串叫P
,叫"Pattern"。
我们正在搜索的字符串名为 T
,或 "Test"。
T
和P
的长度一般分别用m
和n
表示。该算法的优点是,它不是使用蛮力搜索(这将需要 m - n - 1
次试验),而是预处理 P
并尽可能跳过更多可能性。
根据维基百科:
The key insight in this algorithm is that if the end of the pattern is compared to the text, then jumps along the text can be made rather than checking every character of the text. The reason that this works is that in lining up the pattern against the text, the last character of the pattern is compared to the character in the text. If the characters do not match, there is no need to continue searching backwards along the text. If the character in the text does not match any of the characters in the pattern, then the next character in the text to check is located n characters farther along the text, where n is the length of the pattern. If the character in the text is in the pattern, then a partial shift of the pattern along the text is done to line up along the matching character and the process is repeated. Jumping along the text to make comparisons rather than checking every character in the text decreases the number of comparisons that have to be made, which is the key to the efficiency of the algorithm.
Boyer-Moore 算法采用两种方法:
- 坏字符启发式
- 好的后缀启发式
P
并形成两种启发式的不同数组。
T
的字符与当前字符(P
的)不匹配的字符称为坏字符。
当 T
的子字符串与 P
的子字符串成功匹配时,就会出现一个好的后缀。
这个问题是一个相当繁重的问题,因为根据浏览器引擎的目的和设计,各种浏览器的性能可能会略有不同。但是,它们通常应该根据 W3C 标准产生相似的外观和感觉。了解每个浏览器如何工作的最好方法是访问浏览器制造商的个人网站,研究它使用的地图系统。 HTML 默认情况下是一个树节点系统,其中文档可以分支到其他子树中。一种可以使用的路径系统称为 XPath。下面是一些 link 分别是浏览器的功能、W3 Schools 和 XPath。希望这些至少能帮助您理解浏览器功能的概念。我会先从渲染引擎 link 开始。
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_rendering_engine
https://librarycarpentry.org/lc-webscraping/02-xpath/index.html