網易前端面試題總結,你見過幾個?

劃重點? ? ? ?
?很幸運地能收到網易的面試通知,就毫不猶豫去面試了~三點的面試,因為從來沒去過那個中關村西北旺區,吃完飯早早就去了,想象中那里應該是繁華的地方,到了發現都在建設中,很多還在建設中,看到了網易旁邊的百度和搜狐,都是長長的大樓或者是高高的建筑,滿滿大企業的既視感~一進網易樓就沒網= =,在里面也沒事干,就呆在外面看看前端的東西準備下,到2點40的時候跟前臺說了下,一個網易年輕姐姐就帶我上去了~

步入正題—筆試

本來我以為只有面試的,發現那個姐姐并不是帶我去面試的,帶我去了個房間,留了兩張題目給我,說半小時來說,毫無防備,接下來步入正題吧~

1.alert(1&&2),alert(1||0)
具體我不記得了反正就這兩個,我以為考的是純粹的與運算和或運算,后來發現太天真了
alert(1&&2)的結果是2
只要“&&”前面是false,無論“&&”后面是true還是false,結果都將返“&&”前面的值;
只要“&&”前面是true,無論“&&”后面是true還是false,結果都將返“&&”后面的值;
alert(0||1)的結果是
只要“||”前面為false,不管“||”后面是true還是false,都返回“||”后面的值
只要“||”前面為true,不管“||”后面是true還是false,都返回“||”前面的值。

2.mouseenter和mouseover的區別
這個之前看了下,大概是答出來了,但可能不夠詳細吧
不論鼠標指針穿過被選元素或其子元素,都會觸發 mouseover 事件。對應mouseout
只有在鼠標指針穿過被選元素時,才會觸發 mouseenter 事件。對應mouseleave

3.用正則表達式匹配字符串,以字母開頭,后面是數字、字符串或者下劃線,長度為9-20
看到這題我是崩潰的,因為正則學的不多,但是稍微寫了下也差不多只是忘了些
var re=new RegExp("^[a-zA-Z][a-zA-Z0-9_]{9,20}$");

4.js字符串兩邊截取空白的trim的原型方法的實現
//我的笨方法,當時還想錯了一些,回來后實現了一下,思路是這
String.prototype.trim = function () {
?var arr=this.split(""); ??
?while(1) { ??
? if(arr[0]==" ") { ? ?
? ? ? ?arr.shift(); ? ? ? ? ? ? ?
? ?continue; ?? ?
? ? } ? ?? ?
?break; ? ?
? }?
? while(1){ ??
? ? if(arr[arr.length-1]==" ") { ?
? ? ? ? ?arr.pop(); ? ?? ? ? ? ?
? ? continue; ? ? ?
? ?} ? ?? ?
? ?break; ? ? ?
? } ??
?return arr.join("");?
?}??//后來面試官跟我說一句話就解決了,然而我正則都忘了,平時沒怎么用?
?String.prototype.trim = function () {?
? ?return this.replace(/(^s)|(s$)/g,'');? ?
?};

5.三道判斷輸出的題都是經典的題
?//5.1
var a=4
function b()
? ? a=3; ? ?
? console.log(a); ??
? function a(){};?
?} b(); ?
//明顯輸出是3,因為里面修改了a這個全局變量,那個function a(){}是用來干擾的,雖然函數聲明會提升,就被a給覆蓋掉了,這是我的理解
//5.2?
//不記得具體的就類似如下
?var baz=3;?
?var bazz={ ? ?
? baz: 2, ??
? getbaz: function() { ?
? ? ? ? return this.baz ? ? ? ?
? }?
?} ?
?console.log(bazz.getbaz()) ?
?var g=bazz.getbaz; ?
?console.log(g()) ; ?
? //第一個輸出是2,第二個輸出是3,這題考察的就是this的指向,函數作為對象本身屬性調用的時候this指向對象,作為普通函數調用的時候就指向全局了 ?
?//5.3var arr=[1,2,3,4,5]; ?
?for(var i=0;i<arr.length;i++)?
?{ ? ??
? arr[i]=function(){ ?
?alert(i) ?
?} ?
?} ?
?arr[3]();?
?//典型的閉包啊,看都不用看,肯定彈出5啊

6.寫出position不同值和區別
突然想到還有inherit,當時忘記了,后來面試的時候又重新問了我一下
absolute: 生成絕對定位的元素,相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。(不占位)
relative: 生成相對定位的元素,相對于其正常位置進行定位。因此,”left:20” 會向元素的 LEFT 位置添加 20 像素。(占位)
static:默認值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)inherit:規定應該從父元素繼承 position 屬性的值。
fixed:生成絕對定位的元素,相對于瀏覽器窗口進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。

7.寫一個div+css布局,左邊圖片右邊文字,文字環繞圖片,外面容器固定寬度,文字不固定(這是后來根據面試官描述的,筆試題上只有圖我就不放上來了)
這道題我沒答好,剛開始我不清楚那個文字是要自適應的面試官說用p標簽包裹文字,我當時就緊張了下,把p標簽錯當成內聯了,然后我再修正,然后加左浮動,然后不行,我就跟面試官說,我以前都直接就一個img它float:left,加文字不加p標簽就好了然后我回來試一試才發現= =,直接加p標簽就可以了啊= =,omg我的錯誤!!!

8.講述你對reflow和repaint的理解
這個真不會了沒接觸,第一個我猜是重新布局,第二個倒是見過就是重繪,就想到document.write(),這個后來也沒再問我了查查查
repaint就是重繪,reflow就是回流。repaint主要是針對某一個DOM元素進行的重繪,reflow則是回流,針對整個頁面的重排
嚴重性:
在性能優先的前提下,性能消耗 reflow大于repaint。

體現:
repaint是某個DOM元素進行重繪;reflow是整個頁面進行重排,也就是頁面所有DOM元素渲染。

如何觸發:
style變動造成repaint和reflow。不涉及任何DOM元素的排版問題的變動為repaint,例如元素的color/text-align/text-decoration等等屬性的變動。除上面所提到的DOM元素style的修改基本為reflow。例如元素的任何涉及長、寬、行高、邊框、display等style的修改。

常見觸發場景:
觸發repaint:

color的修改,如color=#ddd

text-align的修改,如text-align=center

a:hover也會造成重繪

:hover引起的顏色等不導致頁面回流的style變動。

觸發reflow:

width/height/border/margin/padding的修改,如width=778px;

動畫,:hover等偽類引起的元素表現改動,display=none等造成頁面回流appendChild等DOM元素操作;

font類style的修改;

background的修改,注意著字面上可能以為是重繪,但是瀏覽器確實回流了,經過瀏覽器廠家的優化,部分background的修改只觸發repaint,當然IE不用考慮;

scroll頁面,這個不可避免;

resize頁面,桌面版本的進行瀏覽器大小的縮放,移動端的話,還沒玩過能拖動程序,resize程序窗口大小的多窗口操作系統。

讀取元素的屬性(這個無法理解,但是技術達人是這么說的,那就把它當做定理吧):讀取元素的某些屬性(offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE));

如何避免:
盡可能在DOM末梢通過改變class來修改元素的style屬性:盡可能的減少受影響的DOM元素。

避免設置多項內聯樣式:使用常用的class的方式進行設置樣式,以避免設置樣式時訪問DOM的低效率。

設置動畫元素position屬性為fixed或者absolute:由于當前元素從DOM流中獨立出來,因此受影響的只有當前元素,元素repaint。

犧牲平滑度滿足性能:動畫精度太強,會造成更多次的repaint/reflow,犧牲精度,能滿足性能的損耗,獲取性能和平滑度的平衡。

避免使用table進行布局:table的每個元素的大小以及內容的改動,都會導致整個table進行重新計算,造成大幅度的repaint或者reflow。改用div則可以進行針對性的repaint和避免不必要的reflow。

避免在CSS中使用運算式:學習CSS的時候就知道,這個應該避免,不應該加深到這一層再去了解,因為這個的后果確實非常嚴重,一旦存在動畫性的repaint/reflow,那么每一幀動畫都會進行計算,性能消耗不容小覷。

面試部分

半小時寫完筆試后,等待面試,hh中途遇到了北郵的師兄聊了一些nodejs的東西
步入正題面試
什么時候開始學前端
如何學前端
看過誰的博客
開始看我的簡歷問了,問項目,問webpack/gulp區別,問項目如何實現什么的,再問了筆試題(上面講過了)
等等等都問的項目

基本也就這些,面試官人挺好的,感覺沒什么壓力~最后也讓我過了吧,說我還得多去看看基礎的東西~確實基礎還不夠扎實哈,不過總的來說,這人生第一次面試還挺順利的說,也是運氣好吧~希望以后的路能踏實的走下去吧~

需要的的可以加我qq3252897743領取

轉載于:https://blog.51cto.com/14334627/2402862

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/279451.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/279451.shtml
英文地址,請注明出處:http://en.pswp.cn/news/279451.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

webpack 配置詳解

最近在學習webpack&#xff0c;邊學邊練習&#xff0c;下面是對一些應用到的屬性、插件記錄分享出來&#xff0c;也方便以后查找與復習&#xff0c;過程中碰到了一些坑&#xff0c;在注釋中有說明&#xff1a; const path require(path) const webpack require("webpack…

連續對焦 auto對焦_如何在Windows 10上使用對焦輔助(請勿打擾模式)

連續對焦 auto對焦Windows 10’s “Focus Assist” feature is a “Do Not Disturb” mode that hides notifications. Windows automatically activates it when you’re playing PC games or mirroring your display—and you can have Windows automatically activate it on…

小米品牌

對于現階段的小米公司來說&#xff0c;他們的策略是行走在鋼絲上的。為什么這么說呢&#xff1f;原因是營銷策略的優勢和劣勢都很容易被人翻轉。換句話來說就是優勢的穩定性不夠&#xff0c;劣勢的方面又很容易崩盤&#xff0c;這兩個方向的絲毫失誤都會帶給小米公司嚴重的打擊…

wepy學習筆記之環境搭建

寫了近兩年小程序了&#xff0c;越來越發現原生小程序有太多雞肋的地方。所以今天準備嘗試一下wepy&#xff0c;正好最近手上有個外包&#xff0c;可以拿來練手。如果可以的話&#xff0c;或許會出一系列wepy相關的文章&#xff08;偏實戰&#xff09;&#xff0c;歡迎大佬們指…

山東青島市南區:創建物聯網 信息化管理涉案財物

近日,山東省青島市市南區檢察院自主設計研發“物聯網”涉案財物管理系統,使涉案財物管理工作步入了信息化管理模式。 涉案財物管理工作是案件辦理過程中一個相當重要的環節,而以往主要靠人工進行涉案財物管理,工作繁瑣,業務量大,存在查找困難、堆放混亂等問題。庫存現狀不能及時…

spotify能免費下歌嗎_Spotify免費版與高級版:值得升級嗎?

spotify能免費下歌嗎Spotify offers two tiers: a free, ad-supported plan and a $9.99 per month Premium plan. But what are the differences between the two and is it worth upgrading? Let’s find out. Spotify提供兩個等級&#xff1a;免費的廣告支持計劃和每月9.99…

BZOJ4012 [HNOI2015]開店

BZOJ4012 [HNOI2015]開店 這道題因為太多人拿這個題卡$BZOJ$&#xff0c;于是成了權限題。。。 本蒟蒻表示沒錢氪金。。。 無奈&#xff0c;拿出了洛谷&#xff1a;P3241 [HNOI2015]開店 還有$LOJ$&#xff1a;#2116. 「HNOI2015」開店 這里附上洛谷的題面&#xff1a; 題目描述…

ElasticSearch實戰-入門

1.概述 今天接著《ElasticSearch實戰&#xff0d;日志監控平臺》一文來給大家分享后續的學習&#xff0c;在《ElasticSearch實戰&#xff0d;日志監控平臺》中給大家介紹一個日志監控平臺的架構方案&#xff0c;接下來給大家分享如何去搭建部署這樣一個平臺&#xff0c;給大家做…

如何解決90%的報表設計難題?300張報表模板任君挑選

下載ActiveReport最新試用版 大數據時代&#xff0c;數據價值愈發彰顯&#xff0c;數據分析正在成為影響業務決策的關鍵因素。其中&#xff0c;數據分析的結果以報表的形式呈現給用戶&#xff0c;究竟什么樣的報表設計才能真正讓用戶滿意&#xff0c;如何保證用戶在復雜的數據…

macos 版本_如何檢查您使用的macOS版本

macos 版本Apple releases new versions of the macOS operating system about once per year. Here’s how to check which release of the macOS operating system is installed on your MacBook, iMac, Mac Mini, or Mac Pro. 蘋果大約每年發布一次新版本的macOS操作系統。 …

luogu 1484\1792 種樹 奇怪的貪心可反悔

1484 種樹 此版本是線性的&#xff0c;那么根據鏈表維護即可&#xff1b; 構建新點&#xff0c;點的左右分別是原整個區間的前驅及后繼&#xff0c;再正常維護即可 注意兩個版本的維護有所不同 第二個版本的維護直接將左右兩點刪除 1792 種樹2 此版本是環 1484 #include<bi…

第十四周作業

2019春第二次課程設計實驗報告 一.實驗項目 貪吃蛇游戲 二.實驗功能描述&#xff1a; 存儲數據&#xff0c;實現wasd控制蛇方向&#xff0c;吃到食物就增加長度&#xff0c;最后按長度算分數&#xff0c;撞到障礙物則死亡&#xff0c;計算積分 三.項目模板結構介紹&#xff1a;…

java語言不用擔心內存嗎_不用擔心智能手機的電池,只需使用它

java語言不用擔心內存嗎When you’re trying to get the most life out of your device, it’s easy to overthink batteries. Don’t. Plug in your devices when possible, carry a battery pack with you, and get on with your life. 當您試圖充分利用設備的使用壽命時&…

asp.net core結合NLog搭建ELK實時日志分析平臺

0、整體架構 整體架構目錄&#xff1a;ASP.NET Core分布式項目實戰-目錄 一、介紹ELK 1、說明&#xff08;此篇ELK采用rpm的方式安裝在服務器上&#xff09;-牛刀小試 承接上一篇文章的內容準備部署ELK來展示asp.net core 的數據。目前此篇文章只用到單臺服務器&#xff0c;等下…

Rhel7 設置目錄權限,acl權限

Rhel7 設置目錄權限&#xff0c;acl權限 改變用戶和組的所屬 Getfacl 取得 Setfacl設置 [rootdesktop0 tmp]# setfacl -m u:natasha:rw fstab [rootdesktop0 tmp]# setfacl -m u:harry:- fstab [rootdesktop0 tmp]# setfacl -m o::r fstab [rootdesktop0 tmp]# getfacl fstab #…

IT兄弟連 JavaWeb教程 AJAX定義以及解決的問題

2019獨角獸企業重金招聘Python工程師標準>>> Ajax是"Asynchronous JavaScript And XML"的縮寫(即&#xff1a;異步的JavaScript和XML)&#xff0c;是一種實現無頁面刷新獲取服務器數據的混合技術,Ajax這個概念的最早提出者是Jesse James Garrett。我們知道…

echo和@echo_如何在Echo Show和Echo Spot上切換到24小時時鐘

echo和echoIf you prefer the 24-hour clock format instead of the usual 12-hour format, Amazon recently (and quietly) added the ability to switch between the two on the Echo Show and Echo Spot. 如果您希望使用24小時制而不是通常的12小時制&#xff0c;那么Amazon…

springMVC--XML解析

一 springMVC 入口 web.xml; DispatcherServlet二 初始化過程 1.尋找init(); 查看DispatcherServlet時候時&#xff0c;繼承自servlet&#xff0c;肯定有初始化方法,DispatcherServlet繼承自FrameworkServlet FrameworkServlet繼承自HttpServletBean HttpServletBean繼承自Http…

Vim 4 常用插件

Vim 系列教程目錄: Vim 1 基本使用Vim 2 高級用法Vim 3 vimrcVim 4 常用插件Vim 5 其他編輯器的 Vim 插件Vim 插件網站 Vim 之所以強大, 有個很大的原因就是他有豐富的插件. 插件可以極大地增強 Vim 的功能. 那么去哪里下載插件呢? 插件怎么安裝和管理呢, 聽我慢慢道來. 先說到…

[Windows編程] 通過GetModuleHandleEx 得到函數調用者所在的DLL/EXE 原創陳本峰2009-02

在有些情況下需要得到函數調用者的模塊名字。比如你想限制你的某個函數只能被自己某個特定的DLL調用。 或者比如在異常處理中你想了解是那個DLL/EXE拋出了異常。API函數_ReturnAddress 和GetModuleHandleEx 函數可以幫助我們達到這個目的。以下代碼演示它們的用法&#xff1a;v…