【總結(jié)】代碼中屬性的順序是如何影響性能的?
CSS 樣式的書寫順序是一種約定俗成的規(guī)范，它有助于保持樣式表的清晰和可讀性。并使多人協(xié)作更加順暢。但需要注意的是，根據(jù)具體項(xiàng)目和團(tuán)隊(duì)的需求，可能會(huì)有一些微調(diào)或自定義的順序。因此，在實(shí)際工作中，根據(jù)項(xiàng)目的要求和團(tuán)隊(duì)的約定進(jìn)行適當(dāng)?shù)恼{(diào)整。
1、CSS樣式書寫順序及原理
1.1、CSS推薦的書寫順序
// 1、定位屬性：display position float / left top right bottom / overflow clear z-index// 2、自身屬性：width height / padding border margin / background// 3、文字樣式：font-family font-size font-style font-weight font-varient / color// 4、文本屬性：text-align vertical-align / text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow// 5、css3中新增屬性：content / box-shadow border-radius / transform...
1.2、 目的：減少瀏覽器reflow（回流），提升瀏覽器渲染dom的性能。
1.3、原理：
css樣式解析到顯示至瀏覽器屏幕上就發(fā)生在2,3,4步驟，可見瀏覽器并不是一獲取到css樣式就立馬開始解析而是根據(jù)css樣式的書寫順序?qū)⒅凑誨om樹的結(jié)構(gòu)分布render樣式，完成第2步，然后開始遍歷每個(gè)樹結(jié)點(diǎn)的css樣式進(jìn)行解析，此時(shí)的css樣式的遍歷順序完全是按照之前的書寫順序。在解析過(guò)程中，一旦瀏覽器發(fā)現(xiàn)某個(gè)元素的定位變化影響布局，則需要倒回去重新渲染。
瀏覽器的渲染流程為:
① 解析html構(gòu)建dom樹，解析css構(gòu)建css樹：將html解析成樹形的數(shù)據(jù)結(jié)構(gòu)，將css解析成樹形的數(shù)據(jù)結(jié)構(gòu)
② 構(gòu)建render樹：DOM樹和CSS樹合并之后形成的render樹。
③ 布局render樹：有了render樹，瀏覽器已經(jīng)知道那些網(wǎng)頁(yè)中有哪些節(jié)點(diǎn)，各個(gè)節(jié)點(diǎn)的css定義和以及它們的從屬關(guān)系，從而計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置。
④ 繪制render樹：按照計(jì)算出來(lái)的規(guī)則，把內(nèi)容渲染在屏幕上。
2、html/vue中屬性的書寫順序
首先，Vue 在處理模板時(shí)，會(huì)先將模板編譯成渲染函數(shù)，然后再執(zhí)行渲染函數(shù)生成虛擬 DOM。在編譯階段，Vue 會(huì)對(duì)模板進(jìn)行靜態(tài)分析和優(yōu)化，包括屬性排序、靜態(tài)節(jié)點(diǎn)優(yōu)化等。因此，即使你在模板中改變了屬性的順序，Vue 在編譯階段也會(huì)將其優(yōu)化成最優(yōu)的順序。
因此，屬性的書寫順序不會(huì)影響渲染性能。但是，屬性的書寫順序?qū)τ诖a的可讀性和維護(hù)性還是有一定影響的。通常情況下，建議按照一定的規(guī)范（ESLint）來(lái)書寫屬性，例如按照屬性的功能分組、按照字母表順序排列等。這樣可以提高代碼的可讀性和維護(hù)性，也有助于團(tuán)隊(duì)協(xié)作。
3、js的書寫順序
JS語(yǔ)言是單線程機(jī)制。所謂單線程就是按次序執(zhí)行，執(zhí)行完一個(gè)任務(wù)再執(zhí)行下一個(gè)。對(duì)于瀏覽器來(lái)說(shuō)無(wú)法在渲染頁(yè)面的同時(shí)執(zhí)行JS代碼。當(dāng)瀏覽器遇到<script>標(biāo)簽的時(shí)候，瀏覽器必須先話時(shí)間下載外鏈的文件然后并執(zhí)行，在這過(guò)程中，頁(yè)面渲染和用戶交互是完全被阻塞的。所以腳本會(huì)阻塞頁(yè)面的渲染，直到它們?nèi)肯螺d并執(zhí)行完成后，頁(yè)面渲染才會(huì)繼續(xù)。為提升性能一般解決方式如下：
① 把<script>標(biāo)簽放在<body>結(jié)尾處，這樣盡可能減少頁(yè)面阻塞。
② 盡量減少頁(yè)面包含的<script>標(biāo)簽數(shù)量，可以把多個(gè)js文件合并打包成一個(gè)js文件,這樣子做的好處就是可以最小化延遲時(shí)間將會(huì)明顯的改善頁(yè)面的總體性能。
在加載js、image等阻塞性內(nèi)容時(shí)，我們可以采用懶加載等手段來(lái)優(yōu)化，減少阻塞。在錯(cuò)誤處理上面我們也應(yīng)該注意處理，防止導(dǎo)致錯(cuò)誤終端我們的程序。
4 、js中錯(cuò)誤處理方式
4.1、 try-catch-finally 語(yǔ)句：try-catch-finally 語(yǔ)句可以用來(lái)捕獲和處理異常。try 塊中的代碼可能會(huì)拋出異常，如果出現(xiàn)異常，就會(huì)跳轉(zhuǎn)到 catch 塊中執(zhí)行。catch 塊中可以對(duì)異常進(jìn)行處理，例如輸出錯(cuò)誤信息、記錄日志等。finally 塊中的代碼會(huì)在 try-catch 塊中的代碼執(zhí)行完畢后執(zhí)行，無(wú)論是否出現(xiàn)異常。
try {// 可能拋出異常的代碼} catch (error) {// 錯(cuò)誤處理邏輯} finally {// 清理操作}
4.2 、throw 語(yǔ)句：通過(guò) throw 語(yǔ)句，我們可以手動(dòng)拋出自定義的異常。這可以用于在特定條件下，主動(dòng)引發(fā)錯(cuò)誤并中斷程序的執(zhí)行。
function divide(x, y) {if (y === 0) {throw new Error("除數(shù)不能為零");}return x / y;}
try {console.log(divide(10, 0));} catch (error) {console.log(error.message); // 輸出 "除數(shù)不能為零"}
4.3、 Promise 對(duì)象：Promise 對(duì)象可以用來(lái)處理異步操作中的錯(cuò)誤，可以使用 then 方法和 catch 方法來(lái)處理成功和失敗的情況。在 Promise 對(duì)象中，可以使用 reject 方法拋出異常，然后在 catch 方法中進(jìn)行處理。
function fetchData() {return fetch('https://api.example.com/data').then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json();}).catch(error => {console.error('An error occurred:', error.message);});}
4.4、window.onerror：window.onerror 是一個(gè)全局的錯(cuò)誤處理器，可以用來(lái)捕獲未被捕獲的異常。當(dāng) JavaScript 發(fā)生未被捕獲的異常時(shí)，會(huì)觸發(fā) window.onerror 事件，并將異常信息傳遞給該事件處理程序。
window.onerror = function(message, url, line, column, error) {console.error('An error occurred:', message, url, line, column, error);};
