姓名：韓卓成?學(xué)號(hào) ：20011210097
轉(zhuǎn)載自：：https://blog.csdn.net/m0_50373374/article/details/115415366?utm_medium=distribute.pc_feed_category.none-task-blog-hot-1.nonecase&dist_request_id=&depth_1-utm_source=distribute.pc_feed_category.none-task-blog-hot-1.nonecase&spm=1000.2115.3001.4128
【嵌牛導(dǎo)讀】：影響用戶訪問(wèn)的最大部分是前端的頁(yè)面导披。
網(wǎng)站的劃分一般為二：前端和后臺(tái)。我們可以理解成后臺(tái)是用來(lái)實(shí)現(xiàn)網(wǎng)站的功能的，比如：實(shí)現(xiàn)用戶注冊(cè)弓叛，用戶能夠?yàn)槲恼掳l(fā)表評(píng)論等等蔗包。而前端呢？其實(shí)應(yīng)該是屬于功能的表現(xiàn)。
而我們建設(shè)網(wǎng)站的目的是什么呢旅薄？不就是為了讓目標(biāo)人群來(lái)訪問(wèn)嗎旷赖？所以我們可以理解成前端才是真正和用戶接觸的顺又。
除了后臺(tái)需要在性能上做優(yōu)化外，其實(shí)前端的頁(yè)面更需要在性能優(yōu)化上下功夫等孵，只有這樣才能給我們的用戶帶來(lái)更好的用戶體驗(yàn)稚照。不僅僅如此，如果前端優(yōu)化得好俯萌，他不僅可以為企業(yè)節(jié)約成本果录，他還能給用戶帶來(lái)更多的用戶，因?yàn)樵鰪?qiáng)的用戶體驗(yàn)咐熙。說(shuō)了這么多弱恒，那么我們應(yīng)該如何對(duì)我們前端的頁(yè)面進(jìn)行性能優(yōu)化呢？
【嵌牛鼻子】：在前端實(shí)現(xiàn)性能優(yōu)化的最新方法
【嵌牛提問(wèn)】：如何在前端實(shí)現(xiàn)性能優(yōu)化糖声？
【嵌牛正文】：
HTML優(yōu)化方法
1.精簡(jiǎn)html代碼
可以減少html的嵌套也就是層級(jí)關(guān)系盡量減小斤彼，也可以減小DOM節(jié)點(diǎn)數(shù)也就是盡量壓縮優(yōu)化DOM的節(jié)點(diǎn)數(shù), 讓瀏覽器渲染的DOM節(jié)點(diǎn)數(shù)最少分瘦。
減少一些無(wú)語(yǔ)義的代碼，比如說(shuō)空標(biāo)簽清浮動(dòng)那種代碼
能不用最好不要用琉苇。
建議連接中刪除http或者h(yuǎn)ttps嘲玫，因?yàn)橐话沔溄拥膮f(xié)議頭和頁(yè)面的協(xié)議頭都是一致的，寫(xiě)他們多了4-5個(gè)字符其實(shí)是沒(méi)有什么意義的并扇。而且可以減少代碼體積去团。
也可以刪除多余的空格，換行符穷蛹，縮進(jìn)和不必要的注釋土陪，一般會(huì)用壓縮工具來(lái)處理這個(gè)過(guò)程‰妊可以省略一些標(biāo)簽和屬性鬼雀。使用相對(duì)路徑的url，最大范圍的減少字節(jié)數(shù)蛙吏。
2.文件位置
css文件鏈接盡量放在頁(yè)面頭部源哩，css加載不會(huì)阻塞DOM Tree解析，但是會(huì)阻塞DOM Tree渲染鸦做，也會(huì)阻塞后面js執(zhí)行励烦。也就是說(shuō)DOM Tree在渲染前就要解析好CSS，從而減少瀏覽器重排文檔的次數(shù)泼诱。而且css放在頁(yè)面底部會(huì)導(dǎo)致頁(yè)面白屏?xí)r間變長(zhǎng)坛掠。
js文件一般放在頁(yè)面底部，這是防止js的加載和解析阻塞頁(yè)面元素的正常渲染治筒。
3.用戶體驗(yàn)
設(shè)置favicon.ico, 如果不設(shè)置控制臺(tái)會(huì)報(bào)錯(cuò)屉栓，而且用戶訪問(wèn)的時(shí)候地址欄也是空的，不利于品牌記憶矢炼。
增加首屏必要的css和js系瓢，一般頁(yè)面需要在等待所有的依賴加載完成才會(huì)展示，這樣就會(huì)導(dǎo)致頁(yè)面存在空白句灌。影響用戶體驗(yàn)夷陋，可以增加背景圖或者loading或者骨架屏，比空白頁(yè)好很多胰锌。
CSS優(yōu)化方法
1.提升css渲染性能
謹(jǐn)慎使用一些expensive的屬性骗绕，比如nth-child偽類或者position:fixed定位，因?yàn)檫@些比較消耗瀏覽器的渲染性能资昧。
盡量減少一些樣式層級(jí)的級(jí)數(shù)酬土，比如，div ul li span i { color: red}, 其實(shí)我們可以給i標(biāo)簽設(shè)置class格带，直接書(shū)寫(xiě)樣式撤缴。
避免使用占用過(guò)多cpu和內(nèi)存的屬性刹枉，比如text-indent不要設(shè)置太大的值。
盡量避免使用耗電量大的屬性屈呕，比較占用GPU, 比如transfrom是微宝，transitions, opacity.
精簡(jiǎn)css代碼，使用縮寫(xiě)的語(yǔ)句虎眨，比如margin-top可以寫(xiě)在margin中蟋软，再者如果值為0能刪除就刪除，刪除不必要的單位值嗽桩，刪除過(guò)多的分號(hào)岳守，刪除空格和注釋。盡量減小樣式表的體積碌冶。其實(shí)這些都可以使用壓縮工具來(lái)處理湿痢，會(huì)方便很多。
2.css動(dòng)畫(huà)優(yōu)化
避免同時(shí)動(dòng)畫(huà)扑庞，也就是說(shuō)用戶訪問(wèn)的屏幕區(qū)間里面不要有過(guò)多的動(dòng)畫(huà)蒙袍，動(dòng)畫(huà)太多會(huì)干擾用戶正常瀏覽網(wǎng)站，而且動(dòng)畫(huà)多也影響瀏覽器的性能嫩挤。
延遲動(dòng)畫(huà)的初始化，可以讓其它c(diǎn)ss先渲染消恍，讓動(dòng)畫(huà)延遲岂昭，比如說(shuō)0.5或1。
Javascript優(yōu)化
1.提升js文件的加載性能
css文件放在head標(biāo)簽中狠怨，js文件放在body結(jié)尾的地方约啊。這個(gè)是js的加載不要影響html的渲染。
2.變量和函數(shù)方面的優(yōu)化
盡量使用id選擇器佣赖，因?yàn)閕d選擇器在查詢效果上效率最快恰矩。
js函數(shù)盡可能保持簡(jiǎn)潔，不要把太多內(nèi)容寫(xiě)在一個(gè)函數(shù)中憎蛤。也建議使用事件的節(jié)流函數(shù)外傅。
3.js動(dòng)畫(huà)
盡量避免添加大量的js動(dòng)畫(huà)，css3動(dòng)畫(huà)和canvas動(dòng)畫(huà)都比js動(dòng)畫(huà)性能好俩檬。
4.使用邏輯緩存
緩存dom對(duì)象萎胰，也就是用一個(gè)變量來(lái)存儲(chǔ)dom對(duì)象，不要每次使用都查詢棚辽。
緩存列表長(zhǎng)度技竟，也就是說(shuō)用變量存儲(chǔ)dom元素的個(gè)數(shù)，而不是每次都重新計(jì)算屈藐。
比如百度M站榔组，會(huì)把頁(yè)面的css和js放在本地存儲(chǔ)里面熙尉，這樣后面再加載的時(shí)候就直接從本地存儲(chǔ)里面取，實(shí)現(xiàn)秒考的效果搓扯。不過(guò)本地存儲(chǔ)空間有限检痰，要謹(jǐn)慎使用。
