4、主机构成、浏览器之进程|线程|执行栈|工作流程、性能检测分析、后端缓存http、前端优化、前端缓存（如cookie、storage、vuex等）、长连接（如worker、Socket等）、BOM（DOM方法事件区别|复制|clientRect）、九宫格、瀑布流、跑马灯、卷轴展开、几字选项卡、胶卷动画、放大镜、git、gitLab、VSCode、jinja2语法（4150行）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049 2050 2051 2052 2053 2054 2055 2056 2057 2058 2059 2060 2061 2062 2063 2064 2065 2066 2067 2068 2069 2070 2071 2072 2073 2074 2075 2076 2077 2078 2079 2080 2081 2082 2083 2084 2085 2086 2087 2088 2089 2090 2091 2092 2093 2094 2095 2096 2097 2098 2099 2100 2101 2102 2103 2104 2105 2106 2107 2108 2109 2110 2111 2112 2113 2114 2115 2116 2117 2118 2119 2120 2121 2122 2123 2124 2125 2126 2127 2128 2129 2130 2131 2132 2133 2134 2135 2136 2137 2138 2139 2140 2141 2142 2143 2144 2145 2146 2147 2148 2149 2150 2151 2152 2153 2154 2155 2156 2157 2158 2159 2160 2161 2162 2163 2164 2165 2166 2167 2168 2169 2170 2171 2172 2173 2174 2175 2176 2177 2178 2179 2180 2181 2182 2183 2184 2185 2186 2187 2188 2189 2190 2191 2192 2193 2194 2195 2196 2197 2198 2199 2200 2201 2202 2203 2204 2205 2206 2207 2208 2209 2210 2211 2212 2213 2214 2215 2216 2217 2218 2219 2220 2221 2222 2223 2224 2225 2226 2227 2228 2229 2230 2231 2232 2233 2234 2235 2236 2237 2238 2239 2240 2241 2242 2243 2244 2245 2246 2247 2248 2249 2250 2251 2252 2253 2254 2255 2256 2257 2258 2259 2260 2261 2262 2263 2264 2265 2266 2267 2268 2269 2270 2271 2272 2273 2274 2275 2276 2277 2278 2279 2280 2281 2282 2283 2284 2285 2286 2287 2288 2289 2290 2291 2292 2293 2294 2295 2296 2297 2298 2299 2300 2301 2302 2303 2304 2305 2306 2307 2308 2309 2310 2311 2312 2313 2314 2315 2316 2317 2318 2319 2320 2321 2322 2323 2324 2325 2326 2327 2328 2329 2330 2331 2332 2333 2334 2335 2336 2337 2338 2339 2340 2341 2342 2343 2344 2345 2346 2347 2348 2349 2350 2351 2352 2353 2354 2355 2356 2357 2358 2359 2360 2361 2362 2363 2364 2365 2366 2367 2368 2369 2370 2371 2372 2373 2374 2375 2376 2377 2378 2379 2380 2381 2382 2383 2384 2385 2386 2387 2388 2389 2390 2391 2392 2393 2394 2395 2396 2397 2398 2399 2400 2401 2402 2403 2404 2405 2406 2407 2408 2409 2410 2411 2412 2413 2414 2415 2416 2417 2418 2419 2420 2421 2422 2423 2424 2425 2426 2427 2428 2429 2430 2431 2432 2433 2434 2435 2436 2437 2438 2439 2440 2441 2442 2443 2444 2445 2446 2447 2448 2449 2450 2451 2452 2453 2454 2455 2456 2457 2458 2459 2460 2461 2462 2463 2464 2465 2466 2467 2468 2469 2470 2471 2472 2473 2474 2475 2476 2477 2478 2479 2480 2481 2482 2483 2484 2485 2486 2487 2488 2489 2490 2491 2492 2493 2494 2495 2496 2497 2498 2499 2500 2501 2502 2503 2504 2505 2506 2507 2508 2509 2510 2511 2512 2513 2514 2515 2516 2517 2518 2519 2520 2521 2522 2523 2524 2525 2526 2527 2528 2529 2530 2531 2532 2533 2534 2535 2536 2537 2538 2539 2540 2541 2542 2543 2544 2545 2546 2547 2548 2549 2550 2551 2552 2553 2554 2555 2556 2557 2558 2559 2560 2561 2562 2563 2564 2565 2566 2567 2568 2569 2570 2571 2572 2573 2574 2575 2576 2577 2578 2579 2580 2581 2582 2583 2584 2585 2586 2587 2588 2589 2590 2591 2592 2593 2594 2595 2596 2597 2598 2599 2600 2601 2602 2603 2604 2605 2606 2607 2608 2609 2610 2611 2612 2613 2614 2615 2616 2617 2618 2619 2620 2621 2622 2623 2624 2625 2626 2627 2628 2629 2630 2631 2632 2633 2634 2635 2636 2637 2638 2639 2640 2641 2642 2643 2644 2645 2646 2647 2648 2649 2650 2651 2652 2653 2654 2655 2656 2657 2658 2659 2660 2661 2662 2663 2664 2665 2666 2667 2668 2669 2670 2671 2672 2673 2674 2675 2676 2677 2678 2679 2680 2681 2682 2683 2684 2685 2686 2687 2688 2689 2690 2691 2692 2693 2694 2695 2696 2697 2698 2699 2700 2701 2702 2703 2704 2705 2706 2707 2708 2709 2710 2711 2712 2713 2714 2715 2716 2717 2718 2719 2720 2721 2722 2723 2724 2725 2726 2727 2728 2729 2730 2731 2732 2733 2734 2735 2736 2737 2738 2739 2740 2741 2742 2743 2744 2745 2746 2747 2748 2749 2750 2751 2752 2753 2754 2755 2756 2757 2758 2759 2760 2761 2762 2763 2764 2765 2766 2767 2768 2769 2770 2771 2772 2773 2774 2775 2776 2777 2778 2779 2780 2781 2782 2783 2784 2785 2786 2787 2788 2789 2790 2791 2792 2793 2794 2795 2796 2797 2798 2799 2800 2801 2802 2803 2804 2805 2806 2807 2808 2809 2810 2811 2812 2813 2814 2815 2816 2817 2818 2819 2820 2821 2822 2823 2824 2825 2826 2827 2828 2829 2830 2831 2832 2833 2834 2835 2836 2837 2838 2839 2840 2841 2842 2843 2844 2845 2846 2847 2848 2849 2850 2851 2852 2853 2854 2855 2856 2857 2858 2859 2860 2861 2862 2863 2864 2865 2866 2867 2868 2869 2870 2871 2872 2873 2874 2875 2876 2877 2878 2879 2880 2881 2882 2883 2884 2885 2886 2887 2888 2889 2890 2891 2892 2893 2894 2895 2896 2897 2898 2899 2900 2901 2902 2903 2904 2905 2906 2907 2908 2909 2910 2911 2912 2913 2914 2915 2916 2917 2918 2919 2920 2921 2922 2923 2924 2925 2926 2927 2928 2929 2930 2931 2932 2933 2934 2935 2936 2937 2938 2939 2940 2941 2942 2943 2944 2945 2946 2947 2948 2949 2950 2951 2952 2953 2954 2955 2956 2957 2958 2959 2960 2961 2962 2963 2964 2965 2966 2967 2968 2969 2970 2971 2972 2973 2974 2975 2976 2977 2978 2979 2980 2981 2982 2983 2984 2985 2986 2987 2988 2989 2990 2991 2992 2993 2994 2995 2996 2997 2998 2999 3000 3001 3002 3003 3004 3005 3006 3007 3008 3009 3010 3011 3012 3013 3014 3015 3016 3017 3018 3019 3020 3021 3022 3023 3024 3025 3026 3027 3028 3029 3030 3031 3032 3033 3034 3035 3036 3037 3038 3039 3040 3041 3042 3043 3044 3045 3046 3047 3048 3049 3050 3051 3052 3053 3054 3055 3056 3057 3058 3059 3060 3061 3062 3063 3064 3065 3066 3067 3068 3069 3070 3071 3072 3073 3074 3075 3076 3077 3078 3079 3080 3081 3082 3083 3084 3085 3086 3087 3088 3089 3090 3091 3092 3093 3094 3095 3096 3097 3098 3099 3100 3101 3102 3103 3104 3105 3106 3107 3108 3109 3110 3111 3112 3113 3114 3115 3116 3117 3118 3119 3120 3121 3122 3123 3124 3125 3126 3127 3128 3129 3130 3131 3132 3133 3134 3135 3136 3137 3138 3139 3140 3141 3142 3143 3144 3145 3146 3147 3148 3149 3150 3151 3152 3153 3154 3155 3156 3157 3158 3159 3160 3161 3162 3163 3164 3165 3166 3167 3168 3169 3170 3171 3172 3173 3174 3175 3176 3177 3178 3179 3180 3181 3182 3183 3184 3185 3186 3187 3188 3189 3190 3191 3192 3193 3194 3195 3196 3197 3198 3199 3200 3201 3202 3203 3204 3205 3206 3207 3208 3209 3210 3211 3212 3213 3214 3215 3216 3217 3218 3219 3220 3221 3222 3223 3224 3225 3226 3227 3228 3229 3230 3231 3232 3233 3234 3235 3236 3237 3238 3239 3240 3241 3242 3243 3244 3245 3246 3247 3248 3249 3250 3251 3252 3253 3254 3255 3256 3257 3258 3259 3260 3261 3262 3263 3264 3265 3266 3267 3268 3269 3270 3271 3272 3273 3274 3275 3276 3277 3278 3279 3280 3281 3282 3283 3284 3285 3286 3287 3288 3289 3290 3291 3292 3293 3294 3295 3296 3297 3298 3299 3300 3301 3302 3303 3304 3305 3306 3307 3308 3309 3310 3311 3312 3313 3314 3315 3316 3317 3318 3319 3320 3321 3322 3323 3324 3325 3326 3327 3328 3329 3330 3331 3332 3333 3334 3335 3336 3337 3338 3339 3340 3341 3342 3343 3344 3345 3346 3347 3348 3349 3350 3351 3352 3353 3354 3355 3356 3357 3358 3359 3360 3361 3362 3363 3364 3365 3366 3367 3368 3369 3370 3371 3372 3373 3374 3375 3376 3377 3378 3379 3380 3381 3382 3383 3384 3385 3386 3387 3388 3389 3390 3391 3392 3393 3394 3395 3396 3397 3398 3399 3400 3401 3402 3403 3404 3405 3406 3407 3408 3409 3410 3411 3412 3413 3414 3415 3416 3417 3418 3419 3420 3421 3422 3423 3424 3425 3426 3427 3428 3429 3430 3431 3432 3433 3434 3435 3436 3437 3438 3439 3440 3441 3442 3443 3444 3445 3446 3447 3448 3449 3450 3451 3452 3453 3454 3455 3456 3457 3458 3459 3460 3461 3462 3463 3464 3465 3466 3467 3468 3469 3470 3471 3472 3473 3474 3475 3476 3477 3478 3479 3480 3481 3482 3483 3484 3485 3486 3487 3488 3489 3490 3491 3492 3493 3494 3495 3496 3497 3498 3499 3500 3501 3502 3503 3504 3505 3506 3507 3508 3509 3510 3511 3512 3513 3514 3515 3516 3517 3518 3519 3520 3521 3522 3523 3524 3525 3526 3527 3528 3529 3530 3531 3532 3533 3534 3535 3536 3537 3538 3539 3540 3541 3542 3543 3544 3545 3546 3547 3548 3549 3550 3551 3552 3553 3554 3555 3556 3557 3558 3559 3560 3561 3562 3563 3564 3565 3566 3567 3568 3569 3570 3571 3572 3573 3574 3575 3576 3577 3578 3579 3580 3581 3582 3583 3584 3585 3586 3587 3588 3589 3590 3591 3592 3593 3594 3595 3596 3597 3598 3599 3600 3601 3602 3603 3604 3605 3606 3607 3608 3609 3610 3611 3612 3613 3614 3615 3616 3617 3618 3619 3620 3621 3622 3623 3624 3625 3626 3627 3628 3629 3630 3631 3632 3633 3634 3635 3636 3637 3638 3639 3640 3641 3642 3643 3644 3645 3646 3647 3648 3649 3650 3651 3652 3653 3654 3655 3656 3657 3658 3659 3660 3661 3662 3663 3664 3665 3666 3667 3668 3669 3670 3671 3672 3673 3674 3675 3676 3677 3678 3679 3680 3681 3682 3683 3684 3685 3686 3687 3688 3689 3690 3691 3692 3693 3694 3695 3696 3697 3698 3699 3700 3701 3702 3703 3704 3705 3706 3707 3708 3709 3710 3711 3712 3713 3714 3715 3716 3717 3718 3719 3720 3721 3722 3723 3724 3725 3726 3727 3728 3729 3730 3731 3732 3733 3734 3735 3736 3737 3738 3739 3740 3741 3742 3743 3744 3745 3746 3747 3748 3749 3750 3751 3752 3753 3754 3755 3756 3757 3758 3759 3760 3761 3762 3763 3764 3765 3766 3767 3768 3769 3770 3771 3772 3773 3774 3775 3776 3777 3778 3779 3780 3781 3782 3783 3784 3785 3786 3787 3788 3789 3790 3791 3792 3793 3794 3795 3796 3797 3798 3799 3800 3801 3802 3803 3804 3805 3806 3807 3808 3809 3810 3811 3812 3813 3814 3815 3816 3817 3818 3819 3820 3821 3822 3823 3824 3825 3826 3827 3828 3829 3830 3831 3832 3833 3834 3835 3836 3837 3838 3839 3840 3841 3842 3843 3844 3845 3846 3847 3848 3849 3850 3851 3852 3853 3854 3855 3856 3857 3858 3859 3860 3861 3862 3863 3864 3865 3866 3867 3868 3869 3870 3871 3872 3873 3874 3875 3876 3877 3878 3879 3880 3881 3882 3883 3884 3885 3886 3887 3888 3889 3890 3891 3892 3893 3894 3895 3896 3897 3898 3899 3900 3901 3902 3903 3904 3905 3906 3907 3908 3909 3910 3911 3912 3913 3914 3915 3916 3917 3918 3919 3920 3921 3922 3923 3924 3925 3926 3927 3928 3929 3930 3931 3932 3933 3934 3935 3936 3937 3938 3939 3940 3941 3942 3943 3944 3945 3946 3947 3948 3949 3950 3951 3952 3953 3954 3955 3956 3957 3958 3959 3960 3961 3962 3963 3964 3965 3966 3967 3968 3969 3970 3971 3972 3973 3974 3975 3976 3977 3978 3979 3980 3981 3982 3983 3984 3985 3986 3987 3988 3989 3990 3991 3992 3993 3994 3995 3996 3997 3998 3999 4000 4001 4002 4003 4004 4005 4006 4007 4008 4009 4010 4011 4012 4013 4014 4015 4016 4017 4018 4019 4020 4021 4022 4023 4024 4025 4026 4027 4028 4029 4030 4031 4032 4033 4034 4035 4036 4037 4038 4039 4040 4041 4042 4043 4044 4045 4046 4047 4048 4049 4050 4051 4052 4053 4054 4055 4056 4057 4058 4059 4060 4061 4062 4063 4064 4065 4066 4067 4068 4069 4070 4071 4072 4073 4074 4075 4076 4077 4078 4079 4080 4081 4082 4083 4084 4085 4086 4087 4088 4089 4090 4091 4092 4093 4094 4095 4096 4097 4098 4099 4100 4101 4102 4103 4104 4105 4106 4107 4108 4109 4110 4111 4112 4113 4114 4115 4116 4117 4118 4119 4120 4121 4122 4123 4124 4125 4126 4127 4128 4129 4130 4131 4132 4133 4134 4135 4136 4137 4138 4139 4140 4141 4142 4143 4144 4145 4146 4147 4148 4149 4150 4151 4152 4153 4154 4155 4156 4157 4158 4159 4160 4161 4162 4163 4164 4165 4166 4167 4168 4169 4170 | 一、主机构成、浏览器之进程|线程|执行栈|工作流程1、主机构成 （1）硬盘（存储设备），“长期”存储操作系统、应用程序、用户数据等 A、浏览器把请求回来的资源放在硬盘里，根据具体情况进行加载，这就是缓存机制 B、当应用运行到特定路由时，浏览器把硬盘里的组件代码加载到内存，这就是路由懒加载 （2）内存，“临时”存储（正在运行的）指令和数据 （3）CPU，中央处理器，从内存中读取指令和数据，并执行和运算 （4）显卡，将（计算机生成的）图像数据转换为（显示器可以显示的）信号；GPU（图形处理器）是显卡的核心组成部分 （5）主板，连接着硬盘--内存--CPU--显卡、各种输入输出接口-等硬件设备 （6）电源 （7）机箱2、浏览器的基本概念 （1）IPC，进程间通信，全称Inter Process Communication （2）TCP，传输控制协议，全称Transmission Control Protocol （3）TLS，传输层安全，全称Transport Layer Security （4）GPU，图形处理器，全称Graphics Processing Unit （5）GUI，图形用户界面，全称Graphical User Interface （6）进程，指计算机中正在运行的程序的一个实例。是操作系统进行资源分配和调度的基本单位 （7）线程，操作系统能够进行运算调度的最小单位。它被包含在进程之中，是进程中的实际运作单位3、浏览器的进程 （1）主进程 （2）网络进程 （3）GPU进程 （4）渲染进程（唯一的前端进程） （5）插件进程 （6）扩展进程4、主进程的线程 （1）UI 线程（UI Thread） A、职责 a、负责浏览器的用户界面（UI）的绘制和更新，包括地址栏、书签栏、标签页、菜单等 b、接收用户的输入事件（如点击、滚动、键盘输入），并将事件分发给对应的子进程（如渲染进程） c、管理浏览器窗口的创建、关闭和布局 B、示例 a、用户点击地址栏时，UI 线程负责显示输入框并接收键盘输入 b、用户点击新建标签页按钮时，UI 线程负责创建新的标签页 （2）IO 线程（IO Thread）IO 线程（IO Thread） A、职责 a、负责处理与文件系统、网络请求等相关的输入输出操作 b、协调网络进程（Network Process）加载资源（如 HTML、CSS、JavaScript 文件） c、管理浏览器的缓存、Cookie 等数据。 B、示例 a、用户输入 URL 后，IO 线程负责通知网络进程加载网页资源 b、读取本地缓存数据时，IO 线程负责与文件系统交互 （3）存储线程（Storage Thread） A、职责 a、负责管理浏览器的本地存储数据，LocalStorage、SessionStorage，IndexedDB 数据库，Cache API（Service Worker 缓存） b、确保存储操作的线程安全，避免阻塞主线程 B、示例 a、网页使用 localStorage.setItem 存储数据时，存储线程负责将数据写入磁盘 （4）文件线程（File Thread） A、职责 a、负责处理与文件系统相关的操作，例如：读取和写入文件。管理下载的文件 b、与 IO 线程协作，完成文件的异步操作 B、示例 a、用户下载文件时，文件线程负责将文件保存到本地磁盘 （5）设备线程（Device Thread） A、职责 a、负责管理与硬件设备相关的操作，例如：访问摄像头、麦克风。处理地理位置信息（GPS）。与 GPU 进程协作，完成硬件加速渲染 b、确保设备操作的线程安全 B、示例 a、网页请求访问摄像头时，设备线程负责与操作系统交互，获取摄像头权限 （6）调试线程（Debug Thread） A、职责 a、负责支持开发者工具（DevTools）的功能 b、管理与调试相关的任务，例如：调试 JavaScript 代码，监控网络请求，检查 DOM 和 CSS B、示例 a、开发者打开 DevTools 时，调试线程负责与渲染进程通信，获取调试信息 （7）实用线程（Utility Threads） A、职责 a、负责处理一些辅助任务，例如：解压缩文件。编码解码数据（如 Base64、JSON）。处理加密操作（如 HTTPS 的 SSL/TLS） b、这些线程通常是按需创建的，用于执行特定的后台任务 B、示例 a、网页加载压缩的 JavaScript 文件时，实用线程负责解压缩文件 （8）GPU 主线程（GPU Main Thread） A、职责 a、负责与 GPU 进程（GPU Process）通信，协调图形渲染任务。 b、管理硬件加速渲染，例如：处理 CSS 动画。渲染 3D 图形（WebGL） c、确保图形渲染的高效性和流畅性 B、示例 a、网页使用 transform 或 opacity 实现动画时，GPU 主线程负责与 GPU 进程协作，完成硬件加速渲染 （9）网络线程（Network Thread） A、职责 a、负责处理与网络请求相关的任务 b、与网络进程（Network Process）协作，加载网页资源（如 HTML、CSS、JavaScript） B、示例 a、用户输入 URL 后，网络线程负责通知网络进程加载网页资源 （10）音频线程（Audio Thread） A、职责 a、负责处理音频相关的任务（如播放、解码） b、利用 GPU 或硬件加速提升音频处理性能 B、示例 a、网页播放音频时，音频线程负责解码和播放音频数据 （11）视频线程（Video Thread） A、职责 a、负责处理视频相关的任务（如播放、解码） b、利用 GPU 或硬件加速提升视频处理性能 B、示例 a、网页播放视频时，视频线程负责解码和播放视频帧 （12）监控线程（Watchdog Thread） A、职责 a、负责监控主进程的运行状态，检测潜在的问题（如死锁、崩溃） b、在主进程出现异常时，尝试恢复或重启进程 B、示例 a、如果主进程长时间无响应，监控线程会触发恢复机制5、网络进程的线程 （1）主线程（Main Thread） A、职责 a、负责网络进程的初始化和整体调度 b、管理与浏览器主进程和其他进程（如渲染进程）的通信 c、协调其他线程的工作，确保网络请求的高效处理 B、示例 a、当用户输入 URL 或点击链接时，主线程接收来自浏览器主进程的请求，并启动资源加载流程 （2）网络线程（Network Thread） A、职责 a、负责实际的网络请求操作，包括：发送 HTTP/HTTPS 请求、接收服务器响应、处理重定向、缓存、Cookie 等 b、实现网络协议栈（如 HTTP、WebSocket、QUIC） c、管理与服务器的连接池，复用 TCP 连接以提高性能 B、示例 a、加载网页时，网络线程负责向服务器发送请求并接收响应数据 （3）缓存线程（Cache Thread） A、职责 a、负责管理浏览器缓存，包括：检查请求的资源是否在缓存中。将服务器响应的资源存入缓存。清理过期的缓存数据。 b、支持 HTTP 缓存机制（如 Cache-Control、ETag） B、示例 a、如果请求的资源在缓存中有效，缓存线程会直接返回缓存数据，而无需发送网络请求 （4）DNS 线程（DNS Thread） A、职责 a、负责域名解析（DNS 查询），将域名转换为 IP 地址。 b、缓存 DNS 查询结果，以减少重复查询的开销。 c、支持 DNS 预取（DNS Prefetching）功能，提前解析页面中的域名。 B、示例 a、当用户访问 https://example.com 时，DNS 线程负责解析 example.com 的 IP 地址 （5）SSL/TLS 线程（SSL/TLS Thread） A、职责 a、负责处理 HTTPS 请求的加密和解密操作。 b、实现 SSL/TLS 协议，确保数据传输的安全性。 c、管理与服务器的安全连接（如握手、证书验证）。 B、示例 a、当用户访问 https://example.com 时，SSL/TLS 线程负责与服务器建立安全连接 （6）预加载线程（Preload Thread） A、职责 a、负责解析 HTML 文档中的预加载指令（如 <link rel="preload">）。 b、提前加载页面中可能用到的资源（如图片、字体、脚本）。 c、优化页面加载性能，减少用户等待时间。 B、示例 a、如果 HTML 中包含 <link rel="preload" href="image.png">，预加载线程会提前加载 image.png （7）代理线程（Proxy Thread） A、职责 a、负责处理通过代理服务器的网络请求。 b、管理与代理服务器的连接，支持多种代理协议（如 HTTP、SOCKS）。 c、 处理代理认证和错误重试。 B、示例 a、如果浏览器配置了代理服务器，代理线程会负责将请求转发给代理服务器 （8）WebSocket 线程（WebSocket Thread） A、职责 a、负责处理 WebSocket 连接，支持全双工通信。 b、管理与服务器的 WebSocket 握手、数据传输和连接关闭 B、示例 a、当网页使用 WebSocket 与服务器通信时，WebSocket 线程负责处理相关操作 （9）QUIC 线程（QUIC Thread） A、职责 a、负责处理基于 QUIC 协议的网络请求。 b、QUIC 是 Google 开发的基于 UDP 的传输协议，用于替代 TCP 和 TLS，提供更快的连接速度和更好的性能 B、示例 a、当浏览器支持 QUIC 时，QUIC 线程负责处理 QUIC 协议的请求和响应 （10）后台同步线程（Background Sync Thread） A、职责 a、负责处理后台同步任务（如 Service Worker 的 backgroundSync 功能） b、在网络恢复后，自动重试失败的任务 B、示例 a、当用户离线时提交表单，后台同步线程会在网络恢复后自动重新提交6、GPU进程的线程 （1）主线程（GPU Main Thread） A、职责 a、负责 GPU 进程的初始化和整体调度 b、管理与浏览器主进程、渲染进程的通信 c、协调其他线程的工作，确保图形渲染任务的高效执行 B、示例 a、当网页触发 CSS 动画时，GPU 主线程接收渲染进程的请求，并启动图形渲染任务 （2）渲染线程（Raster Thread） A、职责 a、负责将网页内容（如 DOM 元素、CSS 样式）光栅化（Rasterization），即将矢量图形转换为位图（像素）。 b、处理与图层（Layer）相关的渲染任务。 c、支持硬件加速渲染，利用 GPU 完成光栅化操作。 B、示例 a、当网页中的元素需要更新时，渲染线程负责将这些元素转换为位图，并提交给 GPU 进行渲染 （3）合成线程（Compositor Thread） A、职责 a、负责将多个图层（Layer）合成为最终的页面图像。 b、处理与滚动、动画、变换（如 transform、opacity）相关的任务。 c、直接与 GPU 交互，利用硬件加速完成合成操作。 B、示例 a、当用户滚动页面时，合成线程负责将不同图层合成为新的帧，并提交给 GPU 显示 （4）视频解码线程（Video Decode Thread） A、职责 a、负责视频解码任务，利用 GPU 的硬件解码能力加速视频播放 b、支持多种视频格式（如 H.264、VP9）的解码 c、将解码后的视频帧提交给合成线程进行显示 B、示例 a、当网页播放视频时，视频解码线程负责解码视频帧，并将其传递给合成线程 （5）OpenGL/Vulkan 线程（OpenGL/Vulkan Thread） A、职责 a、负责与 GPU 的底层 API（如 OpenGL、Vulkan）交互 b、执行与 3D 图形渲染相关的任务（如 WebGL、Canvas 3D） c、管理 GPU 资源的分配和释放 B、示例 a、当网页使用 WebGL 渲染 3D 图形时，OpenGL/Vulkan 线程负责调用 GPU API 完成渲染 （6）图像解码线程（Image Decode Thread） A、职责 a、负责图像解码任务，将压缩的图像格式（如 JPEG、PNG、WebP）解码为位图。 b、利用 GPU 的硬件解码能力加速图像解码。 c、将解码后的图像提交给渲染线程或合成线程。 B、示例 a、当网页加载图片时，图像解码线程负责解码图片，并将其传递给渲染线程 （7）共享资源线程（Shared Resource Thread） A、职责 a、负责管理 GPU 进程中的共享资源（如纹理、缓冲区） b、确保多个线程之间的资源访问是线程安全的 c、优化资源的使用，减少内存占用 B、示例 a、当多个线程需要访问同一纹理时，共享资源线程负责协调资源的分配和释放 （8）监控线程（Watchdog Thread） A、职责 a、负责监控 GPU 进程的运行状态，检测潜在的问题（如死锁、GPU 崩溃） b、在 GPU 进程出现异常时，尝试恢复或重启进程 B、示例 a、如果 GPU 进程长时间无响应，监控线程会触发恢复机制 （9）工具线程（Utility Threads） A、职责 a、负责处理一些辅助任务，例如：日志记录、性能监控、调试支持 b、这些线程通常是按需创建的，用于执行特定的后台任务 B、示例 a、当开发者工具启用 GPU 性能分析时，工具线程负责收集和记录性能数据7、渲染进程的线程 （1）主线程（Main Thread） A、职责 a、负责执行 JavaScript 代码（单线程执行） b、解析 HTML 文档，构建 DOM 树 c、解析 CSS 样式，构建 CSSOM 树 d、将 DOM 和 CSSOM 结合，生成渲染树（Render Tree） e、执行布局（Layout）和绘制（Paint）操作 f、处理用户交互事件（如点击、滚动、输入） B、示例 a、当用户点击按钮时，主线程负责执行按钮的 click 事件监听器 b、当页面加载时，主线程负责解析 HTML 和 CSS，并生成渲染树 （2）合成线程（Compositor Thread） A、职责 a、负责将页面的不同图层（Layer）合成为最终的图像 b、处理与滚动、动画、变换（如 transform、opacity）相关的任务 c、直接与 GPU 进程交互，利用硬件加速完成合成操作 B、示例 a、当用户滚动页面时，合成线程负责将不同图层合成为新的帧，并提交给 GPU 显示 （3）光栅化线程（Raster Thread） A、职责 a、负责将渲染树中的内容光栅化（Rasterization），即将矢量图形转换为位图（像素） b、利用 GPU 加速光栅化操作，提升性能 c、将光栅化后的位图提交给合成线程 B、示例 a、当页面中的元素需要更新时，光栅化线程负责将这些元素转换为位图 （4）工作线程（Worker Threads） A、职责 a、负责执行 Web Worker 中的 JavaScript 代码 b、处理复杂的计算任务，避免阻塞主线程 c、支持多线程并行计算，提升性能 B、示例 a、当网页使用 Web Worker 进行大量数据计算时，工作线程负责执行计算任务 （5）Service Worker 线程（Service Worker Thread） A、职责 a、负责执行 Service Worker 中的 JavaScript 代码 b、处理离线缓存、推送通知、后台同步等任务 c、独立于主线程运行，即使页面关闭也能执行任务 B、示例 a、当网页使用 Service Worker 缓存资源时，Service Worker 线程负责管理缓存 （6）事件线程（Event Thread） A、职责 a、负责监听和分发用户输入事件（如点击、滚动、键盘输入） b、将事件传递给主线程或其他相关线程进行处理 B、示例 a、当用户点击页面时，事件线程负责将点击事件传递给主线程 （7）定时器线程（Timer Thread） A、职责 a、负责管理 JavaScript 中的定时器（如 setTimeout、setInterval） b、在指定时间触发回调函数 B、示例 a、当页面使用 setTimeout 设置定时任务时，定时器线程负责在指定时间触发回调 （8）网络线程（Network Thread） A、职责 a、负责处理与网络请求相关的任务 b、与浏览器主进程的网络进程协作，加载网页资源（如 HTML、CSS、JavaScript） B、示例 a、当页面加载时，网络线程负责请求和接收资源 （9）存储线程（Storage Thread） A、职责 a、负责管理（当前标签页的）本地存储数据（如 localStorage、IndexedDB） b、确保存储操作的线程安全，避免阻塞主线程 B、示例 a、当网页使用 localStorage.setItem 存储数据时，存储线程负责将数据写入磁盘 （10）音频线程（Audio Thread） A、职责 a、负责处理音频相关的任务（如播放、解码） b、利用 GPU 或硬件加速提升音频处理性能 B、示例 a、当网页播放音频时，音频线程负责解码和播放音频数据 （11）视频线程（Video Thread） A、职责 a、负责处理视频相关的任务（如播放、解码） b、利用 GPU 或硬件加速提升视频处理性能 B、示例 a、当网页播放视频时，视频线程负责解码和播放视频帧 （12）工具线程（Utility Threads） A、职责 a、负责处理一些辅助任务，例如：日志记录、性能监控、调试支持 b、这些线程通常是按需创建的，用于执行特定的后台任务 B、示例 a、当开发者工具启用性能分析时，工具线程负责收集和记录性能数据8、与主线程相关的三个概念 （1）同步任务， A、直接推入主线程的执行栈执行，不依赖事件循环 （2）异步任务，分为微任务和宏任务 A、在其它线程处理完，其回调函数被放入对应的任务队列中， B、当主线程的执行栈为空时，“事件循环”会从任务队列中取出任务，推入执行栈执行 （3）事件循环 A、微任务队列： a、事件循环会一次性将所有微任务推入执行栈执行 b、执行时 b1、可能产生新的微任务，会立即执行， b2、可能会产生新的宏任务，不会立即执行，而是被放入任务队列，等待当前事件循环结束后再执行 c、微任务有， c1、Promise.then() c2、async/await，是Promise.then()的语法糖 c3、MutationObserver，用于监视DOM树变化的接口 c4、语法糖，在计算机语言中添加的语法，不会改变语言的功能，但可以让程序员更方便地编写代码 B、宏任务队列： a、事件循环每次只取出一个宏任务推入执行栈执行 b、执行时 b1、可能产生新的微任务，会立即执行， b2、可能会产生新的宏任务，不会立即执行，而是被放入任务队列，等待当前事件循环结束后再执行 c、宏任务有， c1、setTimeout()、setInterval()、 c2、DOM事件（如点击、滚动等）、 c3、网络请求（如XMLHttpRequest、fetch）、 c4、I/O操作（Input/Output，如文件读写） D、轮询执行： a、事件循环会不断重复检查微任务队列和宏任务队列，直到两者都为空 附1、示例，vue.$nextTick，在DOM更新完成后执行回调函数 getText () { this.showText = true; this.$nextTick(() => {//加上这层壳，下面内容在DOM更新后执行 var innerHTML = document.getElementById('divBox').innerHTML; console.log(innerHTML); }) } 附2、示例，宏任务和微任务的执行顺序 说明、第1个宏任务执行所有的同步、所有的微任务、所有的再生微任务 第2个宏任务执行所有的同步、所有的微任务 第3个宏任务执行再生宏任务 setTimeout(function() { new Promise(function(resolve) { /* setTimeout(function() { */ resolve() /* }) */ }).then(function() { new Promise(function(resolve) { console.log('宏1-1-微任务------------------'); resolve() }).then(function() { console.log('宏1-2-微任务再生------------------'); }) }) new Promise(function(resolve) { resolve() }).then(function() { new Promise(function(resolve) { console.log('宏2-1-微任务================'); resolve() }).then(function() { console.log('宏2-2-微任务再生================'); }) }) }) setTimeout(function() { new Promise(function(resolve) { console.log('宏3-1-同步1'); resolve() }).then(function() { console.log('宏3-2-微任务1'); }) new Promise(function(resolve) { console.log('宏4-1-同步2'); resolve() }).then(function() { console.log('宏4-2-微任务2'); }) }) new Promise(function(resolve) { console.log('宏0-同步1'); resolve() }).then(function() { console.log('宏0-微任务2'); }) console.log('宏0-同步3'); 9、浏览器的工作流程，分布在各个进程中 附、域名与IP A、域名：Domain Name a、域名系统，Domain Name System，DNS B、IP： a、版本：IPv4、IPv6 b、IPv4个数：约43亿个。每段是256个（2的8次方），4段是256*256*256*256=42,9496,7296个 （1）域名解析，把域名解析成IP A、浏览器检查本地DNS缓存，如果有缓存且未过期，直接使用缓存中的IP地址，如果本地没有DNS缓存， B、浏览器检查操作系统的hosts文件，如果域名在hosts中有对应的IP地址，浏览器会直接使用该IP，如果没有对应的IP地址 a、127.0.0.1 test.cctv.com C、浏览器向DNS服务器发起查询，查询步骤如下 a、本地DNS缓存：检查操作系统是否有缓存 b、递归查询：向配置的DNS服务器（如ISP提供的DNS或自定义DNS）发送请求 c、迭代查询：如果DNS服务器没有缓存，会从根域名服务器开始逐级查询，直到找到对应的IP地址 D、DNS服务器返回IP地址后，浏览器会缓存该结果，并使用该IP地址建立连接 （2）建立连接 A、浏览器获取到服务器的IP地址后，会根据HTTP或HTTPS协议与服务器建立连接 B、对于HTTP/1.x，通常会使用TCP三次握手来建立连接 C、对于HTTPS，还需要在TCP连接的基础上进行SSL/TLS握手，以建立安全的加密连接，保证数据传输的安全性 （3）发送请求 A、连接建立后，浏览器会根据用户的操作或页面的需求，按照HTTP协议的格式构造请求消息 B、请求消息中包含请求方法（如GET、POST等）、请求头（包含用户代理、缓存控制等信息）、请求体（如果是POST等方法，可能包含提交的数据）等内容 C、然后将请求消息发送给服务器 （4）服务器处理请求 A、服务器接收到浏览器发送的请求后，会根据请求的内容进行相应的处理 B、服务器可能会从数据库中查询数据、进行业务逻辑处理等，然后根据处理结果生成响应消息 C、响应消息也包含响应头（如状态码、内容类型等）和响应体（通常是HTML、CSS、JavaScript等资源或数据） （5）接收响应 A、浏览器接收服务器返回的响应消息，根据响应头中的状态码判断请求是否成功 B、如果状态码是200，表示请求成功，浏览器会继续处理响应内容 C、如果是4xx或5xx等错误码，则表示请求出现了问题，浏览器会根据情况进行相应的提示或处理 （6）页面渲染 A、解析HTML：浏览器会将接收到的HTML代码解析成一个DOM（文档对象模型）树，DOM树的节点对应着HTML文档中的各种元素，如标签、属性等 B、解析CSS：同时，浏览器会解析CSS代码，构建CSSOM（CSS对象模型）树，CSSOM树描述了页面中各个元素的样式信息 C、构建渲染树：将DOM树和CSSOM树结合起来，构建渲染树。渲染树只包含需要显示的节点及其样式信息，不包含如<script>、<meta>等不需要显示的节点 D、布局计算：根据渲染树，浏览器会进行布局计算，确定每个元素在页面中的位置和大小等几何信息 E、绘制渲染：最后，浏览器根据布局计算的结果，将各个元素绘制到屏幕上，形成用户看到的页面 F、在绘制过程中，浏览器可能会进行分层处理、合成等操作，以提高渲染性能和效果 （7）关闭连接（四次挥手，断开TCP连接） A、页面渲染完成后 B、如果是HTTP/1.x协议，浏览器和服务器之间的连接可能会根据连接头中的设置（如Connection:close或Connection:keep-alive）来决定是否关闭连接 C、如果是HTTP/2或HTTP/3等协议，连接可能会被复用，以便后续的请求和响应更加高效10、页面渲染 （1）解析HTML （1-1）解析html标签，DOM树创建开始 A、document.readyState = ‘loading’ （1-2）解析head标签里的的link标签，加载外部css A、同步加载外部css，CSS树开始创建 B、link异步加载外部css、js， a、rel，规定当前文档和被链接文档之间的关系 b、<link rel="preload" href="style.css" as="style"> c、<link rel="preload" href="js文件" as="script"> d、这是js异步加载的流行方式，defer和async为落后方式 （1-3）解析head标签里的的script标签，同步加载外部js A、浏览器加载并阻塞，加载完成并执行该脚本，可能修改DOM树、CSS树 B、script异步加载外部js，有async、defer a、有async属性的js，加载完成后立即执行，因而无序 （1-4）解析body标签，丰富DOM树 A、同步解析其它标签 B、img标签的src异步加载图片 （1-5）解析html标签下方的script标签，同步加载外部js A、浏览器加载并阻塞，加载完成并执行该脚本，可能修改DOM树、CSS树 B、script异步加载外部js，有async、defer a、有async属性的js，加载完成后立即执行，因而无序 （1-6）DOM树构建完成，此时页面已经可以交互了 A、document.readyState = ‘interactive’//交互的 B、有defer属性的脚本，按照顺序执行完毕 C、DOMContentLoaded事件执行，从“同步脚本执行”到“事件驱动阶段”，可以 a、绑定事件监听器，响应用户交互或其他事件 b、进行异步操作，如AJAX请求、定时器等，不会阻塞主线程 （2）解析CSS （3）构建渲染树 （4）布局计算 （5）绘制渲染（首次） （6）执行异步，可能再次进行绘制（渲染）的 A、有async属性的js加载完成后 B、img、css等加载完成后 （7）异步执行完毕 A、document.readyState = ‘complete’ B、load事件执行11、其它 （1）怎样查看客户端首次渲染 A、浏览器输入http://localhost:8000 B、enter C、打开控制台console D、刷新浏览器 （2）<a href="http://www.example.com" target="_blank"/> A、target="_blank"，攻击者会针对`window.opener`API进行恶意行为的攻击，有可能导致钓鱼安全漏洞问题 B、target="_blank"，使用时，配合使用rel="noopenner noreferrer" （3）客户端渲染，CSR，Client-Side-Render，服务器收到请求后，发送数据给浏览器，浏览器用js把数据拼接到html里，然后渲染 A、优势 a、公共部分不重复加载 b、擅长网站交互 c、初始加载后，页面加载速度更快 B、劣势 a、初始加载需要更长的时间 b、不利于SEO C、又叫单页面应用，SPA，Single-Page-Application （4）服务端渲染，SSR，Server-Side-Render，服务器收到请求后，把数据拼接到html里，发送给浏览器渲染 A、优势 a、初始页面加载速度快 b、利于SEO B、劣势 a、公共部分重复加载 b、不擅长网站交互 二、前端性能检测与分析1、前端性能检测工具-Chrome-performance 来源，https://blog.csdn.net/qq_42231156/article/details/124617782 （1）Summary，环状图，各类行为耗时，不排序 Loading，网络通信和html解析 Scripting，JavaScript执行 Rendering，样式计算和布局 Painting，重绘 System，系统事件 Idle，空闲时间 （2）Bottom-Up，表格，各项行为耗时，根据首列Self Time从高到底 （3）Call Tree，表格，各项行为耗时，根据次列Total Time从高到底 （4）Event Log，表格，各项行为耗时，根据首列Start Time从先到后 （5）Timings FP（First Paint），渲染出第一个像素点。FP一般在HTML解析完成或者解析一部分时候触发。 FCP（First Contentful Paint），渲染出第一个内容。这里的“内容”可以是文本、图片、canvas。 LCP（largest contentful Paint），渲染出最大内容。 DCL（DOMContentLoaded），DOM解析完毕。 L（Onload Event），页面中依赖的所有资源加载完的事件。 已废，FMP（First Meaningful Paint），首次渲染有意义的内容的时间，“有意义”没有一个标准的定义，FMP的计算方法也很复杂。2、前端性能分析工具-Chrome-LightHouse 来源，https://www.cnblogs.com/ypSharing/p/15793767.html （1）Lighthouse 已经直接集成到 Chrome60+ 的调试工具 （2）生命周期Lighthouse 运行测评的过程有一套完整的生命周期，可以划分成三个主要流程： Collecting，收集数据 Auditing，分析数据 Report，生成报告 （3）生成报告，在当前页面-F12-Lighthouse-勾选检测项-Analyze page load （4）报告指标（metrics） Performance，性能 Accessibility，访问无障碍， Best Practice，最佳实践（优化） SEO，搜索引擎优化 PWA，渐进式(接近原生app的)web app，Progressive Web App3、其他相关 （1）recorder：录制性能测试脚本 （2）snapshot：快照 （3）Performance insights：性能见解 （4）Simulation Information：模拟信息 （5）APLUS_CNA：在网站上登记用户行为的统计数据。用于网站运营商的内部分析三、后端缓存1、manifest缓存， （1）前端引入Application Cache文件，manifest.appcache，如下： <html manifest="manifest.appcache">//属于http请求；cache缓存；Apache阿帕奇，是世界使用排名第一的Web服务器软件 ... </html> （2）在第一次访问时，浏览器加载完HTML文档后，会加载并缓存manifest文档及文档所列资源 （3）之后访问，浏览器首先会查看manifest文件是否被修改（无论是内容还是注释） A、如果被修改，将当做第一次访问，重新根据manifest文件内容进行缓存 B、如果没有被修改，浏览器直接从缓存中加载文档和资源，不会访问网络 （4）在缓存多个资源文件时，浏览器下载资源文件会先放在一个临时的缓存中， A、如果有任何一个资源文件下载失败，浏览器将停止其他缓存资源的下载，并清除临时缓存 B、如果所有资源文件都被成功下载，浏览器将会把这些资源文件以及引用manifest文件的HTML文档移动到永久离线缓存中 （5）后端配置Application Cache文件，manifest.appcache，如下： //以下头部信息 CACHE MANIFEST # version xx.xx.xx //以下哪些资源文件需要被缓存 CACHE: needBeCached.png needBeCached2.js //以下哪些文件不需要缓存 NETWORK: notNeedBeCached.html notNeedBeCached2.css //以下后备页面，当资源无法访问时，浏览器会使用该页面 FALLBACK: /404.html2、http缓存 附、HTTP教程，https://www.runoob.com/http/http-tutorial.html （1）特征，在第一次的响应报文中，服务器返回了cache-control、Last-Modified、Expires、etag字段，那么在后续请求时，才带上这些字段 （2）作用，Web应用程序使用HTTP协议传输数据 （3）使用流程 A、前端向后台发送请求 B、后台通过返回304让前端使用缓存（此处的疑问，如果此时缓存已经失效了，怎么办？正常情况下，返回304就是缓存还没有失效） C、前端可以通过问号传参绕开缓存 （4）以下是缓存限制 A、Cache-Control，响应头，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private 来源https://baike.baidu.com/item/Cache-control/1885913?fr=aladdin public，所有内容都将被缓存(客户端和代理服务器都可缓存) private，内容只缓存到私有缓存中(仅客户端可以缓存，代理服务器不可缓存) no-cache，必须先与服务器确认返回的响应是否被更改 no-store，所有内容都不会被缓存到缓存或Internet临时文件中 must-revalidation/proxy-revalidation，如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证 max-age=xxx，xxx为数字，缓存在xxx秒后失效 B、Expires，响应头，其value为日期时间，该日期时间后缓存失效 C、Last-Modified 和 If-Modified-Since Last-Modified，响应头，其value为日期时间，服务器最后修改该文件的日期时间 If-Modified-Since，请求头，如果Last-Modified后，内容没有变化，服务器则返回304，客户端直接从本地加载页面 D、Etag和If-None-Match，被请求变量的实体值 来源https://baike.baidu.com/item/ETag/4419019 ETag，响应头，验证令牌，如"50b1c1d4f775c61:df3" If-None-Match，请求头，如果Etag和服务器计算出来的Etag匹配，为False，返回304 使用场景，不希望客户端知道文件被修改；If-Modified-Since无法判断1秒内的多次修改；某些服务器不能精确得到文件的最后修改时间 （5）局限，HTTP协议是无状态协议，短连接，其特征是 A、一旦数据交换完毕，客户端与服务器端的连接就会关闭 B、服务器无法从连接上跟踪会话 C、再次交换数据需要建立新的连接四、前端优化方案 附、方案概览，压缩静态资源、使用请求动画帧、减少请求、取消（阻止）请求、异步加载、懒加载、缓存，共7项 附、关于缓存 A、定义，把后台数据存到前端，再次使用时，不用再次请求 B、方案，cookie、session、sessionStorage、localStorage、WebSqlDatabase、indexedDB、vuex1、压缩静态资源，gzip压缩 来源，https://blog.csdn.net/weixin_47516343/article/details/125392505 （1）gzip压缩css、js，前端携带Accept-Encoding:gzip、后端返回Content-Encoding:gzip， （2）服务器端根据接口路径，读取自身的原始的、未经压缩的静态资源，然后在内存中对其进行“Gzip压缩”，并将压缩后的结果放在响应体中返回给浏览器 （3）已经被Webpack和compression-webpack-plugin进行“Gzip压缩”的静态资源，直接将其放在响应体中返回给浏览器2、使用请求动画帧，requestAnimationFrame， （1）是“HTML5的新增API” （2）其回调函数的执行频率与浏览器的刷新频率（60Hz,1000毫秒60次，16.67毫秒1次）一致，在页面销毁或隐藏时，自动停止执行，完全避免了setInterval的缺点 （3）其回调函数不进入微任务队列或宏任务队列，而是由浏览器在渲染帧中直接调度，执行优先级高于宏任务，低于微任务 （4）示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>请求动画帧</title> <style> #divUp { width: 200px; height: 100px; line-height: 100px; background: rgb(131, 128, 128); border-radius: 60px; text-align: center; font-size: 20px; color: #000; position: absolute; } </style> </head> <body> <div id="divUp">请求动画帧</div> </body> </html> <script> window.onload = function () { //以下公共部分 var time = 1; var element = document.getElementById("divUp") var initMillseconds = new Date().getTime(); //以下情形1，requestAnimationFrame function animate() { var nowMillseconds = new Date().getTime(); var between = (nowMillseconds - initMillseconds); initMillseconds = nowMillseconds; if (time < 200) { time++; element.style.transform = 'translate(' + time * 3 + 'px)'; console.log( time, between, element ); requestAnimationFrame(animate); } } requestAnimationFrame(animate); //以下情形2，setInterval /* var interval = setInterval(function(){ var nowMillseconds = new Date().getTime(); var between = (nowMillseconds - initMillseconds); initMillseconds = nowMillseconds; if (time < 100) { time++; element.style.transform = 'translate(' + time * 10 + 'px)'; console.log( time, between, element ); }else{ clearInterval(interval) } },33) */ } </script> 3、减少请求 附、HTTP教程，https://www.runoob.com/http/http-tutorial.html （1）减少http同步请求（html页面，表单action）， （2）减少http异步请求（ajax请求，即XMLHttpRequest） （3）减少图片请求，使用雪碧图(多张小图片合并成一张大图；sprite，精灵，雪碧) 附、骨架屏(初始化时，定义样式类如.header、.nav、.footer的背景色；在window.onload里，把背景色改为背景图片)4、取消（阻止）请求，“终止请求” （1）取消上次多请求-2种情形 A、tab切换，请求容器 a、把请求容器传给httpRequest data:{ return { nowTabName: '', otherTabReq: {}, isLoading: false, } }, methods: { onClickTab(tabName) { if(this.nowTabName === tabName && this.isLoading) return;//连续点击本tab if(Object.keys(this.otherTabReq).length){//点击其他tab的请求结果还没返回，就点击本tab for(var attr in this.otherTabReq)this.otherTabReq[attr]()//相当于原生的xhr.abort() } this.nowTabName = tabName; this.isLoading = true; httpRequest({ otherTabReq: [this.otherTabReq,'firstReq']}).then(function(){ delete this.otherTabReq.firstReq; if(!Object.keys(this.otherTabReq).length)this.isLoading = false; }).catch(function(){ delete this.otherTabReq.firstReq; if(!Object.keys(this.otherTabReq).length)this.isLoading = false; }) }, }, b、在httpRequest里，用cancel填充请求容器， c、在当前页面，遍历请求容器，执行cancel B、页面跳转，vuex a、在httpRequest里，把本页面的所有“请求取消”都存储到vuex里， b、在router.beforeEach里，把vuex里的所有“请求取消”都执行， c、示例 export default new Vuex.Store({ state: {}, getters: {}, mutations: { pushToken(state, cancel) { state.cancelTokenArr.push(cancel);两个方法 }, clearToken(state) { state.cancelTokenArr.forEach(function(cancel){ if (cancel) { cancel(); } }); } } }) router.beforeEach(function(to, from, next) { store.commit("clearToken"); next(); }); axios.interceptors.request.use( function(config){ config.cancelToken = new axios.CancelToken(function(cancel) { store.commit("pushToken", cancel); }); return config; }, ); （2）阻止本次单请求-2种情形， A、判断条件 function onSubmit(){ if(this.selectedNum != this.num ){//不满足条件，不发出请求 var text = this.selectedNum>this.num?'多于':'少于'; Toast.success('勾选的人数'+text+'参会人数');//内置防抖 return } httpRequest(data).then(function（）{}) }, B、弹窗确认 function onSubmit(){//Vant Dialog.confirm({ title: '标题', message: '你真要删除吗？', beforeClose: function(action, done) { if (action === 'confirm') { //不点击确认按钮，不发出请求 httpRequest(data).then(function（）{ done();//弹窗消失 Toast.success('删除完成！'); }) } else {//点击取消按钮 done(false);//弹窗不消失 } } }); }, function handleClose(done){//elementUI this.$confirm('确认关闭？') .then(_ => { done(); }) .catch(_ => {}); }, （3）阻止下次单请求-4种情形， A、根据是否正在转圈 data:{ return { isLoading: false, //取消方法 } } methods:{ onSubmit() { if(this.isLoading)return;//上次请求没结束，不发出下次请求 this.isLoading = true; httpRequest(data).then(function（）{ this.isLoading = false; }) } } B、滚轮加载，在“本次请求结束”或“间隔时间已够”时，才发出下次请求 C、去抖，重新计时，到时间间隔，才发出下次请求 D、节流，不重新计时，到时间间隔，就发出下次请求5、异步加载 来源，https://www.runoob.com/tags/tag-script.html 来源，https://www.runoob.com/tags/tag-link.html （1）script标签的异步加载属性，async和defer， 来源，https://blog.csdn.net/z9061/article/details/83011175 来源，https://blog.csdn.net/weixin_45792953/article/details/112168794 附、名词解释 a、script，标签同时拥有src和该属性时，该属性有作用；其它情况等同于内嵌脚本，脚本同步执行 b、defer，推迟，新线程“推迟”加载；DOM树构建完成时“执行”，多个defer顺序执行，接着DOMContentLoaded执行； c、async，异步，新线程“异步”加载；下载完毕，立即“执行”，多个async无序执行，是“HTML5的新增属性”，优先级高； <!doctype html> <html> <head> <meta charset="utf-8"> <title>执行顺序</title> </head> <body> <div>执行顺序</div> </body> </html> <script> document.onreadystatechange = function () { console.log('document.readyState 的值为' + document.readyState); } document.addEventListener("DOMContentLoaded", function (event) { console.log("DOMContentLoaded 已执行"); }); window.onload = function () { console.log("onload 已执行"); } window.onbeforeunload = function () { console.log("onbeforeunload 已执行"); } window.onunload = function () { console.log("onunload 已执行"); } // 以上打印结果为： // document.readyState 的值为interactive //交互的；unload，卸载；load，加载 // DOMContentLoaded 已执行 // document.readyState 的值为complete // onload 已执行 // onbeforeunload 已执行 // onunload 已执行 </script> （2）link标签的预加载属性，preload、prefetch、preconnect、prerender，可预加载js、css文件 来源，https://cloud.tencent.com/developer/article/1880213 来源，https://www.wenjiangs.com/doc/vlf1m6xwg8mu 附、名词解释 a、preload，预加载，尽早加载，按需执行 b、prefetch，预提取，空闲加载，按需执行 c、dns-prefetch，dns预提取，跨域时使用，在请求资源之前解析域名 d、rel，即relate，关联 A、preload和prefetch <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="icon" href="favicon.ico"> <title>phone-cctv</title> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <link href="css/about.6e313ccb.css" rel="prefetch"> <link href="js/about.f2ea88a2.js" rel="prefetch"> <link href="css/app.1bd5cdf2.css" rel="preload" as="style"> <link href="css/chunk-vendors.598a6ee1.css" rel="preload" as="style"> <link href="js/app.9ecd9d37.js" rel="preload" as="script"> <link href="js/chunk-vendors.f223f1fe.js" rel="preload" as="script"> <link href="css/chunk-vendors.598a6ee1.css" rel="stylesheet"> <link href="css/app.1bd5cdf2.css" rel="stylesheet"> </head> <body> <div id="app"></div> <script src="js/chunk-vendors.f223f1fe.js"></script> <script src="js/app.9ecd9d37.js"></script> </body> </html> B、dns-prefetch 来源，https://developer.mozilla.org/zh-CN/docs/Web/Performance/dns-prefetch <html> <head> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> <!-- and all other head elements --> </head> <body> <!-- your page content --> </body> </html> C、样式预加载之.css @import url(''); @font-face{ font-family: myFirstFont; src: url('https://fonts.gstatic.com/fonts/Sansation_Light.ttf'); } div{ font-family: myFirstFont; } D、样式预加载之style <style> @import url(''); </style>6、懒加载。级联选择器，组件，组件库，见附2 （1）级联选择器 来源1，https://blog.csdn.net/Christina0109/article/details/127572569 来源2，https://element.eleme.cn/#/zh-CN/component/cascader <el-cascader class="cascader" ref="myCascader" v-model="areaCode" clearable placeholder="请选择查询区域" :props="caprops" @change="handleChange" :show-all-levels="false" > </el-cascader> export default { data () { return { caprops: { value:'code', // 点击获取的值的字段名 checkStrictly: true, lazy: true, lazyLoad: this.layzesss } } }, methods: { async layzesss(node,resolve) { let level = node.level // 当前层级 三层的为 0，1，2 let result = [] switch (level) { case 0: // 这里是由于后端返回的所有的数据，对返回的数据进行了筛选this.firstLevel 是第一层数据，也可换成相关接口 result = this.firstLevel break; case 1: // 取出当前选择的节点的value值 let firstParams = node.value result = this._.filter(this.secondLevel,['parentcode', firstParams]) // this.secondLevel 是第二层数据 break; case 2: let secondParams = node.value result = this._.filter(this.thirdLevel,['parentcode', secondParams ]) //this.thirdLevel 第三层数据 break; default: result= [] break; } resolve(result); }, } } （2）组件 A、懒加载 const Index = () => import('./Index.vue'); const routes = [ { path: '/', name: 'Index', component: (): Index, meta: { title: '游戏活动' } } ] B、正常加载 import Index from "../views/Index.vue" const routes = [ { path: '/', name: 'Index', component: Index, meta: { title: '游戏活动' } } ] （3）组件库 来源，https://blog.csdn.net/sinat_35538827/article/details/101447333 A、安装插件 npm i babel-plugin-component -D B、配置 babel.config.js module.exports = { presets: [ '@vue/app', ['@babel/preset-env', // 添加 babel-preset-env 配置 { 'modules': false } ] ], plugins: [ [ 'component', { 'libraryName': 'element-ui', // 按需引入的组件库 'styleLibraryName': 'theme-chalk' // 按需引入的样式 } ] ] } C、main.js import { Button, Select } from 'element-ui' // 此时的样式不需要引入了，样式自动按需来引入 // import 'element-ui/lib/theme-chalk/index.css' Vue.use(Button) Vue.use(Select) Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app')五、前端缓存-7种（cookie、session、sessionStorage、localStorage、WebSqlDatabase、indexedDB、vuex）1、cookie缓存 （1）特征，大小一般为4K，内容可能包含登录信息、失效时间 （2）作用，服务器通过给客户端颁发cookie来确认用户的身份，解决HTTP无状态协议不能识别请求者身份、失效时间等问题 （3）使用流程 A、客户端第1次发送请求 B、服务器接收到请求-->创建cookie对象-->存储到响应头-->发送到客户端 C、客户端自动解析保存cookie-->客户端再次发送请求时自动携带（可能已被用户修改的）cookie D、服务器解析cookie （4）注意事项 A、前后端应当通过获取、解析、赋值对cookie进行增减，否则会抹掉此前的改动与存储 B、前端js不能跨域读取cookie C、浏览者可以通过Application-Storage-Cookies-网址，查看该网站cookie的每一个键值对 （5）写法 document.cookie = 'myname=牛马;expires=1111' document.cookie = 'username=name'; document.cookie = `username=${encodeURIComponent('用户名')}`; document.cookie = `username=name; expires=${new Date( '2023-1-01 00:00:00' )}`; document.cookie = 'username=name; max-age=5'; document.cookie = `username=name; max-age=${24 * 3600 }`; document.cookie = 'username=name; domain=www.xxxxx.com'; document.cookie = 'username=name; path=/home'; 内层可以访问外层作用域 console.log(document.cookie); （5）解析为对象的方法 function cookieToObject(cookie){ var object = {}; var array = cookie.split("; "); for (var item of array){ var arrayIn = item.split("="); object[arrayIn[0]] = arrayIn[1]; }; return object } console.log( cookieToObject(document.cookie).userSeqId ); （6）Cookies.js//供前端修改cookie的插件 A、增，Cookies.set('name', 'value', { expires: 7, path: '' })//为当前页创建有效期7天的cookie B、删，Cookies.remove('name'); Cookies.remove('name', { path: '' }); C、改，Cookies.set('name', 'value1', { expires: 8, path: '../' })//为当前页创建有效期7天的cookie D、查， 字符串，new Cookie().cookie_string; 对象，new Cookie().cookie_obj; map，new Cookie().cookies; 单个，Cookies.get('name'); Cookies.get(); // => 'value' ；// => { name: 'value' } E、引入，import Cookies from 'js-cookie'2、session缓存， （1）后端缓存，存储在后端 （2）客户端请求服务器，服务器可以把用户状态以session的方式记录在服务器上， （3）当浏览器再请求该网站时，服务器根据cookie确定该用户的身份后，只需要从该session中查找该用户的状态就可以了3、sessionStorage存储和localStorage存储相同点 （1）增 A、localStorage['name'] = 'Lucy'; B、localStorage.name = 'Lucy'; C、localStorage.setItem('name','Lucy'); （2）删 A、delete localStorage['name']; B、delete localStorage.name; C、localStorage.removeItem('name'); D、localStorage.clear(); //清除所有的值 （3）改 A、localStorage['name'] = 'Lucy'; B、localStorage.name = 'Lucy'; C、localStorage.setItem('name','Lucy'); （4）查 A、localStorage["name"]; B、localStorage.name; C、localStorage.getItem('name'); D、localStorage.hasOwnProperty('name'); //true 或 false E、localStorage.valueOf(); //取出所有值 （5）存储大小，都是5MB （6）只能存储字符串类型，其它类型先用JSON.stringfy转成字符串存储，后用JSON.parse转成对象取用 （7）用法示例-真实项目： A、localStorage.setItem(STORAGE_KEY,JSON.stringify(todos)) //var STORAGE_KEY = 'todos-vuejs' B、JSON.parse(localStorage.getItem(STORAGE_KEY)||'[]')4、localStorage和sessionStorage不同点，百度“LocalStorage和sessionStorage的区别” （1）localStorage的数据是持久化的，可以在同源的不同页面之间共享 （2）sessionStorage的数据则是临时的，只能在“本浏览器本窗口（同一浏览器窗口内）”的“不同标签页之间”共享，关闭本窗口，则数据清除 （3）“本浏览器本窗口”，不包含“点击本浏览器图标，打开一个新窗口”5、WebSqlDatabase存储 （1）基本认知 A、SQL(Structured Query Language)，结构化查询语言 B、Web SQL Database，是“HTML5的新增API”，是一种在客户端使用SQL语句操作数据库的技术 C、WebKit浏览器，包括Safari和Chrome支持WebSQL存储， D、缺乏标准化和跨浏览器支持，不推荐使用，推荐使用IndexedDB E、创建或打开一个名为 "myDB" 的数据库 var db = openDatabase('myDB', '1.0', 'My Database', 2*1024*1024); //参数含义：数据库名称、版本号、描述文本、数据库大小、创建回调（会在创建数据库后被调用） （2）增删改查 A、增加/插入数据，向"users"表中插入一条数据 db.transaction(function(tx) {//事务 tx.executeSql('INSERT INTO users (id, name) VALUES (?, ?)', [1, 'John Doe']); }); B、删除数据，删除"users"表中id为1的记录 db.transaction(function(tx) { tx.executeSql('DELETE FROM users WHERE id = ?', [1]); }); C、改变/更新数据，更新"users"表中id为1的记录的name字段为"Jane Doe" db.transaction(function(tx) { tx.executeSql('UPDATE users SET name = ? WHERE id = ?', ['Jane Doe', 1]); }); D、查询数据查询"users"表中的所有记录 db.transaction(function(tx) { tx.executeSql('SELECT * FROM users', [], function(tx, results) { var len = results.rows.length; for (var i = 0; i < len; i++) { console.log(results.rows.item(i)); } }); });6、indexedDB存储 来源，https://blog.csdn.net/weixin_42333548/article/details/128851189 来源，https://blog.csdn.net/xuewenjie0217/article/details/123879283 来源，https://wangdoc.com/javascript/bom/indexeddb （1）特点 A、储存键值对 B、储存支持二进制，不仅可以储存字符串，还可以储存二进制数据 C、储存空间大，一般来说不少于250MB，甚至没有上限 D、支持事务，transaction，一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况 E、异步进行，不会锁死浏览器 F、同源限制，网页只能访问自身域名下的数据库 （2）基本概念 A、数据库，一系列相关数据的容器，通过升级数据库版本“修改数据库结构”，如创建对象仓库（含主键、索引） B、对象仓库，每个数据库包含若干个对象仓库（object store），通过监听数据库的打开，完成对象仓库的创建，类似于关系型数据库的表格 C、数据记录，每个对象仓库包含若干条数据记录，类似于关系型数据库的行，数据记录分为主键（key）和数据体两部分， 如{ id: 1, text: 'foo' }、{ foo: { bar: 'baz' }, text: 'foo' } D、主键，默认建立索引的属性，必须是不同的，可以是数据记录里面的一个属性，也可以指定为一个递增的整数编号，上面的id、foo.bar属性可以当作主键 E、数据体，任意数据类型 F、索引，默认为数据记录的主键，也可以用objectStore.createIndex给数据记录建立属性索引，以加速数据的检索 G、事务，数据库通过事务（数据库-事务-对象仓库）来读写和删改数据记录，事务对象有error、abort和complete三个事件，监听操作结果 （3）打开数据库是异步操作，有可能触发4种事件 A、blocked，上一次的数据库连接还未关闭 B、upgradeneeded，第一次打开该数据库，或者数据库版本发生变化 C、success，打开成功 D、error，打开失败 （4）基本操作（增删改查） 示例、 var db;//indexedDB对象 var person = [{ id: 1, name: "张三", email: "email1", },{ id: 2, name: "李四", email: "email2", },{ id: 3, name: "张三", email: "email3", }]; // 1、open，创建或者打开数据库，有2个参数 // 第1个参数，字符串，表示数据库的名字，数据库不存在，就会新建数据库， // 第2个参数，整数，表示数据库的版本，如省略，则表示新建数据库的版本为1，或者打开当前版本的数据库 // 2、createObjectStore，创建对象仓库，有2个参数 // 第1个参数，对象仓库名 // 第2个参数，js对象(可选)，其中keyPath相当于数据库表中id为主键，autoIncrement为false，表示主键值不自增，添加数据时需指定主键值 // 3、createIndex，创建对象索引，有3个参数，分别为，索引名称、索引所在的属性、配置对象 // 4、transaction，创建一个事务，有3个参数 // 第1个参数，对象仓库名 // 第2个参数，读写方式，默认为readonly，表示只读，readwrite，表示可以写入 // 第3个参数，可选 // 5、objectStore，获取对象仓库，有1个参数，对象仓库名 A、创建或者打开数据库，并创建对象仓库 var request = window.indexedDB.open('dbName',1); request.onupgradeneeded = function(event) {//需要升级时(直译)，触发时机为，第一次打开数据库，或者数据库版本发生变化 db = event.target.result;//通过event.target.result的属性，拿到数据库 if (!db.objectStoreNames.contains('person')) { var objectStore = db.createObjectStore('person', { keyPath: 'id' });//创建对象仓库、主键 objectStore.createIndex('name', 'name', { unique: false });//创建索引 objectStore.createIndex('email', 'email', { unique: true });//该属性是否包含重复的值 }else{ //告知已创建 } } request.success = function (event) { db = request.result;//通过request对象的result属性拿到数据库 }; request.onerror = function (event) { db.close(); }; B、删除数据库 var deRequest = window.indexedDB.deleteDatabase('dbName'); deRequest.onerror = function (event) {}; deRequest.onsuccess = function (event) {}; C、新增数据-增 function add() { var request = db.transaction(['person'], 'readwrite').objectStore('person') .add({ id: 1, name: '张三', age: 24, email: 'zhangsan@example.com' }); request.onsuccess = function (event) { console.log('数据写入成功'); }; request.onerror = function (event) { console.log('数据写入失败'); } } D、删除数据-删 //删除对象仓库的1条数据记录 function remove() { var request = db.transaction(['person'], 'readwrite').objectStore('person').delete(1); request.onsuccess = function (event) { console.log('数据删除成功'); }; } //清空对象仓库的所有数据记录 db.transaction(['person'], 'readwrite').objectStore('person').clear(); //删除指定的对象仓库 db.deleteObjectStore('person'); E、更新数据-改 function update() { var request = db.transaction(['person'], 'readwrite').objectStore('person') .put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' }); request.onsuccess = function (event) { console.log('数据更新成功'); }; request.onerror = function (event) { console.log('数据更新失败'); } } F、读取数据-查 普通读取 function read() { var request = db.transaction(['person']).objectStore('person').get(1); request.onerror = function(event) { console.log('事务失败'); }; request.onsuccess = function( event) { if (request.result) { console.log('Name: ' + request.result.name); } else { console.log('未获得数据记录'); } }; } 属性索引读取。没有属性索引，只能通过主键拿到数据记录，有了属性索引，可以从任意字段拿到数据记录 var request = db.transaction(['person'], 'readonly').objectStore('person').index('name').get('李四'); request.onsuccess = function (event) { console.log('数据读取成功'); }; G、遍历数据 function readAll() { var request = db.transaction('person').objectStore('person').openCursor(); request.onsuccess = function (event) { var cursor = event.target.result; if (cursor) { console.log('Id: ' + cursor.key); cursor.continue(); } else { console.log('没有更多数据了！'); } }; }7、vuex存储六、长连接-3种 概要：HTTP协议是无状态协议的短连接，“短连接”解决方案是“长连接” （1）web worker，主要用于前端内部-双向传输数据 （2）Web EventSource，主要用于后台向前端-单向传输数据，与http一样，用超文本传输协议 （3）Web Socket，主要用于前端和后台-双向传输数据，用tcp传输控制协议1、web worker 来源，https://www.jianshu.com/p/cb067aee767d 来源，https://zhuanlan.zhihu.com/p/613979481 （1）介绍，能向后台发送数据 A、WebWorker是“HTML5的新增API”，解决js单线程、长时间阻塞的问题 B、能在Web页面中创建“后台线程”、子线程 C、js主线程与Worker子线程能够同时运行，互不阻塞，互相通信 D、Worker可以用XMLHttpRequest发送异步请求 （2）使用限制 A、同源限制，必须和主线程同源 B、通信限制，Worker单独运行在一个子线程，和主线程的通信，只能通过发布、订阅完成 C、全局对象限制，Worker的全局对象是self，无法访问window的属性和方法，不能操作DOM/BOM，只能进行纯数据处理，但可以访问Navigator和Location （3）示例 A、主线程main.js const numInput = document.getElementById('num'); const calculateButton = document.getElementById('calculate'); const resultElement = document.getElementById('result'); const myWorker = new Worker('worker.js'); //创建子进程实例 myWorker.addEventListener('message', function(e) { //监听来自子线程的消息 resultElement.textContent = '结果：' + e.data; }); calculateButton.addEventListener('click', function() { //处理点击事件 const num = Number(numInput.value); myWorker.postMessage(num); //向子线程发送消息 }); B、子线程worker.js，//new Worker('worker.js')，通过它与主进程关联 self.addEventListener('message', function(e) { //监听来自主线程的消息 const num = e.data + 1; self.postMessage(num); //向主线程发送消息 });2、Web EventSource 来源，https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource 来源，https://segmentfault.com/a/1190000044180076 （1）介绍，能接收后台发送的数据 A、EventSource是“HTML5的新增API”，能接收服务端“通过http协议”主动推送的数据 B、在web获取实例的方式为，new EventSource('http://localhost:8080/sse/events') C、EventSource实例会对HTTP服务器开启一个持久化的http连接 D、数据只能从服务端发送到客户端 （2）如果接收消息中有一个event字段，触发的事件与event字段的值相同 A、服务端部分示例代码 stream.write(`event: custom\ndata: ${song[index]}\n\n`) //此处定义了event字段，名称为custom B、前端部分代码 const eventSource = new EventSource("sse.php"); const eventList = document.querySelector("ul"); eventSource.addEventListener('custom', (data) => { const newElement = document.createElement("li"); newElement.textContent = `message: ${e.data}`; eventList.appendChild(newElement); console.log(data.data) }) （3）如果不存在event字段，则将触发通用的message事件 A、服务端部分示例代码 stream.write(`data: ${song[index]}\n\n`) B、前端部分代码 const eventSource = new EventSource("sse.php"); const eventList = document.querySelector("ul"); eventSource.onmessage = (event) => { const newElement = document.createElement("li"); newElement.textContent = `message: ${e.data}`; eventList.appendChild(newElement); console.log(data.data) } （4）前端关闭EventSource事件 eventSource.close() （5）实际使用，示例 A、AbortController，是一个控制器对象，允许中止一个或多个Web请求 来源，https://developer.mozilla.org/zh-CN/docs/Web/API/AbortController B、依赖, "dependencies": { "@microsoft/fetch-event-source": "^2.0.1", } C、封装sse，“Server-Sent Events”这个api有个构造函数EventSource import { fetchEventSource } from '@microsoft/fetch-event-source'; var baseUrl = import.meta.env.VITE_APP_BASE_API var defaultOption = { url:'', method:'POST', headers: { 'Content-Type': 'application/json', }, data:{}, onerror:function(error) { console.log(error) }, onclose:function(error) { }, callback:function(error) { console.log(error) }, } export default function(option){ let opt = Object.assign(defaultOption,option) let abortController = new AbortController() fetchEventSource(baseUrl + opt.url, { method: opt.method, headers: opt.headers, body: JSON.stringify(opt.data), signal: abortController.signal, openWhenHidden:true, onmessage(event) { opt.callback(event.data); }, onopen: function() { console.log('联通:'+baseUrl + opt.url) }, onerror(error) { abortController.abort() opt.onerror(error) }, onclose(){ opt.onclose() }, }) return abortController } D、使用sse import sse from '@/utils/sse'; export function titleGenerate(data, callback, close) { sse({ url: 'api/llm/gc/titleGenerate', data, callback, onclose: close, }); }3、Web Socket 来源，https://blog.csdn.net/BT_LEO/article/details/121652219 （1）介绍，双向发送数据 A、WebSocket是“HTML5的新增API”，一种在单个TCP连接上进行“全双工通讯”的协议，位于七层模型的应用层 B、在web获取实例的方式为，new WebSocket('ws://localhost:8888') C、通过WebSocket实例，浏览器和服务器只需要完成一次握手，就可以创建持久性的tcp连接 D、数据能够双向传输，即在单个TCP连接上进行全双工通信 （2）优点 A、在客户端和服务器之间保有一个持有的连接，两边可以随时给对方发送数据，有很强的实时性;EventSource只能从服务端发送到客户端 B、属于应用层协议，基于TCP传输协议，并且握手阶段采用HTTP 协议，因此握手时不容易屏蔽，能通过各种HTTP代理服务器; C、可以发送文本，也可以支持二进制数据的传输; D、数据格式比较轻量，性能开销小，通信高效; E、没有同源限制，客户端可以与任意服务器通信; F、协议标识符是ws(如果加密，则为wss)，服务器网址就是URL; （3）实现 A、客户端实现（1个方法、4个事件） <!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= title %></h1> <p>Welcome to <%= title %></p> <div id="clock"></div> </body> <script> let socket = new WebSocket('ws://localhost:8888') socket.onopen = function () { console.log('1. 客户端连接上了服务器', new Date().getTime()); socket.send('3. 你好') } socket.onmessage = function (e) { console.log('6',e.data); } ws.onerror = function(event) { console.error('WebSocket 连接出现错误：', event); }; ws.onclose = function() { console.log('WebSocket 连接已经关闭。'); }; </script> </html> B、服务端实现 var app = express(); let WebSocket = require('ws') let wss = new WebSocket.Server({port:8888}) wss.on('connection', function(ws) { console.log('2.服务器监听到了客户端的连接', new Date().getTime()); ws.on('message',function(data){ console.log('4.客户端发来的消息',data); ws.send('5.服务端说：你也好') }) }) module.exports = app;七、浏览器对象（window） 来源，https://www.w3cschool.cn/javascript/yji712hr.html 附、DTD（Document Type Definition，文档类型定义），定义和规范HTML或XML文档的结构和语法 （1）HTML4.01：HTML4.01定义了三种文档类型：Strict（严格类型）、Transitional（过渡类型）和Frameset（框架类型） （2）XHTML1.0：XHTML1.0也有三种文档类型：Strict（严格类型）、Transitional（过渡类型）和Frameset（框架类型） 附、浏览器（BOM，浏览器对象模型，window）的属性、方法、事件、五大对象，方法与事件的区别（调用和监听） （1）属性 （2）方法，触发在我，执行内容在它 （3）事件，触发在它，执行内容在我 （4）五大对象 A、navigator导航器对象 B、screen显示器对象 C、history历史对象 D、location位置对象 E、document文档对象，DOM（window.document，文档对象模型） 附、IE浏览器和标准浏览器的区别与相似（F、G） A、事件对象：e=e||window.event a、事件类型：e.type b、事件源：e.target=e.target||e.srcElement; c、阻止默认事件：e.preventDefault?e.preventDefault():e.returnValue=false; d、阻止冒泡：e.stopPropagation?e.stopPropagation():e.cancelBubble=true; B、DOM加载完成： a、标准：DOMContentLoaded； b、IE：document.onreadystatechange C、事件监听： a、标准：addEventlistener(“click”,function(){},false)； b、IE：Attachment(“onclick”,function(){}) D、this： a、标准：this为当前元素； b、IE：this为window E、方法绑定与执行： a、标准：同一事件的相同方法不能重复绑定，按顺序执行； b、IE：同一事件的相同方法能重复绑定，随机执行； F、DOM二级事件绑定原理，标准与IE都会给元素 a、开辟一个事件池，把所有方法都依次存到事件池中； b、绑定多个方法 G、事件流： a、捕获：从外向内； b、事件源：发生事件的元素； c、冒泡：从里向外 附、鼠标事件(clientX、pageX、screenX、offsetX、layerX、x) A、clientX：鼠标相对于浏览器窗口； B、pageX：鼠标相对于网页（如果网页没有滚动条，则pageX==clientX，不兼容时，用pageX=document.documentElement.scrollLeft + clientX 处理兼容） C、screenX：鼠标相对于显示屏（如果浏览器窗口最大化，则screenX==clientX）； D、offsetX：鼠标相对于事件源边框； E、layerX：鼠标相对于事件源父级定位元素边框； 1、浏览器的属性 来源，https://www.runoob.com/jsref/obj-window.html （1）窗口属性 A、窗口宽高 a、innerHeight，视口的高度（含水平滚动条） b、innerwidth，视口的宽度（含垂直滚动条） c、outerHeight，窗口的高度（含标题栏到状态栏） d、outerwidth，窗口的宽度（含标题栏到状态栏，标题栏、状态栏很少左右放置） B、窗口滚动与坐标 a、pageXOffset，声明当前文档向右滚动过的像素数 b、pageYoffset，声明当前文档向下滚动过的像素数 C、屏幕坐标 a、screenX，声明窗口的左上角的X坐标 b、screenLeft，返回相对于屏幕窗口的x坐标 c、screenY，声明窗口的左上角的Y坐标 d、screenTop，返回相对于屏幕窗口的y坐标 D、parent，返回父窗口 E、top，返回最顶层的父窗口 console.dir(document.body) （2）console对象 来源，https://www.runoob.com/w3cnote/javascript-console-object.html A、console.assert()，如果断言为 false，则在信息到控制台输出错误信息 B、console.clear()，清除控制台上的信息 C、console.count()，记录 count() 调用次数，一般用于计数 D、console.error()，输出错误信息到控制台 E、console.group()，在控制台创建一个信息分组 一个完整的信息分组以 console.group() 开始，console.groupEnd() 结束 F、console.groupCollapsed()，在控制台创建一个信息分组。 类似 console.group() ，但它默认是折叠的 G、console.groupEnd()，设置当前信息分组结束 H、console.info()，控制台输出一条信息 I、console.log()，控制台输出一条信息 J、console.memory，网页所占用内存的相关信息 K、console.table()，以表格形式显示数据 L、console.time()，计时器，开始计时间，与 timeEnd() 联合使用，用于算出一个操作所花费的准确时间 M、console.timeEnd()，计时结束 N、console.trace()，显示当前执行的代码在堆栈中的调用路径 O、console.warn()，输出警告信息，信息最前面加一个黄色三角，表示警告 （3）存储属性 A、sessionStorage，在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。 B、localStorage，在浏览器中存储 key/value 对。没有过期时间。 （4）其他属性 A、opener，可以实现同域名下跨窗体之间的通讯，一个窗体要包含另一个窗体的opener B、closed，当前窗口关闭时返回true C、name，设置或返回窗口的名称 D、self，返回对当前窗口的引用 E、indexedDB，在浏览器内持久化存储数据的方法 （5）document.body和document.documentElement的区别 A、怪异模式，document.body：代表HTML文档中的<body>元素，包含了页面可见的部分，如文本、图片等 B、标准模式，document.documentElement：代表HTML文档的根节点<html>元素，是整个文档节点树的根 C、示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>getBoundingClientRect</title> <style> *{ margin: 0; padding: 0; } .father{ width: 1400px; padding: 10px; background: rgb(88, 88, 88); } .self{ width: 1300px; height: 1300px; padding: 10px; background: rgb(24, 24, 24); } .box{ width:1200px; height:1200px; padding: 10px; background: rgb(192, 191, 191); } </style> </head> <body> <div class='father'> <div class='self'> <div class='box'>来源：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect</div> </div> </div> </body> </html> <script> window.addEventListener('scroll', function () { var box = document.querySelector('.box') var rect = box.getBoundingClientRect(); // 获取元素自身的宽高和在视图中的位置 var index = 100; var str = ''; if (index === 1) { console.log('1、3宽之clientWidth：', document.documentElement.clientWidth+'与'+document.body.clientWidth+'相等；'+box.clientWidth) }else if (index === 2) { console.log('2、3宽之offsetWidth：', document.documentElement.offsetWidth+'与'+document.body.offsetWidth+'相等；'+box.offsetWidth) }else if (index === 3) { console.log('3、3宽之scrollWidth：', document.documentElement.scrollWidth+'与'+document.body.scrollWidth+'相等；'+box.scrollWidth) }else if (index === 4) { console.log('4、3高之clientHeight！', document.documentElement.clientHeight+'与'+document.body.clientHeight+'可能不相等；'+box.clientHeight) }else if (index === 5) { console.log('5、3高之offsetHeight：', document.documentElement.offsetHeight+'与'+document.body.offsetHeight+'相等；'+box.offsetHeight) }else if (index === 6) { console.log('6、3高之scrollHeight：', document.documentElement.scrollHeight+'与'+document.body.scrollHeight+'相等；'+box.scrollHeight) }else if (index === 7) { console.log('7、3左之clientLeft：', document.documentElement.clientLeft+'与'+document.body.clientLeft+'相等；'+box.clientLeft) }else if (index === 8) { console.log('8、3左之offsetLeft：', document.documentElement.offsetLeft+'与'+document.body.offsetLeft+'相等；'+box.offsetLeft) }else if (index === 9) { console.log('9、3左之scrollLeft！', document.documentElement.scrollLeft+'与'+document.body.scrollLeft+'可能不相等；'+box.scrollLeft) }else if (index === 10) { console.log('10、3顶之clientTop：', document.documentElement.clientTop+'与'+document.body.clientTop+'相等；'+box.clientTop) }else if (index === 11) { console.log('11、3顶之offsetTop：', document.documentElement.offsetTop+'与'+document.body.offsetTop+'相等；'+box.offsetTop) }else if (index === 12) { console.log('12、3顶之scrollTop！', document.documentElement.scrollTop+'与'+document.body.scrollTop+'可能不相等；'+box.scrollTop) }else if (index === 13) { //以下，视口的宽高，窗口的宽高 str='13、4window之innerWidth：'+window.innerWidth+'；outerWidth：'+window.outerWidth+'；innerHeight：'+window.innerHeight+'；outerHeight：'+window.outerHeight console.log(str) }else if (index === 14) { //以下，盒底、盒右，盒子宽高 str='14、8rect之rect.bottom：'+rect.bottom+'；rect.right：'+rect.right+'；rect.width：'+rect.width+'；rect.height：'+rect.height console.log(str) }else if (index === 15) { //以下，盒顶、盒左 str='15、8rect之rect.top与rect.y即'+rect.top+'与'+rect.y+'相等；rect.left与rect.x即'+rect.left+'与'+rect.x+'相等' console.log(str) }else{ console.log('一、以下，3宽、3高、3左、3顶、4window、8rect') console.log('1、3宽之clientWidth：', document.documentElement.clientWidth+'与'+document.body.clientWidth+'相等；'+box.clientWidth) console.log('2、3宽之offsetWidth：', document.documentElement.offsetWidth+'与'+document.body.offsetWidth+'相等；'+box.offsetWidth) console.log('3、3宽之scrollWidth：', document.documentElement.scrollWidth+'与'+document.body.scrollWidth+'相等；'+box.scrollWidth) console.log('4、3高之clientHeight！', document.documentElement.clientHeight+'与'+document.body.clientHeight+'可能不相等；'+box.clientHeight) console.log('5、3高之offsetHeight：', document.documentElement.offsetHeight+'与'+document.body.offsetHeight+'相等；'+box.offsetHeight) console.log('6、3高之scrollHeight：', document.documentElement.scrollHeight+'与'+document.body.scrollHeight+'相等；'+box.scrollHeight) console.log('7、3左之clientLeft：', document.documentElement.clientLeft+'与'+document.body.clientLeft+'相等；'+box.clientLeft) console.log('8、3左之offsetLeft：', document.documentElement.offsetLeft+'与'+document.body.offsetLeft+'相等；'+box.offsetLeft) console.log('9、3左之scrollLeft！', document.documentElement.scrollLeft+'与'+document.body.scrollLeft+'可能不相等；'+box.scrollLeft) console.log('10、3顶之clientTop：', document.documentElement.clientTop+'与'+document.body.clientTop+'相等；'+box.clientTop) console.log('11、3顶之offsetTop：', document.documentElement.offsetTop+'与'+document.body.offsetTop+'相等；'+box.offsetTop) console.log('12、3顶之scrollTop！', document.documentElement.scrollTop+'与'+document.body.scrollTop+'可能不相等；'+box.scrollTop) str='13、4window之innerWidth：'+window.innerWidth+'；outerWidth：'+window.outerWidth+'；innerHeight：'+window.innerHeight+'；outerHeight：'+window.outerHeight console.log(str) str='14、8rect之rect.bottom：'+rect.bottom+'；rect.right：'+rect.right+'；rect.width：'+rect.width+'；rect.height：'+rect.height console.log(str) str='15、8rect之rect.top与rect.y即'+rect.top+'与'+rect.y+'相等；rect.left与rect.x即'+rect.left+'与'+rect.x+'相等' console.log(str) console.log('二、以下，视口说明') console.log('1、window.outerHeight:浏览器对象中窗口的高（含控制台）') console.log('2、window.innerHeight:浏览器对象中视口的高（含滚动条）') console.log('三、以下，异常说明') console.log('1、clientHeight') console.log('（1）document.documentElement.clientHeight，文档对象中视口的高（不含滚动条）') console.log('（2）document.body.clientHeight，跟普通元素一样，另当根标签{height:100vh;}或body{height:100vh;}时，与（1）同') console.log('2、scrollLeft|scrollTop') console.log('（1）document.documentElement.scrollLeft|scrollTop，是正常值') console.log('（2）document.body.scrollLeft|scrollTop，总是0') console.log('四、以下，3宽说明') console.log('1、clientWidth:元素含补的宽，左右padding＋content的宽') console.log('2、offsetWidth:元素含框的宽，左右border＋左右padding＋content') console.log('3、scrollWidth:元素含左补的实际宽，左padding＋（带滚动条的）content的宽') console.log('五、以下，3左说明') console.log('1、clientleft:元素左边框的宽') console.log('2、offsetLeft:元素左边框外侧至其父级定位元素左边框内侧的距离') console.log('3、scrollLeft:元素隐藏到边界左侧的宽') } console.log('--------------------------------------------------------') }); </script>2、浏览器的方法 附、0级事件是以属性的形式存在的，2级事件则是以事件监听的形式存在的 （1）窗口方法 A、open(url, name, features)，打开一个新的浏览器窗口或标签页 附、window.open('https://www.example.com', 'newWin', 'width=500,height=400,left=200,top=200,toolbar=no,menubar=no,location=no,status=no'); a、url：要在新窗口中显示的文档的URL。如果省略此参数或用空字符串，则会使用空页面的URL，about:blank。 b、name：新打开的窗口的名字 b1、已存在的窗口，并且脚本允许跳转到该窗口，则会直接使用该窗口 b2、不存在的窗口，将这个指定的名字赋值给新打开的窗口 b3、如果省略此参数，会使用默认的名字“_blank”打开一个新的、未命名的窗口 c、features：一个以逗号分隔的字符串，包含窗口的大小和各种属性，用于指定新窗口的外观和行为。 c1、height，数值窗口高度不能小于100 c2、width，数值窗口宽度不能小于100 c3、left，数值窗口左坐标不能为负值 c4、top，数值窗口上坐标不能为负值 c5、locationL，yes/no，是否显示地址栏 c6、menubar，yes/no，是否显示菜单栏 c7、resizable，yes/no，是否可以改变窗口大小 c8、scrollbars，yes/no，否允许出现滚动条 c9、statusr，yes/no，是否显示状态栏 c10、toolbar，yes/no，是否显示工具栏 B、close()自动关闭浏览器窗口 C、moveBy(水平位移量,垂直位移量)，按照给定像素参数移动指定窗口 D、moveTo(x,y)，功能将窗口移动到指定的指定坐标(x,y)处语法 E、resizeBy(水平,垂直)，将当前窗口改变指定的大小(x,y)当x、y的值大于0时为扩大当x、y的值小于0时为缩小 F、resizeTo(水平宽度,垂直宽度)，功能将当前窗口改变成(x,V)大小，x、y分别为宽度和高度 G、scroIBy(水平位移量，垂直位移量)，将窗口中的内容按给定的位移量滚动，参数为正数时，正向滚动，否则反向滚动 H、scrolTo(x,y)，将窗口中的内容滚动到指定位置 附、示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script> var window_; function openwindow(){ window_=window.open('','', 'width=100,height=100'); window_.focus(); } function myFunction(){ window_.moveTo(500,500); window_.focus(); } </script> </head> <body> <button onclick="openwindow()">创建窗口</button> <button onclick="myFunction()">调整窗口</button> </body> </html> （2）定时器方法 A、setTimeout(执行代码,亳秒数)，当到了指定的毫秒数后，自动执行功能代码语法 B、clearTimeout(定时器)，取消由setTimeout()设置的定时器语法 C、setInterval(重复执行的代码,亳秒数)，按指定周期重复执行功能代码语法 D、cearInterval(时间间隔器)，取消由setnterval()设置的时间间隔器 （3）对话框方法 A、alert(“提示字符串")，弹出一个警告框，在警告框内显示提示字符串文本 B、confirm("提示字符串”)，显示一个确认框，在确认框内显示提示字符中，当用户 a、单击"确定"按纽时该方法返回true b、单击"取消”时返回false C、prompt("提示字符串"，"缺省文本”)，显示一个输入框，在输入框上方显示提示字符申，在输入文本框内显示缺省文本，并等待用户输入 a、当用户单击“确定"按钮时，返回用户输入的字符串 b、当单击”取消"按钮时，返回nul值 （4）其它方法 A、atob()，解码一个 base-64 编码的字符串 B、btoa()，创建一个 base-64 编码的字符串 C、getComputedStyle()，获取指定元素的 CSS 样式 D、getSelection()，返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置 E、matchMedia()，该方法用来检查 media query 语句，它返回一个MediaQueryList对象 F、openDatabase()，创建一个数据库对象 G、print()，打印当前窗口的内容 H、postMessage()，安全地实现跨源通信 I、stop()，停止页面载入3、浏览器的事件 （1）url改变 A、onhashchange(event)，url的hash改变时触发，onpopstate事件包含本事件 B、onpopstate(event)，浏览历史（history对象或hash）发生改变时触发 （2）页面展示改变 A、onpageshow(event)，用户访问页面时触发 B、onpagehide(event)，用户离开当前网页跳转到另外一个页面时触发 （3）页面外观改变 A、onresize(event)，页面重新调整大小 B、onscroll(event)，页面滚动时触发 （4）加载事件 A、onload，页面加载完毕，页面内包括图片的所有元素加载完毕后才能执行，后于DOMContentLoaded执行 B、onbeforeunload，页面卸载之前 C、onunload，页面卸载以后4、浏览器的五大对象之navigator导航器对象 来源，https://www.runoob.com/jsref/obj-navigator.html （1）appCodeName，返回浏览器的代码名 （2）appName，返回浏览器的名称 （3）appVersion，返回浏览器的平台和版本信息 （4）cookieEnabled，返回指明浏览器中是否启用cookie的布尔值 （5）platform，返回运行览器的操作系统平台 （6）userAgent，返回由客户机发送服务器的user-agent头部的值 （7）geolocation，返回浏览器的地理位置信息 （8）language，返回浏览器使用的语言 （9）onLine，返回浏览器是否在线，在线返回ture，否则返回false （10）product，返回浏览器使用的引擎（产品） （11）javaEnabled()，指定是否在浏览器中启用Java （12）taintEnabled()，规定浏览器是否启用数据污点(data tainting) （13）sendBeacon()，方法可用于通过HTTP将少量数据异步传输到Web服务器，navigator.sendBeacon(url, data) 5、浏览器的五大对象之screen显示器对象 来源，https://www.runoob.com/jsref/obj-screen.html （1）availHeight，返回显示屏幕的可用高度 （2）availwidth，返回显示屏幕的可用宽度 （3）colorDepth，返回屏幕颜色的位数 （4）height，返回屏幕的像素高度 （5）pixelDepth，返回屏幕的颜色分辨率（每象素的位数） （6）width，返回屏幕的像素宽度6、浏览器的五大对象之history历史对象 来源，https://www.runoob.com/jsref/obj-history.html 来源，https://www.python100.com/html/ENZ8IC6776G4.html 来源，https://developer.mozilla.org/zh-CN/docs/Web/API/History_API 来源，https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event 注、length，返回历史列表中的网址数 （1）forward()，前进。加载history列表中的右一个URL，等同于history.go(1) （2）back()，后退。加载history列表中的左一个URL，等同于history.go(-1) （3）go()，跳转。加载history列表中的某个具体页面，history.go(0)，location.reload()，刷新当前 （4）pushState(state,title,url)，给“浏览器当前页签”添加状态 A、示例与参数 history.pushState({page: 1}, "title 1", "/page1"); state，对象，比如state={key:obj};在其它页面可以通过history.key来获取 title，字符串，浏览器用它显示页面标题 url，字符串，当前浏览器地址 B、特点， a、改变浏览器的地址栏而不重新加载页面 b、向浏览器的会话历史栈增加一个新的状态 C、优势 a、实现无刷新前端路由 b、给浏览器当前页签增加状态 D、缺点， a、不会触发页面加载事件及其他事件的处理函数 b、无法阻止用户使用“后退”按钮 c、可能导致404错误 问题描述，点击谷歌浏览器左上方的圆箭头刷新，会出错404（这点非常重要，是它不能大范围使用的原因！！！） 问题解决，在服务器端进行相应的nginx配置，这种情况让他返回index.html E、补救，如果你想使用history.pushState来加载一个新页面的内容， 你可以创建一个函数，该函数 使用AJAX请求获取新页面的内容， 使用pushState更新浏览器的地址栏 （5）replaceState(state,title,url)，给“浏览器当前页签”修改状态 history.replaceState({page: 2}, "title 2", "/page2"); （6）两种操作的作用，给“浏览器当前页签”添加（或修改）状态，以下是两种操作， 附、它们是HTML5的一个API A、pushState B、replaceState （7）五种操作的作用，给“浏览器当前页签”的“不同历史记录”激活，以下是五种操作 A、浏览器的后退（向左） B、浏览器的前进（向右） C、history.back（向左） D、history.forward（向右） E、history.go（负左，正右，0当前） （8）window.onpopstate(event)事件， a、浏览历史（history对象或hash）发生改变时触发 b、event.state，就是“当前页面”参数(state,title,url)中的state， （9）两种操作、五种操作、onpopstate，三者之间的关系，说明 A、两种操作，只能改变当前页面状态，不会触发window.onpopstate(event)事件 B、五种操作，与两种操作相关与否，都会触发window.onpopstate(event)事件 C、五种操作，与两种操作无关时，还会触发http请求 （10）两种操作、五种操作、onpopstate，三者之间的关系，示例 window.onpopstate = function(event) { //这是异步函数 console.log( event.state, history.state, event.state == history.state, event, ); // true }; setTimeout(function(){ history.pushState({state1: 1}, "状态 1", "/page1"); console.log( '状态1，不触发window.onpopstate' ); },1000) setTimeout(function(){ history.back(); console.log( '状态1，触发window.onpopstate' ); },2000) （11）window.onhashchange事件， A、url的hash改变时触发 B、onpopstate事件包含本事件 （12）onpopstate事件包含onhashchange事件，示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="#/5F">《a href="#/5F"》点击我《/a》</a>，锚点会定位到<br/> 《a name="/5F"》name="/5F"《/a》 <br/><br/><br/><br/><br/><br/><br/> <a name="/5F">name="/5F"</a> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </body> </html> <script> window.onpopstate = function(event) { console.log( 'onpopstate', window.location.hash, window.location ); console.log( 'onpopstate', window.history.length, window.history ); }; window.onhashchange = function(event) { console.log( 'onhashchange', window.location.hash, window.location ); console.log( 'onhashchange', window.history.length, window.history ); }; </script> 7、浏览器的五大对象之location位置对象 来源，https://www.runoob.com/jsref/obj-location.html （1）属性 A、protocol，设置或返回当前URL的协议 B、hostname，设置或返回当前 URL 的主机名 C、port，设置或返回当前 URL 的端口号 D、origin，源 ----以上是origin的构成---- E、host，设置或返回主机名和当前URL的端口号 F、pathname，设置或返回当前URL 的路径部分 G、search，设置或返回从问号(?)开始的 URL H、hash，设置或返回从井号(#)开始的URL ----以上是href的构成---- I、href，设置或返回完整的 URL （2）方法 A、assign(URL)，加载新的文档方法 B、reload()，重新加载当前页面 C、replace(newURL)，用新的文档普换当前文档 附、属性示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> table{ border-collapse: collapse; } table tr th,table tr td{ padding: 5px; border: 1px solid grey; } </style> </head> <body> <div id="div"></div> <table> <thead> <tr> <th>属性名</th> <th>属性值</th> </tr> </thead> <tbody> </tbody> </table> </body> </html> <script> var url = document.createElement('a'); url.href = 'https://www.runoob.com:80/1234567?s=search#hash'; var obj = { 'url.protocol': url.protocol, 'url.hostname': url.hostname, 'url.port': url.port, 'url.origin': url.origin + '，以上是origin的构成', 'url.host': url.host, 'url.pathname': url.pathname, 'url.search': url.search, 'url.hash': url.hash, 'url': url + '，以上是url的构成', 'url.href': url.href + '，这是最初的href', }; var allStr = ''; for(var attr in obj){ var str = '<tr>'; str += '<td>' + attr + '</td>'; str += '<td>' + obj[attr] + '</td>'; str += '</tr>'; allStr += str; } document.getElementsByTagName('tbody')[0].innerHTML = allStr; </script>8、浏览器的五大对象之document文档对象 来源，https://www.runoob.com/jsref/dom-obj-document.html （1）文档属性，如document.activeElement A、document.activeElement，返回当前获取焦点元素 B、document.anchors，返回对文档中所有Anchor对象的引用 C、document.applets，返回对文档中所有Applet对象的引用。注意: HTML5已不支持<applet>元素 D、document.baseURI，返回文档的绝对基础URI E、document.body，返回文档的body元素 F、document.cookie，设置或返回与当前文档有关的所有 cookie G、document.doctype，返回与文档相关的文档类型声明(DTD) H、document.documentElement，返回文档的根节点 I、document.documentMode，返回用于通过浏览器渲染文档的模式，仅 IE 浏览器支持 5，页面在 IE5 模式下展示 7，页面在 IE7 模式下展示 8，页面在 IE8 模式下展示 9，页面在 IE9 模式下展示 J、document.documentURI，设置或返回文档的位置 K、document.domain，返回当前文档的域名 L、document.domConfig，已废弃。返回normalizeDocument()被调用时所使用的配置 M、document.embeds，返回文档中所有嵌入的内容（embed）集合 N、document.forms，返回对文档中所有Form对象引用 O、document.images，返回对文档中所有Image对象引用 P、document.implementation，返回处理该文档的DOMImplementation对象 Q、document.inputEncoding，返回用于文档的编码方式（在解析时） R、document.lastModified，返回文档被最后修改的日期和时间 S、document.links，返回对文档中所有Area和Link对象引用 T、document.readyState，返回文档状态 (载入中……) U、document.referrer，返回当前页面的来源页面的URL；referrer，访问来源，引用地址 V、document.scripts，返回页面中所有脚本的集合 W、document.strictErrorChecking，设置或返回是否强制进行错误检查 X、document.title，返回当前文档的标题 Y、document.URL，返回文档完整的URL Z、document.styleSheets setTimeout(function(){ var all = document.getElementsByClassName('isInitShow') for(var i = 0; i<all.length; i++){ if(all[i].clientHeight > 50) { document.styleSheets[0].insertRule(//在文档的第1个样式表中插入样式规则 "@keyframes moveDown" + i + "{" + "from { height: 40px; }" + "to { height: " + all[i].clientHeight + "px; }" + "}" ) document.styleSheets[0].insertRule( ".divDown" + i + "{" + "animation: moveDown" + i + " 2s ease 0s 1 normal;" + /* 非常重要：2s前面有空格 */ "}" ) } } }); （2）文档方法，如document.addEventListener()， A、document.addEventListener()，向文档添加句柄 B、document.adoptNode(node)，从另外一个文档返回adapded节点到当前文档 C、document.close()，关闭用document.open()方法打开的输出流，并显示选定的数据 D、document.createAttribute()，创建一个属性节点 E、document.createComment()，createComment()方法可创建注释节点 F、document.createDocumentFragment()，创建空的DocumentFragment对象，并返回此对象 G、document.createElement()，创建元素节点 H、document.createTextNode()，创建文本节点 I、document.execCommand，操作可编辑内容区域的元素 a、示例一，复制textarea的内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Copy to Clipboard Example</title> </head> <body> <p>将以下文本复制到剪贴板：</p> <textarea id="copyText" rows="5" cols="50">这是一些可以复制的文本：</textarea> <button onclick="copyToClipboard()">复制到剪贴板</button> </body> </html> <script> function copyToClipboard() { var copyText = document.getElementById("copyText");//获取textarea的元素 copyText.select();//选中文本 copyText.setSelectionRange(0, 99999); //对于移动设备 document.execCommand("copy");//执行复制命令 alert("已复制文本到剪贴板：" + copyText.value);//提示用户复制成功 } </script> b、示例二，复制p的内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Copy to Clipboard Example</title> </head> <body> <p id="paragraph">这是需要复制的段落文本。</p> <button id="copyButton">复制到剪贴板</button> </body> </html> <script> document.getElementById('copyButton').addEventListener('click', function() { var text = document.getElementById('paragraph').textContent; var textArea = document.createElement('textarea'); //设置文本区域不可见 textArea.style.position = 'fixed'; textArea.style.opacity = '0'; textArea.value = text; document.body.appendChild(textArea); //选中文本区域内的文本 textArea.select(); //执行复制命令 try { var successful = document.execCommand('copy'); console.log(successful ? '复制成功' : '复制失败'); } catch (err) { console.error('复制失败', err); } //移除文本区域元素 document.body.removeChild(textArea); }); </script> c、示例三，复制参数，C:\Users\Haier\Desktop\bcbf-web\src\view\base\search-topical-table.vue //与下面copy事件类似的事件还有cut、paste等 <el-button type="primary" link @click="copy(scope.row.manuMd5)">复制稿件ID</el-button> const copy = (id) => { const save = function (e) { e.clipboardData.setData('text/plain', id)//将指定格式的数据放入剪贴板 e.preventDefault()//阻止默认行为 } document.addEventListener('copy', save)//监听copy事件 document.execCommand('copy')//触发copy事件 ElMessage({ message: '复制稿件ID成功', type: 'success' }) } //另外， //document.execCommand('cut')//触发cut事件，将当前选中的内容剪切到剪贴板中，并从原位置移除 //document.execCommand('paste')//触发paste事件，将剪贴板中的内容粘贴到当前焦点所在的输入框或可编辑区域 J、document.getElementsByClassName()，返回文档中所有指定类名的元素集合，作为NodeList对象 K、document.getElementById()，返回对拥有指定id的第一个对象的引用 L、document.getElementsByName()，返回带有指定名称的对象集合 M、document.getElementsByTagName()，返回带有指定标签名的对象集合 N、document.importNode()，把一个节点从另一个文档复制到该文档以便应用 O、document.normalize()，删除空文本节点，并连接相邻节点 P、document.normalizeDocument()，删除空文本节点，并连接相邻节点的 Q、document.open()，打开一个流，以收集来自任何document.write()或document.writeln()方法的输出 R、document.querySelector()，返回文档中匹配指定的CSS选择器的第一元素 S、document.querySelectorAll()，HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表= T、document.removeEventListener()，移除文档中的事件句柄(由addEventListener()方法添加) U、document.renameNode()，重命名元素或者属性节点 V、document.write()，向文档写HTML表达式或JavaScript代码 W、document.writeln()，等同于write()方法，不同的是在每个表达式之后写一个换行符 （3）文档事件，如document.onreadystatechange A、document.onreadystatechange，用于非标准浏览器的状态监听，标准浏览器监听用DOMContentLoaded。先于onload （4）文档下元素属性，如element.accessKey 来源，https://www.runoob.com/jsref/dom-obj-all.html A、element.accessKey，设置或返回accesskey一个元素 B、element.attributes，返回一个元素的属性数组 var attr = document.getElementById("demo").attributes[0].isId; a、attr.isId，如果属性是 ID 类型，则 isId 属性返回 true，否则返回 false b、attr.name，返回属性名称，document.getElementsByTagName("button")[0].attributes[0].name;//onclick c、attr.value，设置或者返回属性值 d、attr.specified，如果属性被指定返回 true ，否则返回 false e、nodemap.getNamedItem()，从节点列表中返回的指定属性节点。 var btn=document.getElementsByTagName("BUTTON")[0]; btn.attributes.getNamedItem("onclick").textContent;//myfunction() nodemap.item()，返回节点列表中处于指定索引号的节点 nodemap.length，返回节点列表的节点数目 nodemap.removeNamedItem()，删除指定属性节点 nodemap.setNamedItem()，设置指定属性节点(通过名称) C、element.childNodes，返回元素的一个子节点的数组 D、element.children，返回元素的子元素的集合 E、element.classList，返回元素的类名，作为 DOMTokenList 对象 F、element.className，设置或返回元素的class属性 G、element.clientTop，表示一个元素的顶部边框的宽度，以像素表示 H、element.clientLeft，表示一个元素的左边框的宽度，以像素表示 I、element.clientHeight，在页面上返回内容的可视高度（高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条） J、element.clientWidth，在页面上返回内容的可视宽度（宽度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条） K、element.contentEditable，设置或返回元素的内容是否可编辑 L、element.dir，设置或返回一个元素中的文本方向 M、element.firstElementChild，返回元素的第一个子元素 N、element.firstChild，返回元素的第一个子节点 O、element.id，设置或者返回元素的 id P、element.innerHTML，设置或者返回元素的内容 Q、element.isContentEditable，如果元素内容可编辑返回 true，否则返回false R、element.lang，设置或者返回一个元素的语言 S、element.lastChild，返回最后一个子节点 T、element.lastElementChild，返回指定元素的最后一个子元素 U、element.namespaceURI，返回命名空间的 URI V、element.nextSibling，返回该元素紧跟的一个节点 W、element.nextElementSibling，返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点） X、element.nodeName，返回元素的标记名（大写） Y、element.nodeType，返回元素的节点类型 Z、element.nodeValue，返回元素的节点值 A_、element.offsetHeight，返回任何一个元素的高度包括边框（border）和内边距（padding），但不包含外边距（margin） B_、element.offsetWidth，返回元素的宽度，包括边框（border）和内边距（padding），但不包含外边距（margin） C_、element.offsetLeft，返回当前元素的相对水平偏移位置的偏移容器 D_、element.offsetParent，返回元素的偏移容器 E_、element.offsetTop，返回当前元素的相对垂直偏移位置的偏移容器 F_、element.ownerDocument，返回元素的根元素（文档对象） G_、element.parentNode，返回元素的父节点 H_、element.previousSibling，返回某个元素紧接之前元素 I_、element.previousElementSibling，返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点） J_、element.scrollHeight，返回整个元素的高度（包括带滚动条的隐蔽的地方） K_、element.scrollLeft，返回当前视图中的实际元素的左边缘和左边缘之间的距离 L_、element.scrollTop，返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离 M_、element.scrollWidth，返回元素的整个宽度（包括带滚动条的隐蔽的地方） N_、element.style，设置或返回元素的样式属性 O_、element.tabIndex，设置或返回元素的标签顺序 P_、element.tagName，作为一个字符串返回某个元素的标记名（大写） Q_、element.textContent，设置或返回一个节点和它的文本内容 R_、element.title，设置或返回元素的title属性 S_、nodelist.length，返回节点列表的节点数目 （5）文档下元素方法，如element.addEventListener()， A、element.addEventListener()，向指定元素添加事件句柄 B、element.appendChild()，为元素添加一个新的子元素 C、element.cloneNode()，克隆某个元素 D、element.compareDocumentPosition()，比较两个元素的文档位置 E、element.focus()，设置文档或元素获取焦点 F、element.getAttribute()，返回指定元素的属性值 G、element.getAttributeNode()，返回指定属性节点 H、element.getElementsByTagName()，返回指定标签名的所有子元素集合 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <ul> <li>Coffee</li> <li>Tea</li> </ul> <ul> <li>Coffee</li> <li>Tea</li> </ul> <p id="demo">单击“按钮”更改列表项的文本。</p> <button onclick="myFunction()">点我</button> </body> </html> <script> function myFunction(){ document.getElementsByTagName("UL")[0].getElementsByTagName("LI")[0].innerHTML="Milk"; }; </script> I、element.getElementsByClassName()，返回文档中所有指定类名的元素集合，作为 NodeList 对象 J、element.getFeature()，返回指定特征的执行APIs对象 K、element.getUserData()，返回一个元素中关联键值的对象 L、element.hasAttribute()，如果元素中存在指定的属性返回 true，否则返回false M、element.hasAttributes()，如果元素有任何属性返回true，否则返回false N、element.hasChildNodes()，返回一个元素是否具有任何子元素 O、element.hasFocus()，返回布尔值，检测文档或元素是否获取焦点 P、element.insertBefore()，现有的子元素之前插入一个新的子元素 Q、element.isDefaultNamespace()，如果指定了namespaceURI 返回 true，否则返回 false R、element.isEqualNode()，检查两个元素是否相等 S、element.isSameNode()，检查两个元素所有有相同节点 T、element.isSupported()，如果在元素中支持指定特征返回 true U、element.matches()，如果元素匹配指定的 CSS 选择器，matches() 方法就返回 true，否则返回 false V、element.normalize()，使得此成为一个"normal"的形式，其中只有结构（如元素，注释，处理指令，CDATA节和实体引用）隔开Text节点， 即元素（包括属性）下面的所有文本节点，既没有相邻的文本节点也没有空的文本节点 W、element.querySelector()，返回匹配指定 CSS 选择器元素的第一个子元素 X、document.querySelectorAll()，返回匹配指定 CSS 选择器元素的所有子元素节点列表 Y、element.removeAttribute()，从元素中删除指定的属性 Z、element.removeAttributeNode()，删除指定属性节点并返回移除后的节点 A_、element.removeChild()，删除一个子元素 B_、element.removeEventListener()，移除由 addEventListener() 方法添加的事件句柄 C_、element.replaceChild()，替换一个子元素 D_、element.setAttribute()，设置或者改变指定属性并指定值 E_、element.setAttributeNode()，设置或者改变指定属性节点 F_、element.setUserData()，在元素中为指定键值关联对象 G_、element.toString()，一个元素转换成字符串 H_、nodelist.item()，返回某个元素基于文档树的索引 （6）文档下元素事件 附、示例 <html> <head></head> <body> <button id="button">button</button> </body> </html> <script> var element = document.getElementById('button'); element.addEventListener('click', function() { console.log('监听点击1'); }); element.onclick = function() { console.log('监听点击2'); }; setTimeout(function(){ console.log('以下，JS触发点击=='); element.click(); console.log('以上，JS触发点击=='); }) </script> A、鼠标事件 a、鼠标移入移出-1/2 element.onmouseenter，鼠标移动到元素时触发，只执行1次 element.onmouseleave，鼠标离开元素时触发，不冒泡 b、鼠标移入移出-2/2 element.onmouseover，鼠标移动到元素时触发，每停止、移动1次，就执行1次 element.onmouseout，鼠标离开元素或进入其子元素时触发，冒泡 c、鼠标按下、移动、松开 element.onmousedown，鼠标按钮被按下 element.onmousemove，鼠标移动时触发 element.onmouseup，鼠标按键被松开 d、按下键盘上的某个键 element.onkeydown，按下键盘上的某个键时，触发鼠标聚焦元素如input的onkeydown事件 e、点击 element.onclick，当用户点击某个对象时调用的事件句柄 element.ondblclick，当用户双击某个对象时调用的事件句柄 f、右键打开菜单 element.oncontextmenu，在用户点击鼠标右键打开上下文菜单时触发 document.oncontextmenu = function(){ return false;//取消鼠标右键 } B、键盘事件 // <input type="text" onkeydown="myFunction()"> // object.onkeydown=function(){SomeJavaScriptCode}; onkeydown，某个键盘按键被按下 onkeypress，某个键盘按键被按下并松开 onkeyup，某个键盘按键被松开 C、框架/对象（Frame/Object）事件 // <img src="image_w3default.gif" onabort="myFunction()"> // object.onabort=function(){myScript}; // object.addEventListener("abort", myScript); onabort，图像的加载被中断 ( <object>) onerror，在加载文档或图像时发生错误 ( <object>, <body>和 <frameset>)， onload，一张页面或一幅图像完成加载 onbeforeunload，该事件在即将离开页面（刷新或关闭）时触发 onunload，用户退出页面 ( <body> 和 <frameset>) onpageshow，该事件在用户访问页面时触发， onpagehide，该事件在用户离开当前网页跳转到另外一个页面 onresize，窗口或框架被重新调整大小 onscroll，当文档被滚动时发生的事件 onhashchange，url的hash改变时触发，onpopstate事件包含该事件 D、表单事件 // <element onblur="SomeJavaScriptCode"> // object.onblur=function(){SomeJavaScriptCode}; onblur，元素失去焦点时触发 onchange，该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) onfocus，元素获取焦点时触发 onfocusin，元素即将获取焦点时触发 onfocusout，元素即将失去焦点时触发 oninput，元素获取用户输入时触发，3 onreset，表单重置时触发 onsearch，用户向搜索域输入文本时触发 ( <input="search">) onselect，用户选取文本时触发 ( <input> 和 <textarea>) onsubmit，表单提交时触发 E、剪贴板事件 // <element oncopy="myScript"> // object.oncopy=function(){myScript}; // object.addEventListener("copy", myScript); oncopy，该事件在用户拷贝元素内容时触发， oncut，该事件在用户剪切元素内容时触发， onpaste，该事件在用户粘贴元素内容时触发， F、打印事件 // <element onafterprint="myScript"> // object.onafterprint=function(){myScript}; // object.addEventListener("afterprint", myScript); onafterprint，该事件在页面已经开始打印，或者打印窗口已经关闭时触发 onbeforeprint，该事件在页面即将开始打印时触发， G、拖动事件 // <element ondrag="myScript"> // object.ondrag=function(){myScript};尝试一下 // object.addEventListener("drag", myScript); ondrag，该事件在元素正在拖动时触发， ondragend，该事件在用户完成元素的拖动时触发， ondragenter，该事件在拖动的元素进入放置目标时触发， ondragleave，该事件在拖动元素离开放置目标时触发， ondragover，该事件在拖动元素在放置目标上时触发， ondragstart，该事件在用户开始拖动元素时触发， ondrop，该事件在拖动元素放置在目标区域时触发， H、多媒体（Media）事件 onabort，事件在视频/音频（audio/video）终止加载时触发 oncanplay，事件在用户可以开始播放视频/音频（audio/video）时触发 oncanplaythrough，事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发 ondurationchange，事件在视频/音频（audio/video）的时长发生变化时触发 onemptied，当期播放列表为空时触发， onended，事件在视频/音频（audio/video）播放结束时触发 onerror，事件在视频/音频（audio/video）数据加载期间发生错误时触发 onloadeddata，事件在浏览器加载视频/音频（audio/video）当前帧时触发触发 onloadedmetadata，事件在指定视频/音频（audio/video）的元数据加载后触发 onloadstart，事件在浏览器开始寻找指定视频/音频（audio/video）触发 onpause，事件在视频/音频（audio/video）暂停时触发 onplay，事件在视频/音频（audio/video）开始播放时触发 onplaying，事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发 onprogress，事件在浏览器下载指定的视频/音频（audio/video）时触发 onratechange，事件在视频/音频（audio/video）的播放速度发送改变时触发 onseeked，事件在用户重新定位视频/音频（audio/video）的播放位置后触发 onseeking，事件在用户开始重新定位视频/音频（audio/video）时触发 onstalled，事件在浏览器获取媒体数据，但媒体数据不可用时触发 onsuspend，事件在浏览器读取媒体数据中止时触发 ontimeupdate，事件在当前的播放位置发送改变时触发 onvolumechange，事件在音量发生改变时触发 onwaiting，事件在视频由于要播放下一帧而需要缓冲时触发 I、动画事件 animationend，该事件在 CSS 动画结束播放时触发， animationiteration，该事件在 CSS 动画重复播放时触发， animationstart，该事件在 CSS 动画开始播放时触发， J、过渡事件 transitionend，该事件在 CSS 完成过渡后触发 K、其他事件 onmessage，该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发， onmousewheel，已废弃。 使用 onwheel 事件替代， ononline，该事件在浏览器开始在线工作时触发 onoffline，该事件在浏览器开始离线工作时触发 onpopstate，浏览历史（history对象或hash）发生改变时触发，该事件包含onhashchange事件 onshow，该事件当 <menu> 元素在上下文菜单显示时触发， onstorage，该事件在 Web Storage(HTML 5 Web 存储)更新时触发， ontoggle，该事件在用户打开或关闭 <details> 元素时触发， onwheel，该事件在鼠标滚轮在元素上下滚动时触发， L、事件对象 常量 CAPTURING-PHASE，当前事件阶段为捕获阶段(1) AT-TARGET，当前事件是目标阶段,在评估目标事件(1) BUBBLING-PHASE，当前的事件为冒泡阶段 (3) 属性 bubbles，返回布尔值，指示事件是否是起泡事件类型 cancelable，返回布尔值，指示事件是否可拥可取消的默认动作 currentTarget，返回其事件监听器触发该事件的元素 eventPhase，返回事件传播的当前阶段 target，返回触发此事件的元素（事件的目标节点） timeStamp，返回事件生成的日期和时间 type，返回当前 Event 对象表示的事件的名称 方法 initEvent()，初始化新创建的 Event 对象的属性 preventDefault()，通知浏览器不要执行与事件关联的默认动作 stopPropagation()，不再派发事件 M、目标事件对象 addEventListener()，允许在目标事件中注册监听事件(IE8 = attachEvent()) dispatchEvent()，允许发送事件到监听器上 (IE8 = fireEvent()) removeEventListener()，运行一次注册在事件目标上的监听事件(IE8 = detachEvent()) N、事件监听对象 handleEvent()，把任意对象注册为事件处理程序 O、文档事件对象 createEvent()， P、鼠标/键盘事件对象 属性 altKey，返回当事件被触发时，"ALT" 是否被按下 button，返回当事件被触发时，哪个鼠标按钮被点击 clientX，返回当事件被触发时，鼠标指针的水平坐标 clientY，返回当事件被触发时，鼠标指针的垂直坐标 ctrlKey，返回当事件被触发时，"CTRL" 键是否被按下 Location，返回按键在设备上的位置，3 charCode，返回onkeypress事件触发键值的字母代码 key，在按下按键时返回按键的标识符3 keyCode，返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码 which，返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码 metaKey，返回当事件被触发时，"meta" 键是否被按下 relatedTarget，返回与事件的目标节点相关的节点 screenX，返回当某个事件被触发时，鼠标指针的水平坐标 screenY，返回当某个事件被触发时，鼠标指针的垂直坐标 shiftKey，返回当事件被触发时，"SHIFT" 键是否被按下 方法 initMouseEvent()，初始化鼠标事件对象的值 initKeyboardEvent()，初始化键盘事件对象的值 （6）文档下元素获取 A、document.getElementById('id') B、document.getElementsByClassName('class') C、document.getElementsByTagName('tag') D、document.querySelector('.class') E、document.querySelectorAll('.class') F、document.getElementsByName('name')[0] （7）文档下元素增删改查 A、增加：appendChild、insertBefore、setAttribute element.appendChild(outerNode);//外节点附在最后子节点的后面 const element = document.createElement("li"); const textnode = document.createTextNode("Water"); element.appendChild(textnode); document.getElementById("container").appendChild(element); element.insertBefore(outerNode, sonNode);//外节点或子节点插到某个子节点前面 element.setAttribute(name, value);//给属性名设置属性值 B、删除：remove、removeChild element.remove();//删除自身，返回值无 element.removeChild(sonNode);//删除自身的某个子节点，返回值为子节点 C、改变：replaceChild element.replaceChild(outerNode, sonNode);//用外节点替换某个子节点 D、查找：getElementById、getElementsByTagName、getElementsByClassName、querySelector、querySelectorAll 参数不再指定元素属性，getElementById、getElementsByTagName、getElementsByClassName，如document.getElementsByClassName("example") 参数需要指定元素属性，querySelector、querySelectorAll，如document.querySelectorAll(".example")，document.querySelectorAll("h2, div, span") E、克隆：node.cloneNode(true)//默认浅克隆，true为深克隆八、九宫格之位置交换与塌陷递补（发布/订阅模式，观察者模式） 注意：发布/订阅模式中，发布者只要做好消息的发布，而不关心消息有没有订阅者订阅。而观察者模式则要求两端同时存在1、类模式-九宫格之位置交换与塌陷递补-实用 <!doctype html> <html> <head> <meta charset="utf-8"> <title>九宫格之位置交换与塌陷递补-实用</title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; } #whole { width: 550px; height: 550px; padding: 5px; background: #CFC; position: relative; margin: 100px auto; } #whole .dragClass { width: 150px; height: 150px; margin: 5px; cursor: move; user-select: none; background: #FF9; overflow: hidden; float: left; } #whole .dragClass img { width: 100%; height: 100%; border: none; } .detail{ color:red; font-size: 20px; } </style> </head> <body> <div class="detail">实际项目中</div> <div class="detail">1、页面初始化时，向后台请求图片</div> <div class="detail">2、根据设计稿将图片插入页面的对应位置</div> <div class="detail">3、将拖拽内容导入拖拽插件</div> <div class="detail">4、每次拖拽结束后，前端会告诉后台，被拖拽图片的新旧位置</div> <div class="detail">5、后台更新数据并返给前端</div> <div class="detail">6、前端更新数据并将拖拽内容导入拖拽插件</div> <div class="detail">7、拖拽结果分为，位置互换、塌陷递补，实用</div> <div id="whole"> <div class="dragClass">1</div> <div class="dragClass">2</div> <div class="dragClass">3</div> <div class="dragClass">4</div> <div class="dragClass">5</div> <div class="dragClass">6</div> <div class="dragClass">7</div> <div class="dragClass">8</div> <div class="dragClass">9</div> </div> </body> </html> <script> function initDrag(id,callbackObject,type,isPutLast){ //type，为"exchange"时，位置互换，为"collapse"时，塌陷递补 //isPutLast，为true时，放在所有交叉元素的最后一个后面，为false时，放在所有交叉元素中，交叉面积最大那个的后面， type = type || "exchange" || "collapse";//位置互换||塌陷递补 function Drag(item,items,callbackObject) { this.minX = null; this.minY = null; this.maxX = null; this.maxY = null; this.ele = item; this.items = items; this.callbackObject = callbackObject||{}; this.down = this.down.bind(this); this.move = this.move.bind(this); this.up = this.up.bind(this); this.on(this.ele, "mousedown", this.down);//给-按下鼠标-绑定事件 } if(type === "collapse"){ Drag.flag = true; Drag.sortArray = []; } //以下按下鼠标，主动者即将移动 Drag.prototype.down = function (event) { this.minX = this.ele.offsetLeft; this.minY = this.ele.offsetTop; this.maxX = event.pageX; this.maxY = event.pageY; this.allCover = []; if (this.ele.setCapture) { this.ele.setCapture(); this.on(this.ele, "mousemove", this.move); this.on(this.ele, "mouseup", this.up); } else { this.on(document, "mousemove", this.move); this.on(document, "mouseup", this.up); } event.preventDefault(); for(var i = 0; i < this.items.length; i++){ this.items[i].style.zIndex = 2; } this.ele.style.zIndex = 3; if(this.callbackObject.down){ this.callbackObject.down(this.ele.index, event) } if(Drag.flag){ Drag.flag = false ; for(var i=0; i<this.items.length; i++ ){ var position = { left: this.items[i].left, top: this.items[i].top, } Drag.sortArray.push(position) } } }; //以下移动鼠标，主动者移动 Drag.prototype.move = function (event) { this.ele.style.left = this.minX + (event.pageX - this.maxX) + "px"; this.ele.style.top = this.minY + (event.pageY - this.maxY) + "px"; var ele = this.ele; for (var i = 0; i < this.items.length; i++) { var item = this.items[i]; if (item == ele)continue; //以下检测item是否在this.ele的右、下、左、上方 var isRight = item.offsetLeft > ele.offsetLeft + ele.offsetWidth; var isBottom = item.offsetTop > ele.offsetTop + ele.offsetHeight; var isLeft = ele.offsetLeft > item.offsetLeft + item.offsetWidth; var isTop = ele.offsetTop > item.offsetTop + item.offsetHeight; if (isRight || isBottom || isLeft || isTop) { item.style.backgroundColor = ""; } else { this.allCover.push(item); item.style.backgroundColor = "red"; } } if(this.callbackObject.move){ this.callbackObject.move() } }; //以下松开鼠标，主动者继续移动，被动者移动 Drag.prototype.up = function (event) { if (this.ele.releaseCapture) { this.ele.releaseCapture(); this.off(this.ele, "mousemove", this.move); this.off(this.ele, "mouseup", this.up); } else { this.off(document, "mousemove", this.move); this.off(document, "mouseup", this.up); } var shortest; var lastIndex = 0; var shortIndex = 0; var allCover = this.allCover; var allCoverLastItem = allCover[allCover.length-1]; for (var i = 0; i < this.items.length; i++) { if(this.items[i] === allCoverLastItem) lastIndex = i; } if (allCover && allCover.length) { for (var i = 0; i < allCover.length; i++) { var item = allCover[i]; //计算被拖拽的元素和撞上的元素“左上角”之间的距离，并且保存到distance属性上，距离越小，重叠面积越大 item.distance = Math.sqrt( Math.pow(this.ele.offsetLeft - item.offsetLeft, 2) + Math.pow(this.ele.offsetTop - item.offsetTop, 2) ); item.style.backgroundColor = ""; } allCover.sort(function (one, two) { return one.distance - two.distance }); shortest = allCover[0]; shortest.style.zIndex = 1; shortest.style.backgroundColor = "orange"; this.ele.style.backgroundColor = "orange"; if(type === "exchange"){//位置互换 var left = this.ele.left; var top = this.ele.top; this.animate(shortest, {left: left, top: top}, 700);//被动者移动 this.animate(this.ele, {left: shortest.left, top: shortest.top}, 700);//主动者移动 this.ele.left = shortest.left; this.ele.top = shortest.top; shortest.left = left; shortest.top = top; } if(type === "collapse"){//塌陷递补 //document.getElementById(id).insertBefore(this.ele, shortest); // 这是方案1，以下7行为方案2 var whole = document.getElementById(id); for (var i = 0; i < this.items.length; i++) { if(this.items[i] === shortest) shortIndex = i; } var index = isPutLast? lastIndex: shortIndex; var ele = whole.removeChild(this.ele); whole.insertBefore(ele, this.items[index]); for(var i=0; i<this.items.length; i++ ){ var position = { left: Drag.sortArray[i].left, top: Drag.sortArray[i].top } this.animate(this.items[i], position, 700); } } } else {//如果没有撞上的元素，则返回原始位置 if(type === "exchange"){//位置互换 var position = { left: this.ele.left, top: this.ele.top, } this.animate(this.ele, position, 700);//主动者移动 } if(type === "collapse"){//塌陷递补 for(var i=0; i<this.items.length; i++ ){ if(this.items[i] === this.ele){ var position = { left: Drag.sortArray[i].left, top: Drag.sortArray[i].top, } this.animate(this.ele, position, 700) } } } } if(this.callbackObject.up){ this.callbackObject.up(this.ele.index, shortest && shortest.index || 1, event) } }; //以下给主动者-绑定事件 Drag.prototype.on = function (ele, type, fn) { if(ele.addEventListener){ ele.addEventListener(type, fn, false); }else if(/^cust/.test(type)) { if (!ele["cust" + type]) { ele["cust" + type] = []; } var single = ele["cust" + type]; for (var i = 0; i < single.length; i++) { if (single[i] == fn) return; } single.push(fn); } }; //以下给主动者-解绑事件 Drag.prototype.off = function(ele, type, fn) { if (ele.removeEventListener) { ele.removeEventListener(type, fn, false); } else { var single = ele["onEvent" + type]; if (single && single.length) { for (var i = 0; i < single.length; i++) { if (single[i] == fn) { single[i] = null; return; } } } } }; //以下双方移动 Drag.prototype.animate = function(ele, obj, duration) { var that = this; var allBegin = {};//用来保存多个方向begin； var allChange = {};//用来保存多个方向的change; var flag = 0;//用来记录各个方向的距离是否有效 for (var attr in obj) { var target = obj[attr] var begin = this.getCss(ele, attr); var change = target - begin; if (change) {//判断一下此方向的运动距离有效，不为0 allBegin[attr] = begin; allChange[attr] = change; flag++; } } if (!flag) return; //如果各个方向的运动距离都是0，则结束动画的执行 var interval = 15; var times = 0; if(ele.timer) clearInterval(ele.timer); ele.timer = setInterval(function() { times += interval; if (times < duration) { for (var attr in allChange) { var change = allChange[attr]; var begin = allBegin[attr]; var val=times/duration*change+begin; that.setCss(ele, attr, val); } } else { for (var attr in allChange) { var target = obj[attr]; that.setCss(ele, attr, target); } clearInterval(ele.timer); } }, interval); } //以下双方移动-辅助工具 Drag.prototype.getCss = function(ele, attr) { if (window.getComputedStyle) { return parseFloat(window.getComputedStyle(ele, null)[attr]); } else { if (attr == "opacity") { //opacity:0.5; //filter:Alpha(opacity=50); var filter = ele.currentStyle.filter; var reg = /alpha\(opacity=(\d+(?:\.\d+)?)\)/; if (reg.test(filter)) {// IE8 以及更早的浏览器 return RegExp.$1 / 100; } else { return 1;//如果没有给不透明度赋值，则应该把默认值1返回 } } else { return parseFloat(ele.currentStyle[attr]); } } } //以下双方移动-辅助工具 Drag.prototype.setCss = function(ele, attr, val) { if (attr == "opacity") { ele.style.opacity = val; ele.style.filter = "alpha(opacity=" + val * 100 + ")"; } else { ele.style[attr] = val + "px"; } } //以下给各个盒子绑定拖拽事件 var items = document.getElementById(id).children; for (var i = items.length - 1; i >= 0; i--) { //从后往前逐个定位。 //如果从前往后逐个定位，随着前面的脱离文档流，后面的会移动到前面的位置，最终都叠加到第一张图片的上面。 var item = items[i]; item.top = item.offsetTop; item.left = item.offsetLeft; item.index = i; item.style.top = item.offsetTop + "px"; item.style.left = item.offsetLeft + "px"; item.style.zIndex = 2; item.style.position = "absolute"; new Drag(item,items,callbackObject) } } </script> <script> var longth = +new Date(); var callbackObject = { down:function(fromIndex, event){ //console.log(fromIndex,"前端通过这个索引，可以获取始发数据") }, index:+new Date(), move:function(){ setTimeout(function(){ var longthIn = +new Date(); if (longthIn - longth > 500) { longth = longthIn; //console.log("此处写入移动逻辑") } }) }, up:function(fromIndex, toIndex, event){ //console.log(fromIndex, toIndex,"前端通过这两个索引，可以获取始发数据和目的数据") //console.log(document.getElementById("whole"));//把这个拖拽结果发给后台，收到后台的反馈后再刷新页面 //也可以在多次拖拽结束后，点击（加在）图片下方的按钮，把最终结果告诉后台，不必像上面那样，拖拽一次告诉后台一次 }, } initDrag("whole",callbackObject,"collapse",true) </script>2、发布订阅/观察者模式-九宫格之位置交换-不实用 <!doctype html> <html> <head> <meta charset="utf-8"> <title>九宫格之位置交换-不实用</title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; } #whole { width: 480px; height: 480px; padding: 5px; background: #CFC; position: relative; margin: 100px auto; } #whole .classDrag { width: 150px; height: 150px; margin: 5px; cursor: move; user-select: none; background: #FF9; overflow: hidden; float: left; } #whole .classDrag img { width: 100%; height: 100%; border: none; } </style> </head> <body> <div id="whole"> <div class="classDrag">0</div> <div class="classDrag">1</div> <div class="classDrag">2</div> <div class="classDrag">3</div> <div class="classDrag">4</div> <div class="classDrag">5</div> <div class="classDrag">6</div> <div class="classDrag">7</div> <div class="classDrag">8</div> </div> </body> </html> <script> /*第一步：准备拖拽的类，给主动者用*/ function processThis(fn, context) { return function (event) { fn.call(context, event); }; } function Drag(ele,items) { this.minX = null; this.minY = null; this.maxX = null; this.maxY = null; this.items = items; this.ele = ele; this.selfDown = processThis(this.down, this); this.selfMove = processThis(this.move, this); this.selfUp = processThis(this.up, this); on(this.ele, "mousedown", this.selfDown); } Drag.prototype.on = function (type, fn) {//把方法订阅给实例 if (!this["custom" + type]) { this["custom" + type] = []; } var single = this["custom" + type]; for (var i = 0; i < single.length; i++) { if (single[i] == fn)return this; } single.push(fn); return this; }; Drag.prototype.down = function (event) { this.minX = this.ele.offsetLeft; this.minY = this.ele.offsetTop; this.maxX = event.pageX; this.maxY = event.pageY; if (this.ele.setCapture) { this.ele.setCapture(); on(this.ele, "mousemove", this.selfMove); on(this.ele, "mouseup", this.selfUp); } else { on(document, "mousemove", this.selfMove); on(document, "mouseup", this.selfUp); } event.preventDefault(); run(this,"custDown", event); }; Drag.prototype.move = function (event) { this.ele.style.left = this.minX + (event.pageX - this.maxX) + "px"; this.ele.style.top = this.minY + (event.pageY - this.maxY) + "px"; run(this,"custMove", event); }; Drag.prototype.up = function (event) { if (this.ele.releaseCapture) { this.ele.releaseCapture(); off(this.ele, "mousemove", this.selfMove); off(this.ele, "mouseup", this.selfUp); } else { off(document, "mousemove", this.selfMove); off(document, "mouseup", this.selfUp); } run(this, "custUp", event); }; /*第二步：准备（订阅、解除订阅、发布）方法，给主动者用*/ function on(ele, type, fn) {//把方法订阅给实例或文档 if (ele.addEventListener) { ele.addEventListener(type, fn, false); } else { if (!ele["onEvent" + type]) { ele["onEvent" + type] = []; ele.attachEvent("on" + type, function () { run.call(ele) }); } var single = ele["onEvent" + type]; for (var i = 0; i < single.length; i++) { if (single[i] == fn)return; } single.push(fn); } } function off(ele, type, fn) { if (ele.removeEventListener) { ele.removeEventListener(type, fn, false); } else { var single = ele["onEvent" + type]; if (single && single.length) { for (var i = 0; i < single.length; i++) { if (single[i] == fn) { single[i] = null; return; } } } } } function run(ele, type, event) { var single = ele["custom" + type]; if (single && single.length) { for (var i = 0; i < single.length; i++) { if (typeof single[i] == "function") { single[i].call(ele, event); } else { single.splice(i, 1); i--; } } } }; /*第三步：准备与动画相关的方法，给双方用*/ function animate(ele, obj, duration) { var allBegin = {};//用来保存多个方向begin； var allChange = {};//用来保存多个方向的change; var flag = 0;//用来记录各个方向的距离是否有效 for (var attr in obj) { var target = obj[attr] var begin = getCss(ele, attr); var change = target - begin; if (change) {//判断一下此方向的运动距离有效，不为0 allBegin[attr] = begin; allChange[attr] = change; flag++; } } if (!flag) return; //如果各个方向的运动距离都是0，则结束动画的执行 var interval = 15; var times = 0; clearInterval(ele.timer); function step() { times += interval; if (times < duration) { for (var attr in allChange) { var change = allChange[attr]; var begin = allBegin[attr]; var val=times/duration*change+begin; setCss(ele, attr, val); } } else { for (var attr in allChange) { var target = obj[attr]; setCss(ele, attr, target); } clearInterval(ele.timer); } } ele.timer = setInterval(step, interval); } function getCss(ele, attr) { if (window.getComputedStyle) { return parseFloat(window.getComputedStyle(ele, null)[attr]); } else { if (attr == "opacity") { //opacity:0.5; //filter:Alpha(opacity=50); var filter = ele.currentStyle.filter; var reg = /alpha\(opacity=(\d+(?:\.\d+)?)\)/; if (reg.test(filter)) {// IE8 以及更早的浏览器 return RegExp.$1 / 100; } else { return 1;//如果没有给不透明度赋值，则应该把默认值1返回 } } else { return parseFloat(ele.currentStyle[attr]); } } } function setCss(ele, attr, val) { if (attr == "opacity") { ele.style.opacity = val; ele.style.filter = "alpha(opacity=" + val * 100 + ")"; } else { ele.style[attr] = val + "px"; } } /*第四步：准备订阅事件，给双方用*/ function custDown() { this.allCover = []; for(var i = 0; i < this.items.length; i++){ this.items[i].style.zIndex = 2; } this.ele.style.zIndex = 3; } function custMove() { var ele = this.ele; for (var i = 0; i < items.length; i++) { var item = items[i]; if (item == ele)continue; //以下检测item是否在this.ele的右、下、左、上方 var isRight = item.offsetLeft > ele.offsetLeft + ele.offsetWidth; var isBottom = item.offsetTop > ele.offsetTop + ele.offsetHeight; var isLeft = ele.offsetLeft > item.offsetLeft + item.offsetWidth; var isTop = ele.offsetTop > item.offsetTop + item.offsetHeight; if (isRight || isBottom || isLeft || isTop) { item.style.backgroundColor = ""; } else { this.allCover.push(item); item.style.backgroundColor = "red"; } } } function custUp() { var allCover = this.allCover; if (allCover && allCover.length) { for (var i = 0; i < allCover.length; i++) { var item = allCover[i]; //计算被拖拽的元素和撞上的元素之间的距离，并且把距离保存到distance属性上 //可以先找一个距离四周图片都相等的位置，然后再移动、看效果 item.distance = Math.sqrt(Math.pow(this.ele.offsetLeft - item.offsetLeft, 2) + Math.pow(this.ele.offsetTop - item.offsetTop, 2)); item.style.backgroundColor = ""; } //排序，找出和被拖拽元素距离最短（重合面积最大）的那个元素 allCover.sort(function (one, two) { return one.distance - two.distance }); var shortest = allCover[0]; shortest.style.zIndex = 1; shortest.style.backgroundColor = "orange"; this.ele.style.backgroundColor = "orange"; //交换位置 animate(shortest, {left: this.ele.left, top: this.ele.top}, 700); animate(this.ele, {left: shortest.left, top: shortest.top}, 700); var left = this.ele.left; var top = this.ele.top; this.ele.left = shortest.left; this.ele.top = shortest.top; shortest.left = left; shortest.top = top; } else {//如果没有撞上的元素，则返回原始位置 animate(this.ele, {left: this.ele.left, top: this.ele.top}, 700); } } /*第五步：给各个拖拽盒子订阅事件*/ var index = 0; var items = document.getElementById("whole").children; for (var i = items.length - 1; i >= 0; i--) { //从后往前逐个定位。 //如果从前往后逐个定位，随着前面的脱离文档流，后面的会移动到前面的位置，最终都叠加到第一张图片的上面。 var item = items[i]; item.style.zIndex = 2; item.style.left = (item.left = item.offsetLeft) + "px"; item.style.top = (item.top = item.offsetTop) + "px"; item.style.position = "absolute"; new Drag(item,items).on("custDown", custDown).on("custMove", custMove).on("custUp", custUp); } </script>九、瀑布流 所谓瀑布流图片，就是随着鼠标往下拉，图片无穷无尽，但又不是死循环。因为这次拉到底后，后面的才显示出来。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; list-style: none; font-size: 50px; color: white; } div{ width: 1050px; margin:0 auto; } div ul{ width: 200px; float: left; margin: 0 5px; } div ul li{ width: 100%; background: url("http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=5c2ddf7c938c5a6ae54f0b1ab390b9fe") no-repeat center #e1e1e1; margin-bottom: 10px; } div ul li img{ display: block; width: 100%; } </style> </head> <body> <div> <ul><!--<li><img realImg="1.jpg" alt=""/></li>--></ul> <ul></ul> <ul></ul> <ul></ul> <ul></ul> </div> <script> var oDiv=document.getElementsByTagName('div')[0]; var aUl=oDiv.getElementsByTagName('ul'); var aLi=oDiv.getElementsByTagName('li'); var aImg=oDiv.getElementsByTagName('img'); //此处是自己造的假数据 var data=[ {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg"}, {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg"}, {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg"}, {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg"}, {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517848093_mthumb.jpg"}, {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517850750_mthumb.jpg"}, {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517853171_mthumb.jpg"}, {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517855671_mthumb.jpg"}, {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517857750_mthumb.jpg"}, {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517860171_mthumb.jpg"}, {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518058703_mthumb.jpg"}, {"src":"http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518060703_mthumb.jpg"} ]; function rnd(n,m){ return Math.round(Math.random()*(m-n)+n); } function makeArray(arg){ var ary=[]; if('getComputedStyle' in window){ ary=Array.prototype.slice.call(arg); }else{ for(var i=0; i<arg.length; i++){ ary.push(arg[i]) } } return ary; } function win(attr){ return document.documentElement[attr]||document.body[attr]; } //1.动态创建1个li,li的宽度不管，高度随机，内容是img； function createLi(){ var oLi=document.createElement('li'); oLi.style.height=rnd(100,300)+'px'; oLi.innerHTML='<img realImg="'+data[rnd(0,9)].src+'" alt=""/>'; return oLi; } //2.创建50个li，每次都插入最短的ul function li50(){ for(var i=0; i<50; i++){ var oLi=createLi(); var ary=makeArray(aUl); ary.sort(function(a,b){ return a.offsetHeight- b.offsetHeight; }); ary[0].appendChild(oLi); } } li50(); showImg(); window.onscroll=function(){ var scrollBottom=win('scrollTop')+win('clientHeight'); showImg();//延迟加载图片，只要图片进入可视区，才显示图片 if(scrollBottom>=win("scrollHeight")){ li50();//不管是否进入可视区，只要满足条件，都会动态创建50个； } }; function showImg(){ var scrollBottom=win('scrollTop')+win('clientHeight'); for(var i=0; i<aLi.length; i++){ var imgPos=aLi[i].offsetTop+aLi[i].offsetHeight; if(imgPos<scrollBottom){ aImg[i].src=aImg[i].getAttribute('realImg'); aImg[i].parentNode.style.height='auto'; } } } </script> </body> </html>十、跑马灯效果 实现原理：将图片复制一份放到第一份图片后面；第一份图片从显示区左边界跑出多少、第二份图片就从显示区右边界跑入多少；第一份图片完全跑出显示区时，第二份图片则完全跑入显示区。此时瞬间切换至轮播开始时的状态。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; list-style: none; } div{ position: relative; width: 800px; height: 200px; border: 5px solid lightgreen; margin:10px auto; overflow: hidden; } div ul{ position: absolute; left:0; top:0; } div ul li{ width: 200px; height: 200px; float: left; } div ul li img{ width:100%; height: 100%; } </style> </head> <body> <div id="div1"> <ul> <li><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg" alt=""/></li> <li><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg" alt=""/></li> <li><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg" alt=""/></li> <li><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg" alt=""/></li> </ul> </div> <script> var oUl=document.getElementsByTagName('ul')[0]; var lis=oUl.getElementsByTagName('li'); oUl.innerHTML+=oUl.innerHTML; oUl.style.width=lis.length*lis[0].offsetWidth+'px'; var left=null; var timer=setInterval(function(){ left-=3; if(left<-oUl.offsetWidth/2){ left=0; } oUl.style.left=left+'px' },20) </script> </body> </html>十一、卷轴展开效果 注意：前端网关闭，存在上面的图片丢失，此效果已经不可预览 实现原理：（1）利用绝对定位固定好起始位置；（2）利用遮罩将右轴右侧的部分遮住；（3）让右轴和遮罩同时同速度向右运动！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>诏书</title> <style type="text/css"> * { margin: 0; padding: 0; } #animate { margin: 40px auto; width: 1100px; height: 500px; position: relative; overflow: hidden; } #back { width: 1100px; height: 500px; position: absolute; left: 40px; top: 95px; } #leftAxis { position: absolute; left: 0; } #rightAxis { position: absolute; left: 16px; } #rightWhiteMark { position: absolute; left: 70px; top:95px; } </style> </head> <body> <div id="animate"> <div id="back"><img src="https://cdn.files.qdfuns.com/article/content/picture/201806/09/145027pf0jh29z4nhlljr5.png"/></div> <div id="leftAxis"><img src="https://cdn.files.qdfuns.com/article/content/picture/201806/09/145336cd8g5iq7r78qsk8z.png"/></div> <div id="rightWhiteMark"><img src="https://cdn.files.qdfuns.com/article/content/picture/201806/26/193935vzzlvazlrkgcxxv6.png"/></div> <div id="rightAxis"><img src="https://cdn.files.qdfuns.com/article/content/picture/201806/09/145336cd8g5iq7r78qsk8z.png"/></div> </div> </body> <script> var animate=document.getElementById("animate"); var rightAxis = document.getElementById("rightAxis"); var rightWhiteMark = document.getElementById("rightWhiteMark"); var timer = setInterval(function () { var rightAxisLeft=getComputedStyle(rightAxis).left; var rightWhiteMarkLeft=getComputedStyle(rightWhiteMark).left; if(parseFloat(rightAxisLeft)>=923){ rightAxisLeft=923+"px"; clearInterval(timer); } rightAxis.style.left=(parseFloat(rightAxisLeft)+10)+"px"; rightWhiteMark.style.left=(parseFloat(rightWhiteMarkLeft)+10)+"px"; }, 20) </script> </html>十二、“几”字形选项卡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .box{ width:612px; border:2px red solid; margin: 0 auto; } ul{ overflow: hidden; } li{ list-style: none; background:red; float: left; width: 200px; height: 30px; line-height: 30px; text-align: center; border: 2px solid orange; } li.on{ background: green; border-bottom: none;/*让该卡头的下边框为“none”*/ height: 32px;/*卡头的内容高度设置为：原内容的高度+卡头下边框的宽度。*/ } .box div{ background:green; display: none; width:612px; height:200px; font-size: 30px; border-top: none;/*在开始写样式时，就把展示区上边框设置成“none”*/ } .box div.on{ display: block; } </style> </head> <body> <div class="box" id="box"> <ul> <li>中国</li> <li class="on">日本</li> <li>韩国</li> </ul> <div>中国是老大</div> <div class="on">日本是老二</div> <div>韩国是老三</div> </div> <script> var box = document.getElementById('box'); var ul = document.getElementsByTagName('ul')[0]; var lis = box.getElementsByTagName('li'); var divs = box.getElementsByTagName('div'); for(var i=0;i<lis.length;i++){ lis[i].qiancheng = i; lis[i].onmouseover = function(){ for(var j=0;j<lis.length;j++){ lis[j].className = ''; divs[j].className = ''; } this.className = 'on'; divs[this.qiancheng].className = 'on'; } } ul.onmouseout=function () { for(var j=0;j<lis.length;j++){ if(j===1){ lis[j].className = 'on'; divs[lis[j].qiancheng].className = 'on'; continue; } lis[j].className = ''; divs[j].className = ''; } } </script> </body> </html>十三、胶卷式动画放映 图片像电影的胶卷一样，一帧帧地放映，且可以任意删减图片帧数，不会影响放映效果 所用技术为：CSS3动画和原生JavaScript <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>胶卷式动画放映</title> <style type="text/css" id="style1"> * { margin: 0; padding: 0; font-family:"楷体" } body{ background: black; } #wrap { width: 150px; height: 120px; margin: 200px auto; perspective: 2000px; } #wrap ul { width: 100%; height: 100%; transform-style: preserve-3d; animation:move 12s 3.2s infinite ; } #wrap ul li { top: 0; left: 0; position: absolute; width: 148px; height: 118px; line-height: 118px; text-align: center; font-size: 118px; background: grey; border: 1px solid #ccc; box-shadow: 1px 1px 3px rgba(255, 255, 255, 0.2); border-radius: 5px; overflow: hidden; } .shadow{ width: 1200px; height: 1200px; position: absolute; left: 50%; top: 50%; margin-left: -600px; margin-top: -600px; background: radial-gradient(600px 600px at center,rgba(50,50,50,0.8),rgba(0,0,0,0)); transform: rotateX(90deg) translateZ(-150px); } </style> </head> <body> <div id="wrap"> <ul> <li>！</li> <li>师</li> <li>程</li> <li>工</li> <li>端</li> <li>前</li> <li>的</li> <li>秀</li> <li>优</li> <li>最</li> <li>上</li> <li>史</li> <li>历</li> <li>类</li> <li>人</li> <li>是</li> <li>成</li> <li>钱</li> </ul> <div class="shadow"></div> </div> </body> </html> <script> var oLis = document.querySelectorAll("#wrap li"); var oStyle = document.querySelector("#style1"); var len = oLis.length; var aaa = null; for (var i = 1; i <= len; i++) { (function (i) { window.setTimeout(function () { oStyle.innerHTML += "#wrap ul li:nth-child("+i+"){"+ "transform: rotateY("+(len-i)*(360/len)+"deg) translateZ(500px);"+ "transition:0.7s;"+ "transition-delay:"+i*0.1+"s"+ "}" }, 100); })(i); } for (i = 0; i <= len; i++) { aaa += (100 / len) * i + "%{transform: rotateY(" + (-360 / len) * i + "deg);}"; } oStyle.innerHTML += "@keyframes move {" + aaa + "}"; </script> <script> var oLis = document.querySelectorAll("#wrap li"); var oStyle = document.getElementsByTagName("style")[0]; var len = oLis.length; var aaa = null; for (var i = 1; i <= len; i++) { (function (i) { window.setTimeout(function () { document.styleSheets[0].insertRule( "#wrap ul li:nth-child("+i+"){"+ "transform: rotateY("+(len-i)*(360/len)+"deg) translateZ(500px);"+ "transition: 0.7s;"+ "transition-delay:"+i*0.1+"s"+ "}" ) }, 100); })(i); } for (i = 0; i <= len; i++) { aaa += (100 / len) * i + "%{transform: rotateY(" + (-360 / len) * i + "deg);}"; } oStyle.innerHTML += "@keyframes move {" + aaa + "}"; </script>十四、放大镜 原理：左边阴影在左边图片上从左到右移动的时候，右边大框也在右边大图片上从左到右移动（尽管在视觉、原理和代码上是相反的）；所谓放大，其实就是一张原本就很小的图对应一张原本就很大的图。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } .small{ width: 400px; height: 400px; position: relative; background: url(http://cdn.attach.qdfuns.com/notes/pics/201702/11/214206pk76vdieu5co7uwi.jpg) no-repeat center; border: 1px solid #ccc; } .small .inner{ width: 100px; height: 100px; background: yellow; opacity: 0.5; filter: alpha(opacity=50); position: absolute; left:0; top:0; display: none; } .big{ width: 400px; height: 400px; position: absolute; left:410px; top:0; overflow: hidden; border: 1px solid #ccc; display: none; } .big img{ width: 200%; height: 200%; position: absolute; left:0; top:0; } </style> </head> <body> <div id="small" class="small"> <div class="inner"></div> </div> <div id="big" class="big"> <img src="http://cdn.attach.qdfuns.com/notes/pics/201702/11/214213x2oh86wpuuuzcuuc.jpg" alt=""/> </div> <script> var small = document.getElementById("small"); var inner = small.getElementsByTagName("div")[0]; var big = document.getElementById("big"); var img = big.getElementsByTagName("img")[0]; //当鼠标移入small的时候，inner和big显示 small.onmouseover = function () { big.style.display = "block"; inner.style.display = "block"; }; //当鼠标在small移动的时候：1）鼠标在inner的中间 2）inner跟随鼠标移动 small.onmousemove = function (e) { e = e || window.event; var left = e.clientX - this.offsetLeft - inner.offsetWidth / 2; var top = e.clientY - this.offsetTop - inner.offsetHeight / 2; if (left <= 0) { left = 0; } else if (left >= this.offsetWidth - inner.offsetWidth) { left = this.offsetWidth - inner.offsetWidth; } if (top <= 0) { top = 0; } else if (top >= this.offsetHeight - inner.offsetHeight) { top = this.offsetHeight - inner.offsetHeight; } inner.style.left = left + "px"; inner.style.top = top + "px"; //当inner移动的时候，大图跟着一起移动，并且，大图和inner移动的方向相反； //或者理解为：左边阴影在图片上从左到右移动的时候，右边大框也在大图片上从左到右移动（尽管视觉上是相反的）。 img.style.left = (left / (small.offsetWidth - inner.offsetWidth)) * (big.offsetWidth - img.offsetWidth) + "px"; img.style.top = (top / (small.offsetHeight - inner.offsetHeight)) * (big.offsetHeight - img.offsetHeight) + "px"; }; //当鼠标移出的时候，inner和big隐藏； small.onmouseout = function () { big.style.display = "none"; inner.style.display = "none"; }; </script> </body> </html> 十五、git 附、Git常用命令大全http://cd.itheima.com/news/20211214/144207.html 附、github是什么 （1）github是2008年出现的专业的代码托管分享平台， （2）创始人是Tom Preston-Werner（汤姆·普雷斯顿-维尔纳）、Chris Wanstrath（克里斯·万斯特拉斯）， （3）2018年的时候被微软以75亿美元收购，在2020年github收购了NPM1、一个简单的git流程 （1）克隆项目：git clone https://github.com/AAA/BBB.git （2）连接到远程仓库：git remote add origin https://github.com/AAA/BBB.git；解除连接：git remote remove origin （3）建立分支：git branch branch_1 （4）切换到分支：git checkout branch_1 （5）====写代码。3和4可以合并为git checkout -b branch_1 （6）添加到暂存区：git add README.md （7）添加到历史区：git commit -m "first branch_1" （8）推送到远程仓库：git push -u origin fen_zhi_ming（从第2次开始，使用git push即可）git push --set-upstream origin fen_zhi_ming2、其它命令 （1）切换到branch_1分支：git checkout branch_1 （2）拉取branch_1分支内容：git pull origin branch_1（这个操作很重要，最新代码将覆盖旧代码） （3）把branch_1分支的内容合并到branch_2分支：git merge branch_1（在branch_2分支上运行） （4）拉取远程分支branch_1并切换到该分支，git branch --track branch_1 remotes/origin/branch_13、查看提交 （1）查看某文件-每次提交的-所有改变，git log -p src\views\content\content-item.vue；复制相对路径 （2）查看某提交-改变文件的-所有改变，git show hash_id；用git log，获取hash_id，截取前面一小段即可4、查看有变化的文件 （1）git status，查看当前工作目录的状态（哪些文件发生了变化）: （2）git diff，查看尚未暂存的变更（即修改过但还没用git add添加的变更）: （3）git diff --cached，查看已暂存的变更（即用git add添加过的变更，但还没有提交的变更）: （4）git diff HEAD，查看所有变更（包括暂存区和工作目录中的）: （5）git diff <file-path>，查看指定文件的变更： （6）git diff --cached <file-path>，查看暂存区和最后一次提交的变更（对于指定文件）: （7）git diff HEAD <file-path>，查看工作目录与最后一次提交的变更（对于指定文件）:5、回退 （1）git reset --hard HEAD^ 回退到上个版本 （2）git reset --hard HEAD~3 回退到前3次提交之前 （3）git reset --hard commit_id 退到指定的commit_id //git log，获取commit_id6、强推 （1）git push --force origin <branch-name> （2）git push -f origin <branch-name>7、冲突 （1）产生条件：多人在各自的分支上对同一内容做了不同的修改，后合并的人会报冲突 （2）产生现象<<<<<<< HEAD本地向服务器提交的内容（我写的）=======服务器下载到本地的内容（人家写的）>>>>>>>b0ef58d69851fedad4169878a62033c0ce16246c8、git问题与解决 （1）问题1 A、内容，'common-module' already exists in the index B、解决，git rm --cached 'common-module' （2）问题2， A、内容，dependency was not found:* @common-module/DateUtil B、解决，git submodule add http://10.71.59.14:30190/maxiaolin/common-module （3）问题3， A、内容，在高版本node环境下，在vscode的命令窗口执行npm run dev出错 B、解决，在vscode的命令窗口执行一次$env:NODE_OPTIONS="--openssl-legacy-provider"即可 C、这个命令的作用是，指定在运行Node.js时使用旧版的OpenSSL提供程序 D、SSL（Secure Socket Layer）安全套接层 （4）问题4 A、内容，浏览器控制台出现非常慢 B、解决，F12-设置-preferences-Language-“English(US)-English(US)” 十六、gitLab的问题1、通过Powershell从gitLib上拉取代码失败，解决SSL certificate problem 方案一：在项目准备存放的地方运行 git config --global http.sslVerify false 方案二：在项目准备存放的路径下运行 set GIT_SSL_NO_VERIFY=true git clone 方案三：用公钥pub （1）运行ssh-keygen -t rsa -C “123456@qq.com”；cd ~/.ssh；ls（查看目录是否有id_rsa.pub文件）；cat id_rsa.pub（查看公钥）；复制公钥。 （2）进入gitlab；点击右上方settings；点击左中间SSH Keys；在Key里粘贴公钥；点击Add key； （3）在项目准备存放的路径下运行 git clone gitlab地址（此过程可能与三次握手相关，另外还有四次挥手） （4）来源，https://blog.csdn.net/kawayiyy123/article/details/1109204122、通过Powershell向gitLib上推送代码失败， 方案一：git push -u origin fen_zhi_ming（从第2次开始，使用git push即可） 方案二：git push --set-upstream origin fen_zhi_ming（从第2次开始，使用git push即可）3、通过TortoiseGit从gitLib上拉取、推送代码的步骤 步骤一：获取并添加公钥 （1）运行ssh-keygen -t rsa -C “123456@qq.com”；cd ~/.ssh；ls（查看目录是否有id_rsa.pub文件）；cat id_rsa.pub（查看公钥）；复制公钥。 （2）进入gitlab；点击右上方settings；点击左中间SSH Keys；在Key里粘贴公钥；点击Add key； 步骤二：获取并添加私钥 （1）在命令行输入PuTTYgen，按Enter，点击load （2）选择文件类型All Files，点击id_rsa，点击打开 （3）点击 save private key，点击是，自动保存私钥到C:\Users\Haier\.ssh文件夹下，名称是id_rsa.ppk，如果没有该文件,则复制该文件夹下的文件id_rsa，并改名为id_rsa.ppk （4）在项目处，右键，点击Git克隆，填写URL:git@...、加载Putty密钥(K)：C:\Users\Haier\.ssh\id_rsa.ppk，点击确定。 注意：此后拉取、推送就很顺畅了4、通过TortoiseGit向gitLib上推送代码失败，一直提示输入密码，用私钥ppk （1）执行3、步骤二：（1）（2）（3） （2）在项目文件下，右键，移动鼠标到TortoiseGit上，点击Settings，点击Remote，填写Remote:origin、URL:git@...、Putty Key：C:\Users\Haier\.ssh\id_rsa.ppk，点击确定。5、gitLab的提交地址由http改为https后，下拉代码不成功，解决方案如下： 过程：audit-html文件夹下空白处--右键单击---鼠标置于TortoiseGit(t)上---单击设置---单击确定--单击“编辑本地.git/config(L)”---把第9行代码中的http改成https，即可。6、gitHub与gitLab （1）都通过git命令管理代码 （2）通过TortoiseGit（[ˈtɔːtəs]，乌龟，中间人），把git命令操作改成点击操作 （3）通过TortoiseGit-LanguagePack,把TortoiseGit的英文界面改为中文界面7、SSH：Secure Shell（安全壳），一项创建在应用层和传输层基础上的安全协议，为计算机上的Shell提供安全的传输和使用环境。从客户端来看，SSH基于密匙的安全验证过程为： （1）需要依靠密匙，也就是你必须为自己创建一对密匙，并把公用密匙放在需要访问的服务器上。 （2）如果你要连接到SSH服务器上，客户端软件就会向服务器发出请求，请求用你的密匙进行安全验证。（此过程可能与三次握手相关，另外还有四次挥手） （3）服务器收到请求之后，先在该服务器上你的主目录下寻找你的公用密匙，然后把它和你发送过来的公用密匙进行比较。 （4）如果两个密匙一致，服务器就用公用密匙加密“质询”（challenge）并把它发送给客户端软件。 （5）客户端软件收到“质询”之后就可以用你的私人密匙解密再把它发送给服务器。8、CMD与Windows PowerShell （1）前者增强后为后者 （2）前者命令少，后者命令多 （3）前者在固定位置打开，后者在当前位置打开 （4）覆盖写入文件，echo 1111111 > b.js （5）追加写入文件，echo 1111111 >> b.js （6）读取文件，cat b.js9、gitLab删除仓库：进入仓库→点击(左下方)settings→可以不点击general→点击(Adanced)后面的expand→点击下面的Remove project→输入仓库名→点击Confirm十七、VSCode1、设置 附、点击提交：树杈号-更改（查看变化）-加号（git add）-输入（-m"输入的内容"）-提交（git commit -m"输入的内容"） （1）找到设置setting A、左下角齿轮----设置setting B、文件file----首选项preference----设置setting （2）常用设置 A、自动折行换行,设置setting----on(editor:word wrap) B、修改字体,设置setting----Font Family C、修改字体大小,设置setting----Font Zize D、设置颜色主题,设置settinge----Color Theme E、代码自动保存,设置setting----搜索auto save F、关闭右侧预览,设置setting----搜索"editor.minimap.enabled" G、多页签并存,设置setting----搜索"Workbench>Editor:Enable Preview" H、滚轮改变字体大小,设置setting----搜索"mouseWheelZoom"(单词之间没有空格)----勾选 I、缩进2个空格,设置setting----Editor:Tab Size----2 J、html标签生成：在html中输入英文叹号!--按下tab或enter键。 K、js代码运行：安装插件code runner、安装node环境、F5 L、代码语法错误提示：插件，ESlint M、代码处显示提交记录：插件，“GitLens — Git supercharged” N、代码比较：单击文件1->选择以进行比较，单击文件2->与已选择项目进行比较 O、恢复默认设置：C:\Users\张三\AppData\Roaming\Code\User\settings.json，删除即可 （3）VSCode设置成中文语言环境 A、Ctrl+Shift+p B、configure display language C、确定=>“locale”:“zh-CN” D、重启vscode工具 E、商店(最左侧最下方图标) F、Chinese（Simplied） Lang G、安装 （4）修改窗口高度和字体大小 A、找到workbench.main.css文件 途径一、C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench 途径二、C:\Users\登录名\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench B、修改左侧窗口字体大小，找到“.part>.content{font-size:” C、修改选项卡字体大小，找到“.title .title-label a{text-decoration:none;font-size:”进行修改 D、修改选项卡高度，找到 .title .editor-actions{cursor:default;flex:initial;padding-left:4px;height: .tab{position:relative;display:flex;white-space:nowrap;cursor:pointer;height: .title .tabs-container{display:flex;height: 进行修改 （5）vscode如何用谷歌浏览器预览html文件 A、安装“view in browser” B、安装“open in browser” C、文件---首选项---设置---输入"open-in-browser.default"---“Chrome” D、右键“x.html”---“Open in Default Browsers” （6）运行结果释义，上面浏览器，下面浏览器控制 -------------------------------------- Local: http://localhost:8900 External: http://172.18.10.109:8900 -------------------------------------- UI: http://localhost:3001 UI External: http://172.18.10.109:3001 -------------------------------------- （7）window快捷键 A、window + e: 快速打开我的电脑 B、window + l: 快速锁屏 C、window + d: 快速回到桌面 D、shift + delete: 快速删除 附、代码检查工具（也适用于vscode） A、代码出现红黄下划线时，将鼠标置其上，百度悬浮内容，查找解决方案 B、ESLint“代码检查工具”，可在根目录下添加.eslintrc.js文件 module.exports = { "env": { "browser": true, "node": true }, "globals": {//不在这里配置而使用下列变量，则会报错 "angular": true, } } C、JSHint“代码检查工具”，可在根目录下添加.jshintrc.js文件，也可以 设置setting->检索“jshint:options”->点击“在settings.json中设置”->在"jshint.options":{}中加入 "asi": true,//无视没有加分号的行尾 "esversion": 8//使用ES8版的规则进行检测2、快捷键 来源：https://www.cnblogs.com/weihe-xunwu/p/6687000.html （1）注释： A、单行注释：[ctrl+k,ctrl+c] 或 ctrl+/ B、取消单行注释：[ctrl+k,ctrl+u] (按下ctrl不放，再按k + u) C、多行注释：[alt+shift+A] D、多行注释：ctrl+/ (双斜线) （2）移动行：alt+up/down （3）显示/隐藏左侧目录栏 ctrl + b （4）复制当前行：shift + alt +up/down （5）删除当前行：shift + ctrl + k （6）控制台终端显示与隐藏：ctrl + ~ （7）查找文件/安装vs code 插件地址：ctrl + p （8）代码格式化：shift + alt + f （9）新建一个窗口: ctrl + shift + n （10）行增加缩进: ctrl + [ （11）行减少缩进: ctrl + ] （12）裁剪尾随空格(去掉一行的末尾那些没用的空格): ctrl + shift + x （13）字体放大/缩小: ctrl + ( + 或 - ) （14）拆分编辑器: ctrl + 1/2/3 （15）切换窗口: ctrl + shift + left/right （16）关闭编辑器窗口: ctrl + w （17）关闭所有窗口: ctrl + k + w （18）切换全屏: F11 （19）自动换行: alt + z （20）显示git: ctrl + shift + g （21）全局查找文件：ctrl + shift + f （22）显示相关插件的命令(如：git log)：ctrl + shift + p （23）选中文字：shift + left / right / up / down （24）折叠代码： ctrl + k + 0-9 (0是完全折叠) （25）展开代码： ctrl + k + j (完全展开代码) （26）删除行： ctrl + shift + k （27）快速切换主题：ctrl + k / ctrl + t （28）快速回到顶部： ctrl + home （29）快速回到底部: ctrl + end （30）格式化选定代码：ctrl + k / ctrl +f （31）选中代码： shift + 鼠标左键 （32）多行同时添加内容（光标）：ctrl + alt + up/down （33）全局替换：ctrl + shift + h （34）当前文件替换：ctrl + h （35）打开最近打开的文件：ctrl + r （36）打开新的命令窗：ctrl + shift + c （37）函数代码块的注释生成方法：安装插件“Document This”；将光标放置于function上面，快捷键Ctrl+Alt+D； （38）代码正则替换：在Ctrl+H后，会出现两行搜索框，上行搜索框的右侧有雪花号，点击雪花号，正则替换可以使用了 （39）代码正则替换示例1-删除所有空行-步骤： A、ctrl+h； B、点击雪花号； C、^\s*$，11111111111111111，替换； D、上一行尾部+11111111111111111，空，替换 （40）代码正则替换示例2-给index=1;index=25;index=330;的数字后面加空格-步骤： A、ctrl+h； B、点击雪花号； C、index=(\d+)； D、index=$1 ；3、加代码块 打开vscode>文件>首选项>配置用户代码片段> （1）html { "jq": { "prefix": "jq", "body": [ "<!DOCTYPE html>", "<html lang='en'>", "<head>", " <meta charset='UTF-8'>", " <title>jq</title>", " <script src='https://cdn.bootcss.com/jquery/1.9.1/jquery.js'></script>", "</head>", "<body>", " <div>", " $1", " </div>", "</body>", "</html>", "<script type='text/javascript'>", " ", "</script>" ], "description": "jq" }, "echarts": { "prefix": "echarts", "body": [ "<!DOCTYPE html>", "<html lang='en'>", "<head>", " <meta charset='UTF-8'>", " <title></title>", " <script src='https://cdn.bootcss.com/echarts/3.7.1/echarts.js'></script>", "</head>", "<body>", " <div id='myEchartsId' style='height:300px;'></div>", "</body>", "</html>", "<script type='text/javascript'>", " var myEcharts = echarts.init(document.getElementById('myEchartsId'));", " var myEchartsOption = { ", " };", " myEcharts.setOption(myEchartsOption);", "</script>", ], "description": "echarts" }, "ng": { "prefix": "ng", "body": [ "<!DOCTYPE html>", "<html lang='en' ng-app='myModel'>", "<head>", " <meta charset='UTF-8'>", " <title>ng</title>", " <script src='https://cdn.bootcss.com/angular.js/1.6.2/angular.js'></script>", "</head>", "<body>", " <div ng-controller='firstCtrl'>", " $1", " </div>", "</body>", "</html>", "<script type='text/javascript'>", " var app = angular.module('myModel', []);", " app.controller('firstCtrl', function ($scope){", " ", " });", "</script>" ], "description": "ng" }, "bt": { "prefix": "bt", "body": [ "<!DOCTYPE html>", "<html lang='en'>", "<head>", " <title>两列高度自适应</title>", " <link rel='stylesheet' href='https: //cdn.staticfile.org/twitter-bootstrap/4.1.1/css/bootstrap.min.css'>", " <style>", " .row>div {", " background: #cccccc;", " }", " </style>", "</head>", "<body>", " <div class='container'>", " <div class='row'>", " <div class='col-xl-6'>col-xl-6;col-xl-6;col-xl-6;</div>", " <div class='col-xl-5'>col-xl-6</div>", " </div>", " </div>", "</body>", "</html>", ], "description": "bt" }, } （2）js { "ccc": { "prefix": "ccc", "body": ["console.log($0)"], "description": "console.log($0)" }, "c1": { "prefix": "c1", "body": ["console.log( $0 )"], "description": "console.log($0)" }, "c2": { "prefix": "c2", "body": ["console.log('$0')"], "description": "console.log('$0')" }, "fn": { "prefix": "fn", "body": ["function $0(){", " ", "}"], "description": "function $0()" }, "ng": { "prefix": "ng", "body": [ "(function () {", " angular", " .module('$0')", " .controller('', function ($scope) {", " ", " })", "})()" ], "description": "ng" }, "sss": { "prefix": "sss", "body": ["$$scope.$1"], "description": "$scope.'$1'" }, "ppp": { "prefix": "ppp", "body": [ "/*方法说明", " *@method 方法名", " *@param{参数类型}参数名 参数说明", " *@return {返回值类型} 返回值说明", "*/" ], "description": "ng" } } （3）jQuery <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title>jq</title> <script src='https://cdn.bootcss.com/jquery/1.9.1/jquery.js'></script> </head> <body> <div> </div> </body> </html> <script type='text/javascript'> </script> （4）echarts <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title></title> <script src='https://cdn.bootcss.com/echarts/3.7.1/echarts.js'></script> </head> <body> <div id='myEchartsId' style='height:300px;'></div> </body> </html> <script type='text/javascript'> var myEcharts = echarts.init(document.getElementById('myEchartsId')); var myEchartsOption = { }; myEcharts.setOption(myEchartsOption); </script> （5）angular1 <!DOCTYPE html> <html lang='en' ng-app='myModel'> <head> <meta charset='UTF-8'> <title>ng</title> <script src='https://cdn.bootcss.com/angular.js/1.6.2/angular.js'></script> </head> <body> <div ng-controller='firstCtrl'> </div> </body> </html> <script type='text/javascript'> var app = angular.module('myModel', []); app.controller('firstCtrl', function ($scope){ }); </script> （6）bootstrap <!DOCTYPE html> <html lang='en'> <head> <title>两列高度自适应</title> <link rel='stylesheet' href='https: //cdn.staticfile.org/twitter-bootstrap/4.1.1/css/bootstrap.min.css'> <style> .row>div { background: #cccccc; } </style> </head> <body> <div class='container'> <div class='row'> <div class='col-xl-6'>col-xl-6;col-xl-6;col-xl-6;</div> <div class='col-xl-5'>col-xl-6</div> </div> </div> </body> </html>十八、jinja2语法1、行内条件 <div>{{ '' if system_event.peak_date == None else system_event.peak_date }}</div>2、set {% set dev_info = data["info"]["dev_info"] %} <div>{{ dev_info.dev_name }}</div>3、跨行条件 （1）跨行条件1 {% if device.on_line %} <div>预备测试</div> {% endif %} （2）跨行条件2 {% if device.on_line %} <div>预备测试</div> {% else %} <div>正式设备</div> {% endif %}4、for （1）for之1 {% for dep_num_dict in data.info.dep_num_dict.keys() %} <div> <div>{{dep_num_dict}}</div> <div>{{data.info.dep_num_dict[dep_num_dict].on_line}}</div> </div> {% endfor %} （2）for之2 <div class="mytable"> {% for log_list in data.info.black_event %} <div class="table-row"> <div>{{loop.index}}</div> <div>{{ log_list.threat_name }}</div> <div style="text-align:left;width:900px"> {% for log_list_in in log_list.suggest.split('<br>') %}//把字符串切分成数组，然后遍历 {{ log_list_in }}<br/> {% endfor %} </div> </div> {% endfor %} </div> |
« 上一篇： 3、浏览器名称|html标签|data-|名称|系统|业务端参数、请求之种类刷新跨域同源策略请求头vpn、ajax方法事件区别|axios封装多登录多转圈、custPromise、字符串宽度|验证整数、 common.js源码、require.js源码 、sea.js源码（4300行）
» 下一篇： 5、数据相加赋值相等克隆、字符串|数组|对象之为空|含有|位置|项|遍历、字符串|正则|数组|对象之方法、递归（虚拟DOM、快速排序、react框架）、两行布局、两列布局、三列布局、五种盒子居中、em与rem自适应、Flex布局、多图片延迟加载下载、canvas绘图之党徽|五角星|时钟、弹窗之内置|拖拽缩放、表格排序、拖拽之普通|zTree、设计模式（3000行）
» 下一篇： 5、数据相加赋值相等克隆、字符串|数组|对象之为空|含有|位置|项|遍历、字符串|正则|数组|对象之方法、递归（虚拟DOM、快速排序、react框架）、两行布局、两列布局、三列布局、五种盒子居中、em与rem自适应、Flex布局、多图片延迟加载下载、canvas绘图之党徽|五角星|时钟、弹窗之内置|拖拽缩放、表格排序、拖拽之普通|zTree、设计模式（3000行）
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 张高兴的大模型开发实战：（一）使用 Selenium 进行网页爬虫
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构