前端面試題四

一、什麼是FOUC (無樣式內容閃爍)？你如何來避免FOUC？

          若是使用import方法對CSS進行導入,會致使某些頁面在Windows 下的Internet Explorer出現一些奇怪的現象:以無樣式顯示頁面內容的瞬間閃爍,這種現象稱之爲文檔樣式短暫失效(Flash of Unstyled Content),簡稱爲FOUC。

           緣由大體爲：

                   1，使用import方法導入樣式表。

                    2，將樣式表放在頁面底部

                    3，有幾個樣式表，放在html結構的不一樣位置。

               其實原理很清楚：當樣式表晚於結構性html加載，當加載到此樣式表時，頁面將中止以前的渲染。此樣式表被下載和解析後，將從新渲染頁面，也就出現了短暫的花屏現象。

           解決方法：

            使用LINK標籤將樣式表放在文檔HEAD中。

 

二、請解釋什麼是ARIA和屏幕閱讀器(screenreaders)，以及如何使網站實現無障礙訪問(accessible)。

         ARIA 爲Web app提供知足用戶不一樣需求的解決方案。建設起用戶和軟件之間的橋樑。

         新的HTML5標準中增長 aria-* 的標籤屬性，全稱Accessible Rich Internet Application。與role標籤屬性配合使用。

         role屬性表示一個非標準的tag的實際做用。好比用div作button，那麼設置div 的 role=「button」，輔助工具就能夠認出這其實是個button。而aria-*的做用就是描述這個tag在可視化的情境中的具體信息。

          最簡單的應用好比，

           < div role=」checkbox」 aria-checked=」checked」>

           輔助工具就會知道，這個div其實是個checkbox的角色，爲選中狀態。

 

三、請解釋CSS動畫和JavaScript動畫的優缺點。

           1. css3動畫只兼容Ie10+，js動畫幾乎兼容全部瀏覽器；

            2.js動畫更靈活，css3動畫更簡單

            3.js動畫複用性高

            4.時間尺度上，css動畫粒度比較粗，js動畫能夠更精細；

            5.幀速很差的瀏覽器CSS動畫能夠作到優雅降級，js代碼還須要寫額外的代碼

            6.在某些條件下，css動畫性能優於JS動畫；（webkit內核的瀏覽器，js執行昂貴的任務，不引發layout和repaint狀況下）

            7.css3有自然的時間支持如（animationENd和transitionEnd）

 

四、什麼是跨域資源共享(CORS)？它用於解決什麼問題？

           當使用ajax跨域請求時，瀏覽器報錯：XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin.確定是跨域的問題，若是用jsonp或者proxy的方式進行修改的話未免須要太大的工程量，因此採用CORS這種比較簡單高效的技術。相比JOSP的方式，CORS更爲高效。JSONP因爲它的原理只能實現GET請求，而CORS支持全部類型的HTTP請求。使用CORS,可使用普通的ajax實現跨域

做者：王不懂Sir 連接：https://www.jianshu.com/p/d93c8dab3895 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。