題目來源: 牛客

如何理解前端這個崗位

簡單地說就是設計師做好網頁效果圖，前端將效果圖轉化成頁面，之后交給后端程序員，中間的這段工作就是前端

瀏覽器如何渲染HTML

• 將載入的HTML文件解析成DOM樹，并且將各個標記標識解析成DOM樹的各個節點
• 將解析成的DOM樹和CSS規則樹進行關聯生成渲染樹
• 進入布局階段，為DOM樹的每個節點分配在屏幕上出現的確切坐標
• 進入繪制階段，在這里渲染引擎的工作就結束了，接下來就交給后端對渲染樹的每個節點進行繪制，呈現出頁面效果

重繪會引起重排么

重繪是指某些元素的外觀被改變，重拍是指重新生成布局排列元素。單單改變元素的外觀，肯定不會引起網頁重新生成布局，但當瀏覽器完成重拍之后，將會重新繪制受到此次重排影響的部分。也就是說：重繪不一定導致重排，但重排一定會導致重繪

使用scale屬性會引起重繪還是重排

scale只能引起重繪而不是重排，transform的所有屬性都不會引起重排

瀏覽器事件循環

• 執行同步代碼
• 執行宏任務
• 將微任務添加到任務隊列
• 宏任務執行完畢后，執行任務隊列

圖片懶加載

簡單來說，就是如果可視區域里面看不到圖片，就先不加載圖片

addEventListener("scroll", () => {const images = document.querySelectorAll('img');images.forEach(image => {const clientHeight = document.documentElement.clientHeight;const scrollTop = document.documentElement.scrollTop;if (image.offsetTop < clientHeight + scrollTop) {image.setAttribute('src', image.getAttribute('data-src'));}});
});

路由懶加載

當打包構建應用時，JS包會變得非常大，影響頁面加載。如果把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了

• Vue異步組件
• ES6標準import()
• webpack的require/ensure

路由鑒權

• 路由攔截
• 動態路由

請求攔截器

• HandlerInterceptor: 攔截的目標為請求的地址
• ClientHttpRequestInterceptor: 攔截的目標為請求的方法
• RequestInterceptor: 對RestTemplate的請求進行攔截
• AsyncClientHttpRequestInterceptor: Feign攔截器，也就是一個HTTP攔截器

堆棧和隊列

• 堆棧：最后一個放入堆棧中的物體總是最先被拿出來，這個特性通常被稱為后進先出
• 隊列：先進入隊列中的元素總是最先被拿出來，被稱為先進先出

對鏈表的理解

鏈表是一種物理存儲單元上非連續、非順序的存儲結構，數據元素的邏輯順序是通過鏈表中的指針鏈次序連接的，由一系列結點組成。分為單鏈表、循環鏈表、雙向鏈表、雙向循環鏈表等

數組和鏈表的存儲結構

• 數組的內存空間是連續的，可以通過索引快速訪問任意位置的元素，適合于按照順序存儲和快速訪問數據的場景
• 鏈表的空間可以是不連續的，適合在中間位置插入或刪除元素，適合與頻繁變動數據集合的場景

數組的長度限制

根據ES5的規范，數組的最大長度由一個無符號32位整數綁定，因此最長的數組由$2^{32}?1個$元素

附件的上傳和下載怎么實現

• 上傳: 先獲取到文件對象然后利用表單FormData對象進行傳輸
• 下載: 手動新建一個a標簽然后自動觸發下載

獲得樹中某個節點的層級

class Node {value: string;lchild: Node;rchild: Node;
}function getLevel(head, target, level=1) {if (head === null) return 0;if (head.value === target.value) {return level;} else {l = getLevel(head.lchild, target, level + 1);if (l !== 0) return l;return getLevel(head.rchild, target, level + 1);}
}

前端開發是做什么的？工作職責有哪些？
瀏覽器是如何解析和渲染HTML的🔥🔥🔥
重排(reflow)和重繪(repaint)
css zoom和scale的使用
瀏覽器事件循環看這一篇就夠了
淺析圖片懶加載(三種實現方法與兩種優化方式)
vue-router路由懶加載以及三種實現方式
vue-鑒權的兩種方法之路由攔截
幾種常見的攔截器使用
數組與鏈表：數據存儲結構的比較
面試官：說說你對鏈表的理解？常見的操作有哪些？
GuoXY
7-5 求二叉樹中指定節點的層次
js數組有最大長度嗎？

新人發文，禮貌球館??