feat(network): 加入一次性载入大量图片的网页，用以HTTP 1.1测试队头阻塞以及chrome浏览器请求数限制

Chrome浏览器单个用户配置文件，同源、正在处理的网络请求（或者说TCP连接？未测试当有WebSocket存在时的情况）只能同时存在6个（标签页之间共享这个配额），超过6个将发生阻塞（资源请求我页中，浏览器将左下角提示“正在等待可用的套接字”）
gogoend · Mar 19, 2022 · 7ef7ff6 · 7ef7ff6
1 parent 661060e
commit 7ef7ff6
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 0 deletions.
diff --git a/network/performance-test/tons-of-images-loading-process.html b/network/performance-test/tons-of-images-loading-process.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>一次性载入大量图片（通过src资源请求）</title>
+    <script src="/vue2/vue.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <img v-for="url in targetUrlList" title="url" :src="url" />
+    </div>
+
+    <script>
+        let app = new Vue({
+            el: '#app',
+            methods: {
+            },
+            data () {
+                return {
+                    targetImageUrl: '/_res/color-linear-gradient.png',
+                    targetUrlList: []
+                }
+            },
+            mounted () {
+                let targetUrlList = []
+                let exceptImageCount = 1000
+
+                const baseUrlList = [
+                    '//localhost:8500',
+                    '//127.0.0.1:8500',
+                ]
+
+                for (let i=0; i<exceptImageCount;i++ ) {
+                    targetUrlList.push(`${baseUrlList[i%baseUrlList.length]}${this.targetImageUrl}?index=${i}`)
+                }
+                // debugger
+                this.targetUrlList = targetUrlList
+            }
+        })
+    </script>
+</body>
+
+</html>
diff --git a/network/performance-test/tons-of-xhr-loading-process.html b/network/performance-test/tons-of-xhr-loading-process.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>一次性载入大量图片（通过xhr）</title>
+    <script src="/vue2/vue.js"></script>
+    <script src="/_lib/axios.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <img v-for="url in targetUrlList" title="url" :src="url" />
+    </div>
+
+    <script>
+        let app = new Vue({
+            el: '#app',
+            methods: {
+            },
+            data () {
+                return {
+                    targetImageUrl: '/_res/color-linear-gradient.png',
+                    targetUrlList: []
+                }
+            },
+            mounted () {
+                let targetUrlList = []
+                let exceptImageCount = 1000
+
+                const baseUrlList = [
+                    '//localhost:8500',
+                    '//127.0.0.1:8500',
+                ]
+
+                for (let i=0; i<exceptImageCount;i++ ) {
+                    const baseURL = baseUrlList[i%baseUrlList.length]
+                    axios.get(`${baseUrlList[i%baseUrlList.length]}${this.targetImageUrl}?index=${i}`, {
+                        responseType: 'blob',
+                        // timeout: 
+                    }).then(({data}) => {
+                        targetUrlList.push(URL.createObjectURL(data))
+                    }).catch((err) => {
+                        console.log(err)
+                    })
+                }
+                // debugger
+                this.targetUrlList = targetUrlList
+            }
+        })
+    </script>
+</body>
+
+</html>