web前端面試題

時間 2019-11-12

標籤 web 端面試題欄目 HTML 简体版

原文原文鏈接

HTML
• HTML5新增了哪些內容或API，使用過哪些
    Html5 的目的是將互聯網內容語義化，更好的爲人類和機器閱讀，同時更好的支持各類媒體的嵌入。
    新的API：
    •   HTML Geolocation //獲取用戶的地理位置
    •   HTML Drag and Drop
    •   HTML Local Storage
    •   HTML Application Cache
    •   HTML Web Workers
    •   HTML SSE // server-send events (單向的服務器向客戶端推送信息)
    •   HTML Canvas/WebGL
    •   HTML Audio/Video
    新的語義元素：
      section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。

• input和textarea的區別
   <input type="text" value="入門狗" size="10" Maxlength="15">
   <textarea row="3" col="4">入門狗的博客園</textarea>
   一個單行文本輸入，一個多行文本輸入。
• 用一個div模擬textarea的實現
   #textarea {
    width:300px;
    border:1px solid #ccc;
    min-height:150px;
    max-height:300px;
    overflow: auto;
    font-size: 14px;
    outline: none;
    }
   <div id="textarea" contenteditable="true"></div>

• 移動設備忽略將頁面中的數字識別爲電話號碼的方法
   <meta name=」format-detection」 content=」telephone=no」 />
-------------------------------------------------------------------
CSS

•   左右佈局：左邊定寬、右邊自適應，很多於3種方法
.left{float:left}.right{width:100%}
.wapper{display:flex}.right{flex:1}
.left{float：left}.right{float:left;width」calu(100vw-200px)}
.right{margin-left:-100%}

•   CSS3用過哪些新特性

CSS3 是CSS的升級版本，提供更加豐富且使用的規範：盒子模型，列表模塊，超連接方式，語言模塊，背景和邊框，文字特效，多欄佈局等等。

1.新的選擇器
    tbody:nth-child(even),tbody:nth-child(odd) //偶數行，奇數行。
    ：not(.textiput) //不是class爲textinput的節點
    div:first-child || last-child //div的第一個節點javascript

2.新的特性
    @font-face
      用來加載字體樣式，並且還能加載服務器的字體樣式，讓客戶端顯示沒有安裝的字體。
    Word-wrap：break-down
    設置文字到大容器邊緣是否換行。
    Text-overflow:clip | ellipsis (省略號)
    設置當前行到達容器邊緣時如何顯示。
    Text-decoration
    {
     Text-fill-color:文字內部填充顏色
     Text-stroke-color:文字邊界填充顏色
     Text-stroke-width:文字邊界寬度
    }css

3.CSS3多欄佈局
    column-count:表示佈局幾列
    column-rule:表示列與列之間的間隔條樣式
    column-gap:表示列與列之間的間隔html

4.邊框和顏色
    關於顏色css3已經提供了透明度的支持
    color:rgba(255,0,0,0.75);
    background:rgba(0,0,255,0.75);
    其中a表明透明度。
    還支持hsla(112,72%,33%,0.68)顏色申明方式及其透明度。
    對於border,提供了圓角支持
    border-radius:15px;前端

5.css3的漸變效果
-webkit-gradient();linear,radialvue

6.css3的陰影(shadow)和反射(reflect)效果
    text-shadow:
    box-shadow:
    -webkit-box-reflect:below 10px;java

7.背景(background)
背景的覆蓋面
多圖片背景：background:url() 10px center no-repeat,url() 10px center repeat-x;react

8.css3的盒子模型
    display:-webkit-box;
    display:-moz-box;
    -webkit-box-orient:horizontal;
    -moz-box-orient:horizontal;// 實現div的水平排列
    -webkit-box-flex:2 //設置div如何填充剩下的位置
    -moz-box-flex:2webpack

9.css3的transition，transforms和animation
    transition
      transitopn-property:用於指定過分的性質
      transition-duration：用於指定這個過分持續的時間
      transition-delay:用於指定延遲過分時間
      transition-timing-function:用於指定過分類型
    transforms
      其實就是指拉伸、壓縮、旋轉、偏移等等一些圖形學裏的基本變換。
    animation
      讓CSS脫離靜止的前提。

• BFC、IFC

FC 定義的是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位以及和其餘元素的關係和相互做用。
IFC(行內格式上下文)
    inline box 水平排列，水平方向上的margin,border和padding在框之間獲得保留。
    display：inline | inline-table | inline-block會造成IFC

BFC(塊級格式上下文)
    1.消除浮動
    2.消除文字環繞，實現兩欄佈局
    3.消除margin合併
知足如下條件造成BFC
    float不爲none，float：left | right
    絕對定位元素，position:absolute | fixed;
    非塊級元素具備display:inline-block,table-caption,flex,inline-flex
    塊級元素具備overflow,且值！= visible

•   對柵格的理解
bootsrap經過CSS3的媒體查詢語句來實現響應式的柵格佈局。
1.佈局容器
    .container會利用媒體查詢改變頁面的寬度。
    .container-fluid沒有媒體查詢，始終是100%的width,沒有左右margin.
    兩類容器都有15px的內邊距。
2.柵格系統
    一行最多分爲12列，利用float實現流動佈局。
    使用%寬度，讓內容寬度平滑漸變。
    使用媒體查詢
•   （水平）居中有哪些實現方式
    行內元素，text-align:center;
    塊級元素，margin：0 auto;

•   1像素邊框問題
   設備物理像素能夠理解爲分辨率；設備獨立像素爲程序能夠處理的像素(1:px)
   如iphone6 的設備獨立像素爲(375*667)即顯示屏的width*height,可是iphone6
   的分辨率爲 750*1334，即兩個物理像素顯示一個獨立像素。
   因爲retina視網膜屏的設備物理像素/設備獨立像素 = 2 或者更大，就會出現
   邊框爲2的狀況。
   只有ios8+才支持0.5px，其他移動系統會顯示爲0px.
    var dpr, rem, scale;
    var docEl = document.documentElement;
    var fontEl = document.createElement('style');
    var metaEl = document.querySelector('meta[name="viewport"]');
    dpr = window.devicePixelRatio || 1;
    rem = docEl.clientWidth * dpr / 10;
    scale = 1 / dpr;

    // 設置viewport，進行縮放，達到高清效果
    metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

    // 設置data-dpr屬性，留做的css hack之用
    docEl.setAttribute('data-dpr', dpr);

    // 動態寫入樣式
    docEl.firstElementChild.appendChild(fontEl);
    fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

    // 給js調用的，某一dpr下rem和px之間的轉換函數
    window.rem2px = function(v) {
        v = parseFloat(v);
        return v * rem;
    };
    window.px2rem = function(v) {
        v = parseFloat(v);
        return v / rem;
    };

    window.dpr = dpr;
    window.rem = rem;
-------------------------------------------------------------
ios

Javascript

1.圖片懶加載
圖片的延遲加載的原理就是先不設置img的src屬性，等合適的時機(好比滾動、
滑動)再把圖片真實的url放到img的src屬性上。
過多的圖片會嚴重影響網頁的加載速度，移動網絡下的消耗巨大，並且新圖片的
載入會致使頁面重繪，延遲加載幾乎是標配。
<1>移動還會涉及到圖片元素的寬高比自適應的問題
css3

<stylt> .lazyload{width:100%;height:0;padding-top:75%;background-size:100%}  </style>

     當margin/padding取形式爲百分比的值時，不管是left/right,仍是top/bottom
     都是以父元素的width爲參照物。
<2><img>標籤並不會在網頁中插入圖像，而是從網頁中連接圖像。
     <img>建立的是被引用圖像的佔位空間。

lazysizes

<script src="lazysizes.min.js" async=""></script>
  // 非響應式 例子
  <img data-src="image.jpg" class="lazyload" />
  // 響應式 例子，自動計算合適的圖片data-srcset相應加載最適應的圖片
  <img
      data-sizes="auto"
      data-src="image2.jpg"
      data-srcset="image1.jpg 300w,
      image2.jpg 600w,
      image3.jpg 900w" class="lazyload" />

2.實現頁面加載進度條
目前沒有任何瀏覽器能夠直接獲取正在加載對象的大小，因此沒法經過數據的小大
來實現0-100%的顯示加載過程。
解決方案是在頁面中設置節點，當加載到設置的節點時顯示相應的加載進度。

 <body>
      <div class = 'loading'></div>
      <div id="header">
      頁頭部分
      </div>
      <script type="text/javascript">
          $('.loading').animate({'width':'33%'},50);  //第一個進度節點
      </script>
      <div id="mainpage">
      左側內容
      </div>
      <script type="text/javascript">
          $('.loading').animate({'width':'55%'},50);  //第二個進度節點
      </script>
      <div id="sider">
      右邊側欄
      </div>
      <script type="text/javascript">
          $('.loading').animate({'width':'80%'},50);  //第三個進度節點
      </script>
      <div id="footer">
      頁腳部分
      </div>
      <script type="text/javascript">
          $('.loading').animate({'width':'100%'},50);  //第四個進度節點
      </script>
  </body>
   .loading{
    background:#FF6100; //設置進度條的顏色
    height:5px; //設置進度條的高度
    position:fixed; //設定進度條跟隨屏幕滾動
    top:0; //將進度條固定在頁面頂部
    z-index:99999  //提升進度條的優先層級，避免被其餘層遮擋
    }

3.事件委託
事件捕獲，與事件冒泡。在父元素響應事件。

4.實現extend函數

var isObj = function (o) {
            return Object.prototype.toString.call(o) === "[object Object]";
        }
        _$.fn.extend = function (obj) {
            if (isObj(obj)) {
                for (var i in obj) {
                    this[i] = obj[i];
                }
            }
        };

5.爲何會有跨域的問題以及解決方式
同源策略：容許瀏覽器某個網頁上的js 請求來自另一個網頁的數據，當且僅
當兩個網頁來自相同的域。它是出於安全性考慮，爲避免XSS跨站點
腳本攻擊和CSRF跨站點請求僞造。
當一個網頁的ajax請求一個不在自身域的數據時，即爲跨域請求。
域：由協議內型，域名，端口號組成，任何一個不一樣都會造成跨域。
解決方案：
1.jsonp

  <script src =''>請求方式能夠繞過同源策略，請求的同時將解析函數傳過去
    <script type="application/javascript"
      src="http://server.demo.com/Users/1234?callback=parseResponse"></script>
    parseResponse({"Name": "Foo", "Id": 1234, "Rank": 7});

2.跨域資源共享(CORS)
    1.簡單請求
      瀏覽器發現ajax是簡單的跨域請求，就會自動在頭信息之中添加一個Origin
      字段，用來講明本次請求來自哪一個域，服務器根據這個值，決定是否贊成此次
      請求。若是他服務器贊成，則會響應頭部添加Access-Control-Allow-Origin
      字段，表示贊成跨域請求。
    2.複雜請求
      比簡單請求多一個預檢查請求。

6.jsonp原理、postMessage原理
postMessage 用做跨域通訊。postMessage實現跨域的話原理就相似於jsonp，動態插入iframe標籤，再從iframe裏面拿回數據。
iframe是HTML內聯的框架元素，表示嵌套的瀏覽上下文，有效地將另外一個HTML頁面
嵌入到當前頁面中。

7.實現拖拽功能，好比把5個兄弟節點中的最後一個節點拖拽到節點1和節點2之間

8.動畫：setTimeout什麼時候執行，requestAnimationFrame的優勢
實際上瀏覽器負責進行排序，指派某段程序在某個時間點運行的優先級。單線程
強制資源不共享，因此到了某個時間點，還得等當前的程序執行完，因此設置的時間並不精確。
1)requestAnimationFrame 會把每一幀中的全部DOM操做集中起來，在一次重繪或迴流中就完成,而且重繪或迴流的時間間隔牢牢跟隨瀏覽器的刷新頻率,通常來講,這個頻率爲每秒60幀。2)在隱藏或不可見的元素中requestAnimationFrame不會進行重繪或迴流，這固然就意味着更少的的cpu，gpu和內存使用量。

9.手寫parseInt的實現：要求簡單一些，把字符串型的數字轉化爲真正的數字便可,但不能使用JS原生的字符串轉數字的API，好比Number()

10.編寫分頁器組件的時候，爲了減小服務端查詢次數，點擊「下一頁」怎樣能確保還有數據能夠加載（請求數據不會爲空）？

11.ES6新增了哪些特性，使用過哪些，也有當場看代碼說輸出結果的
（1）指定參數的默認值
（2）模板表達式，在字符串中嵌入變量
（3）多行字符串
（4）拆包表達式
（5）對象表達式
（6）箭頭函數
（7）promise對象
（8）塊級做用域的let和const
（9） ES6中的類class
（10）ES6中的模塊化 export，import
ES6新特性使javascript 更加簡潔優雅。

12.JS模塊化的實踐
   js按<script>標籤分塊，而且按塊加載執行，所以一個在一個js塊中引用下一個js塊的內容會
   出現錯誤，可是不一樣的快都屬於一個全局做用域，也就是塊與塊之間的變量和函數是能夠共享的。
      單頁應用，指的是在一個頁面上集成多種功能，甚至整個系統就只有一個頁面，全部的業務功能都是它的子模塊，經過特定的方式掛接到主界面上。它是AJAX技術的進一步昇華，把AJAX的無刷新機制發揮到極致，所以能造就與桌面程序媲美的流暢用戶體驗。
      從單頁應用的特色來看，它比頁面型網站更加依賴於JavaScript，而因爲頁面的單頁化，各類子功能的JavaScript代碼彙集到了同一個做用域，因此代碼的隔離、模塊化變得很重要。
1.基本對象實現命名空間的劃分
    缺點沒有私有屬性，均可以隨意修改該模塊。

 var util = {
    _prefix:'我想說：',
    log:function(msg){ console.log(_prefix +msg)}
    /*
    其餘工具函數
    */
    };

2.閉包當即執行函數，實現私有變量和模塊化
缺點：加載次序問題，依賴關係問題。

1  var util = (function(window){
2      var _prefix = '我想說：';
3      return {
4         log:function(msg){ console.log(_prefix +msg)}
5     } })(window);

3.模塊加載器，AMD(Asynchronous Module Definition)require.js，CMD(Common
Module Definition)sea.js
CMD（用時會自動加載）

 define(function(require, exports, module){
        var _prefix = '我想說：';
        module.exports = {
            log:function(msg){ console.log(_prefix +msg)}
        }
        })
        ///main.js
        define(function(require, exports, module){
            var util = require('util')
            util.log('我是模塊主代碼，我加載好了')
        })

 ///index.html
        <html>
        <head>
        <script src="seajs.js"></script>
        </head>
        <body>
        <script type='text/javascript'>
            seajs.use(["main"])
        </script>
        </body>
        </html>

AMD

<script src="js/require.js" defer async="true" ></script>
        <script src="js/require.js" data-main="js/main"></script>
        main.js
        require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

    　　　　// some code here

    　　});
        math.js 定義模塊
        define(function (){
    　　　　var add = function (x,y){
    　　　　　　return x+y;
    　　　　};
    　　　　return {
    　　　　　　add: add
    　　　　};});
            main.js引入模塊
            require(['math'], function (math){
        　　　　alert(math.add(1,1));
        　　});

      異同：sea.js是使用時加載，require.js是異步按依賴次序加載。

13.require.js的實現原理（若是使用過webpack，進一步會問，二者打包的異同及優缺點）
   目的：
      （1）實現js文件的異步加載，避免網頁失去響應；
      （2）管理模塊之間的依賴性，便於代碼的編寫和維護。
    webpack
    對應不一樣文件類型的資源，webpack有對應的模塊 loader ，好比對於 less，使用的是 less-loader，你能夠在這裏找到全部loader. webpack 具備requireJS 和 browserify 的功能，但仍有本身的新特性：一、對 CommonJS、AMD、ES6的語法作了兼容；二、對js、css、圖片等資源文件都支持打包；三、串聯式模塊加載器以及插件機制讓其具備更好的靈活性和拓展性，例如對 coffeeScript、ES6的支持；四、有獨立的配置文件 webpack.config.js; 五、能夠將代碼切割成不一樣 chunk，實現按需加載，下降了初始化時間；六、支持 SourceUrls 和 SourceMaps，易於調試；七、具備強大的 Plugin 接口，大可能是內部插件，使用起來比較靈活；八、webpack 使用異步 IO 並具備多級緩存，使得 webpack 在增量編譯上更快！

14.promise的實現原理，進一步會問async、await是否使用過
   promise對象對異步調用流程進行管理。
   1.異步任務返回一個promise對象
   2.使用then方法添加回調函數

function search(term) {
      var url = 'http://example.com/search?q=' + term;
      var xhr = new XMLHttpRequest();
      var result;

      var p = new Promise(function (resolve, reject) {
      xhr.open('GET', url, true);
      xhr.onload = function (e) {
        if (this.status === 200) {
          result = JSON.parse(this.responseText);
          resolve(result);
        }
      };
      xhr.onerror = function (e) {
        reject(e);
      };
      xhr.send();
      });
      return p;
      }
  search("Hello World").then(console.log, console.error);