【autodesk】浏览器中渲染rvt模型

这篇具有很好参考价值的文章主要介绍了【autodesk】浏览器中渲染rvt模型。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用Forge完成渲染

Forge是什么 为什么能够渲染出来rvt模型

  • Forge是由Autodesk开发的一套云端开发平台和工具集。
  • 在Forge平台中,有一个名为"Model Derivative"的服务,它可以将包括RVT(Revit)在内的多种BIM(Building Information Modeling)文件格式转换为可在Web上浏览和渲染的格式。
  • 具体来说,"Model Derivative"服务可以将RVT(Revit)文件转换为SVF(Scalable Vector Graphics)格式。
  • SVF是一种基于Web的轻量级3D模型表示格式,可以实现高性能的3D模型渲染和交互。通过将RVT文件转换为SVF格式,可以在Web端使用Forge提供的Viewer组件加载和展示RVT模型

Forge与Autodesk的关系

  • Autodesk是一家设计软件公司,Forge可以视为Autodesk的云端扩展

渲染步骤:

首先要注册autodesk平台,并创建项目 获取自己的client_id与client_secret

官网地址:Autodesk Platform Services (formerly Forge)

如下图:

配置postman环境 

下面我们演示通过postman上传模型到Forge云端,然后配置Forge的js渲染出来

post环境文件:

BIM.postman collection.json

{
	"info": {
		"_postman_id": "aedeb5db-ab5a-4b0e-ba31-d329f6ef66ba",
		"name": "Beijing-Workshop",
		"schema": "https://schema.getpostman.com/json/collection/v2.0.0/collection.json",
		"_exporter_id": "24665034"
	},
	"item": [
		{
			"name": "1获取access token",
			"event": [
				{
					"listen": "test",
					"script": {
						"exec": [
							"var data = JSON.parse(responseBody);",
							"postman.setEnvironmentVariable(\"access_token\", data.access_token);",
							"postman.setEnvironmentVariable(\"expires_in\", data.expires_in);",
							"postman.setEnvironmentVariable(\"token_type\", data.token_type);"
						],
						"type": "text/javascript"
					}
				}
			],
			"request": {
				"method": "POST",
				"header": [
					{
						"key": "Content-Type",
						"value": "application/x-www-form-urlencoded"
					}
				],
				"body": {
					"mode": "urlencoded",
					"urlencoded": [
						{
							"key": "client_id",
							"value": "{{client_id}}",
							"type": "text"
						},
						{
							"key": "client_secret",
							"value": "{{client_secret}}",
							"type": "text"
						},
						{
							"key": "grant_type",
							"value": "client_credentials",
							"type": "text"
						},
						{
							"key": "scope",
							"value": "data:read data:write bucket:create bucket:read",
							"type": "text"
						},
						{
							"key": "expires_in",
							"value": "360000",
							"type": "text"
						}
					]
				},
				"url": "{{base_domain}}/authentication/v1/authenticate"
			},
			"response": []
		},
		{
			"name": "2创建的存储桶(bucket)",
			"event": [
				{
					"listen": "prerequest",
					"script": {
						"exec": [
							"if (request.data) {",
							"    var requestData = JSON.parse(request.data);",
							"    postman.setEnvironmentVariable(\"bucketKey\", requestData.bucketKey);",
							"    postman.setEnvironmentVariable(\"bucketPolicy\", requestData.policyKey);",
							"}"
						],
						"type": "text/javascript"
					}
				}
			],
			"request": {
				"method": "POST",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}"
					},
					{
						"key": "Content-Type",
						"value": "application/json"
					}
				],
				"body": {
					"mode": "raw",
					"raw": "{\n  \"bucketKey\":\"ac-persistent-bucket-test8\",\n  \"policyKey\":\"persistent\"\n}"
				},
				"url": "{{base_domain}}/oss/v2/buckets"
			},
			"response": []
		},
		{
			"name": "3 查看bucket是否创建成功",
			"request": {
				"method": "GET",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}"
					}
				],
				"url": {
					"raw": "{{base_domain}}/oss/v2/buckets?limit=10",
					"host": [
						"{{base_domain}}"
					],
					"path": [
						"oss",
						"v2",
						"buckets"
					],
					"query": [
						{
							"key": "limit",
							"value": "10"
						}
					]
				}
			},
			"response": []
		},
		{
			"name": "4往bucket里放置object模型",
			"event": [
				{
					"listen": "test",
					"script": {
						"exec": [
							"if (responseCode.code === 200) {",
							"    var data = JSON.parse(responseBody);",
							"    postman.setEnvironmentVariable(\"urn\", data.objectId);",
							"    postman.setEnvironmentVariable(\"urnBase64\", window.btoa(data.objectId));",
							"    postman.setEnvironmentVariable(\"file_location\", data.location);",
							"}",
							""
						],
						"type": "text/javascript"
					}
				}
			],
			"request": {
				"method": "PUT",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}"
					}
				],
				"body": {
					"mode": "file",
					"file": {
						"src": "/C:/Users/ac135/Desktop/rvtText/data/textOne.rvt"
					}
				},
				"url": "{{base_domain}}/oss/v2/buckets/{{bucketKey}}/objects/aggregate-1.rvt"
			},
			"response": []
		},
		{
			"name": "5检查对象模型是否成功上传",
			"request": {
				"method": "GET",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}"
					}
				],
				"url": "{{base_domain}}/oss/v2/buckets/{{bucketKey}}/objects"
			},
			"response": []
		},
		{
			"name": "6将模型在云端转换成SVF格式",
			"event": [
				{
					"listen": "test",
					"script": {
						"exec": [
							"var data = JSON.parse(responseBody);",
							"",
							"var setEnvVar = function (tar, src) {",
							"    if (!src) {",
							"        return;",
							"    }",
							"    postman.setEnvironmentVariable(tar, src);",
							"}",
							"",
							"if (data) {",
							"    if (data.urn) {",
							"        setEnvVar(\"urnBase64\", data.urn);",
							"    }",
							"}"
						],
						"type": "text/javascript"
					}
				}
			],
			"request": {
				"method": "POST",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}"
					},
					{
						"key": "Content-Type",
						"value": "application/json"
					},
					{
						"key": "x-ads-force",
						"value": "true"
					}
				],
				"body": {
					"mode": "raw",
					"raw": "{\n    \"input\": {\n        \"urn\": \"{{urnBase64}}\" \n    },\n    \"output\": {\n        \"destination\": {\n            \"region\": \"us\"\n        },\n        \"formats\": [\n        {\n            \"type\": \"svf\",\n            \"views\":[\"2d\", \"3d\"]\n        }]\n    }\n}"
				},
				"url": "{{base_domain}}/modelderivative/v2/designdata/job"
			},
			"response": []
		},
		{
			"name": "7检查模型是否转化完成",
			"request": {
				"method": "GET",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}"
					},
					{
						"key": "Accept",
						"value": "application/vnd.api+json,application/json"
					}
				],
				"url": "{{base_domain}}/modelderivative/v2/designdata/{{urnBase64}}/manifest"
			},
			"response": []
		},
		{
			"name": "04-POST job",
			"event": [
				{
					"listen": "test",
					"script": {
						"type": "text/javascript",
						"exec": [
							"var data = JSON.parse(responseBody);",
							"",
							"",
							"if (data) {",
							"    if (data.urn) {",
							"        postman.setEnvironmentVariable(\"urnBase64\", data.urn);",
							"    }",
							"}"
						]
					}
				}
			],
			"request": {
				"method": "POST",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}"
					},
					{
						"key": "Content-Type",
						"value": "application/json"
					},
					{
						"key": "x-ads-force",
						"value": "true"
					}
				],
				"body": {
					"mode": "raw",
					"raw": "{\n    \"input\": {\n        \"urn\": \"{{urnBase64}}\" \n    },\n    \"output\": {\n        \"destination\": {\n            \"region\": \"us\"\n        },\n        \"formats\": [\n        {\n            \"type\": \"svf\",\n            \"views\":[\"2d\", \"3d\"]\n        }]\n    }\n}"
				},
				"url": "{{base_domain}}/modelderivative/v2/designdata/job"
			},
			"response": []
		},
		{
			"name": "06-GET metadata",
			"request": {
				"method": "GET",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}"
					}
				],
				"url": "{{base_domain}}/modelderivative/v2/designdata/{{urnBase64}}/metadata"
			},
			"response": []
		},
		{
			"name": "07-GET metadata/​:guid",
			"request": {
				"method": "GET",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}"
					},
					{
						"key": "Accept-Encoding",
						"value": "gzip"
					}
				],
				"url": "{{base_domain}}/modelderivative/v2/designdata/{{urnBase64}}/metadata/{{metadata_guid}}"
			},
			"response": []
		},
		{
			"name": "08-GET :urn/metadata/:guid/properties",
			"request": {
				"method": "GET",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}"
					}
				],
				"url": "{{base_domain}}/modelderivative/v2/designdata/{{urnBase64}}/metadata/{{metadata_guid}}/properties"
			},
			"response": []
		},
		{
			"name": "09-bucket details",
			"event": [
				{
					"listen": "test",
					"script": {
						"type": "text/javascript",
						"exec": [
							"if (responseCode.code === 200 && responseBody) {",
							"    var data = JSON.parse(responseBody);",
							"    postman.setEnvironmentVariable(\"bucketKey\", data.bucketKey);",
							"}"
						]
					}
				}
			],
			"request": {
				"method": "GET",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}"
					}
				],
				"url": "{{base_domain}}/oss/v2/buckets/{{bucketKey}}/details"
			},
			"response": []
		},
		{
			"name": "12-GET formats",
			"request": {
				"method": "GET",
				"header": [
					{
						"key": "Authorization",
						"value": "Bearer {{access_token}}"
					}
				],
				"url": "{{base_domain}}/modelderivative/v2/designdata/formats"
			},
			"response": []
		}
	]
}

BIM.postman environment,.json

{
	"id": "63cf71cf-bae6-411f-8e53-7319cf62fd9a",
	"name": "Beijing-Workshop",
	"values": [
		{
			"key": "base_domain",
			"value": "https://developer.api.autodesk.com",
			"type": "text",
			"enabled": true
		},
		{
			"key": "client_id",
			"value": "xxxxxxxxx",
			"type": "text",
			"enabled": true
		},
		{
			"key": "client_secret",
			"value": "xxxxxxxxxxx",
			"type": "text",
			"enabled": true
		},
		{
			"key": "urnBase64",
			"value": "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6YWMtcGVyc2lzdGVudC1idWNrZXQtdGVzdDMvYWdncmVnYXRlLTEucnZ0",
			"type": "text",
			"enabled": true
		},
		{
			"key": "access_token",
			"value": "eyJhbGciOiJIUzI1NiIsImtpZCI6Imp3dF9zeW1tZXRyaWNfa2V5In0.eyJjbGllbnRfaWQiOiJNbDhXdWJFdW52WVRaRk1za2xpQ200YnZCM0dkREVibyIsImV4cCI6MTUyNjExNDc3OCwic2NvcGUiOlsiZGF0YTpyZWFkIiwiZGF0YTp3cml0ZSIsImJ1Y2tldDpjcmVhdGUiLCJidWNrZXQ6cmVhZCJdLCJhdWQiOiJodHRwczovL2F1dG9kZXNrLmNvbS9hdWQvand0ZXhwNjAiLCJqdGkiOiIxMEV2aEVpcGhQMGszTm9FNkFOa2NnR1pKOVJUaUhDazA3dXhWMDFFc1R1M2twS2tVNnB4a2d5d3A5QXBFakpDIn0.prPXmCc9e1oxZcPFSEgPOlonHG8po16RdzDciborQlg",
			"type": "text",
			"enabled": true
		},
		{
			"key": "guid",
			"value": "57873878-6d98-b389-aa22-fead1053823f",
			"type": "text",
			"enabled": true
		},
		{
			"key": "bucketKey",
			"value": "xiaodong-persistent-bucket-test8",
			"type": "text",
			"enabled": true
		},
		{
			"key": "guid",
			"value": "e22cc916-cabd-4b97-9ccd-1ab1e613f707",
			"type": "text",
			"enabled": true
		},
		{
			"key": "objectKey",
			"value": "RevitNative.rvt",
			"type": "text",
			"enabled": true
		},
		{
			"key": "expires_in",
			"value": "3599",
			"type": "text",
			"enabled": true
		},
		{
			"key": "token_type",
			"value": "Bearer",
			"type": "text",
			"enabled": true
		},
		{
			"key": "bucketPolicy",
			"value": "persistent",
			"type": "text",
			"enabled": true
		},
		{
			"key": "urn",
			"value": "urn:adsk.objects:os.object:xiaodong-persistent-bucket-test8/workshop-2.rvt",
			"type": "text",
			"enabled": true
		},
		{
			"key": "file_location",
			"value": "https://developer.api.autodesk.com/oss/v2/buckets/xiaodong-persistent-bucket-test8/objects/workshop-2.rvt",
			"type": "text",
			"enabled": true
		}
	],
	"_postman_variable_scope": "environment",
	"_postman_exported_at": "2023-07-15T15:06:21.850Z",
	"_postman_exported_using": "Postman/10.16.0"
}

 client_secret与client_id记住改成自己的,然后就开始用postman请求上传了

获取access token

https://developer.api.autodesk.com/authentication/v1/authenticate

是用于获取 Autodesk API 的访问令牌(access token)的认证

请求中包含必要的认证信息

  • 客户端 ID(client_id)
  • 客户端密钥(client_secret) 
  • grant_type:授权类型,通常为 "client_credentials"(客户端凭据模式)
  • scope:请求的权限范围,用空格分隔多个权限(如 "data:read data:write")
  • expires_in:设置合适的过期时间,单位毫秒

响应结果:
【autodesk】浏览器中渲染rvt模型,html5 && css3 && 浏览器,开发语言,前端,js

创建 Autodesk Forge 中的存储桶(bucket) 

https://developer.api.autodesk.com/oss/v2/buckets

请求中包含必要的认证信息:

  • Authorization:Authorization: Bearer {{access_token}}
  • bucketKey:存储桶的唯一标识符,它必须是全局唯一的。可以使用小写字母、数字、连字符 - 和下划线 _ 来命名。长度应在3到128个字符之间。
  • policyKey:存储桶的访问策略。默认为 transient,表示存储桶中的对象在30天后过期; persistent,表示永久保存

 响应结果:

【autodesk】浏览器中渲染rvt模型,html5 && css3 && 浏览器,开发语言,前端,js

 查看bucket是否创建成功

https://developer.api.autodesk.com/oss/v2/buckets

请求中包含必要的认证信息:

  • Authorization:Authorization: Bearer {{access_token}}

请求可选的参数信息:

  • limit:指定要返回的存储桶数量的限制。例如,返回最多 10 个存储桶,默认为 10

 响应结果:

【autodesk】浏览器中渲染rvt模型,html5 && css3 && 浏览器,开发语言,前端,js

 往bucket里放置object模型

https://developer.api.autodesk.com/oss/v2/buckets/{bucketKey}/objects/{objectName}

 请求中包含必要的认证信息:

  • Authorization:Authorization: Bearer {{access_token}}
  • 选择需要放置的rvt模型
  • objectName:每个文件在存储桶中都有一个唯一的标识符

 响应结果:

【autodesk】浏览器中渲染rvt模型,html5 && css3 && 浏览器,开发语言,前端,js

 检查对象模型是否成功上传到 Autodesk Forge 存储桶(bucket)中

https://developer.api.autodesk.com/oss/v2/buckets/{{bucketKey}}/objects

请求中包含必要的认证信息:

  • Authorization:Authorization: Bearer {{access_token}}
  • bucketKey:查询的存储桶的实际标识符

 响应结果:

【autodesk】浏览器中渲染rvt模型,html5 && css3 && 浏览器,开发语言,前端,js

将模型在云端转换成SVF格式 

https://developer.api.autodesk.com/modelderivative/v2/designdata/job

请求中包含必要的认证信息:

  • Authorization:Authorization: Bearer {{access_token}}
  • input:指定要转换的对象的 URN(Uniform Resource Name)。将 object_id 的 URN 作为输入。
  • output:指定要生成的输出格式和文件类型。在这里,你可以指定 SVF 格式作为输出。例如,{"formats": [{"type": "svf", "views": ["2d", "3d"]}]}

备注:input中的urn是 objectId转化为Base64格式

响应结果:

【autodesk】浏览器中渲染rvt模型,html5 && css3 && 浏览器,开发语言,前端,js

检查模型是否转化完成

https://developer.api.autodesk.com/modelderivative/v2/designdata/{base64_urn}/manifest

请求中包含必要的认证信息:

  • Authorization:Authorization: Bearer {{access_token}}
  • base64_urn:经过 Base64 编码的 URN

响应结果:

【autodesk】浏览器中渲染rvt模型,html5 && css3 && 浏览器,开发语言,前端,js

【autodesk】浏览器中渲染rvt模型,html5 && css3 && 浏览器,开发语言,前端,js 图一表示进度,图二代表成功

浏览器渲染:

html渲染模板   将accessToken与documentId替换掉就行

<!DOCTYPE html>
<html>

<head>
    <title>Autodesk Forge: 3D Viewer App Sample</title>

    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <!-- Third Party package -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Autodesk Forge Viewer files (IMPORTANT) -->
    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.51/style.min.css"
        type="text/css">
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.51/viewer3D.min.js"></script>

    <style>
        /** Just simple CSS styling to make this page a little nicer **/
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <!-- The Viewer will be instantiated here -->
    <div id="MyViewerDiv"></div>

    <!-- Custom script -->
    <script>
        var viewer;
        var options = {
            env: 'AutodeskProduction',
            api: 'derivativeV2', // TODO: for models uploaded to EMEA change this option to 'derivativeV2_EU'
            // getAccessToken: getForgeToken
            accessToken: 'eyJhbGciOiJSUzI1NiIsImtpZCI6IlU3c0dGRldUTzlBekNhSzBqZURRM2dQZXBURVdWN2VhIiwicGkuYXRtIjoiN3ozaCJ9.eyJzY29wZSI6WyJkYXRhOnJlYWQiLCJkYXRhOndyaXRlIiwiYnVja2V0OmNyZWF0ZSIsImJ1Y2tldDpyZWFkIl0sImNsaWVudF9pZCI6IkpCcldjc3p3RVZCQ0dNMm5sY1J6N0tIZXZTbXpYUXM0IiwiYXVkIjoiaHR0cHM6Ly9hdXRvZGVzay5jb20vYXVkL2Fqd3RleHA2MCIsImp0aSI6ImJjWXBRalcwekh5aTZyUEd3QU1kNjdjamlWS1Q2dDZIYXNqcjFmOXR4OUExeGhZY05JWkhINVlibkdDeHVaTWoiLCJleHAiOjE2ODk5MTI0ODB9.JdpIFQAmWmsGc-t2g3tpU677G1Y11RwF4ndTxbwSa4hE5tOjYtLsMK7pR-jGGWIHAEHUkScvDixQWFIUG_o5UWpwhAdH7r06126QhGFNk_Wf1d8OvoDknqdKt9aXns_1xvxucOdPs3VkJ8BWH6j65B3fxZ7GB5jub3zeF7sGuYd1zBL9FdAcQ5_uQUBpEXh8uP4yZ_Y3yDe_mnTx2OxTMyRXsHw7quWjtxXDQXweGq0xDn3ENayOTkYnsru3_GJmGXUE4b-Zl1csHENJyyegkDqrfbaLbMeKagCWxY-RnCikmg80iWDqOd6KvIejRbQdqpjdQWz4i3Qx6Wnj6Lzf4w'
        };
        // var documentId = 'urn:' + getUrlParameter('urn');
        var documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6YWMtcGVyc2lzdGVudC1idWNrZXQtdGVzdDMvYWdncmVnYXRlLTEucnZ0'
        // 初始化和加载文档的部分
        Autodesk.Viewing.Initializer(options, function onInitialized() {
            // Find the element where the 3d viewer will live.    
            var htmlElement = document.getElementById('MyViewerDiv');
            if (htmlElement) {
                // Create and start the viewer in that element    
                viewer = new Autodesk.Viewing.GuiViewer3D(htmlElement);
                viewer.start();
                // Load the document into the viewer.
                Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
                $('.adsk-viewing-viewer').css('height', '80%')
                $('.adsk-viewing-viewer').css('width', '42%')
            }
        });

        /**
        * 加载模型的回调函数
        */
        function onDocumentLoadSuccess(doc) {
            // Load the default viewable geometry into the viewer.
            // Using the doc, we have access to the root BubbleNode,
            // which references the root node of a graph that wraps each object from the Manifest JSON.
            var viewable = doc.getRoot().getDefaultGeometry();
            if (viewable) {
                viewer.loadDocumentNode(doc, viewable).then(function (result) {
                    console.log('Viewable Loaded!');
                }).catch(function (err) {
                    console.log('Viewable failed to load.');
                    console.log(err);
                }
                )
            }
        }

        /**
        * 文档加载失败时的回调函数
        */
        function onDocumentLoadFailure(viewerErrorCode) {
            console.error('onDocumentLoadFailure() - errorCode: ' + viewerErrorCode);
            jQuery('#MyViewerDiv').html('<p>Translation in progress... Please try refreshing the page.</p>');
        }

    </script>
</body>

</html>

效果图如下:

其他资源分享:

视频教程:通过Forge十分钟实现Web端3D模型浏览_哔哩哔哩_bilibili

有其他问题可以留言 或者私信 文章来源地址https://www.toymoban.com/news/detail-698267.html

到了这里,关于【autodesk】浏览器中渲染rvt模型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何在浏览器中启用 WebGL 以使用 HTML5 3D 查看器

    WebCenter 中的 HTML5 3D Collada Viewer(自 14.1 以来新增)要求在浏览器中启用 WebGL。较旧的浏览器可能不支持此功能,或者要求用户首先显式启用此功能。本页介绍如何为所有主要浏览器启用此功能。WebGL 3D 查看器 本文是以下超级用户文章的摘要:如何在浏览器中启用 WebGL? 在尝

    2024年02月10日
    浏览(49)
  • Ubuntu 下 FireFox( 火狐 ) 浏览器不支持HTML5播放器解决方法

    终端输入   会出现正在设定 ttf-mscorefonts-installer 点【Tab】键,选中【确定】,然后单击【Enter】,选【是】,按【Enter】键,等待解压安装 重启浏览器ok了

    2024年04月14日
    浏览(45)
  • 【前端八股文】浏览器系列:性能优化——HTML、CSS、JS、渲染优化

    本系列目录:【前端八股文】目录总结 是以《代码随想录》八股文为主的笔记。详情参考在文末。 代码随想录的博客_CSDN博客-leecode题解,ACM题目讲解,代码随想录领域博主 性能优化,从以下几个方面来进行。 避免HTML中直接写CSS viewport加速页面渲染 使用语义化标签 减少标签的

    2023年04月20日
    浏览(58)
  • 浏览器渲染流程

    解析HTML,生成DOM树,解析CSS,生成CSSOM树 将DOM树和CSSOM树结合,生成渲染树(Render Tree) Layout(回流):根据生成的渲染树,进行回流(Layout),得到节点的几何信息(位置,大小) Painting(重绘):根据渲染树以及回流得到的几何信息,得到节点的绝对像素 Display:将像素发送给GPU,展示在

    2024年02月09日
    浏览(45)
  • 浏览器渲染机制

    学习渡一课程、参考 必须明白的浏览器渲染机制 - 掘金 HTML解析 布局 分层 绘制 分块 光栅化 画 解析html会生成一个 dom树和cssom树   document.styleSheets  可以看到cssom树     渲染阻塞 在渲染的过程中,遇到一个script标记时,就会停止渲染,去请求脚本文件并执行脚本文件,因为

    2024年02月11日
    浏览(42)
  • 浏览器渲染原理

    当你在地址栏输入内容回车后,浏览器进程中的UI线程会捕捉输入内容,如果访问的是网址,会启动一个网络线程来进行DNS解析;后面连接服务器获取数据;如果输入的不是网址而是,就会使用默认配置的搜索引擎来进行查询 网络进程获取到数据后会使用safeBrowsing检查

    2024年02月07日
    浏览(81)
  • 【前端】浏览器的渲染流程(完整)

    本文主要包含以下内容: 浏览器渲染整体流程 解析 HTML 样式计算 布局 分层 生成绘制指令 分块 光栅化 绘制 常见面试题 浏览器,作为用户浏览网页最基本的一个入口,我们似乎认为在地址栏输入 URL 后网页自动就出来了。殊不知在用户输入网页地址,敲下回车的那一刻,浏

    2024年02月04日
    浏览(48)
  • 前端面试:【浏览器与渲染引擎】工作原理与渲染流程

    嗨,亲爱的读者!你是否曾经好奇过当你在浏览器中输入URL并按下回车时,网页是如何显示在你的屏幕上的?这背后涉及了复杂的浏览器工作原理和渲染流程。本文将带你深入了解浏览器如何工作以及网页如何被渲染出来。 1. 浏览器的工作原理: 当你输入URL并按下回车时,

    2024年02月11日
    浏览(60)
  • 前端性能优化之浏览器渲染优化

    在当今互联网高速发展的时代,用户对于网页加载速度和性能的要求越来越高。作为前端开发者,我们需要关注并致力于提升网页的加载和渲染性能,以提供更好的用户体验。而浏览器渲染优化正是我们实现这个目标的关键。在本文中,我们将探讨一些关于浏览器渲染优化的

    2024年02月11日
    浏览(39)
  • 前端秘法进阶篇----这还是我们熟悉的浏览器吗?(浏览器的渲染原理)

    目录 一.浏览器渲染原理 二.渲染时间点 三.渲染流水线 1.解析html(Parse HTML) 1.1解析成DOM树(document object model) 1.2解析成CSSOM树(css object model) 2.样式计算(Recalculate Style) 3.布局(Layout) 4.分层(Layer) 5. 绘制(Paint) 6.分块(Tiling) 7. 光栅化(Raster) 8. 画(Draw) 四.附加面试题 1.什么是 reflow? 2.什

    2024年02月21日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包