日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

使用css實現一個持續(xù)的動畫效果

目前成都創(chuàng)新互聯(lián)已為千余家的企業(yè)提供了網站建設、域名、虛擬空間、成都網站托管、企業(yè)網站設計、阜寧網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

12345

animation:mymove 5s infinite;@keyframes mymove {from {top:0px;}to {top:200px;}}

主要考：animation 用法

使用js實現一個持續(xù)的動畫效果

最開始的思路是用定時器實現，***沒有想的太完整，面試官給出的答案是用requestAnimationFrame。

• 定時器思路

1234567

var e = document.getElementById('e')var flag = true;var left = 0;setInterval(() => { left == 0 ? flag = true : left == 100 ? flag = false : '' flag ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px`}, 1000 / 60)

• requestAnimationFrame

由于之前沒有用過這個 API 所以是現學的。

123456789101112131415161718192021222324

//兼容性處理window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); };})();var e = document.getElementById("e");var flag = true;var left = 0;function render() { left == 0 ? flag = true : left == 100 ? flag = false : ''; flag ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px`;}(function animloop() { render(); requestAnimFrame(animloop);})();

不足之處請指正（畢竟是現學的）順便查了一下優(yōu)勢：

• 瀏覽器可以優(yōu)化并行的動畫動作，更合理的重新排列動作序列，并把能夠合并的動作放在一個渲染周期內完成，從而呈現出更流暢的動畫效果
• 解決毫秒的不精確性
• 避免過度渲染（渲染頻率太高、tab 不可見暫停等等）

注：requestAnimFrame 和 定時器一樣也頭一個類似的清除方法 cancelAnimationFrame。

右邊寬度固定，左邊自適應

***種：

12345678910111213141516171819

第二種

123456789101112131415161718

暫時想到了兩種。

水平垂直居中

***種

123456789101112

#container{ position:relative;}#center{ width:100px; height:100px; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);}

第二種

123456789101112

#container{ position:relative;}#center{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px;}

第三種

123456789101112

#container{ position:relative;}#center{ position:absolute; margin:auto; top:0; bottom:0; left:0; right:0;}

第四種 flex

12345

#container{ display:flex; justify-content:center; align-items: center;}

四種定位的區(qū)別

• static 是默認值
• relative 相對定位 相對于自身原有位置進行偏移，仍處于標準文檔流中
• absolute 絕對定位 相對于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素為參考標準。如果無已定位祖先元素, 以body元素為偏移參照基準, 完全脫離了標準文檔流。
• fixed 固定定位的元素會相對于視窗來定位,這意味著即便頁面滾動，它還是會停留在相同的位置。一個固定定位元素不會保留它原本在頁面應有的空隙。

Flex布局用的多嗎？

因為項目考慮兼容 IE9 所以直接說用的不多

移動端適配怎么做的？

使用媒體查詢做的響應式布局，根據不同屏幕寬度加載不同css.

let與var的區(qū)別？

let 為 ES6 新添加申明變量的命令，它類似于 var，但是有以下不同：

• var 聲明的變量，其作用域為該語句所在的函數內，且存在變量提升現象
• let 聲明的變量，其作用域為該語句所在的代碼塊內，不存在變量提升
• let 不允許重復聲明.

為什么 var 可以重復聲明？（這個就不知道了）

當我們執(zhí)行代碼時，我們可以簡單的理解為新變量分配一塊兒內存，命名為a，并賦值為2，但在運行的時候編譯器與引擎還會進行兩項額外的操作：判斷變量是否已經聲明：

• 首先編譯器對代碼進行分析拆解，從左至右遇見var a，則編譯器會詢問作用域是否已經存在叫 a 的變量了，如果不存在，則招呼作用域聲明一個新的變量a，若已經存在，則忽略var 繼續(xù)向下編譯，這時a = 2被編譯成可執(zhí)行的代碼供引擎使用。

• 引擎遇見a=2時同樣會詢問在當前的作用域下是否有變量a，若存在，則將a賦值為2（由于***步編譯器忽略了重復聲明的var，且作用域中已經有a，所以重復聲明會發(fā)生值得覆蓋而并不會報錯）。若不存在，則順著作用域鏈向上查找，若最終找到了變量a則將其賦值2，若沒有找到，則招呼作用域聲明一個變量a并賦值為2。

參考鏈接

封裝一個函數，參數是定時器的時間，.then執(zhí)行回調函數。

123

function sleep (time) { return new Promise((resolve) => setTimeout(resolve, time));}

一個關于 this 指向的問題

差不多應該是這樣，記不太清了

123456789101112

obj = { name: 'a', getName : function () { console.log(this.name); }}var fn = obj.getNameobj.getName()var fn2 = obj.getName()fn()fn2()

CommonJS 中的 require/exports 和 ES6 中的 import/export 區(qū)別？

• CommonJS 模塊的重要特性是加載時執(zhí)行，即腳本代碼在 require 的時候，就會全部執(zhí)行。一旦出現某個模塊被”循環(huán)加載”，就只輸出已經執(zhí)行的部分，還未執(zhí)行的部分不會輸出。

• ES6 模塊是動態(tài)引用，如果使用 import 從一個模塊加載變量，那些變量不會被緩存，而是成為一個指向被加載模塊的引用，需要開發(fā)者自己保證，真正取值的時候能夠取到值。

• import/export 最終都是編譯為 require/exports 來執(zhí)行的。

• CommonJS 規(guī)范規(guī)定，每個模塊內部，module 變量代表當前模塊。這個變量是一個對象，它的 exports 屬性（即 module.exports ）是對外的接口。加載某個模塊，其實是加載該模塊的 module.exports 屬性。

• export 命令規(guī)定的是對外的接口，必須與模塊內部的變量建立一一對應關系。

一行代碼實現數組去重？

1

[...new Set([1,2,3,1,'a',1,'a'])]

使用addEventListener點擊li彈出內容，并且動態(tài)添加li之后有效

123456

 
1
 
2
 
3
 
4

這個題沒答出來

123456

var ulNode = document.getElementById("ul"); ulNode.addEventListener('click', function (e) { if (e.target && e.target.nodeName.toUpperCase() == "LI") { alert(e.target.innerHTML); } }, false);

怎么判斷兩個對象相等？

1234567891011121314

obj={ a:1, b:2}obj2={ a:1, b:2}obj3={ a:1, b:'2'}

最開始的思路是遍歷來判斷，但是***好像沒有說清楚，查了下，好像可以轉換為字符串來判斷。

12

JSON.stringify(obj)==JSON.stringify(obj2);//trueJSON.stringify(obj)==JSON.stringify(obj3);//false

項目做過哪些性能優(yōu)化？

• 減少 HTTP 請求數
• 減少 DNS 查詢
• 使用 CDN
• 避免重定向
• 圖片懶加載
• 減少 DOM 元素數量
• 減少 DOM 操作
• 使用外部 JavaScript 和 CSS
• 壓縮 JavaScript 、 CSS 、字體、圖片等
• 優(yōu)化 CSS Sprite
• 使用 iconfont
• 字體裁剪
• 多域名分發(fā)劃分內容到不同域名
• 盡量減少 iframe 使用
• 避免圖片 src 為空
• 把樣式表放在 中
• 把腳本放在頁面底部
• 歡迎補充。。。

模塊化開發(fā)是怎么做的？

使用命名空間。

有沒有使用過webpack？

我說Vue項目中使用了，然后就沒問了。

gulp自己寫過任務嗎？還是都用的模塊？

不知道怎么怎么回答，不都是使用模塊來寫的么，然后就說是使用模塊。

Vue router 除了 router-link 怎么實現跳轉?

12

router.go(1)router.push('/')

Vue router 跳轉和 location.href 有什么區(qū)別？

router 是 hash 改變

location.href 是頁面跳轉，刷新頁面

Vue 雙向綁定實現原理？

通過 Object.defineProperty 實現的

你能實現一下雙向綁定嗎？

123456789101112131415161718192021

React 和 Vue 有什么區(qū)別？

Set 和 Map 數據結構（）

• ES6 提供了新的數據結構 Set 它類似于數組，但是成員的值都是唯一的，沒有重復的值。
• ES6 提供了 Map 數據結構。它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當作鍵。也就是說，Object 結構提供了“字符串—值”的對應，Map結構提供了“值—值”的對應，是一種更完善的 Hash 結構實現。

WeakMap 和 Map 的區(qū)別?

• WeakMap 結構與 Map 結構基本類似，唯一的區(qū)別是它只接受對象作為鍵名（ null 除外），不接受其他類型的值作為鍵名，而且鍵名所指向的對象，不計入垃圾回收機制。

• WeakMap ***的好處是可以避免內存泄漏。一個僅被 WeakMap 作為 key 而引用的對象，會被垃圾回收器回收掉。

• WeakMap 擁有和 Map 類似的 set(key, value) 、get(key)、has(key)、delete(key) ~~ 和 clear() ~~方法, 沒有任何與迭代有關的屬性和方法。

clear 已經廢棄了.

重排和重繪

• 部分渲染樹（或者整個渲染樹）需要重新分析并且節(jié)點尺寸需要重新計算。這被稱為重排。注意這里至少會有一次重排-初始化頁面布局。

• 由于節(jié)點的幾何屬性發(fā)生改變或者由于樣式發(fā)生改變，例如改變元素背景色時，屏幕上的部分內容需要更新。這樣的更新被稱為重繪。

什么情況會觸發(fā)重排和重繪？

• 添加、刪除、更新 DOM 節(jié)點

• 通過 display: none 隱藏一個 DOM 節(jié)點-觸發(fā)重排和重繪

• 通過 visibility: hidden 隱藏一個 DOM 節(jié)點-只觸發(fā)重繪，因為沒有幾何變化

• 移動或者給頁面中的 DOM 節(jié)點添加動畫

• 添加一個樣式表，調整樣式屬性

• 用戶行為，例如調整窗口大小，改變字號，或者滾動。

瀏覽器緩存

瀏覽器緩存分為強緩存和協(xié)商緩存。當客戶端請求某個資源時，獲取緩存的流程如下：

• 先根據這個資源的一些 http header 判斷它是否***強緩存，如果***，則直接從本地獲取緩存資源，不會發(fā)請求到服務器；

• 當強緩存沒有***時，客戶端會發(fā)送請求到服務器，服務器通過另一些request header驗證這個資源是否***協(xié)商緩存，稱為http再驗證，如果***，服務器將請求返回，但不返回資源，而是告訴客戶端直接從緩存中獲取，客戶端收到返回后就會從緩存中獲取資源；

• 強緩存和協(xié)商緩存共同之處在于，如果***緩存，服務器都不會返回資源；

• 區(qū)別是，強緩存不對發(fā)送請求到服務器，但協(xié)商緩存會。

• 當協(xié)商緩存也沒***時，服務器就會將資源發(fā)送回客戶端。

• 當 ctrl+f5 強制刷新網頁時，直接從服務器加載，跳過強緩存和協(xié)商緩存；

• 當 f5 刷新網頁時，跳過強緩存，但是會檢查協(xié)商緩存；

強緩存

• Expires（該字段是 http1.0 時的規(guī)范，值為一個絕對時間的 GMT 格式的時間字符串，代表緩存資源的過期時間）

• Cache-Control:max-age（該字段是 http1.1 的規(guī)范，強緩存利用其 max-age 值來判斷緩存資源的***生命周期，它的值單位為秒）

協(xié)商緩存

• Last-Modified（值為資源***更新時間，隨服務器response返回）

• If-Modified-Since（通過比較兩個時間來判斷資源在兩次請求期間是否有過修改，如果沒有修改，則***協(xié)商緩存）

• ETag（表示資源內容的唯一標識，隨服務器response返回）

• If-None-Match（服務器通過比較請求頭部的If-None-Match與當前資源的ETag是否一致來判斷資源是否在兩次請求之間有過修改，如果沒有修改，則***協(xié)商緩存）