前端面试题：浏览器如何解析HTML文件？

览器解析HTML文件的过程是网页呈现的关键步骤之一。具体介绍如下：

HTML文档的接收和预处理

网络请求处理：当用户输入URL或点击链接时，浏览器发起HTTP请求，服务器响应并返回HTML文件。此过程中，浏览器需要处理DNS查询、建立TCP连接等底层网络通信操作。
预解析优化：为了提高性能，现代浏览器在主线程解析HTML之前会启动一个预解析线程，提前下载HTML中链接的外部CSS和JS文件。这一步骤确保了后续渲染过程的顺畅进行。

解析为DOM树

词法分析和句法分析：浏览器的HTML解析器通过词法分析将HTML文本标记转化为符号序列，然后通过句法分析器按照HTML规范构建出DOM树。每个节点代表一个HTML元素，形成了多层次的树状结构。
生成对象接口：生成的DOM树是页面元素的结构化表示，提供了操作页面元素的接口，如JavaScript可以通过DOM API来动态修改页面内容和结构。

CSS解析与CSSOM树构建

CSS文件加载与解析：浏览器解析HTML文件中的<link>标签引入的外部CSS文件和<style>标签中的内联CSS，生成CSSOM树。CSSOM树反映了CSS样式的层级和继承关系。
CSS属性计算：包括层叠、继承等，确保每个元素对应的样式能够被准确计算。这些计算过程为后续的布局提供必要的样式信息。

JavaScript加载与执行

阻塞式加载：当解析器遇到<script>标签时，它会停止HTML的解析，转而先加载并执行JavaScript代码。这是因为JS可能会修改DOM结构或CSSOM树，从而影响已解析的部分。
异步和延迟加载：为了不影响页面的初步渲染，可以采用async或defer属性来异步加载JS文件，这样可以在后台进行JS的加载和执行，而不阻塞HTML解析。

渲染树的构建

合并DOM树和CSSOM树：有了DOM树和CSSOM树后，浏览器将它们组合成渲染树，这个树只包含显示界面所需的DOM节点及对应的样式信息。
不可见元素的排除：渲染树会忽略例如<head>、<meta>等不可见元素，只关注<body>内的可视化内容。

布局计算（Layout）

元素位置和尺寸确定：浏览器从渲染树根节点开始，递归地计算每个节点的精确位置和尺寸，这个过程也被称为“回流”或“重排”，是后续绘制的基础。
布局过程的优化：现代浏览器会尽量优化布局过程，例如通过流式布局的方式减少重复计算，确保高效地完成布局任务。

绘制（Paint）

像素级绘制：绘制是一个将布局计算后的各元素绘制成像素点的过程。这包括文本、颜色、边框、阴影以及替换元素的绘制。
层次化的绘制：为了高效地更新局部内容，浏览器会将页面分成若干层次（Layer），对每一层分别进行绘制，这样只需更新变化的部分。

因此，我们开发中要注意以下几点：

避免过度使用全局脚本：尽量减少使用全局脚本或者将它们放在文档底部，以减少对HTML解析的阻塞。
合理组织CSS和使用CSS预处理器：合理组织CSS文件的结构和覆盖规则，利用CSS预处理器进行模块化管理。
利用浏览器缓存机制：通过设置合理的缓存策略，减少重复加载相同资源，提升二次访问的体验。
优化图片和多媒体资源：适当压缩图片和优化多媒体资源的加载，减少网络传输时间和渲染负担。

综上所述，浏览器解析HTML文件是一个复杂而高度优化的过程，涉及从网络获取HTML文档到最终将其渲染到屏幕上的多个步骤。开发者需要深入理解这些步骤，以优化网页性能和用户体验。通过合理组织HTML结构、优化资源加载顺序、减少不必要的DOM操作和合理安排CSS和JavaScript的加载与执行，可以显著提升页面加载速度和运行效率。

.什么是jsoup

jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据，可操作 HTML 元素、属性、文本。

JSoup 功能

jsoup 实现 WHATWG HTML5 规范，并将 HTML 解析为与现代浏览器相同的 DOM。

从 URL，文件或字符串中提取并解析 HTML。
查找和提取数据，使用 DOM 遍历或 CSS 选择器。
操纵 HTML 元素，属性和文本。
根据安全的白名单清理用户提交的内容，以防止 XSS 攻击。
输出整洁的 HTML。

JSoup 主要类

大多数情况下，下面给出 3 个类是我们需要重点了解的。

Jsoup 类

Jsoup 类是任何 Jsoup 程序的入口点，并将提供从各种来源加载和解析 HTML 文档的方法。 Jsoup 类的一些重要方法如下：

方法	描述
static Connection connect(String url)	创建并返回 URL 的连接。
static Document parse(File in, String charsetName)	将指定的字符集文件解析成文档。
static Document parse(String html)	将给定的 html 代码解析成文档。
static String clean(String bodyHtml, Whitelist whitelist)	从输入 HTML 返回安全的 HTML，通过解析输入 HTML 并通过允许的标签和属性的白名单进行过滤。

Jsoup 类的其他重要方法可以参见 - https://jsoup.org/apidocs/org/jsoup/Jsoup.html

Document 类

该类表示通过 Jsoup 库加载 HTML 文档。可以使用此类执行适用于整个 HTML 文档的操作。 Element 类的重要方法可以参见 - http://jsoup.org/apidocs/org/jsoup/nodes/Document.html 。

Element 类

HTML 元素是由标签名称，属性和子节点组成。使用 Element 类，您可以提取数据，遍历节点和操作 HTML。 Element 类的重要方法可参见 - http://jsoup.org/apidocs/org/jsoup/nodes/Element.html 。

2.代码工程

实验目的

实现解析liuhaihua.cn首页list

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>springboot-demo</artifactId>
        <groupId>com.et</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>jsoup</artifactId>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>
    <dependencies>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-autoconfigure</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.jsoup</groupId>
            <artifactId>jsoup</artifactId>
            <version>1.12.1</version>
        </dependency>
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
        </dependency>

    </dependencies>
</project>

controller

package com.et.jsoup;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;

@RestController
public class HelloWorldController {
    @RequestMapping("/hello")
    public Map<String, Object> showHelloWorld(){
        Map<String, Object> map = new HashMap<>();
        map =JsoupUtil.parseHtml("http://www.liuhaihua.cn/");
        map.put("msg", "HelloWorld");
        return map;
    }
}

工具类

package com.et.jsoup;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.apache.http.HttpEntity;
import org.apache.http.HttpStatus;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.utils.HttpClientUtils;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

/**
 * @author liuhaihua
 * @version 1.0
 * @ClassName JsoupUtil
 * @Description todo
 * @date 2024/06/24/ 9:16
 */

public class JsoupUtil {
        public static Map<String ,Object> parseHtml(String url){
            Map<String,Object> map = new HashMap<>();
            //1.生成httpclient，相当于该打开一个浏览器
            CloseableHttpClient httpClient = HttpClients.createDefault();
            CloseableHttpResponse response = null;
            //2.创建get请求，相当于在浏览器地址栏输入 网址
            HttpGet request = new HttpGet(url);
            //设置请求头，将爬虫伪装成浏览器
            request.setHeader("User-Agent","Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36");
//        HttpHost proxy = new HttpHost("60.13.42.232", 9999);
//        RequestConfig config = RequestConfig.custom().setProxy(proxy).build();
//        request.setConfig(config);
            try {
                //3.执行get请求，相当于在输入地址栏后敲回车键
                response = httpClient.execute(request);

                //4.判断响应状态为200，进行处理
                if(response.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
                    //5.获取响应内容
                    HttpEntity httpEntity = response.getEntity();
                    String html = EntityUtils.toString(httpEntity, "utf-8");
                    System.out.println(html);

                    /**
                     * 下面是Jsoup展现自我的平台
                     */
                    //6.Jsoup解析html
                    Document document = Jsoup.parse(html);
                    //像js一样，通过标签获取title
                    System.out.println(document.getElementsByTag("title").first());
                    Elements blogmain = document.getElementsByClass("col-sm-8 blog-main");


                    //像js一样，通过class 获取列表下的所有博客
                    Elements postItems =  blogmain.first().getElementsByClass("fade-in");
                    //循环处理每篇博客
                    List<Map>  list =  new ArrayList<>();
                    for (Element postItem : postItems) {
                        Map<String,Object> row = new HashMap<>();
                        //像jquery选择器一样，获取文章标题元素
                        Elements titleEle = postItem.select(".entry-title a");
                        System.out.println("文章标题:" + titleEle.text());;
                        row.put("title",titleEle.text());
                        System.out.println("文章地址:" + titleEle.attr("href"));
                        row.put("href",titleEle.attr("href"));
                        //像jquery选择器一样，获取文章作者元素
                        Elements footEle = postItem.select(".archive-content");
                        System.out.println("文章概要:" + footEle.text());;
                        row.put("summary",footEle.text());
                        Elements view = postItem.select(".views");
                        System.out.println( view.text());
                        row.put("views",view.text());
                        System.out.println("*********************************");
                        list.add(row);
                    }
                    map.put("data",list);

                } else {
                    //如果返回状态不是200，比如404（页面不存在）等，根据情况做处理，这里略
                    System.out.println("返回状态不是200");
                    System.out.println(EntityUtils.toString(response.getEntity(), "utf-8"));
                }

            } catch (ClientProtocolException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            } finally {
                //6.关闭
                HttpClientUtils.closeQuietly(response);
                HttpClientUtils.closeQuietly(httpClient);
            }
            return  map;
        }
        public static void main(String[] args) {
            parseHtml("http://www.liuhaihua.cn/");
        }

}

DemoApplication.java

package com.et.jsoup;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

   public static void main(String[] args) {
      SpringApplication.run(DemoApplication.class, args);
   }
}

以上只是一些关键代码，所有代码请参见下面代码仓库

代码仓库

https://github.com/Harries/springboot-demo

3.测试

启动spring boot应用
访问http://127.0.0.1:8088/hello,返回解析结果

4.引用

官网：https://jsoup.org/
GitHub：https://github.com/jhy/jsoup/
http://www.liuhaihua.cn/archives/710776.html

送HTTP请求：首先，你需要向目标网页发送HTTP请求以获取其HTML内容。这可以通过Java的内置库java.net.HttpURLConnection或者使用更高级的库如Apache HttpClient、OkHttp等来完成。

读取响应内容：一旦你发送了请求并收到了响应，你需要读取响应的内容，这通常是HTML格式的字符串。

解析HTML：然后，你需要解析HTML字符串以提取所需的信息。这可以通过正则表达式来完成，但通常建议使用专门的HTML解析库，如Jsoup。Jsoup提供了一种非常方便的方式来解析HTML文档，并可以通过类似于CSS或jQuery的选择器语法来提取和操作数据。

如果你需要处理更复杂的网页或进行更高级的网页抓取和解析任务，你可能还需要考虑使用如Selenium这样的浏览器自动化工具来模拟真实的浏览器行为。但是，请注意，频繁或大规模地抓取网页可能会违反网站的使用条款，甚至可能构成法律问题。

在线咨询

上一篇：CSS 的元素显示模式
下一篇：HTML5基本布局模板示例

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商