1. 程式人生 > >58前端內推筆試2017(含答案)

58前端內推筆試2017(含答案)

轉發 css3 jsonp 會有 head chrome瀏覽器 byname html中 gethostby

1.填空題 (1)獲取隨機數的方法:Math.random (2)JS中獎一個變量前置強制改成浮點類型的方法:parseFloat(String) (3)根據id獲取元素的原生js方法:getElementById(); (4)將文檔聲明為HTML5文檔類型,需要在文檔頭添加:<!DOCTYPE html> (5)Chrome瀏覽器的私有樣式前綴:-webkit- (6)CSS3設置圓角的屬性名:border-radius (7)CSS中,#是根據id來選擇元素的,.是根據類名來選擇元素的。 (8)form標簽特有的屬性請列舉三個:method、action、enctype、target (9)正則表達式中,$是什麽意思:結尾位置 (10)typeof ‘123‘返回:number 2.簡答題
(1)自定義一個瀏覽器兼容的事件綁定方法需要註意哪些問題?(答案不確定) 對以存在的事件綁定方法進行判斷。 能兼容各主流瀏覽器。 IE中沒有捕獲階段,只能處理冒泡階段。 IE裏事件觸發的順序和標準瀏覽器相反(現在一致了) (2)設計一個布局方案,使得頁面在pc端和pad端顯示為一行三列,在手機端為一列三行。 樣式: .parent-fix { margin-left:-20px; } .parent { display:table; width:100%; table-layout:fixed; } .column { display:table-cell; padding-left:20px; } @media screen and (max-width:320px){ .parent-fix { margin-left: 0; } .parent { display:block; width:100%; } .column { display:block; padding-left:0; } } 結構: <div class="parent-fix"> <div class="parent"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> </div> (3)請解釋JSONP的工作原理
JSONP是處理跨域資源訪問的。 JSONP的原理是利用html頁面中的script標簽可跨域的原理,利用<script>標簽向服務器端請求一段JS代碼, 然後,執行這段js代碼,實現跨域的過程。 (4)display和position都有哪些值?分別列舉一下這些值的用途? display:block/inline/inline-block /table/table-cell/none position: relative/absolute/fixed/static display:block;/*當前元素以塊級形式顯示,默認寬度為父元素,可設定寬高,換行顯示*/ display:inline;/*當前元素以行內形式顯示,默認寬度為內容寬度,不可設寬高,同行顯示*/ display:inline-block;/*顯示時,默認寬度為內容寬度,可設寬高,同行顯示*/ display:table;/*顯示規則和block相同,但是樣式為table的樣式*/ display:table-cell;/*以table 單元格的樣式顯示*/ display:none;/*元素小時,位置也不占*/ position:relative;/*當前元素被設為相對定位,元素在文檔流中,百分比的參照物是元素本身*/ position:absolute;/*當前元素被設為絕對定位,元素脫離文檔流,定位參照物:第一個定位祖先/根元素*/ position:fixed;/*當前元素被設為固定定位,默認寬度為內容寬度,脫離文檔流,參照物是視窗*/ (5)地址欄輸入一個地址後,輸入回車,描述一下這是開始,瀏覽器做什麽。
1.在瀏覽器中輸入要的網址:例如:facebook.com 2.瀏覽器查找域名的IP地址 導航的第一步是通過訪問的域名找出其IP地址。DNS查找過程如下: 瀏覽器緩存--瀏覽器會緩存DNS記錄一段時間。但操作系統沒有告訴瀏覽器存儲的時間,這樣各個瀏覽器會存儲各自的 一個固定的時間(2分鐘到30分鐘不等)。 系統緩存--如果在瀏覽器緩存裏沒有找到需要的記錄,瀏覽器會做一個系統調用(windows裏是gethostbyname)。這樣便能獲得系統緩存中 的記錄。 路由器緩存--接著,前面的查詢請求發向路由器,它一般有自己的DNS緩存。 ISP(互聯網服務提供商) DNS緩存--接下來要檢測的就是ISP的緩存DNS的服務器。在這一般都能找到相應的緩存記錄。 遞歸搜索--你的ISP的DNS服務器從根域名服務器開始進行遞歸搜索,從.com頂級域名服務器到facebook的域名服務器。一般DNS的緩存 中會有.com域名服務器中的域名,所以到頂級服務器的匹配過程不是那麽必要了。 但是,DNS有一點令人擔憂,像wikipedia.org或者facebook.com這樣的整個域名看上去就對應著一個單獨的IP地址,還好有幾種方法可以消除這個瓶頸: 循環DNS:是DNS查找時返回多個IP時的解決方案。舉例來說,facebook.com實際上就對應了4個IP地址。 負載平衡器:是以一個特定IP地址進行偵聽並將網絡請求轉發到集群服務器上的硬件設備。一些大型的站點一般都會使用這種昂貴的高性能復雜平衡器。 地理DNS根據用戶所處的地理位置,通過把域名映射到多個不同的IP地址提高可擴展性。這樣不同的服務器不能夠更新同步狀態,但映射靜態內容的話非常好。 Anycast 是一個IP地址映射到多個物理主機的路由技術。美中不足,Anycast與TCP協議適應的不是很好,所以很少應用在那些方案中。 大多數DNS服務器使用Anycast來請求高效低延遲的DNS查找。 3.瀏覽器給web服務器發送一個HTTP請求 因為像Facebook主頁這樣的動態頁面,打開後在瀏覽器緩存中很快甚至馬上就會過期,毫無疑問他們不能從緩存中讀取,所以,瀏覽器將把一個請求發送到Facebook所在的服務器: 4.facebook服務的永久重定向響應 5.瀏覽器跟蹤重定向地址 6.服務器“處理”請求 7.服務器發回一個HTML響應 8.瀏覽器開始顯示HTML 9.瀏覽器發送獲取嵌入在HTML中的對象 10.瀏覽器發送異步(Ajax)請求 5.應用題 (1)創建一個js類,模擬實現方法的重載。 function A(){ this.a=null; this.b=null; } var pro = A.prototype; //模擬重載 pro.add = function(){ if(arguments.length==1){ console.log(arguments[0]); } if(arguments.length==2){ result = arguments[0]+arguments[1]; console.log(result); } } var a = new A(); a.add(1); a.add(1,2); (2)JS中會有排序的需求,用jS實現一個標準的排序算法,對一個數字數組進行由小到大的排列。 var b = [2,3,8,3,1,5]; sort1(b); console.log(b); function sort1(a){ var i,j; for(i=0;i<a.length;i++){ var temp; var flag=0; for(j=0;j<a.length;j++){ if(a[j]>a[j+1]){ temp = a[j+1]; a[j+1]=a[j]; a[j]=temp; flag=1; } } if(flag==0)break; } return a; } 4.編程題 用HTML、css和js魔力實現下拉框,使得下拉框在各個瀏覽器的樣式和行為完全一致。說出你的設計方案,並且重點說明功能設計實現時要考慮的因素。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p,ul { margin: 0; } ul { padding: 0; } a { text-decoration: none; color: #000; } .btn { border: 1px solid #000; width: 100px; text-align: center; margin-bottom: 0.5px; cursor: pointer; padding: 2px 0; } .down { width: 100px; border: 1px solid #000; text-align: center; display: block; } .l_sm { border: 1px solid grey; list-style: none; padding: 2px 0; cursor: pointer; } .l_sm:hover { } </style> </head> <body> <p class="btn" id="btn">點擊</p> <ul class="down" id="show" > <li class="l_sm"><a href="#">第一項</a></li> <li class="l_sm"><a href="#">第二項</a></li> <li class="l_sm"><a href="#">第三項</a></li> <li class="l_sm"><a href="#">第四項</a></li> </ul> <script type="text/javascript"> var btn = document.getElementById("btn"); var show = document.getElementById("show"); btn.addEventListener("click",function(){ var style = window.getComputedStyle(show).display; if(style=="block"){ show.style.display = "none"; }else{ show.style.display = "block"; } }); </script> </body> </html>

58前端內推筆試2017(含答案)