cainiaoblog 23.2.171

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (401) hide show
  1. package/CNAME +1 -0
  2. package/MP_verify_o6dHCK5mIkxNpzvZ.txt +1 -0
  3. package/README.md +8 -0
  4. package/about/index.html +54 -0
  5. package/ads.txt +1 -0
  6. package/app/manual.html +104 -0
  7. package/appConfigs/config +1 -0
  8. package/archives/2018/index.html +48 -0
  9. package/archives/2019/index.html +48 -0
  10. package/archives/2019/page/2/index.html +48 -0
  11. package/archives/2020/index.html +48 -0
  12. package/archives/2021/index.html +48 -0
  13. package/archives/2022/index.html +48 -0
  14. package/archives/2023/index.html +48 -0
  15. package/archives/index.html +48 -0
  16. package/archives/page/2/index.html +48 -0
  17. package/archives/page/3/index.html +48 -0
  18. package/article/10047.html +148 -0
  19. package/article/10164.html +64 -0
  20. package/article/10624.html +436 -0
  21. package/article/10745.html +586 -0
  22. package/article/11674.html +71 -0
  23. package/article/11939.html +72 -0
  24. package/article/12238.html +86 -0
  25. package/article/1230.html +533 -0
  26. package/article/13265.html +69 -0
  27. package/article/13823.html +78 -0
  28. package/article/14125.html +72 -0
  29. package/article/14192.html +561 -0
  30. package/article/14375.html +85 -0
  31. package/article/14744.html +83 -0
  32. package/article/14936.html +451 -0
  33. package/article/1518.html +250 -0
  34. package/article/15428.html +71 -0
  35. package/article/15518.html +288 -0
  36. package/article/15569.html +418 -0
  37. package/article/1566.html +122 -0
  38. package/article/16017.html +156 -0
  39. package/article/16947.html +440 -0
  40. package/article/17096.html +82 -0
  41. package/article/17246.html +89 -0
  42. package/article/17575.html +350 -0
  43. package/article/179.html +757 -0
  44. package/article/18039.html +233 -0
  45. package/article/18071.html +375 -0
  46. package/article/18142.html +71 -0
  47. package/article/19909.html +160 -0
  48. package/article/20014.html +89 -0
  49. package/article/20021.html +389 -0
  50. package/article/20037.html +280 -0
  51. package/article/20056.html +95 -0
  52. package/article/20093.html +404 -0
  53. package/article/2021.html +607 -0
  54. package/article/20459.html +115 -0
  55. package/article/20613.html +263 -0
  56. package/article/20635.html +71 -0
  57. package/article/21317.html +71 -0
  58. package/article/21320.html +90 -0
  59. package/article/21782.html +548 -0
  60. package/article/22230.html +435 -0
  61. package/article/22237.html +347 -0
  62. package/article/22398.html +109 -0
  63. package/article/22422.html +270 -0
  64. package/article/22565.html +300 -0
  65. package/article/23046.html +250 -0
  66. package/article/23083.html +215 -0
  67. package/article/23195.html +297 -0
  68. package/article/23301.html +835 -0
  69. package/article/23589.html +285 -0
  70. package/article/23655.html +338 -0
  71. package/article/23864.html +76 -0
  72. package/article/23914.html +96 -0
  73. package/article/24169.html +135 -0
  74. package/article/24581.html +349 -0
  75. package/article/2475.html +500 -0
  76. package/article/24826.html +77 -0
  77. package/article/24924.html +247 -0
  78. package/article/25164.html +1495 -0
  79. package/article/25318.html +394 -0
  80. package/article/25710.html +1129 -0
  81. package/article/25734.html +83 -0
  82. package/article/26083.html +174 -0
  83. package/article/26147.html +283 -0
  84. package/article/26291.html +110 -0
  85. package/article/26354.html +71 -0
  86. package/article/26624.html +145 -0
  87. package/article/26639.html +298 -0
  88. package/article/26850.html +138 -0
  89. package/article/26940.html +258 -0
  90. package/article/27796.html +190 -0
  91. package/article/27800.html +161 -0
  92. package/article/28963.html +159 -0
  93. package/article/28976.html +247 -0
  94. package/article/29042.html +72 -0
  95. package/article/29596.html +81 -0
  96. package/article/29619.html +183 -0
  97. package/article/29623.html +329 -0
  98. package/article/29829.html +205 -0
  99. package/article/29abbd1c.html +112 -0
  100. package/article/30215.html +178 -0
  101. package/article/30552.html +78 -0
  102. package/article/30818.html +201 -0
  103. package/article/31330.html +364 -0
  104. package/article/3154.html +577 -0
  105. package/article/31695.html +348 -0
  106. package/article/31826.html +71 -0
  107. package/article/31843.html +132 -0
  108. package/article/32280.html +212 -0
  109. package/article/32431.html +74 -0
  110. package/article/32443.html +72 -0
  111. package/article/32732.html +122 -0
  112. package/article/3286.html +251 -0
  113. package/article/32960.html +198 -0
  114. package/article/33713.html +72 -0
  115. package/article/33899.html +615 -0
  116. package/article/34351.html +74 -0
  117. package/article/34372.html +89 -0
  118. package/article/34410.html +74 -0
  119. package/article/34431.html +118 -0
  120. package/article/3447.html +75 -0
  121. package/article/34474.html +142 -0
  122. package/article/34871.html +147 -0
  123. package/article/35397.html +175 -0
  124. package/article/3544.html +199 -0
  125. package/article/35503.html +115 -0
  126. package/article/35624.html +84 -0
  127. package/article/35697.html +384 -0
  128. package/article/35863.html +73 -0
  129. package/article/36037.html +253 -0
  130. package/article/36118.html +71 -0
  131. package/article/3621.html +119 -0
  132. package/article/36251.html +296 -0
  133. package/article/36642.html +352 -0
  134. package/article/37102.html +763 -0
  135. package/article/37336.html +351 -0
  136. package/article/37351.html +89 -0
  137. package/article/3760.html +294 -0
  138. package/article/37749.html +75 -0
  139. package/article/37789.html +83 -0
  140. package/article/38005.html +765 -0
  141. package/article/38009.html +284 -0
  142. package/article/38269.html +194 -0
  143. package/article/38344.html +88 -0
  144. package/article/38359.html +334 -0
  145. package/article/38423.html +379 -0
  146. package/article/38530.html +213 -0
  147. package/article/38743.html +268 -0
  148. package/article/38753.html +204 -0
  149. package/article/38881.html +71 -0
  150. package/article/39087.html +414 -0
  151. package/article/39309.html +84 -0
  152. package/article/39486.html +74 -0
  153. package/article/39637.html +306 -0
  154. package/article/39839.html +72 -0
  155. package/article/39937.html +152 -0
  156. package/article/39970.html +71 -0
  157. package/article/402.html +559 -0
  158. package/article/40698.html +71 -0
  159. package/article/40811.html +71 -0
  160. package/article/40964.html +462 -0
  161. package/article/41011.html +322 -0
  162. package/article/41152.html +78 -0
  163. package/article/41696.html +71 -0
  164. package/article/41717.html +281 -0
  165. package/article/41777.html +149 -0
  166. package/article/419.html +985 -0
  167. package/article/4233.html +136 -0
  168. package/article/4292.html +86 -0
  169. package/article/43302.html +96 -0
  170. package/article/43397.html +106 -0
  171. package/article/43724.html +281 -0
  172. package/article/43999.html +224 -0
  173. package/article/44426.html +77 -0
  174. package/article/44964.html +137 -0
  175. package/article/45004.html +123 -0
  176. package/article/4510.html +83 -0
  177. package/article/45156.html +320 -0
  178. package/article/45157.html +52 -0
  179. package/article/45267.html +87 -0
  180. package/article/45641.html +207 -0
  181. package/article/45960.html +75 -0
  182. package/article/46100.html +1262 -0
  183. package/article/46366.html +74 -0
  184. package/article/46771.html +96 -0
  185. package/article/46911.html +517 -0
  186. package/article/46948.html +137 -0
  187. package/article/46ee4850.html +349 -0
  188. package/article/47019.html +84 -0
  189. package/article/47532.html +94 -0
  190. package/article/4783.html +429 -0
  191. package/article/47972.html +72 -0
  192. package/article/48216.html +127 -0
  193. package/article/48252.html +185 -0
  194. package/article/48520.html +74 -0
  195. package/article/48722.html +75 -0
  196. package/article/48807.html +99 -0
  197. package/article/49126.html +323 -0
  198. package/article/50001.html +88 -0
  199. package/article/50058.html +151 -0
  200. package/article/50343.html +410 -0
  201. package/article/50510.html +82 -0
  202. package/article/51082.html +98 -0
  203. package/article/51677.html +111 -0
  204. package/article/5204.html +1085 -0
  205. package/article/52500.html +538 -0
  206. package/article/52689.html +259 -0
  207. package/article/52877.html +569 -0
  208. package/article/53125.html +191 -0
  209. package/article/53428.html +251 -0
  210. package/article/53524.html +74 -0
  211. package/article/53698.html +322 -0
  212. package/article/53803e6.html +93 -0
  213. package/article/53924.html +291 -0
  214. package/article/53962.html +253 -0
  215. package/article/54006.html +71 -0
  216. package/article/54018.html +88 -0
  217. package/article/54161.html +83 -0
  218. package/article/54178.html +69 -0
  219. package/article/54258.html +327 -0
  220. package/article/54295.html +214 -0
  221. package/article/54313.html +1976 -0
  222. package/article/54351.html +90 -0
  223. package/article/54604.html +80 -0
  224. package/article/54632.html +71 -0
  225. package/article/54912.html +756 -0
  226. package/article/54918.html +129 -0
  227. package/article/55119.html +136 -0
  228. package/article/55756.html +118 -0
  229. package/article/55769.html +136 -0
  230. package/article/55870.html +161 -0
  231. package/article/56139.html +92 -0
  232. package/article/56557.html +69 -0
  233. package/article/56604.html +69 -0
  234. package/article/56816.html +266 -0
  235. package/article/56926.html +153 -0
  236. package/article/57747.html +409 -0
  237. package/article/57965.html +475 -0
  238. package/article/58816.html +78 -0
  239. package/article/59059.html +435 -0
  240. package/article/59095.html +350 -0
  241. package/article/59349.html +244 -0
  242. package/article/59402.html +216 -0
  243. package/article/59448.html +55 -0
  244. package/article/59870.html +94 -0
  245. package/article/59877.html +208 -0
  246. package/article/5dbb6f41.html +86 -0
  247. package/article/6008.html +75 -0
  248. package/article/60327.html +126 -0
  249. package/article/6035.html +76 -0
  250. package/article/60428.html +71 -0
  251. package/article/60544.html +128 -0
  252. package/article/61319.html +95 -0
  253. package/article/61367.html +93 -0
  254. package/article/624d1918.html +292 -0
  255. package/article/62543.html +71 -0
  256. package/article/62887.html +169 -0
  257. package/article/63074.html +120 -0
  258. package/article/63266.html +311 -0
  259. package/article/63351.html +74 -0
  260. package/article/63542.html +104 -0
  261. package/article/63824.html +275 -0
  262. package/article/64051.html +653 -0
  263. package/article/64189b69.html +72 -0
  264. package/article/64354.html +75 -0
  265. package/article/64869.html +79 -0
  266. package/article/64923.html +596 -0
  267. package/article/65128.html +95 -0
  268. package/article/65295.html +79 -0
  269. package/article/6888.html +75 -0
  270. package/article/7065.html +84 -0
  271. package/article/7455.html +85 -0
  272. package/article/7a3ef8f.html +315 -0
  273. package/article/8140.html +188 -0
  274. package/article/8190.html +85 -0
  275. package/article/8225.html +78 -0
  276. package/article/84c9ccd6.html +159 -0
  277. package/article/8f9a9ae3.html +82 -0
  278. package/article/9174.html +73 -0
  279. package/article/9738.html +294 -0
  280. package/article/a4145266.html +71 -0
  281. package/article/bedea419.html +72 -0
  282. package/article/bf7e7421.html +78 -0
  283. package/article/c1867fbf.html +103 -0
  284. package/article/c5576490.html +70 -0
  285. package/article/dcb0db28.html +76 -0
  286. package/article/fc3b727a.html +79 -0
  287. package/atom.xml +445 -0
  288. package/baidusitemap.xml +1079 -0
  289. package/blocks/dns.txt +264 -0
  290. package/blocks/filter.txt +1070 -0
  291. package/blocks/script.js +42 -0
  292. package/categories/CDN/index.html +48 -0
  293. package/categories/IDE/index.html +48 -0
  294. package/categories/git/index.html +48 -0
  295. package/categories/hexo/index.html +48 -0
  296. package/categories//345/205/254/345/205/261/350/212/202/346/227/245/index.html +48 -0
  297. package/categories//345/210/206/344/272/253/index.html +48 -0
  298. package/categories//345/211/215/347/253/257/index.html +48 -0
  299. package/categories//345/211/215/347/253/257/page/2/index.html +48 -0
  300. package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250/index.html +48 -0
  301. package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250//347/275/221/347/273/234/345/215/217/350/256/256/index.html +48 -0
  302. package/categories//345/215/232/345/256/242/index.html +48 -0
  303. package/categories//345/267/245/345/205/267/index.html +48 -0
  304. package/categories//345/271/277/345/221/212/350/277/207/346/273/244/index.html +48 -0
  305. package/categories//345/271/277/345/221/212/350/277/207/346/273/244//350/247/206/351/242/221/347/224/265/350/247/206/345/260/217/350/257/264/346/274/253/347/224/273/350/265/204/350/256/257/351/237/263/344/271/220/index.html +48 -0
  306. package/categories//346/255/243/345/210/231/index.html +48 -0
  307. package/categories//346/265/217/350/247/210/345/231/250/index.html +48 -0
  308. package/categories//347/256/227/346/263/225/index.html +48 -0
  309. package/categories//350/265/204/350/256/257/index.html +48 -0
  310. package/categories//350/275/273/346/235/276/344/270/200/345/210/273/index.html +48 -0
  311. package/cdn/css/font-awesome.min.css +4 -0
  312. package/cdn/css/grids-responsive-min.css +7 -0
  313. package/cdn/css/normalize.css +349 -0
  314. package/cdn/css/pure-min.css +11 -0
  315. package/cdn/fonts/fontawesome-webfont.eot +0 -0
  316. package/cdn/fonts/fontawesome-webfont.svg +2671 -0
  317. package/cdn/fonts/fontawesome-webfont.ttf +0 -0
  318. package/cdn/fonts/fontawesome-webfont.woff +0 -0
  319. package/cdn/fonts/fontawesome-webfont.woff2 +0 -0
  320. package/cdn/js/Valine.min.js +17 -0
  321. package/cdn/js/canvas-nest.js +1 -0
  322. package/cdn/js/clipboard.min.js +7 -0
  323. package/cdn/js/crypto-js.js +25 -0
  324. package/cdn/js/jquery.min.js +2 -0
  325. package/css/default.css +1144 -0
  326. package/css/donate.css +338 -0
  327. package/css/hbe.style.css +749 -0
  328. package/css/style.css +2095 -0
  329. package/donate/index.html +39 -0
  330. package/google917dcf72f6e5c7f5.html +1 -0
  331. package/guestbook/index.html +68 -0
  332. package/hosts/ads.txt +149 -0
  333. package/hosts/flash.txt +9 -0
  334. package/hosts/github.txt +6 -0
  335. package/hosts/google.txt +16936 -0
  336. package/hosts/winrar.txt +2 -0
  337. package/img/alipay.svg +46 -0
  338. package/img/bitcoin.svg +135 -0
  339. package/img/blog.ico +0 -0
  340. package/img/blog.png +0 -0
  341. package/img/gaba.png +0 -0
  342. package/img/github.svg +1 -0
  343. package/img/like.svg +1 -0
  344. package/img/mp-mini.jpg +0 -0
  345. package/img/mp.png +0 -0
  346. package/img/paypal.svg +63 -0
  347. package/img/upy_logo.svg +59 -0
  348. package/img/wechat.svg +49 -0
  349. package/index.html +48 -0
  350. package/jd_root.txt +1 -0
  351. package/js/codeblock-resizer.js +51 -0
  352. package/js/dark.js +12 -0
  353. package/js/donate.js +87 -0
  354. package/js/fixedPage.js +106 -0
  355. package/js/gitment.browser.js +3751 -0
  356. package/js/search.js +86 -0
  357. package/js/share.js +60 -0
  358. package/js/smartresize.js +32 -0
  359. package/js/totop.js +12 -0
  360. package/kankan/index.html +77 -0
  361. package/lib/hbe.js +293 -0
  362. package/package.json +25 -0
  363. package/page/10/index.html +49 -0
  364. package/page/11/index.html +59 -0
  365. package/page/12/index.html +67 -0
  366. package/page/13/index.html +63 -0
  367. package/page/14/index.html +66 -0
  368. package/page/15/index.html +60 -0
  369. package/page/16/index.html +60 -0
  370. package/page/17/index.html +62 -0
  371. package/page/18/index.html +61 -0
  372. package/page/19/index.html +58 -0
  373. package/page/2/index.html +48 -0
  374. package/page/20/index.html +57 -0
  375. package/page/21/index.html +61 -0
  376. package/page/22/index.html +55 -0
  377. package/page/23/index.html +64 -0
  378. package/page/24/index.html +60 -0
  379. package/page/25/index.html +58 -0
  380. package/page/26/index.html +48 -0
  381. package/page/27/index.html +58 -0
  382. package/page/3/index.html +48 -0
  383. package/page/4/index.html +48 -0
  384. package/page/5/index.html +51 -0
  385. package/page/6/index.html +51 -0
  386. package/page/7/index.html +51 -0
  387. package/page/8/index.html +53 -0
  388. package/page/9/index.html +48 -0
  389. package/randomcall/README.html +1 -0
  390. package/randomcall/lucker.html +290 -0
  391. package/randomcall/lucky.png +0 -0
  392. package/robots.txt +22 -0
  393. package/search.xml +6740 -0
  394. package/sitemap.xml +2669 -0
  395. package/tags//345/216/237/345/210/233/index.html +48 -0
  396. package/tags//345/250/261/344/271/220/index.html +48 -0
  397. package/tags//346/211/213/345/206/231/index.html +48 -0
  398. package/tags//347/226/253/346/203/205/index.html +48 -0
  399. package/tags//350/275/254/350/275/275/index.html +48 -0
  400. package/tags//350/275/254/350/275/275/page/2/index.html +48 -0
  401. package/v.html +90 -0
package/article/3286.html ADDED
@@ -0,0 +1,251 @@
1
+ <!DOCTYPE html><html lang="zh-CN" data-dark><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta name="description" content="前端壹菜鸟，记录工作难题，关注前端知识，收集精彩博文，做技术的搬运工"><meta name="msvalidate.01" content="0FE4D8B3381D3D87088996B886E1E2BD"><title>异常监控：教你如何优雅的处理前端异常 | 前端壹菜鸟</title><link rel="stylesheet" type="text/css" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/css/style.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/normalize.css@latest/normalize.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/pure-min.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/grids-responsive-min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><link rel="icon" mask="" sizes="any" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="Shortcut Icon" type="image/x-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="apple-touch-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="apple-touch-icon-precomposed" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="alternate" type="application/atom+xml" href="/atom.xml"><script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8385136408348258"></script><script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script><script>(function(){
2
+ var bp = document.createElement('script');
3
+ var curProtocol = window.location.protocol.split(':')[0];
4
+ if (curProtocol === 'https'){
5
+ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
6
+ }
7
+ else{
8
+ bp.src = 'http://push.zhanzhang.baidu.com/push.js';
9
+ }
10
+ var s = document.getElementsByTagName("script")[0];
11
+ s.parentNode.insertBefore(bp, s);
12
+ })();
13
+ </script><script>(function(){
14
+ var src = 'https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba';
15
+ document.write('<script src="' + src + '" id="sozz"><\/script>');
16
+ })();
17
+ </script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src='https://hm.baidu.com/hm.js?011f0b44e8452bfa57fbfa23c5fe7683';var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
18
+ </script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-150860401-1"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);};gtag('js',new Date());gtag('config','UA-150860401-1');
19
+ </script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/fixedPage.min.js"></script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><a id="logo" href="/.">前端壹菜鸟</a><p class="description">关注前端知识，收集精彩博文，做技术的搬运工</p></div><div id="nav-menu"><a class="current" href="/." target="_self"><i class="fa fa-home"> 首页</i></a><a href="/archives/" target="_self"><i class="fa fa-archive"> 归档</i></a><a href="/guestbook/" target="_self"><i class="fa fa-comments"> 留言</i></a><a href="/about/" target="_self"><i class="fa fa-user"> 关于</i></a><a href="https://laonongmin.online/" target="_target"><i class="fa fa-group"> 看看</i></a><a href="https://love.xuehuayu.cn/" target="_target"><i class="fa fa-heart"> LOVE</i></a></div></div><div class="pure-g" id="layout"><div class="pure-u-1 pure-u-md-3-4"><div class="content_container"><div class="post"><h1 class="post-title c-post">异常监控：教你如何优雅的处理前端异常</h1><div class="post-meta"><span class="date">2019-12-17</span><span> | </span><span class="tag"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载 </a></span><span> | </span><span class="category"><a href="/categories/%E5%89%8D%E7%AB%AF/">前端 </a></span><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span><span> 阅读</span></span><span class="post-time"><span class="post-meta-item-text"> | </span><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-count"> 3.4k</span><span class="post-meta-item-text"> 字</span></span></span><span class="post-time"> | <span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-count"> 14</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/3286.html#vcomment"><span class="waline-comment-count" data-path="/article/3286.html"></span><span> 条评论</span></a><div class="post-content"><p><code>原文地址：https://mp.weixin.qq.com/s/bOohIxkx7A3OiilkgvjvXg</code></p>
20
+ <blockquote>
21
+ <p><code>作者：Jartto&#39;s blog来源：http://jartto.wang/2018/11/20/js-exception-handling/</code></p>
22
+ </blockquote>
23
+ <p><code>前端一直是距离用户最近的一层，随着产品的日益完善，我们会更加注重用户体验，而前端异常却如鲠在喉，甚是烦人。</code></p>
24
+ <span id="more"></span>
25
+
26
+ <h3 id=""><a href="#" class="headerlink" title=""></a></h3><p>异常是不可控的，会影响最终的呈现结果，但是我们有充分的理由去做这样的事情。</p>
27
+ <ol>
28
+ <li>增强用户体验；</li>
29
+ <li>远程定位问题；</li>
30
+ <li>未雨绸缪，及早发现问题；</li>
31
+ <li>无法复线问题，尤其是移动端，机型，系统都是问题；</li>
32
+ <li>完善的前端方案，前端监控系统；</li>
33
+ </ol>
34
+ <p>对于 JS 而言，我们面对的仅仅只是异常，异常的出现不会直接导致 JS 引擎崩溃，最多只会使当前执行的任务终止。</p>
35
+ <h3 id="二、需要处理哪些异常？"><a href="#二、需要处理哪些异常？" class="headerlink" title="二、需要处理哪些异常？"></a>二、需要处理哪些异常？</h3><p>对于前端来说，我们可做的异常捕获还真不少。总结一下，大概如下：</p>
36
+ <ul>
37
+ <li>JS 语法错误、代码异常</li>
38
+ <li>AJAX 请求异常</li>
39
+ <li>静态资源加载异常</li>
40
+ <li>Promise 异常</li>
41
+ <li>Iframe 异常</li>
42
+ <li>跨域 Script error</li>
43
+ <li>崩溃和卡顿</li>
44
+ </ul>
45
+ <p>下面我会针对每种具体情况来说明如何处理这些异常。</p>
46
+ <h3 id="三、Try-Catch-的误区"><a href="#三、Try-Catch-的误区" class="headerlink" title="三、Try-Catch 的误区"></a>三、Try-Catch 的误区</h3><p>try-catch 只能捕获到同步的运行时错误，对语法和异步错误却无能为力，捕获不到。</p>
47
+ <ol>
48
+ <li><p>同步运行时错误：</p>
49
+ <p> try {<br> let name &#x3D; ‘jartto’;<br> console.log(nam);<br> } catch(e) {<br> console.log(‘捕获到异常：’,e);<br> }</p>
50
+ </li>
51
+ </ol>
52
+ <p>输出：<br> 捕获到异常：ReferenceError: nam is not defined<br> at <anonymous>:3:15</p>
53
+ <ol>
54
+ <li><p>不能捕获到具体的语法错误，只有一个语法错误提示。我们修改一下代码，删掉一个单引号：</p>
55
+ <p> try {<br> let name &#x3D; ‘jartto;<br> console.log(nam);<br> } catch(e) {</p>
56
+ <p> console.log(‘捕获到异常：’,e);<br> }</p>
57
+ </li>
58
+ </ol>
59
+ <p>输出：<br> Uncaught SyntaxError: Invalid or unexpected token<br> 不过语法错误在我们开发阶段就可以看到，应该不会顺利上到线上环境。</p>
60
+ <ol>
61
+ <li><p>异步错误</p>
62
+ <p> try {<br> setTimeout(() &#x3D;&gt; {<br> undefined.map(v &#x3D;&gt; v);<br> }, 1000)<br> } catch(e) {<br> console.log(‘捕获到异常：’,e);<br> }</p>
63
+ </li>
64
+ </ol>
65
+ <p>我们看看日志：<br> Uncaught TypeError: Cannot read property ‘map’ofundefined<br> at setTimeout (<anonymous>:3:11)</p>
66
+ <p>并没有捕获到异常，这是需要我们特别注意的地方。</p>
67
+ <h3 id="四、window-onerror-不是万能的"><a href="#四、window-onerror-不是万能的" class="headerlink" title="四、window.onerror 不是万能的"></a>四、window.onerror 不是万能的</h3><p>当 JS 运行时错误发生时，window 会触发一个 ErrorEvent 接口的 error 事件，并执行 window.onerror()。<br> &#x2F;**<br> * @param {String} message 错误信息<br> * @param {String} source 出错文件<br> * @param {Number} lineno 行号<br> * @param {Number} colno 列号<br> * @param {Object} error Error对象（对象）<br> *&#x2F;</p>
68
+ <pre><code>window.onerror = function(message, source, lineno, colno, error) &#123;
69
+ console.log(&#39;捕获到异常：&#39;,&#123;message, source, lineno, colno, error&#125;);
70
+ &#125;
71
+ </code></pre>
72
+ <ol>
73
+ <li><p>首先试试同步运行时错误</p>
74
+ <p> window.onerror &#x3D; function(message, source, lineno, colno, error) {<br> &#x2F;&#x2F; message：错误信息（字符串）。<br> &#x2F;&#x2F; source：发生错误的脚本URL（字符串）<br> &#x2F;&#x2F; lineno：发生错误的行号（数字）<br> &#x2F;&#x2F; colno：发生错误的列号（数字）<br> &#x2F;&#x2F; error：Error对象（对象）<br> console.log(‘捕获到异常：’,{message, source, lineno, colno, error});<br> }<br> Jartto;</p>
75
+ </li>
76
+ </ol>
77
+ <p>可以看到，我们捕获到了异常：<img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="xuehuayu.cn"></p>
78
+ <ol>
79
+ <li><p>再试试语法错误呢？</p>
80
+ <p> window.onerror &#x3D; function(message, source, lineno, colno, error) {<br> console.log(‘捕获到异常：’,{message, source, lineno, colno, error});<br> }<br> let name &#x3D; ‘Jartto</p>
81
+ </li>
82
+ </ol>
83
+ <p>控制台打印出了这样的异常：<br> Uncaught SyntaxError: Invalid or unexpected token</p>
84
+ <p>什么，竟然没有捕获到语法错误？</p>
85
+ <ol>
86
+ <li><p>怀着忐忑的心，我们最后来试试异步运行时错误：</p>
87
+ <p> window.onerror &#x3D; function(message, source, lineno, colno, error) {<br> console.log(‘捕获到异常：’,{message, source, lineno, colno, error});<br> }<br> setTimeout(() &#x3D;&gt; {<br> Jartto;<br> });</p>
88
+ </li>
89
+ </ol>
90
+ <p>控制台输出了：<br> 捕获到异常：{message: “Uncaught ReferenceError: Jartto is not defined”, source: “<a target="_blank" rel="noopener" href="http://127.0.0.1:8001/&quot;">http://127.0.0.1:8001/&quot;</a>, lineno: 36, colno: 5, error: ReferenceError: Jartto is not defined<br> at setTimeout (<a target="_blank" rel="noopener" href="http://127.0.0.1:8001/:36:5)%7D">http://127.0.0.1:8001/:36:5)}</a></p>
91
+ <ol>
92
+ <li><p>接着，我们试试网络请求异常的情况：</p>
93
+ <script>
94
+ window.onerror = function(message, source, lineno, colno, error) {
95
+ console.log('捕获到异常：',{message, source, lineno, colno, error});
96
+ return true;
97
+ }
98
+ </script>
99
+ <img src="./jartto.png"></li>
100
+ </ol>
101
+ <p>**<code>我们发现，不论是静态资源异常，或者接口异常，错误都无法捕获到。</code>**补充一点：window.onerror 函数只有在返回 true 的时候，异常才不会向上抛出，否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx<br> window.onerror &#x3D; function(message, source, lineno, colno, error) {<br> console.log(‘捕获到异常：’,{message, source, lineno, colno, error});<br> return true;<br> }<br> setTimeout(() &#x3D;&gt; {<br> Jartto;<br> });</p>
102
+ <p>控制台就不会再有这样的错误了：<br> Uncaught ReferenceError: Jartto is not defined<br> at setTimeout ((index):36)</p>
103
+ <p>需要注意：</p>
104
+ <ul>
105
+ <li>onerror 最好写在所有 JS 脚本的前面，否则有可能捕获不到错误；</li>
106
+ <li>onerror 无法捕获语法错误；</li>
107
+ </ul>
108
+ <p>到这里基本就清晰了：在实际的使用过程中，onerror 主要是来捕获预料之外的错误，而 try-catch 则是用来在可预见情况下监控特定的错误，两者结合使用更加高效。问题又来了，捕获不到静态资源加载异常怎么办？</p>
109
+ <h3 id="五、window-addEventListener"><a href="#五、window-addEventListener" class="headerlink" title="五、window.addEventListener"></a>五、window.addEventListener</h3><p>当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，并执行该元素上的onerror() 处理函数。这些 error 事件不会向上冒泡到 window ，不过（至少在 Firefox 中）能被单一的window.addEventListener 捕获。<br> <scritp><br> window.addEventListener(‘error’, (error) &#x3D;&gt; {<br> console.log(‘捕获到异常：’, error);<br> }, true)<br> </script><br> <img src="./jartto.png"></p>
110
+ <p>控制台输出：<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/2wV7LicL762YeOjHo4DGx70L0dQYGxkrgibD9q95zjVtjVtUnNvXhYCgpCmb0A8YBeUZyLOauWLGycbzhbria0VsQ/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" alt="xuehuayu.cn">由于网络请求异常不会事件冒泡，因此必须在捕获阶段将其捕捉到才行，但是这种方式虽然可以捕捉到网络请求的异常，但是无法判断 HTTP 的状态是 404 还是其他比如 500 等等，所以还需要配合服务端日志才进行排查分析才可以。<strong>需要注意：</strong></p>
111
+ <ul>
112
+ <li>不同浏览器下返回的 error 对象可能不同，需要注意兼容处理。</li>
113
+ <li>需要注意避免 addEventListener 重复监听。</li>
114
+ </ul>
115
+ <h3 id="六、Promise-Catch"><a href="#六、Promise-Catch" class="headerlink" title="六、Promise Catch"></a>六、Promise Catch</h3><p>在 promise 中使用 catch 可以非常方便的捕获到异步 error ，这个很简单。没有写 catch 的 Promise 中抛出的错误无法被 onerror 或 try-catch 捕获到，所以我们务必要在 Promise 中不要忘记写 catch 处理抛出的异常。解决方案：为了防止有漏掉的 Promise 异常，建议在全局增加一个对 unhandledrejection 的监听，用来全局监听Uncaught Promise Error。使用方式：<br> window.addEventListener(“unhandledrejection”, function(e){<br> console.log(e);<br> });</p>
116
+ <p>我们继续来尝试一下：<br> window.addEventListener(“unhandledrejection”, function(e){<br> e.preventDefault()<br> console.log(‘捕获到异常：’, e);<br> return true;<br> });<br> Promise.reject(‘promise error’);</p>
117
+ <p>可以看到如下输出：<img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" alt="xuehuayu.cn">那如果对 Promise 不进行 catch 呢？<br> window.addEventListener(“unhandledrejection”, function(e){<br> e.preventDefault()<br> console.log(‘捕获到异常：’, e);<br> return true;<br> });<br> newPromise((resolve, reject) &#x3D;&gt; {<br> reject(‘jartto: promise error’);<br> });</p>
118
+ <p>嗯，事实证明，也是会被正常捕获到的。所以，正如我们上面所说，为了防止有漏掉的 Promise 异常，建议在全局增加一个对 unhandledrejection 的监听，用来全局监听 Uncaught Promise Error。补充一点：如果去掉控制台的异常显示，需要加上：<br> event.preventDefault();</p>
119
+ <h3 id="VUE-errorHandler"><a href="#VUE-errorHandler" class="headerlink" title="VUE errorHandler"></a>VUE errorHandler</h3><pre><code>Vue.config.errorHandler = (err, vm, info) =&gt; &#123;
120
+ console.error(&#39;通过vue errorHandler捕获的错误&#39;);
121
+ console.error(err);
122
+ console.error(vm);
123
+ console.error(info);
124
+ &#125;
125
+ </code></pre>
126
+ <p>八、React 异常捕获 React 16 提供了一个内置函数 componentDidCatch，使用它可以非常简单的获取到 react 下的错误信息<br> componentDidCatch(error, info) {<br> console.log(error, info);<br> }</p>
127
+ <p>除此之外，我们可以了解一下：error boundary UI 的某部分引起的 JS 错误不应该破坏整个程序，为了帮 React 的使用者解决这个问题，React 16 介绍了一种关于错误边界（error boundary)的新观念。需要注意的是：error boundaries 并不会捕捉下面这些错误。</p>
128
+ <ol>
129
+ <li>事件处理器</li>
130
+ <li>异步代码</li>
131
+ <li>服务端的渲染代码</li>
132
+ <li>在 error boundaries 区域内的错误</li>
133
+ </ol>
134
+ <p>我们来举一个小例子，在下面这个 componentDIdCatch(error,info) 里的类会变成一个 error boundary：<br> classErrorBoundaryextendsReact.Component{<br> constructor(props) {<br> super(props);<br> this.state &#x3D; { hasError: false };<br> }</p>
135
+ <pre><code> componentDidCatch(error, info) &#123;
136
+ // Display fallback UI
137
+ this.setState(&#123; hasError: true &#125;);
138
+ // You can also log the error to an error reporting service
139
+ logErrorToMyService(error, info);
140
+ &#125;
141
+
142
+ render() &#123;
143
+ if (this.state.hasError) &#123;
144
+ // You can render any custom fallback UI
145
+ return&lt;h1&gt;Something went wrong.&lt;/h1&gt;;
146
+ &#125;
147
+ returnthis.props.children;
148
+ &#125;
149
+ &#125;
150
+ </code></pre>
151
+ <p>然后我们像使用普通组件那样使用它：<br> <ErrorBoundary><br> <MyWidget /><br> </ErrorBoundary></p>
152
+ <p>componentDidCatch() 方法像 JS 的 catch{} 模块一样工作，但是对于组件，只有 class 类型的组件(class component )可以成为一个 error boundaries 。实际上，大多数情况下我们可以在整个程序中定义一个 error boundary 组件，之后就可以一直使用它了！</p>
153
+ <h3 id="九、iframe-异常"><a href="#九、iframe-异常" class="headerlink" title="九、iframe 异常"></a>九、iframe 异常</h3><p>对于 iframe 的异常捕获，我们还得借力 window.onerror：<br> window.onerror &#x3D; function(message, source, lineno, colno, error) {<br> console.log(‘捕获到异常：’,{message, source, lineno, colno, error});<br> }</p>
154
+ <p>一个简单的例子可能如下：<br> <iframe src="./iframe.html" frameborder="0"></iframe><br> <script><br> window.frames[0].onerror = function (message, source, lineno, colno, error) {<br> console.log('捕获到 iframe 异常：',{message, source, lineno, colno, error});<br> return true;<br> };<br> </script></p>
155
+ <h3 id="十、Script-error"><a href="#十、Script-error" class="headerlink" title="十、Script error"></a>十、Script error</h3><p>一般情况，如果出现 Script error 这样的错误，基本上可以确定是出现了跨域问题。这时候，是不会有其他太多辅助信息的，但是解决思路无非如下：跨源资源共享机制( CORS )：我们为 script 标签添加 crossOrigin 属性。<br> <script src="http://jartto.wang/main.js" crossorigin></script></p>
156
+ <p>或者动态去添加 js 脚本：<br> const script &#x3D; document.createElement(‘script’);<br> script.crossOrigin &#x3D; ‘anonymous’;<br> script.src &#x3D; url;<br> document.body.appendChild(script);</p>
157
+ <p>特别注意，服务器端需要设置：Access-Control-Allow-Origin此外，我们也可以试试这个-解决 Script Error 的另类思路：<br> const originAddEventListener &#x3D; EventTarget.prototype.addEventListener;<br> EventTarget.prototype.addEventListener &#x3D; function (type, listener, options) {<br> const wrappedListener &#x3D; function (…args) {<br> try {<br> return listener.apply(this, args);<br> }<br> catch (err) {<br> throw err;<br> }<br> }<br> return originAddEventListener.call(this, type, wrappedListener, options);<br> }</p>
158
+ <p>简单解释一下：改写了 EventTarget 的 addEventListener 方法；对传入的 listener 进行包装，返回包装过的 listener，对其执行进行 try-catch；浏览器不会对 try-catch 起来的异常进行跨域拦截，所以 catch 到的时候，是有堆栈信息的；重新 throw 出来异常的时候，执行的是同域代码，所以 window.onerror 捕获的时候不会丢失堆栈信息；利用包装 addEventListener，我们还可以达到「扩展堆栈」的效果：<br> (() &#x3D;&gt; {<br> const originAddEventListener &#x3D; EventTarget.prototype.addEventListener;<br> EventTarget.prototype.addEventListener &#x3D; function (type, listener, options) {<br> + &#x2F;&#x2F; 捕获添加事件时的堆栈<br> + const addStack &#x3D; newError(<code>Event ($&#123;type&#125;)</code>).stack;<br> const wrappedListener &#x3D; function (…args) {<br> try {<br> return listener.apply(this, args);<br> }<br> catch (err) {<br> + &#x2F;&#x2F; 异常发生时，扩展堆栈<br> + err.stack +&#x3D; ‘\n’ + addStack;<br> throw err;<br> }<br> }<br> return originAddEventListener.call(this, type, wrappedListener, options);<br> }<br> })();</p>
159
+ <h3 id="十一、崩溃和卡顿"><a href="#十一、崩溃和卡顿" class="headerlink" title="十一、崩溃和卡顿"></a>十一、崩溃和卡顿</h3><p>卡顿也就是网页暂时响应比较慢， JS 可能无法及时执行。但崩溃就不一样了，网页都崩溃了，JS 都不运行了，还有什么办法可以监控网页的崩溃，并将网页崩溃上报呢？崩溃和卡顿也是不可忽视的，也许会导致你的用户流失。</p>
160
+ <ol>
161
+ <li><p>利用 window 对象的 load 和 beforeunload 事件实现了网页崩溃的监控。不错的文章，推荐阅读：Logging Information on Browser Crashes。</p>
162
+ <p> window.addEventListener(‘load’, function () {<br> sessionStorage.setItem(‘good_exit’, ‘pending’);<br> setInterval(function () {<br> sessionStorage.setItem(‘time_before_crash’, newDate().toString());<br> }, 1000);<br> });</p>
163
+ <p> window.addEventListener(‘beforeunload’, function () {<br> sessionStorage.setItem(‘good_exit’, ‘true’);<br> });</p>
164
+ <p> if(sessionStorage.getItem(‘good_exit’) &amp;&amp;<br> sessionStorage.getItem(‘good_exit’) !&#x3D;&#x3D; ‘true’) {<br> &#x2F;*<br> insert crash logging code here<br> *&#x2F;<br> alert(‘Hey, welcome back from your crash, looks like you crashed on: ‘ + sessionStorage.getItem(‘time_before_crash’));<br> }</p>
165
+ </li>
166
+ <li><p>基于以下原因，我们可以使用 Service Worker 来实现网页崩溃的监控：</p>
167
+ </li>
168
+ </ol>
169
+ <p>Service Worker 有自己独立的工作线程，与网页区分开，网页崩溃了，Service Worker 一般情况下不会崩溃；Service Worker 生命周期一般要比网页还要长，可以用来监控网页的状态；网页可以通过 navigator.serviceWorker.controller.postMessage API 向掌管自己的 SW 发送消息。</p>
170
+ <h3 id="十二、错误上报"><a href="#十二、错误上报" class="headerlink" title="十二、错误上报"></a>十二、错误上报</h3><p>1.通过 Ajax 发送数据 因为 Ajax 请求本身也有可能会发生异常，而且有可能会引发跨域问题，一般情况下更推荐使用动态创建 img 标签的形式进行上报。2.动态创建 img 标签的形式<br> functionreport(error) {<br> let reportUrl &#x3D; ‘<a target="_blank" rel="noopener" href="http://jartto.wang/report&#39;">http://jartto.wang/report&#39;</a>;<br> new Image().src &#x3D; <code>$&#123;reportUrl&#125;?logs=$&#123;error&#125;</code>;<br> }</p>
171
+ <p>收集异常信息量太多，怎么办？实际中，我们不得不考虑这样一种情况：如果你的网站访问量很大，那么一个必然的错误发送的信息就有很多条，这时候，我们需要设置采集率，从而减缓服务器的压力：<br> Reporter.send &#x3D; function(data) {<br> &#x2F;&#x2F; 只采集 30%<br> if(Math.random() &lt; 0.3) {<br> send(data) &#x2F;&#x2F; 上报错误信息<br> }<br> }</p>
172
+ <p>采集率应该通过实际情况来设定，随机数，或者某些用户特征都是不错的选择。</p>
173
+ <h3 id="十三、总结"><a href="#十三、总结" class="headerlink" title="十三、总结"></a>十三、总结</h3><p>回到我们开头提出的那个问题，如何优雅的处理异常呢？</p>
174
+ <ol>
175
+ <li>可疑区域增加 Try-Catch</li>
176
+ <li>全局监控 JS 异常 window.onerror</li>
177
+ <li>全局监控静态资源异常 window.addEventListener</li>
178
+ <li>捕获没有 Catch 的 Promise 异常：unhandledrejection</li>
179
+ <li>VUE errorHandler 和 React componentDidCatch</li>
180
+ <li>监控网页崩溃：window 对象的 load 和 beforeunload</li>
181
+ <li>跨域 crossOrigin 解决</li>
182
+ </ol>
183
+ <p>其实很简单，正如上文所说：采用组合方案，分类型的去捕获异常，这样基本 80%-90% 的问题都化于无形。</p>
184
+ <h3 id="十四、参考"><a href="#十四、参考" class="headerlink" title="十四、参考"></a>十四、参考</h3><ul>
185
+ <li>Logging Information on Browser Crashes <a target="_blank" rel="noopener" href="http://jasonjl.me/blog/2015/06/21/taking-action-on-browser-crashes/">http://jasonjl.me/blog/2015/06/21/taking-action-on-browser-crashes/</a></li>
186
+ <li>前端代码异常监控实战 <a target="_blank" rel="noopener" href="https://github.com/happylindz/blog/issues/5">https://github.com/happylindz/blog/issues/5</a></li>
187
+ <li>Error Boundaries <a target="_blank" rel="noopener" href="https://blog.csdn.net/a986597353/article/details/78469979">https://blog.csdn.net/a986597353/article/details/78469979</a></li>
188
+ <li>前端监控知识点 <a target="_blank" rel="noopener" href="https://github.com/RicardoCao-Biker/Front-End-Monitoring/blob/master/BasicKnowledge.md">https://github.com/RicardoCao-Biker/Front-End-Monitoring/blob/master/BasicKnowledge.md</a></li>
189
+ <li>Capture and report JavaScript errors with window.onerror <a target="_blank" rel="noopener" href="https://blog.sentry.io/2016/01/04/client-javascript-reporting-window-onerror">https://blog.sentry.io/2016/01/04/client-javascript-reporting-window-onerror</a></li>
190
+ </ul>
191
+ <p>The End</p>
192
+ <p>如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：</p>
193
+ <ol>
194
+ <li><p>点个「<strong>在看</strong>」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）</p>
195
+ </li>
196
+ <li><p>关注我的官网 <strong>https:&#x2F;&#x2F;<strong>m</strong></strong><strong>uyiy.cn</strong>，让我们成为长期关系</p>
197
+ </li>
198
+ <li><p>关注公众号「<strong>高级前端进阶</strong>」，每周重点攻克一个前端面试重难点，公众号后台回复「面试题」 送你高级前端面试题。</p>
199
+ </li>
200
+ </ol>
201
+ <p><img src="https://mmbiz.qpic.cn/mmbiz_png/KfGu3WwVIa07mhHsu1WqrJfjQDuJcxlGGiaKwwze8QgVq8mB2HSAChTG8zEPyRicKR2xxyqovyxTNf1fzMHepJEg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" alt="xuehuayu.cn"></p>
202
+ </div><iframe src="/donate/?AliPayQR=https://store.xuehuayu.cn/store/public/alipay_qr.jpg&amp;WeChatQR=https://store.xuehuayu.cn/store/public/wechat_qr.png&amp;UnionPayQR=null&amp;GitHub=null&amp;BTCQR=null&amp;BTCKEY=null&amp;PayPal=https://www.paypal.com/paypalme/OrdinaryPerson" style="overflow-x:hidden; overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>雪花雨</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="/article/3286.html">https://xuehuayu.cn/article/3286.html</a></li><li class="post-copyright-license"><strong>版权声明：</strong>① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 转载文章来自网络，已标明出处，<a href="mailto:cainiaoblog@126.com">侵删</a>。</li></ul></div><br><div class="tags"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载</a></div><div class="post-nav"><a class="pre" href="/article/54295.html">前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)</a><a class="next" href="/article/48216.html">Web性能领域常见的专业术语</a></div><div id="vcomment"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.min.css"><script src="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.js"></script><script>const origin = window.location.origin
203
+ const serverURL = origin.includes('cainiaoblog') ? 'https://cmts.cainiaoblog.cn' : 'https://cmts.xuehuayu.cn'
204
+ const locale = {
205
+ placeholder: '请正确填写昵称和邮箱，方便接收回复通知~',
206
+ sofa: '沙发空缺中，还不快抢~',
207
+ };
208
+ Waline.init({
209
+ el: '#vcomment',
210
+ serverURL: serverURL,
211
+ pageSize: '20',
212
+ visitor: true, // 阅读量统计
213
+ requiredMeta: ['nick', 'mail'],
214
+ emoji: [
215
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
216
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
217
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',
218
+ ],
219
+ locale,
220
+ pageview: true
221
+ })
222
+ </script></div></div></div><div class="pure-u-1 pure-u-md-1-4 fixed-search hidden_mid_and_down"><div id="sidebar"><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/search.min.js"></script><div class="widget"><div class="widget-search"><input class="search" type="radio" name="search" value="baidu" id="baidu" checked="checked"/><label class="label" for="baidu" title="百度全站搜索">百度</label><input class="search" type="radio" name="search" value="google" id="google"/><label class="label" for="google" title="谷歌全站搜索">谷歌</label><input class="search" type="radio" name="search" value="self" id="self"/><label class="label" for="self" title="使用站内搜索">站内</label></div><div class="widget" id="search"><form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"/><input type="hidden" name="si" value="xuehuayu.cn"/><input type="hidden" name="cl" value="3"/><input type="hidden" name="ct" value="2097152"/><input type="hidden" name="s" value="on"/><input class="search-submit" type="submit" value=""/></form></div></div><script>$('input[type=radio][name=search]').change(function() {
223
+ var val = $(this).val()
224
+ var self = '<div class="search-form"><input id="local-search-input" placeholder="站内搜索，首次慢" type="search" name="q" results="0"><input class="search-submit" type="submit" value=""/><div id="local-search-result"></div></div>'
225
+ var google = '<form class="search-form" action="//www.google.com/search" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="q" maxlength="30" placeholder="谷歌全站搜索"><input type="hidden" name="sitesearch" value="xuehuayu.cn"><input class="search-submit" type="submit" value=""/></form>'
226
+ var baidu = '<form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"><input type="hidden" name="si" value="xuehuayu.cn"><input type="hidden" name="cl" value="3"><input type="hidden" name="ct" value="2097152"><input type="hidden" name="s" value="on"><input class="search-submit" type="submit" value=""/></form>'
227
+
228
+ if (val === 'self') {
229
+ $('#search').html(self)
230
+ var search_path = 'search.xml';
231
+ if (search_path.length == 0) {
232
+ search_path = 'search.xml';
233
+ }
234
+ var path = 'https://cdn.staticaly.com/gh/npljy/npljy.github.io/main/' + search_path;
235
+ searchFunc(path, 'local-search-input', 'local-search-result');
236
+ } else if (val === 'baidu') {
237
+ $('#search').html(baidu)
238
+ } else if (val === 'google') {
239
+ $('#search').html(google)
240
+ }
241
+ })</script><div class="widget widget-wxmp"><img alt="微信公众号" width="100%" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/mp-mini.jpg"/></div><div class="widget widget-categories"><div class="widget-title"><i class="fa fa-folder-o"> 分类</i></div><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CDN/">CDN</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/IDE/">IDE</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/git/">git</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hexo/">hexo</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%85%AC%E5%85%B1%E8%8A%82%E6%97%A5/">公共节日</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%88%86%E4%BA%AB/">分享</a><span class="category-list-count">29</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span class="category-list-count">191</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/">网络协议</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2/">博客</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B7%A5%E5%85%B7/">工具</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/">广告过滤</a><span class="category-list-count">8</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/%E8%A7%86%E9%A2%91%E7%94%B5%E8%A7%86%E5%B0%8F%E8%AF%B4%E6%BC%AB%E7%94%BB%E8%B5%84%E8%AE%AF%E9%9F%B3%E4%B9%90/">视频电视小说漫画资讯音乐</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%AD%A3%E5%88%99/">正则</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AE%97%E6%B3%95/">算法</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%B5%84%E8%AE%AF/">资讯</a><span class="category-list-count">16</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%BD%BB%E6%9D%BE%E4%B8%80%E5%88%BB/">轻松一刻</a><span class="category-list-count">1</span></li></ul></div><div class="widget widget-tags"><div class="widget-title"><i class="fa fa-star-o"> 标签</i></div><div class="tagcloud"><a href="/tags/%E5%8E%9F%E5%88%9B/" style="font-size: 15px;">原创</a> <a href="/tags/%E8%BD%AC%E8%BD%BD/" style="font-size: 15px;">转载</a> <a href="/tags/%E6%89%8B%E5%86%99/" style="font-size: 15px;">手写</a> <a href="/tags/%E7%96%AB%E6%83%85/" style="font-size: 15px;">疫情</a> <a href="/tags/%E5%A8%B1%E4%B9%90/" style="font-size: 15px;">娱乐</a></div></div><div class="widget widget-recent-posts"><div class="widget-title"><i class="fa fa-file-o"> 最近文章</i></div><ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/article/c5576490.html">面试准备</a></li><li class="post-list-item"><a class="post-list-link" href="/article/84c9ccd6.html">精读《SolidJS》</a></li><li class="post-list-item"><a class="post-list-link" href="/article/53803e6.html">git提交注释规范</a></li><li class="post-list-item"><a class="post-list-link" href="/article/a4145266.html">前端数组拍平flat一行代码</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bedea419.html">一道前端this面试题</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bf7e7421.html">git多账号配置</a></li></ul></div><div class="widget widget-links"><div class="widget-title"><i class="fa fa-external-link"> 友情链接</i></div><ul></ul><a href="https://github.com/npljy?utm_source=xuehuayu.cn" title="GitHub" target="_blank">GitHub</a><ul></ul><a href="https://laonongmin.online?utm_source=xuehuayu.cn" title="看看" target="_blank">看看</a><ul></ul><a href="https://cainiaoblog.cn?utm_source=xuehuayu.cn" title="菜鸟博客" target="_blank">菜鸟博客</a><ul></ul><a href="mailto:cainiaoblog@126.com" title="友链联系" target="_blank">友链联系</a></div></div></div><div class="pure-u-1 pure-u-md-3-4"><div id="footer"><div class="flex-block justify-center align-center flex-wrap"><a class="gxba-link" id="gxba" rel="nofollow" target="_blank" href="http://beian.miit.gov.cn/">京ICP备20007647号-2</a><a class="gaba-link" id="gaba-link" rel="nofollow" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031264"><img class="nofancybox" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/gaba.png" alt=""/><span id="gaba">京公网安备 11010802031264号</span><span style="padding-right: 10px;"></span></a><span>Copyright © 2023 </span><a href="/." rel="nofollow">前端壹菜鸟. </a><script>(function(){
242
+ var cnb =window.location.origin.indexOf('cainiaoblog') !==-1
243
+ if (cnb) {
244
+ var gxba =document.getElementById('gxba')
245
+ var gaba =document.getElementById('gaba')
246
+ var gabaLink =document.getElementById('gaba-link')
247
+ gxba.innerText ='京ICP备20007647号-1'
248
+ gaba.innerText ='京公网安备 11010802031254号'
249
+ gabaLink.setAttribute('href','http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031254')
250
+ }
251
+ })()</script></div><div class="flex-block justify-center align-center flex-wrap"><a rel="nofollow" target="_blank" href="https://v6.51.la/s/Guz3lwHCsVme9Cu"><div class="busuanzi_container" id="busuanzi_container"><span class="busuanzi_container_site_pv" id="busuanzi_container_site_pv">访问量：<span id="busuanzi_value_site_pv"><i class="fa fa-spinner"></i></span></span><span class="busuanzi_container_site_uv" id="busuanzi_container_site_uv">访客数：<span id="busuanzi_value_site_uv"><i class="fa fa-spinner"></i></span></span><span style="padding-right: 10px;"></span></div></a><a rel="nofollow" target="_blank" href="https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral"><span style="font-weight:bold;letter-spacing: 1px;">本网站由 </span><img class="nofancybox" height="32" style="vertical-align: middle" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/upy_logo.min.svg" alt=""/><span style="font-weight:bold;letter-spacing: 1px;">提供CDN加速/云存储服务</span></a><span style="padding-right: 10px;"></span><a rel="nofollow" style="font-size:18px;font-weight:bold;vertical-align: middle" target="_blank" title="注册就送代金券可直接使用" href="https://console.upyun.com/register/?invite=HyDsjZHIL">注册</a></div></div></div></div><a class="show" id="rocket" href="#top"></a><div class="darkmode-toggle">🌓</div><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/totop.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/dark.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/codeblock-resizer.min.js"></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/smartresize.min.js"></script></div></body></html>
package/article/32960.html ADDED
@@ -0,0 +1,198 @@
1
+ <!DOCTYPE html><html lang="zh-CN" data-dark><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta name="description" content="前端壹菜鸟，记录工作难题，关注前端知识，收集精彩博文，做技术的搬运工"><meta name="msvalidate.01" content="0FE4D8B3381D3D87088996B886E1E2BD"><title>优化CSS并加速网站的21种方法 | 前端壹菜鸟</title><link rel="stylesheet" type="text/css" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/css/style.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/normalize.css@latest/normalize.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/pure-min.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/grids-responsive-min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><link rel="icon" mask="" sizes="any" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="Shortcut Icon" type="image/x-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="apple-touch-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="apple-touch-icon-precomposed" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="alternate" type="application/atom+xml" href="/atom.xml"><script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8385136408348258"></script><script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script><script>(function(){
2
+ var bp = document.createElement('script');
3
+ var curProtocol = window.location.protocol.split(':')[0];
4
+ if (curProtocol === 'https'){
5
+ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
6
+ }
7
+ else{
8
+ bp.src = 'http://push.zhanzhang.baidu.com/push.js';
9
+ }
10
+ var s = document.getElementsByTagName("script")[0];
11
+ s.parentNode.insertBefore(bp, s);
12
+ })();
13
+ </script><script>(function(){
14
+ var src = 'https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba';
15
+ document.write('<script src="' + src + '" id="sozz"><\/script>');
16
+ })();
17
+ </script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src='https://hm.baidu.com/hm.js?011f0b44e8452bfa57fbfa23c5fe7683';var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
18
+ </script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-150860401-1"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);};gtag('js',new Date());gtag('config','UA-150860401-1');
19
+ </script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/fixedPage.min.js"></script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><a id="logo" href="/.">前端壹菜鸟</a><p class="description">关注前端知识，收集精彩博文，做技术的搬运工</p></div><div id="nav-menu"><a class="current" href="/." target="_self"><i class="fa fa-home"> 首页</i></a><a href="/archives/" target="_self"><i class="fa fa-archive"> 归档</i></a><a href="/guestbook/" target="_self"><i class="fa fa-comments"> 留言</i></a><a href="/about/" target="_self"><i class="fa fa-user"> 关于</i></a><a href="https://laonongmin.online/" target="_target"><i class="fa fa-group"> 看看</i></a><a href="https://love.xuehuayu.cn/" target="_target"><i class="fa fa-heart"> LOVE</i></a></div></div><div class="pure-g" id="layout"><div class="pure-u-1 pure-u-md-3-4"><div class="content_container"><div class="post"><h1 class="post-title c-post">优化CSS并加速网站的21种方法</h1><div class="post-meta"><span class="date">2019-10-31</span><span> | </span><span class="tag"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载 </a></span><span> | </span><span class="category"><a href="/categories/%E5%89%8D%E7%AB%AF/">前端 </a></span><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span><span> 阅读</span></span><span class="post-time"><span class="post-meta-item-text"> | </span><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-count"> 2.4k</span><span class="post-meta-item-text"> 字</span></span></span><span class="post-time"> | <span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-count"> 9</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/32960.html#vcomment"><span class="waline-comment-count" data-path="/article/32960.html"></span><span> 条评论</span></a><div class="post-content"><p><code>原文地址：https://mp.weixin.qq.com/s/9vPBOPkfPgNqOxsoeztjEw</code></p>
20
+ <p>CSS 必须通过一个相对复杂的管道，就像 HTML 和 JavaScript一样，浏览器必须从服务器下载文件，然后进行解析并将其应用于DOM。由于优化程度极高，这个过程通常非常快——对于不基于框架的小型 web 项目，CSS通常只占总资源消耗的一小部分。</p>
21
+ <span id="more"></span>
22
+ <p><img src="https://img.php.cn/upload/article/000/000/006/5daa6923205bc807.jpg" alt="xuehuayu.cn"></p>
23
+ <p>框架打破了这种平衡。包括一个 JavaScript GUI 堆栈，如 jQuery UI，可以观察 CSS, JS 和 HTML大小逐渐的变大。通常，开发人员最后才会感到压力，当他们用一个强大的 8 核工作站后面，使用 T3 internet 时，没有人关心速度，这随着延迟或 cpu 受限设备的出现而改变。</p>
24
+ <p>优化CSS需要一个多维的方法。虽然手工编写的代码可以使用各种技术进行简化，但是手工检查框架代码是低效的。在这些情况下，使用自动化的简化会产生更好的结果。</p>
25
+ <p>下面的步骤将带我们进入 CSS 优化的世界。并不是每一个都可以直接应用到你的项目中，但是一定要记住它们。</p>
26
+ <h2 id="01-使用简写"><a href="#01-使用简写" class="headerlink" title="01. 使用简写"></a>01. 使用简写</h2><p><img src="https://img.php.cn/upload/image/192/710/135/1571448819576179.jpg" alt="1571448819576179.jpg"></p>
27
+ <p>使用缩写语句，如下面所示的 <code>margin</code> 声明，可以从根本上减小 CSS 文件的大小。在 google 上搜索 <code>CSS Shorthand</code> 可以找到许多其他的速记形式。</p>
28
+ <pre><code>p &#123; margin-top: 1px;
29
+ margin-right: 2px;
30
+ margin-bottom: 3px;
31
+ margin-left: 4px; &#125;
32
+
33
+ p &#123; margin: 1px 2px 3px 4px; &#125;
34
+ </code></pre>
35
+ <h2 id="02-查找并删除未使用的-CSS"><a href="#02-查找并删除未使用的-CSS" class="headerlink" title="02. 查找并删除未使用的 CSS"></a>02. 查找并删除未使用的 CSS</h2><p><img src="https://img.php.cn/upload/image/503/682/542/1571448824927414.jpg" alt="1571448824927414.jpg"></p>
36
+ <p>删除不必要的部分 CSS，j显然会加快网页的加载速度。谷歌的Chrome浏览器有这种开箱即用的功能。只需转到查看&gt;开发人员&gt;开发人员工具，并在最近的版本中打开Sources选项卡，然后打开命令菜单。然后，选择Show Coverage，在Coverage analysis窗口中高亮显示当前页面上未使用的代码，让您大开眼界。</p>
37
+ <p>打开谷歌浏览器开发都工具，在 <code>Conlse</code> 旁边更多选择 <code>Coverage</code>，就可以看到未使用的 CSS, 点击对应的项，高亮显示当前页面上未使用的代码，让你大开眼界：</p>
38
+ <p><img src="https://img.php.cn/upload/image/973/337/252/1571448829289104.png" alt="1571448829289104.png"></p>
39
+ <h2 id="03-以更便捷的方式做到这一点"><a href="#03-以更便捷的方式做到这一点" class="headerlink" title="03. 以更便捷的方式做到这一点"></a>03. 以更便捷的方式做到这一点</h2><p><img src="https://img.php.cn/upload/image/497/664/318/1571448835387382.png" alt="1571448835387382.png"></p>
40
+ <p>在逐行分析中导航并不一定便捷，使用谷歌浏览器的 Audits 就可以快速帮我们分析，使用方式，打开开发者工具，点击 <code>Audits</code> 栏位，点击 <strong>Run audits</strong> 后就开始分析结果。</p>
41
+ <h2 id="04-注意这些问题"><a href="#04-注意这些问题" class="headerlink" title="04. 注意这些问题"></a>04. 注意这些问题</h2><p>请记住，对 CSS 的自动分析总是会导致错误。用压缩后的 CSS 文件替换 未压缩CSS文件之后，对整个网站进行彻底的测试——没有人知道优化器会导致什么错误。</p>
42
+ <h2 id="05-内联关键-CSS"><a href="#05-内联关键-CSS" class="headerlink" title="05.内联关键 CSS"></a>05.内联关键 CSS</h2><p>加载外部样式表需要花费时间，这是由于延迟造成的——因此，可以把最关键的代码位放在 <code>head</code> 中。但是，请确保不要做得过火，记住，执行维护任务的人员也必须读取代码。</p>
43
+ <pre><code>&lt;html&gt;
44
+ &lt;head&gt;
45
+ &lt;style&gt;
46
+ .blue&#123;color:blue;&#125;
47
+ &lt;/style&gt;
48
+ &lt;/head&gt;
49
+ &lt;body&gt;
50
+ &lt;p class=&quot;blue&quot;&gt;
51
+ Hello, world!
52
+ &lt;/p&gt;
53
+ </code></pre>
54
+ <h2 id="06-允许反并行解析"><a href="#06-允许反并行解析" class="headerlink" title="06.允许反并行解析"></a>06.允许反并行解析</h2><p><code>@import</code> 将 CSS 样式方便添加代码中。遗憾的是，这些好处并不是没有代价的:由于 <code>@import</code> 可以嵌套，因此无法并行解析它们。更并行的方法是使用一系列 <strong><link></strong> 标记，浏览器可以立即获取这些标记。</p>
55
+ <pre><code>@import url(&quot;a.css&quot;);
56
+ @import url(&quot;b.css&quot;);
57
+ @import url(&quot;c.css&quot;);
58
+
59
+ &lt;link rel=&quot;stylesheet&quot; href=&quot;a.css&quot;&gt;
60
+ &lt;link rel=&quot;stylesheet&quot; href=&quot;b.css&quot;&gt;
61
+ &lt;link rel=&quot;stylesheet&quot; href=&quot;c.css&quot;&gt;
62
+ </code></pre>
63
+ <h2 id="07-用-CSS-替换图片"><a href="#07-用-CSS-替换图片" class="headerlink" title="07. 用 CSS 替换图片"></a>07. 用 CSS 替换图片</h2><p>几年前，一套半透明的 png 在网站上创建半透明效果是司空见惯的。现在，CSS过 滤器提供了一种节省资源的替代方法。例如，以下这个代码片段可以确保所讨论的图片显示为其自身的灰度版本。</p>
64
+ <pre><code>img &#123;
65
+ -webkit-filter: grayscale(100%);
66
+ /* old safari */
67
+ filter: grayscale(100%);
68
+ &#125;
69
+ </code></pre>
70
+ <h2 id="08-使用颜色快捷方式"><a href="#08-使用颜色快捷方式" class="headerlink" title="08.使用颜色快捷方式"></a>08.使用颜色快捷方式</h2><p>常识告诉我们，六位数的颜色描述符是表达颜色最有效的方式。事实并非如此——在某些情况下，速记描述或颜色名称可以更短。</p>
71
+ <pre><code>target &#123; background-color: #ffffff; &#125;
72
+ target &#123; background: #fff; &#125;
73
+ </code></pre>
74
+ <h2 id="09-删除不必要的零和单位"><a href="#09-删除不必要的零和单位" class="headerlink" title="09. 删除不必要的零和单位"></a>09. 删除不必要的零和单位</h2><p>CSS 支持多种单位和数字格式。它们是一个值得感谢的优化目标——可以删除尾随和跟随的零，如下面的代码片段所示。此外，请记住，零始终是零，添加维度不会为包含的信息附带价值。</p>
75
+ <pre><code>padding: 0.2em;
76
+ margin: 20.0em;
77
+ avalue: 0px;
78
+ padding: .2em;
79
+ margin: 20em;
80
+ avalue: 0;
81
+ </code></pre>
82
+ <h2 id="10-消除过多分号"><a href="#10-消除过多分号" class="headerlink" title="10. 消除过多分号"></a>10. 消除过多分号</h2><p>这种优化需要谨慎，因为它会影响代码的更改。CSS的规范允许省略属性组中的最后一个分号。由于这种优化方法所节省的成本很小，所以我们主要针对那些正在开发自动优化的程序员说明这一点。</p>
83
+ <pre><code>p &#123;
84
+ . . .
85
+ font-size: 1.33em
86
+ &#125;
87
+ </code></pre>
88
+ <h2 id="11-使用纹理图集"><a href="#11-使用纹理图集" class="headerlink" title="11.使用纹理图集"></a>11.使用纹理图集</h2><p>由于协议开销的原因，加载多个小图片的效率很低。CSS 精灵将一系列小图片组合成一个大的PNG 文件，然后通过 CSS 规则将其分解。<a target="_blank" rel="noopener" href="https://www.codeandweb.com/texturepacker">TexturePacker</a> 等程序大大简化了创建过程。</p>
89
+ <pre><code>.download &#123;
90
+ width:80px;
91
+ height:31px;
92
+ background-position: -160px -160px
93
+ &#125;
94
+
95
+ .download:hover &#123;
96
+ width:80px;
97
+ height:32px;
98
+ background-position: -80px -160px
99
+ &#125;
100
+ </code></pre>
101
+ <h2 id="12-省略-px"><a href="#12-省略-px" class="headerlink" title="12. 省略 px"></a>12. 省略 px</h2><p>提高性能的一个简单方法是使用CSS标准的一个特性。为 0 的数值默认单位是 <code>px</code>—— 删除 <code>px</code> 可以为每个数字节省两个字节。</p>
102
+ <pre><code>h2 &#123;padding:0px; margin:0px;&#125;
103
+
104
+ h2 &#123;padding:0; margin:0&#125;
105
+ </code></pre>
106
+ <h2 id="13-避免需要性能要求的属性"><a href="#13-避免需要性能要求的属性" class="headerlink" title="13. 避免需要性能要求的属性"></a>13. 避免需要性能要求的属性</h2><p>分析表明，一些标签比其他标签更昂贵。以下这些解析会影响性能—如果在没有必要的情况，尽量不要使用它们。</p>
107
+ <pre><code>border-radius
108
+ box-shadow
109
+ transform
110
+ filter
111
+ :nth-child
112
+ position: fixed;
113
+ </code></pre>
114
+ <h2 id="14-删除空格"><a href="#14-删除空格" class="headerlink" title="14. 删除空格"></a>14. 删除空格</h2><p>空格——考虑制表符、回车符和空格——使代码更容易阅读，但从解析器的角度看，它没有什么用处。在发布前删除它们，更好的方法是将此任务委托给 shell 脚本或类似的工具。</p>
115
+ <h2 id="15-删除注释"><a href="#15-删除注释" class="headerlink" title="15. 删除注释"></a>15. 删除注释</h2><p>注释对编译器也没有任何作用。创建一个自定义解析器，以便在发布之前删除它们。这不仅节省了带宽，而且还确保攻击者和克隆者更难理解手头代码背后的思想。</p>
116
+ <h2 id="16-使用自动压缩"><a href="#16-使用自动压缩" class="headerlink" title="16. 使用自动压缩"></a>16. 使用自动压缩</h2><p>Yahoo　的用户体验团队创建了一个处理许多压缩任务的应用程序。它以　JAR　文件的形式发布，<a target="_blank" rel="noopener" href="http://yui.github.io/yuicompressor/">可在此处获得</a>，并且可以使用所选的JVM运行。</p>
117
+ <pre><code>java -jar yuicompressor-x.y.z.jar
118
+ Usage: java -jar yuicompressor-x.y.z.jar
119
+ [options] [input file]
120
+ Global Options
121
+ -h, --help Displays this
122
+ information
123
+ --type &lt;js|css&gt; Specifies the
124
+ type of the input file
125
+ </code></pre>
126
+ <h2 id="17-在-NPM-运行它"><a href="#17-在-NPM-运行它" class="headerlink" title="17. 在 NPM 运行它"></a>17. 在 NPM 运行它</h2><p>如果你希望将产品集成到 Node.JS 中，请访问 n<a target="_blank" rel="noopener" href="https://www.npmjs.com/package/yuicompressor">pmjs.com&#x2F;package&#x2F;yuicompressor</a>。维护不良的存储库包含一组包装器文件和JavaScript API。</p>
127
+ <pre><code>var compressor = require(&#39;yuicompressor&#39;);
128
+ compressor.compress(&#39;/path/to/
129
+ file or String of JS&#39;, &#123;
130
+ //Compressor Options:
131
+ charset: &#39;utf8&#39;,
132
+ type: &#39;js&#39;,
133
+ </code></pre>
134
+ <h2 id="18-保持-Sass-的检查"><a href="#18-保持-Sass-的检查" class="headerlink" title="18. 保持 Sass 的检查"></a>18. 保持 Sass 的检查</h2><p><img src="https://img.php.cn/upload/image/841/794/992/1571448920487836.jpg" alt="1571448920487836.jpg"></p>
135
+ <p>虽然 CSS 选择器的性能不像几年前那么重要(请参阅参考资料)，但是像 Sass 这样的框架有时会产生非常复杂的代，不时查看输出文件，并考虑优化结果的方法。</p>
136
+ <p><a target="_blank" rel="noopener" href="https://www.creativebloq.com/web-design/what-is-sass-111517618">什么是Sass？</a></p>
137
+ <h2 id="19-设置缓存"><a href="#19-设置缓存" class="headerlink" title="19. 设置缓存"></a>19. 设置缓存</h2><p>有句老话说，最快的文件永远不会通过网络发送。让浏览器缓存请求有效地实现这一点。遗憾的是，缓存头的设置必须在服务器上进行。充分上面讲的的两个 Chrome 工具，它们提供了一种快速分析更改结果的方法。</p>
138
+ <h2 id="20-打破缓存"><a href="#20-打破缓存" class="headerlink" title="20. 打破缓存"></a>20. 打破缓存</h2><p>设计人员通常不喜欢缓存，因为他们担心浏览器会缓存上次的样式表。解决这个问题的一个简单方法是包含带有文件名的标记。遗憾的是，由于一些代理拒绝缓存具有“动态”路径的文件，此步骤所附带的代码中概述的方案并不适用于所有地方。</p>
139
+ <pre><code>&lt;Link rel=&quot;stylesheet&quot; href=&quot;style.css?v=1.2.3&quot;&gt;
140
+ </code></pre>
141
+ <h2 id="21-不要忘记基础知识"><a href="#21-不要忘记基础知识" class="headerlink" title="21. 不要忘记基础知识"></a>21. 不要忘记基础知识</h2><p>优化CSS只是游戏的一部分。如果你的服务器不使用 HTTP&#x2F;2 和 gzip 压缩，那么在数据传输期间会损失很多时间。幸运的是，解决这两个问题通常很简单。我们的示例显示了对常用Apache 服务器的一些调整。如果您发现自己在一个不同的系统上，只需参考服务器文档即可。</p>
142
+ <pre><code>pico /etc/httpd/conf/httpd.conf
143
+ AddOutputFilterByType DEFLATE text/html
144
+ AddOutputFilterByType DEFLATE text/css
145
+ </code></pre>
146
+ <p>英文原文地址：<a target="_blank" rel="noopener" href="https://www.creativebloq.com/how-to/21-ways-to-optimise-your-css-and-speed-up-your-site">https://www.creativebloq.com/how-to/21-ways-to-optimise-your-css-and-speed-up-your-site</a></p>
147
+ <p>为了保证的可读性，本文采用意译而非直译。</p>
148
+ <p>以上就是优化CSS并加速网站的21种方法的详细内容，更多请关注html中文网其它相关文章！</p>
149
+ </div><iframe src="/donate/?AliPayQR=https://store.xuehuayu.cn/store/public/alipay_qr.jpg&amp;WeChatQR=https://store.xuehuayu.cn/store/public/wechat_qr.png&amp;UnionPayQR=null&amp;GitHub=null&amp;BTCQR=null&amp;BTCKEY=null&amp;PayPal=https://www.paypal.com/paypalme/OrdinaryPerson" style="overflow-x:hidden; overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>雪花雨</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="/article/32960.html">https://xuehuayu.cn/article/32960.html</a></li><li class="post-copyright-license"><strong>版权声明：</strong>① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 转载文章来自网络，已标明出处，<a href="mailto:cainiaoblog@126.com">侵删</a>。</li></ul></div><br><div class="tags"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载</a></div><div class="post-nav"><a class="pre" href="/article/36118.html">腾讯原生小程序框架 OMIX 2.0 发布</a><a class="next" href="/article/30215.html">CSS 开发必知必会的 16 个DevTools技巧</a></div><div id="vcomment"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.min.css"><script src="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.js"></script><script>const origin = window.location.origin
150
+ const serverURL = origin.includes('cainiaoblog') ? 'https://cmts.cainiaoblog.cn' : 'https://cmts.xuehuayu.cn'
151
+ const locale = {
152
+ placeholder: '请正确填写昵称和邮箱，方便接收回复通知~',
153
+ sofa: '沙发空缺中，还不快抢~',
154
+ };
155
+ Waline.init({
156
+ el: '#vcomment',
157
+ serverURL: serverURL,
158
+ pageSize: '20',
159
+ visitor: true, // 阅读量统计
160
+ requiredMeta: ['nick', 'mail'],
161
+ emoji: [
162
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
163
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
164
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',
165
+ ],
166
+ locale,
167
+ pageview: true
168
+ })
169
+ </script></div></div></div><div class="pure-u-1 pure-u-md-1-4 fixed-search hidden_mid_and_down"><div id="sidebar"><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/search.min.js"></script><div class="widget"><div class="widget-search"><input class="search" type="radio" name="search" value="baidu" id="baidu" checked="checked"/><label class="label" for="baidu" title="百度全站搜索">百度</label><input class="search" type="radio" name="search" value="google" id="google"/><label class="label" for="google" title="谷歌全站搜索">谷歌</label><input class="search" type="radio" name="search" value="self" id="self"/><label class="label" for="self" title="使用站内搜索">站内</label></div><div class="widget" id="search"><form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"/><input type="hidden" name="si" value="xuehuayu.cn"/><input type="hidden" name="cl" value="3"/><input type="hidden" name="ct" value="2097152"/><input type="hidden" name="s" value="on"/><input class="search-submit" type="submit" value=""/></form></div></div><script>$('input[type=radio][name=search]').change(function() {
170
+ var val = $(this).val()
171
+ var self = '<div class="search-form"><input id="local-search-input" placeholder="站内搜索，首次慢" type="search" name="q" results="0"><input class="search-submit" type="submit" value=""/><div id="local-search-result"></div></div>'
172
+ var google = '<form class="search-form" action="//www.google.com/search" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="q" maxlength="30" placeholder="谷歌全站搜索"><input type="hidden" name="sitesearch" value="xuehuayu.cn"><input class="search-submit" type="submit" value=""/></form>'
173
+ var baidu = '<form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"><input type="hidden" name="si" value="xuehuayu.cn"><input type="hidden" name="cl" value="3"><input type="hidden" name="ct" value="2097152"><input type="hidden" name="s" value="on"><input class="search-submit" type="submit" value=""/></form>'
174
+
175
+ if (val === 'self') {
176
+ $('#search').html(self)
177
+ var search_path = 'search.xml';
178
+ if (search_path.length == 0) {
179
+ search_path = 'search.xml';
180
+ }
181
+ var path = 'https://cdn.staticaly.com/gh/npljy/npljy.github.io/main/' + search_path;
182
+ searchFunc(path, 'local-search-input', 'local-search-result');
183
+ } else if (val === 'baidu') {
184
+ $('#search').html(baidu)
185
+ } else if (val === 'google') {
186
+ $('#search').html(google)
187
+ }
188
+ })</script><div class="widget widget-wxmp"><img alt="微信公众号" width="100%" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/mp-mini.jpg"/></div><div class="widget widget-categories"><div class="widget-title"><i class="fa fa-folder-o"> 分类</i></div><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CDN/">CDN</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/IDE/">IDE</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/git/">git</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hexo/">hexo</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%85%AC%E5%85%B1%E8%8A%82%E6%97%A5/">公共节日</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%88%86%E4%BA%AB/">分享</a><span class="category-list-count">29</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span class="category-list-count">191</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/">网络协议</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2/">博客</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B7%A5%E5%85%B7/">工具</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/">广告过滤</a><span class="category-list-count">8</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/%E8%A7%86%E9%A2%91%E7%94%B5%E8%A7%86%E5%B0%8F%E8%AF%B4%E6%BC%AB%E7%94%BB%E8%B5%84%E8%AE%AF%E9%9F%B3%E4%B9%90/">视频电视小说漫画资讯音乐</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%AD%A3%E5%88%99/">正则</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AE%97%E6%B3%95/">算法</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%B5%84%E8%AE%AF/">资讯</a><span class="category-list-count">16</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%BD%BB%E6%9D%BE%E4%B8%80%E5%88%BB/">轻松一刻</a><span class="category-list-count">1</span></li></ul></div><div class="widget widget-tags"><div class="widget-title"><i class="fa fa-star-o"> 标签</i></div><div class="tagcloud"><a href="/tags/%E5%8E%9F%E5%88%9B/" style="font-size: 15px;">原创</a> <a href="/tags/%E8%BD%AC%E8%BD%BD/" style="font-size: 15px;">转载</a> <a href="/tags/%E6%89%8B%E5%86%99/" style="font-size: 15px;">手写</a> <a href="/tags/%E7%96%AB%E6%83%85/" style="font-size: 15px;">疫情</a> <a href="/tags/%E5%A8%B1%E4%B9%90/" style="font-size: 15px;">娱乐</a></div></div><div class="widget widget-recent-posts"><div class="widget-title"><i class="fa fa-file-o"> 最近文章</i></div><ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/article/c5576490.html">面试准备</a></li><li class="post-list-item"><a class="post-list-link" href="/article/84c9ccd6.html">精读《SolidJS》</a></li><li class="post-list-item"><a class="post-list-link" href="/article/53803e6.html">git提交注释规范</a></li><li class="post-list-item"><a class="post-list-link" href="/article/a4145266.html">前端数组拍平flat一行代码</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bedea419.html">一道前端this面试题</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bf7e7421.html">git多账号配置</a></li></ul></div><div class="widget widget-links"><div class="widget-title"><i class="fa fa-external-link"> 友情链接</i></div><ul></ul><a href="https://github.com/npljy?utm_source=xuehuayu.cn" title="GitHub" target="_blank">GitHub</a><ul></ul><a href="https://laonongmin.online?utm_source=xuehuayu.cn" title="看看" target="_blank">看看</a><ul></ul><a href="https://cainiaoblog.cn?utm_source=xuehuayu.cn" title="菜鸟博客" target="_blank">菜鸟博客</a><ul></ul><a href="mailto:cainiaoblog@126.com" title="友链联系" target="_blank">友链联系</a></div></div></div><div class="pure-u-1 pure-u-md-3-4"><div id="footer"><div class="flex-block justify-center align-center flex-wrap"><a class="gxba-link" id="gxba" rel="nofollow" target="_blank" href="http://beian.miit.gov.cn/">京ICP备20007647号-2</a><a class="gaba-link" id="gaba-link" rel="nofollow" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031264"><img class="nofancybox" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/gaba.png" alt=""/><span id="gaba">京公网安备 11010802031264号</span><span style="padding-right: 10px;"></span></a><span>Copyright © 2023 </span><a href="/." rel="nofollow">前端壹菜鸟. </a><script>(function(){
189
+ var cnb =window.location.origin.indexOf('cainiaoblog') !==-1
190
+ if (cnb) {
191
+ var gxba =document.getElementById('gxba')
192
+ var gaba =document.getElementById('gaba')
193
+ var gabaLink =document.getElementById('gaba-link')
194
+ gxba.innerText ='京ICP备20007647号-1'
195
+ gaba.innerText ='京公网安备 11010802031254号'
196
+ gabaLink.setAttribute('href','http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031254')
197
+ }
198
+ })()</script></div><div class="flex-block justify-center align-center flex-wrap"><a rel="nofollow" target="_blank" href="https://v6.51.la/s/Guz3lwHCsVme9Cu"><div class="busuanzi_container" id="busuanzi_container"><span class="busuanzi_container_site_pv" id="busuanzi_container_site_pv">访问量：<span id="busuanzi_value_site_pv"><i class="fa fa-spinner"></i></span></span><span class="busuanzi_container_site_uv" id="busuanzi_container_site_uv">访客数：<span id="busuanzi_value_site_uv"><i class="fa fa-spinner"></i></span></span><span style="padding-right: 10px;"></span></div></a><a rel="nofollow" target="_blank" href="https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral"><span style="font-weight:bold;letter-spacing: 1px;">本网站由 </span><img class="nofancybox" height="32" style="vertical-align: middle" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/upy_logo.min.svg" alt=""/><span style="font-weight:bold;letter-spacing: 1px;">提供CDN加速/云存储服务</span></a><span style="padding-right: 10px;"></span><a rel="nofollow" style="font-size:18px;font-weight:bold;vertical-align: middle" target="_blank" title="注册就送代金券可直接使用" href="https://console.upyun.com/register/?invite=HyDsjZHIL">注册</a></div></div></div></div><a class="show" id="rocket" href="#top"></a><div class="darkmode-toggle">🌓</div><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/totop.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/dark.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/codeblock-resizer.min.js"></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/smartresize.min.js"></script></div></body></html>