首頁 > web前端 > js教程 > 最新前端筆試題小結

最新前端筆試題小結

php中世界最好的语言
發布: 2017-11-18 16:59:08
原創
2076 人瀏覽過

看到很多朋友都在求前端的筆試題,我就給大家收集了一些面試題。都是2017年最新的題目,希望有助於大家提升自己的水品,也祝福各位能如願以償的進入自己想進的公司。

本文較為詳細的收集並且分析了最新的2017前端筆試題。分享給大家供大家參考。具體如下:

一、一個頁面上兩個div左右鋪滿整個瀏覽器,要確保左邊的div一直為100px,右邊的div跟隨瀏覽器大小變化(例如瀏覽器為500,右邊div為400,瀏覽器為900,右邊div為800),請寫出大概的css程式碼。

1.使用flex

//html
<div class=&#39;box&#39;><div class=&#39;left&#39;></div> <div class=&#39;right&#39;></div></div>
//css
.box {
    width: 400px;
    height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #c3c3c3;
}
.left {
    flex-basis:100px;
    -webkit-flex-basis: 100px;
    /* Safari 6.1+ */
    background-color: red;
    height: 100%;
}
.right {
    background-color: blue;
    flex-grow: 1;
}
登入後複製

2.浮動佈局

<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
#left {
    float: left;
    width: 220px;
    background-color: green;
}
#content {
    background-color: orange;
    margin-left: 220px;
    /*==等于左边栏宽度==*/
}
</style>
登入後複製


二、請寫出一些前端效能最佳化的方式,越多越好


1.減少dom操作

2.部署前,圖片壓縮,程式碼壓縮

3.最佳化js程式碼結構,減少冗餘程式碼

4.減少http請求,合理設定HTTP快取

5.使用內容分發cdn加速

6.靜態資源快取

7.圖片延遲載入


三、一個頁面從輸入URL 到頁面載入顯示完成,這個過程中都發生了什麼事? (流程說的越詳細越好)


輸入位址

#1.瀏覽器尋找網域的IP 位址

2.這一步包括DNS 具體的查找過程,包括:瀏覽器快取->系統快取->路由器快取…

3.瀏覽器向web 伺服器發送HTTP 請求

4.伺服器的永久重定向回應(從http://example.com 到http://www.example.com)

#5.瀏覽器追蹤重定向位址

##6.伺服器處理請求

7.伺服器回傳一個HTTP 回應

8.瀏覽器顯示HTML

9.瀏覽器發送請求取得嵌入在HTML 中的資源(如圖片、音訊、影片、CSS、JS等等)

10.瀏覽器發送非同步請求


#四、請大概描述下頁面存取cookie的限制條件


跨域問題

設定了HttpOnly


#五、描述瀏覽器重繪和回流,哪些方法能夠改善由於dom操作產生的回流


1.直接改變className,如果動態改變樣式,則使用cssText

// 不好的写法
var left = 1;
var top = 1;
el.style.left = left + "px";
el.style.top = top + "px"; // 比较好的写法
el.className += " className1";
// 比较好的写法
el.style.cssText += ";
left: " + left + "px;
top: " + top + "px;";
登入後複製


2.讓要操作的元素進行”離線處理”,處理完後一起更新


#a) 使用DocumentFragment進行快取操作,引發一次回流和重繪;

b) 使用display:none技術,只引發兩次回流和重繪;

c) 使用cloneNode(true or false) 和replaceChild 技術,引發一次回流和重繪


六、vue生命週期鉤子


#1.beforcreate

2.created

3.beformount

4.mounted

5.beforeUpdate

6.updated

7.actived

# 8.deatived

9.beforeDestroy

10.destroyed


七、js跨域請求的方式,能寫幾種是幾種


1、透過jsonp跨域

#2、透過修改document.domain來跨子域

3、使用window .name來進行跨域

4、使用HTML5中新引進的window.postMessage方法來跨域傳送資料(ie 67 不支援)

5、CORS 需要伺服器設定header :Access -Control-Allow-Origin。

6、nginx反向代理這個方法一般很少有人提及,但是他可以不用目標伺服器配合,不過需要你搭建一個中轉nginx伺服器,用來轉送請求


八、對前端工程化的理解


開發規格

模組化開發

元件化開發

元件倉庫

效能最佳化

專案部署

開發流程

開發工具


九, js深度複製的方式


1.使用jq的$.extend(true, target, obj)

##2. newobj = Object.create(sourceObj),// 但這個是有個問題就是newobj的變更不會影響sourceobj但是sourceobj的變更會影響到newObj

3.newobj = JSON.parse(JSON. stringify(sourceObj))


十、js設計模式


##整體來說設計模式分為三大類:

創建型模式,共五種:工廠方法模式、

抽象工廠模式

、單例模式、建造者模式、原型模式。 結構型模式,共七種:

適配器模式

、裝飾器模式、代理模式、外觀模式、橋接模式、組合模式、享元模式。 行為型模式,共十一種:策略模式、範本方法模式、

觀察者模式

、迭代子模式、責任鏈模式、指令模式、備忘錄模式、狀態模式、訪客模式、中介者模


十一、圖片預覽

<input type="file" name="file" onchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">
function showPreview(source) {
  var file = source.files[0];
  if(window.FileReader) {
      var fr = new FileReader();
      fr.onloadend = function(e) {
        document.getElementById("portrait").src = e.target.result;
      };
      fr.readAsDataURL(file);
  }
}
登入後複製


十二、扁平化多維數組


#1、舊方法

var result = []
function unfold(arr){
     for(var i=0;i< arr.length;i++){
      if(typeof arr[i]=="object" && arr[i].length>1) {
       unfold(arr[i]);
     } else {        
       result.push(arr[i]);
     }
  }
}
var arr = [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
unfold(arr)
登入後複製

2、使用tostring

var c=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
var b = c.toString().split(&#39;,&#39;)
登入後複製

3、使用es6的reduce函数

var arr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
var result = flatten(arr)
登入後複製

十三、iframe有那些缺点?

iframe会阻塞主页面的Onload事件;

搜索引擎的检索程序无法解读这种页面,不利于SEO;

iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以绕开以上两个问题。


以上就是我收集的前端笔试题以及答案,所述对大家有所帮助。

推荐阅读:

作为前端开发工程师一定要关注三点的性能指标

前端JS面试题

php学习之为什么说PHP适合做前端JAVA适合做后端?

以上是最新前端筆試題小結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板