轉自：黃胖子
https://zhuanlan.zhihu.com/p/366257876
隨著前端項目不斷擴大犀勒，瀏覽器渲染的壓力變得越來越重。配置好一點的計算機可以順利地展現(xiàn)頁面；配置低一些的計算機渲染頁面的性能就不那么可觀了刑棵。
性能優(yōu)化部分的面試題主要考察應試者對網(wǎng)站性能優(yōu)化的了解敢茁。如何做好性能優(yōu)化漠其，哪些操作會引起性能優(yōu)化的問題屑迂，性能優(yōu)化指標是什么等诡渴，都值得應試者關注捐晶。
因為性能優(yōu)化變得越來越重要，所以很多企業(yè)專門建立團隊去做性能優(yōu)化妄辩。
1惑灵、談談你對重構的理解。
網(wǎng)站重構是指在不改變外部行為的前提下眼耀，簡化結構英支、添加可讀性，且在網(wǎng)站前端保持一致的行為哮伟。也就是說，在不改變UI的情況下，對網(wǎng)站進行優(yōu)化获列，在擴展的同時保持一致的UI。對于傳統(tǒng)的網(wǎng)站來說拼缝，重構通常包括以下方面。
把表格（ table）布局改為DV+CSS。
使網(wǎng)站前端兼容現(xiàn)代瀏覽器。
對移動平臺進行優(yōu)化婶恼。
針對搜索引擎進行優(yōu)化。
深層次的網(wǎng)站重構應該考慮以下方面：
減少代碼間的耦合
讓代碼保持彈性柏副。
嚴格按規(guī)范編寫代碼。
設計可擴展的API蚣录。
代替舊的框架割择、語言（如VB）
增強用戶體驗。
對速度進行優(yōu)化萎河。
壓縮 JavaScript荔泳、CSS、 image等前端資源（通常由服務器來解決）虐杯。
優(yōu)化程序的性能（如數(shù)據(jù)讀寫）玛歌。
采用CDN來加速資源加載。
優(yōu)化 JavaScript DOM擎椰。
緩存HTTP服務器的文件支子。
2、如果一個頁面上有大量的圖片（大型電商網(wǎng)站）达舒，網(wǎng)頁加載很慢值朋，可以用哪些方法優(yōu)化這些圖片的加載，從而提升用戶體驗巩搏？
對于圖片懶加載昨登，可以為頁面添加一個滾動條事件，判斷圖片是否在可視區(qū)域內(nèi)或者即將進入可視區(qū)域贯底，優(yōu)先加載丰辣。如果為幻燈片、相冊文件等禽捆，可以使用圖片預加載技術笙什，對于當前展示圖片的前一張圖片和后一張圖片優(yōu)先下載。如果圖片為CSS圖片睦擂，可以使用 CSS Sprite得湘、SVG sprite、 Icon font顿仇、Base64等技術淘正。如果圖片過大摆马，可以使用特殊編碼的圖片，加載時會先加載一張壓縮得特別小的縮略圖鸿吆，以提高用戶體驗囤采。如果圖片展示區(qū)域小于圖片的真實大小，則應在服務器端根據(jù)業(yè)務需要先行進行圖片壓縮惩淳，圖片壓縮后蕉毯，圖片大小與展示的就一致了。
3思犁、談談性能優(yōu)化問題代虾。
可以在以下層面優(yōu)化性能。
緩存利用：緩存Ajax激蹲，使用CDN棉磨、外部 JavaScript和CSS文件緩存，添加 Expires頭学辱，在服務器端配置Etag乘瓤，減少DNS查找等。
請求數(shù)量：合并樣式和腳本策泣，使用CSS圖片精靈衙傀，初始首屏之外的圖片資源按需加載，靜態(tài)資源延遲加載萨咕。
請求帶寬：壓縮文件统抬，開啟GZIP 。
CSS代碼：避免使用CSS表達式任洞、高級選擇器蓄喇、通配選擇器。
JavaScript代碼：用散列表來優(yōu)化查找交掏，少用全局變量妆偏，用 innerHTML代替DOM操作，減少DOM操作次數(shù)盅弛，優(yōu)化 JavaScript性能钱骂，用 setTimeout避免頁面失去響應，緩存DOM節(jié)點查找的結果挪鹏，避免使用with（with會創(chuàng)建自己的作用域见秽，增加作用域鏈的長度），多個變量聲明合并讨盒。
HTML代碼：避免圖片和 iFrame等src屬性為空解取。src屬性為空，會重新加載當前頁面返顺，影響速度和效率禀苦，盡量避免在HTML標簽中寫 Style屬性
4蔓肯、移動端性能如何優(yōu)化？
優(yōu)化方式如下振乏。
盡量使用CSS3動畫蔗包，開啟硬件加速。
適當使用 touch事件代替 click事件慧邮。
避免使用CSS3漸變陰影效果调限。
可以用 transform:translateZ（0）來開啟硬件加速。
不濫用 Float, Float在渲染時計算量比較大误澳，盡量少使用耻矮。
不濫用Web字體，Web字體需要下載忆谓、解析淘钟、重繪當前頁面，盡量少使用陪毡。
合理使用requestAnimation Frame動畫代替 setTimeout。
合理使用CSS中的屬性（CSS3 transitions勾扭、CSS3 3D transforms毡琉、 Opacity、 Canvas妙色、 WebGL桅滋、Video）觸發(fā)GPU渲染。過度使用會使手機耗電量増加身辨。
5丐谋、如何對網(wǎng)站的文件進行優(yōu)化？
可以進行文件合并煌珊、文件壓縮使文件最小化号俐；可以使用CDN托管文件，讓用戶更快速地訪問定庵；可以使用多個域名來緩存靜態(tài)文件吏饿。
6、請說出幾種縮短頁面加載時間的方法蔬浙。
具體方法如下猪落。
（1）優(yōu)化圖片
（2）選擇圖像存儲格式（比如，GIF提供的顏色較少畴博，可用在一些對顏色要求不高的地方）
（3）優(yōu)化CSS（壓縮笨忌、合并CSS）
（4）在網(wǎng)址后加斜杠
（5）為圖片標明高度和寬度（如果瀏覽器沒有找到這兩個參數(shù)，它需要一邊下載圖片一邊計算大小俱病。如果圖片很多官疲，瀏覽器需要不斷地調(diào)整頁面袱结。這不但影響速度，而且影響瀏覽體驗袁余。當瀏覽器知道高度和寬度參數(shù)后擎勘，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位颖榜，然后繼續(xù)加載后面的內(nèi)容棚饵，從而優(yōu)化加載時間，提升瀏覽體驗）掩完。
7噪漾、哪些方法可以提升網(wǎng)站前端性能？
精靈圖合并且蓬，減少HTTP請求欣硼；壓縮HTML、CSS恶阴、JavaScript文件诈胜；使用CDN托管靜態(tài)文件；使用 localstorage緩存和 mainfest應用緩存冯事。
8焦匈、你知道哪些優(yōu)化性能的方法？
具體方法如下昵仅。
（1）減少HTTP請求次數(shù)缓熟，控制CSS Sprite、JavaScript與CSS源碼摔笤、圖片的大小够滑，使用網(wǎng)頁Gzip、CDN托管吕世、data緩存彰触、圖片服務器
（2）通過前端模板 JavaScript和數(shù)據(jù)，減少由于HTML標簽導致的帶寬浪費寞冯，在前端用變量保存Ajax請求結果渴析，每次操作本地變量時，不用請求吮龄，減少請求次數(shù)俭茧。
（3）用 innerhTML代替DOM操作，減少DOM操作次數(shù)漓帚，優(yōu)化 JavaScript性能母债。
（4）當需要設置的樣式很多時，設置 className而不是直接操作 Style。
（5）少用全局變量毡们，緩存DOM節(jié)點查找的結果迅皇，減少I/O讀取操作
（6）避免使用CSS表達式，它又稱動態(tài)屬性衙熔，
（7）預加載圖片登颓，將樣式表放在頂部，將腳本放在底部红氯，加上時間戳框咙。
（8）避免在頁面的主體布局中使用表，表要在其中的內(nèi)容完全下載之后才會顯示出來痢甘，顯示的速度比DIV+CSS布局慢喇嘱。
9、列舉你知道的Web性能優(yōu)化方法塞栅。
具體優(yōu)化方法如下者铜。
（1）壓縮源碼和圖片（ JavaScript采用混淆壓縮，CSS進行普通壓縮放椰，JPG圖片根據(jù)具體質(zhì)量壓縮為50%~70%作烟，把PNG圖片從24色壓縮成8色以去掉一些PNG格式信息等）。
（2）選擇合適的圖片格式（顏色數(shù)多用JPG格式砾医，而很少使用PNG格式俗壹，如果能通過服務器端判斷瀏覽器支持WebP就用WebP或SVG格式）。
（3）合并靜態(tài)資源（減少HTTP請求）
（4）把多個CSS合并為一個CSS藻烤，把圖片組合成雪碧圖。
（5）開啟服務器端的Gzip壓縮（對文本資源非常有效）头滔。
（6）使用CDN（對公開庫共享緩存）怖亭。
（7）延長靜態(tài)資源緩存時間。
（8）把CSS放在頁面頭部把 JavaScript代碼放在頁面底部（這樣避免阻塞頁面渲染而使頁面出現(xiàn)長時間的空白）
10坤检、平時你是如何對代碼進行性能優(yōu)化的兴猩？
利用性能分析工具監(jiān)測性能，包括靜態(tài) Analyze工具和運行時的 Profile工具（在Xcode工具欄中依次單擊 Product→ Profile項可以啟動）早歇。比如測試程序的運行時間倾芝，當單擊 Time Profiler項時，應用程序開始運行箭跳，這就能獲取到運行整個應用程序所消耗時間的分布和百分比晨另。為了保證數(shù)據(jù)分析在同一使用場景下的真實性，一定要使用真機谱姓，因為此時模擬器在Mac上運行借尿，而Mac上的CPU往往比iOS設備要快。
11、針對CSS路翻，如何優(yōu)化性能狈癞？
具體優(yōu)化方法如下。
（1）正確使用 display屬性茂契， display屬性會影響頁面的渲染蝶桶，因此要注意以下幾方面。display:inline后不應該再使用 width掉冶、 height真竖、 margin、 padding和float 郭蕉。display:inline- block后不應該再使用 float疼邀。display:block后不應該再使用 vertical-align。display:table-*后不應該再使用 margin或者float召锈。
（2）不濫用 float旁振。
（3）不聲明過多的font-size。
（4）當值為0時不需要單位涨岁。
（5）標準化各種瀏覽器前綴拐袜，并注意以下幾方面。
瀏覽器無前綴應放在最后梢薪。
CSS動畫只用（ -webkit-無前綴）兩種即可蹬铺。
其他前綴包括 -webkit-、-moz-秉撇、-ms-甜攀、無前綴（ Opera瀏覽器改用 blink內(nèi)核，所以-0-被淘汰）
（6）避免讓選擇符看起來像是正則表達式琐馆。高級選擇器不容易讀懂规阀，執(zhí)行時間也長。
（7）盡量使用id瘦麸、 class選擇器設置樣式（避免使用 style屬性設置行內(nèi)樣式）
（8）盡量使用CSS3動畫谁撼。
（9）減少重繪和回流。
12滋饲、針對HTML厉碟，如何優(yōu)化性能？
具體方法如下屠缭。
（1）對于資源加載箍鼓，按需加載和異步加載
（2）首次加載的資源不超過1024KB，即越小越好呵曹。
（3）壓縮HTML袄秩、CSS、 JavaScript文件。
（4）減少DOM節(jié)點之剧。
（5）避免空src（空src在部分瀏覽器中會導致無效請求）郭卫。
（6）避免30、40背稼、50*請求錯誤
（7）添加 Favicon.ico贰军，如果沒有設置圖標ico，則默認的圖標會導致發(fā)送一個404或者500請求蟹肘。
13词疼、針對 JavaScript，如何優(yōu)化性能帘腹？
具體方法如下贰盗。
（1）緩存DOM的選擇和計算。
（2）盡量使用事件委托模式阳欲，避免批量綁定事件舵盈。
（3）使用 touchstart、 touchend代替 click球化。
（4）合理使用 requestAnimationFrame動畫代替 setTimeOut秽晚。
（5）適當使用 canvas動畫。
（6）盡量避免在高頻事件（如 TouchMove筒愚、 Scroll事件）中修改視圖赴蝇，這會導致多次渲染。
14巢掺、如何優(yōu)化服務器端句伶？
具體方法如下。
（1）啟用Gzip壓縮陆淀。
（2）延長資源緩存時間熄阻，合理設置資源的過期時間，對于一些長期不更新的靜態(tài)資源過期時間設置得長一些倔约。
（3）減少 cookie頭信息的大小，頭信息越大坝初，資源傳輸速度越慢浸剩。
（4）圖片或者CSS、 JavaScript文件均可使用CDN來加速鳄袍。
15绢要、如何優(yōu)化服務器端的接口？
具體方法如下拗小。
（1）接口合并：如果一個頁面需要請求兩部分以上的數(shù)據(jù)接口重罪，則建議合并成一個以減少HTTP請求數(shù)。
（2）減少數(shù)據(jù)量：去掉接口返回的數(shù)據(jù)中不需要的數(shù)據(jù)。
（3）緩存數(shù)據(jù)：首次加載請求后剿配，緩存數(shù)據(jù)搅幅；對于非首次請求，優(yōu)先使用上次請求的數(shù)據(jù)呼胚，這樣可以提升非首次請求的響應速度茄唐。
16、如何優(yōu)化腳本的執(zhí)行蝇更？
腳本處理不當會阻塞頁面加載沪编、渲染，因此在使用時需注意年扩。
（1）把CSS寫在頁面頭部蚁廓，把 JavaScript程序?qū)懺陧撁嫖膊炕虍惒讲僮髦小?/p>
（2）避免圖片和 iFrame等的空src，空src會重新加載當前頁面厨幻，影響速度和效率相嵌。
（3）盡量避免重設圖片大小。重設圖片大小是指在頁面克胳、CSS平绩、 JavaScript文件等中多次重置圖片大小，多次重設圖片大小會引發(fā)圖片的多次重繪漠另，影響性能
（4）圖片盡量避免使用 DataURL捏雌。DataURL圖片沒有使用圖片的壓縮算法，文件會變大笆搓，并且要在解碼后再渲染性湿，加載慢，耗時長满败。
17肤频、如何優(yōu)化渲染？
具體方法如下算墨。通過HTML設置 Viewport元標簽宵荒， Viewport可以加速頁面的渲染，如以下代碼所示净嘀。
<meta name="viewport" content="width=device=width,initial-scale=1">
（2）減少DOM節(jié)點數(shù)量报咳，DOM節(jié)點太多會影響頁面的渲染，應盡量減少DOM節(jié)點數(shù)量挖藏。
（3）盡量使用CSS3動畫暑刃，合理使用 requestAnimationFrame動畫代替 setTimeout，適當使用 canvas動畫（5個元素以內(nèi)使用CSS動畫膜眠，5個元素以上使用 canvas動畫（iOS 8中可使用 webGL））岩臣。
（4）對于高頻事件優(yōu)化 Touchmove, Scroll事件可導致多次渲染溜嗜。使用 requestAnimationFrame監(jiān)聽幀變化，以便在正確的時間進行渲染架谎，增加響應變化的時間間隔炸宵，減少重繪次數(shù)。使用節(jié)流模式（基于操作節(jié)流狐树，或者基于時間節(jié)流）焙压，減少觸發(fā)次數(shù)。
（5）提升GPU的速度抑钟，用CSS中的屬性（CSS3 transitions涯曲、CSS3 3D transforms、 Opacity在塔、 Canvas幻件、 WebGL、Video）來觸發(fā)GPU渲染.
18蛔溃、如何設置DNS緩存绰沥？
在瀏覽器地址欄中輸入URL以后，瀏覽器首先要查詢域名（ hostname）對應服務器的IP地址贺待，一般需要耗費20~120ms的時間徽曲。DNS查詢完成之前，瀏覽器無法識別服務器IP麸塞，因此不下載任何數(shù)據(jù)秃臣。基于性能考慮哪工，ISP運營商奥此、局域網(wǎng)路由、操作系統(tǒng)雁比、客戶端（瀏覽器）均會有相應的DNS緩存機制稚虎。
（1）正IE緩存30min，可以通過注冊表中 DnsCacheTimeout項設置偎捎。
（2） Firefox混存1 min蠢终，通過 network.dnsCacheExpiration配置。
（3）在 Chrome中通過依次單擊“設置”→“選項”→“高級選項”茴她，并勾選“用預提取DNS提高網(wǎng)頁載入速度”選項來配置緩存時間寻拂。
19、什么時候會出現(xiàn)資源訪問失敯芫？
開發(fā)過程中梦染，發(fā)現(xiàn)很多開發(fā)者沒有設置圖標赡麦，而服務器端根目錄也沒有存放默認的 Favicon.ico朴皆，從而導致請求404出現(xiàn)。通常在App的 webview里打開 Favicon.ico泛粹，不會加載這個 Favicon.ico遂铡，但是很多頁面能夠分享。如果用戶在瀏覽器中打開 Favicon. ico晶姊，就會調(diào)取失敗扒接，一般盡量保證該圖標默認存在，文件盡可能小们衙，并設置一個較長的緩存過期時間钾怔。另外，應及時清理緩存過期導致岀現(xiàn)請求失敗的資源蒙挑。
20宗侦、jQuery性能優(yōu)化如何做？
優(yōu)化方法如下忆蚀。
（1）使用最新版本的 jQuery類庫矾利。JQuery類庫每一個新的版本都會對上一個版本進行Bug修復和一些優(yōu)化，同時也會包含一些創(chuàng)新馋袜，所以建議使用最新版本的 jQuery類庫提高性能男旗。不過需要注意的是，在更換版本之后欣鳖，不要忘記測試代碼察皇，畢竟有時候不是完全向后兼容的。
（2）使用合適的選擇器观堂。jQuery提供非常豐富的選擇器让网，選擇器是開發(fā)人員最常使用的功能，但是使用不同選擇器也會帶來性能問題师痕。建議使用簡凖選擇器溃睹，如i選擇器、類選擇器胰坟，不要將i選擇器嵌套等因篇。
（3）以數(shù)組方式使用 jQuery對象。使用 jQuery選擇器獲取的結果是一個 jQuery對象笔横。然而竞滓， jQuery類庫會讓你感覺正在使用一個定義了索引和長度的數(shù)組。在性能方面吹缔，建議使用簡單的for或者 while循環(huán)來處理商佑，而不是$. each()，這樣能使代碼更快厢塘。
（4）每一個 JavaScript事件（例如 click茶没、 mouseover等）都會冒泡到父級節(jié)點肌幽。當需要給多個元素綁定相同的回調(diào)函數(shù)時，建議使用事件委托模式抓半。
（5）使用join( )來拼接字符串喂急。使用 join( )拼接長字符串，而不要使用“+”拼接字符串笛求，這有助于性能優(yōu)化廊移，特別是處理長字符串的時候。
（6）合理利用HTML5中的data屬性探入。HTML5中的data屬性有助于插入數(shù)據(jù)狡孔，特別是前、后端的數(shù)據(jù)交換新症；jQuery的 data( )方法能夠有效地利用HTML5的屬性來自動獲取數(shù)據(jù)步氏。
21、哪些方法能提升移動端CSS3動畫體驗徒爹？
（1）盡可能多地利用硬件能力荚醒，如使用3D變形來開啟GPU加速，例如以下代碼隆嗅。
-webkit-transform: translate 3d(0, 0, 0);-moz-transform : translate3d(0,0, 0);-ms-transform : translate 3d(0,0,0);transform: translate3d(0,0,0)界阁；
一個元素通過 translate3d右移500X的動畫流暢度會明顯優(yōu)于使用left屬性實現(xiàn)的動畫移動，原因是CSS動畫屬性會觸發(fā)整個頁面重排胖喳、重繪泡躯、重組。paint通常是最耗性能的丽焊，盡可能避免使用觸發(fā) paint的CSS動畫屬性较剃。如果動畫執(zhí)行過程中有閃爍（通常發(fā)生在動畫開始的時候），可以通過如下方式處理技健。
-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden写穴；-ms-backface-visibility:hidden ;backface-visibility:hidden；-webkit-perspective：1000雌贱；-moz-perspective：1000啊送；-ms-perspective：1000；perspective：1000;
（2）盡可能少使用box- shadows和 gradients欣孤，它們往往嚴重影響頁面的性能馋没，尤其是在一個元素中同時都使用時。（3）盡可能讓動畫元素脫離文檔流降传，以減少重排篷朵，如以下代碼所示。
position:fixed婆排；position:absolute;
本文完?
如有侵權請聯(lián)系小編刪除声旺，喜歡的點贊加關注控硼，會不定期更新優(yōu)質(zhì)文章。
