摘要:為了解決這些問題,就可以使用定時器對函數進行節流。當第二次調用該函數時,它會清除前一次的定時器并設置另一個。如果前一個定時器已經執行過了,這個操作就沒有任何意義。然而,如果前一個定時器尚未執行,其實就是將其替換為一個新的定時器。
2017面試分享(js面試題記錄) 1. 最簡單的一道題
"11" * 2 "a8" * 32. 一道this的問題
var num = 10; var obj = { num:8, inner: { num: 6, print: function () { console.log(this.num); } } } num = 888; obj.inner.print(); // 6 var fn = obj.inner.print; fn(); //888 (obj.inner.print)(); //6 (obj.inner.print = obj.inner.print)(); //888 這個點沒有太理解,雖然答對了3. var和function的預解析問題,以及變量和function的先后順序的問題
// 以下代碼執行輸出結果是什么 function b () { console.log(a); var a = 10; function a() {}; a = 100; console.log(a); } b(); function c () { console.log(a); function a() {}; var a = 10; a = 100; console.log(a); } c(); (function d (num) { console.log(num); var num = 10; }(100)) (function e (num) { console.log(num); var num = 10; function num () {}; }(100)) (function f (num) { function num () {}; console.log(num); var num =10 console.log(num); }(100)) //仍然是預解析(在與解析過程中還要考慮一下當前變量的作用于) function m () { console.log(a1); // underfined console.log(a2); // underfined console.log(b1); // underfined console.log(b2); // underfined if(false) { function b1 (){}; var a1 = 10; } if(true) { function b2 (){}; var a2 = 10; } console.log(a1); // underfined console.log(a2); // 10 console.log(b1); // underfined console.log(b2); // function } m(); function n() { if(2>1) { arr = 10; brr = 10; let arr; var brr; console.log(arr); console.log(brr); } } n(); // ReferenceError
此階段瀏覽器只是對var、function、函數形參進行一個解析的準備過程。而且在這個“預解析”過程中,有一個預解析先后順序,即函數的形參 -> function -> var。而且重名時預留函數、后來者覆蓋前者。預解析結果形參如果有值則解析到值,沒有則為underfined,函數則解析到整個函數體,變量都為underfined;這道題目中沒有參數出現,所以先不討論。所以這道題在“預解析”時,函數聲明權重優先會被提升
4. 一個算法問題有一個已經排序的數組,比方[1,4,6,9,11,15,18],給你一個新的數,插入到數組中,寫一個function
5. 函數節流是什么,有什么優點(之前沒有了解過這個概念,懵逼了) 函數節流的目的從字面上就可以理解,函數節流就是用來節流函數從而一定程度上優化性能的。例如,DOM 操作比起非DOM 交互需要更多的內存和CPU 時間。連續嘗試進行過多的DOM 相關操作可能會導致瀏覽器掛起,有時候甚至會崩潰。尤其在IE 中使用onresize 事件處理程序的時候容易發生,當調整瀏覽器大小的時候,該事件會連續觸發。在onresize 事件處理程序內部如果嘗試進行DOM 操作,其高頻率的更改可能會讓瀏覽器崩潰。又例如,我們常見的一個搜索的功能,我們一般是綁定keyup事件,每按下一次鍵盤就搜索一次。但是我們的目的主要是每輸入一些內容搜索一次而已。為了解決這些問題,就可以使用定時器對函數進行節流。
函數節流的原理某些代碼不可以在沒有間斷的情況連續重復執行。第一次調用函數,創建一個定時器,在指定的時間間隔之后運行代碼。當第二次調用該函數時,它會清除前一次的定時器并設置另一個。如果前一個定時器已經執行過了,這個操作就沒有任何意義。然而,如果前一個定時器尚未執行,其實就是將其替換為一個新的定時器。目的是只有在執行函數的請求停止了一段時間之后才執行。
http://www.cnblogs.com/LuckyW...
事件捕獲 處于目標階段 事件冒泡
8. dom事件委托什么原理,有什么優缺點 事件委托原理:事件冒泡機制 優點1.可以大量節省內存占用,減少事件注冊。比如ul上代理所有li的click事件就很不錯。
2.可以實現當新增子對象時,無需再對其進行事件綁定,對于動態內容部分尤為合適
事件代理的常用應用應該僅限于上述需求,如果把所有事件都用事件代理,可能會出現事件誤判。即本不該被觸發的事件被綁定上了事件。
9. http的cache機制,以及200狀態下怎么實現 from cache(表示接觸最多的就是304的from cache)(用于優化,沒有接觸過,需要理解) 含義定義:瀏覽器緩存(Browser Caching)是為了加速瀏覽,瀏覽器在用戶磁盤上對最近請求過的文檔進行存儲,當訪問者再次請求這個頁面時,瀏覽器就可以從本地磁盤顯示文檔,這樣就可以加速頁面的閱覽。
作用cache的作用:
1、減少延遲,讓你的網站更快,提高用戶體驗。
2、避免網絡擁塞,減少請求量,減少輸出帶寬。
Cache-Control中的max-age是實現內容cache的主要手段,共有3種常用策略:max-age和Last-Modified(If-Modified-Since)的組合、僅max-age、max-age和ETag的組合。
對于強制緩存,服務器通知瀏覽器一個緩存時間,在緩存時間內,下次請求,直接用緩存,不在時間內,執行比較緩存策略。
對于比較緩存,將緩存信息中的Etag和Last-Modified通過請求發送給服務器,由服務器校驗,返回304狀態碼時,瀏覽器直接使用緩存。
// 有一個構造函數A,寫一個函數B,繼承A function A (num) { this.titileName = num; } A.prototype = { fn1: function () {}, fn2: function () {} }
這個問題的關注點是B繼承的A的靜態屬性,同時B的原型鏈中不存在A實例的titleName屬性
11. 什么是虛擬domReact為啥這么大?因為它實現了一個虛擬DOM(Virtual DOM)。虛擬DOM是干什么的?這就要從瀏覽器本身講起
如我們所知,在瀏覽器渲染網頁的過程中,加載到HTML文檔后,會將文檔解析并構建DOM樹,然后將其與解析CSS生成的CSSOM樹一起結合產生愛的結晶——RenderObject樹,然后將RenderObject樹渲染成頁面(當然中間可能會有一些優化,比如RenderLayer樹)。這些過程都存在與渲染引擎之中,渲染引擎在瀏覽器中是于JavaScript引擎(JavaScriptCore也好V8也好)分離開的,但為了方便JS操作DOM結構,渲染引擎會暴露一些接口供JavaScript調用。由于這兩塊相互分離,通信是需要付出代價的,因此JavaScript調用DOM提供的接口性能不咋地。各種性能優化的最佳實踐也都在盡可能的減少DOM操作次數。
而虛擬DOM干了什么?它直接用JavaScript實現了DOM樹(大致上)。組件的HTML結構并不會直接生成DOM,而是映射生成虛擬的JavaScript DOM結構,React又通過在這個虛擬DOM上實現了一個 diff 算法找出最小變更,再把這些變更寫入實際的DOM中。這個虛擬DOM以JS結構的形式存在,計算性能會比較好,而且由于減少了實際DOM操作次數,性能會有較大提升
12. js基礎數據類型和引用類型分別是什么?這個前提條件下寫一個getType,返回相應的類型1.基本數據類型(自身不可拆分的):Undefined、Null、Boolean、Number、String
2.引用數據類型(對象):Object (Array,Date,RegExp,Function)
function gettype(nm){ return Object.prototype.toString.call(nm); }13. dom選擇器優先級是什么,以及權重值計算(一道老問題了)
1.行內樣式 1000
2.id 0100
3.類選擇器、偽類選擇器、屬性選擇器[type="text"] 0010
4.標簽選擇器、偽元素選擇器(::first-line) 0001
5.通配符*、子選擇器、相鄰選擇器 0000
首先傳輸對象的雙向數據綁定 Object.defineProperty(target, key, decription),在decription中設置get和set屬性(此時應注意description中get和set不能與描述屬性共存)
數組的實現與對象不同。
同時運用觀察者模式實現wather,用戶數據和view視圖的更新
1 component層面,web component和virtual dom
2 數據綁定(vue雙向,react的單向)等好多
3 計算屬性 vue 有,提供方便;而 react 不行
4 vue 可以 watch 一個數據項;而 react 不行
5 vue 由于提供的 direct 特別是預置的 directive 因為場景場景開發更容易;react 沒有
6 生命周期函數名太長 directive
git stash //將本次修改存到暫存區(緊急切換分支時) git stash pop //將所有暫存區的內容取出來17. postcss的使用 18. 網頁布局有哪幾種,有什么區別
靜態、自適應、流式、響應式四種網頁布局
靜態布局:意思就是不管瀏覽器尺寸具體是多少,網頁布局就按照當時寫代碼的布局來布置;
自適應布局:就是說你看到的頁面,里面元素的位置會變化而大小不會變化;
流式布局:你看到的頁面,元素的大小會變化而位置不會變化——這就導致如果屏幕太大或者太小都會導致元素無法正常顯示。
自適應布局:每個屏幕分辨率下面會有一個布局樣式,同時位置會變而且大小也會變。
var a = {}; var b = {key: "b"}; var c = {key: "c"}; var d = [3,5,6]; a[b] = 123; a[c] = 345; a[d] = 333; console.log(a[b]); // 345 console.log(a[c]); // 345 console.log(a[d]); // 33319.
var R = (function() { var u = {a:1,b:2}; var r = { fn: function(k) { return u[k]; } } return r; }()); R.fn("a"); // 1
上述代碼中如何獲取匿名函數中的u
20. 不適用循環語句(包括map、forEach方法)實現一個100長度的數組,索引值和值相同的數組[0,1,2,3,4,5........99]var arr = new Array(100); //方法1 [...arr.keys()]; //方法二 Array.from(arr.keys()); //方法三 Array.from({length: 100}); // 方法四 借助string var arr1 = new Array(101); var str = arr1.join("1,"); str = str.replace(/(1,)/g, function ($0, $1, index) { var start = "" + Math.ceil(index/2); if(index < str.length - 2) { start += "," } return start; }); return str.split(","); // 方法五(函數式變成,參考網絡) function reduce(arr, val) { if(Object.prototype.toString.apply(val)){ return; } if(val >= 100) { return arr; } arr.push(val); return reduce(arr, val+1); } var res = reduce([], 0)21. 下面語句執行結果輸出
var a = function (val, index) { console.log(index); return { fn: function (name) { return a(name, val); } } } var b = a(0); // underfined b.fn(1); // 0 b.fn(2); // 0 b.fn(3); // 022. 科普
1) dom節點的根節點是不是body
回答: 不是,dom節點的根節點是html(包含head和body,head中分為meta、title等。body又分為一組)
2)dom元素都會有offsetParent嗎
回答: offsetParent屬性返回一個對象的引用,這個對象是距離調用offsetParent的元素最近的(在包含層次中最靠近的),并且是已進行過CSS定位的容器元素。 如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值為根元素(在標準兼容模式下為html元素;在怪異呈現模式下為body元素)的引用。 當容器元素的style.display 被設置為 "none"時(譯注:IE和Opera除外),offsetParent屬性 返回 null。
3) [1,3,5]轉譯成字符串是什么
回答: "1,3,5"
調用toString方法,生成該字符串
4)li標簽的祖級元素可以為li,父級元素也可以為例
回答: 錯誤
在同源策略下;在某個服務器下的頁面是無法獲取到該服務器以外的數據的;Jquery中ajax 的核心是通過 XmlHttpRequest獲取非本頁內容,而jsonp的核心則是動態添加