前端面試詳解

来源:https://www.cnblogs.com/y-y-y-y/archive/2018/09/09/9614435.html
-Advertisement-
Play Games

css實現單行文本溢出顯示 ... 直接上效果：相對於多行文本溢出做處理， 單行要簡單多，且更容易理解。 實現多行文本溢出顯示... 方法： 因使用了WebKit的CSS擴展屬性，該方法適用於WebKit瀏覽器及移動端； -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為 ...


css實現單行文本溢出顯示 ...

直接上效果：相對於多行文本溢出做處理， 單行要簡單多，且更容易理解。

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

當然還需要加寬度width屬來相容部分瀏覽。

實現多行文本溢出顯示...

方法：

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

因使用了WebKit的CSS擴展屬性，該方法適用於WebKit瀏覽器及移動端；

  1. -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為了實現該效果，它需要組合其他的WebKit屬性。常見結合屬性：

  2. display: -webkit-box; 必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 。

  3. -webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。

可能用到的meta標簽

<!-- 設置縮放 -->

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

<!-- 可隱藏地址欄，僅針對IOS的Safari（註：IOS7.0版本以後，safari上已看不到效果） -->

<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- 僅針對IOS的Safari頂端狀態條的樣式（可選default/black/black-translucent ） -->

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- IOS中禁用將數字識別為電話號碼/忽略Android平臺中對郵箱地址的識別 -->

<meta name="format-detection"content="telephone=no, email=no" />


其他meta標簽

<!-- 啟用360瀏覽器的極速模式(webkit) -->

<meta name="renderer" content="webkit">

<!-- 避免IE使用相容模式 -->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->

<meta name="HandheldFriendly" content="true">

<!-- 微軟的老式瀏覽器 -->

<meta name="MobileOptimized" content="320">

<!-- uc強制豎屏 -->

<meta name="screen-orientation" content="portrait">

<!-- QQ強制豎屏 -->

<meta name="x5-orientation" content="portrait">

<!-- UC強制全屏 -->

<meta name="full-screen" content="yes">

<!-- QQ強制全屏 -->

<meta name="x5-fullscreen" content="true">

<!-- UC應用模式 -->

<meta name="browsermode" content="application">

<!-- QQ應用模式 -->

<meta name="x5-page-mode" content="app">

<!-- windows phone 點擊無高光 -->

<meta name="msapplication-tap-highlight" content="no">

 

字體font-family

@ 宋體      SimSun

@ 黑體      SimHei

@ 微信雅黑   Microsoft Yahei

@ 微軟正黑體 Microsoft JhengHei

@ 新宋體    NSimSun

@ 新細明體  MingLiU

@ 細明體    MingLiU

@ 標楷體    DFKai-SB

@ 仿宋     FangSong

@ 楷體     KaiTi

@ 仿宋_GB2312  FangSong_GB2312

@ 楷體_GB2312  KaiTi_GB2312  

@

@ 說明：中文字體多數使用宋體、雅黑，英文用Helvetica


body { font-family: Microsoft Yahei,SimSun,Helvetica; }

let var const

let 允許你聲明一個作用域被限制在塊級中的變數、語句或者表達式

let綁定不受變數提升的約束，這意味著let聲明不會被提升到當前

該變數處於從塊開始到初始化處理的“暫存死區”。


var 聲明變數的作用域限制在其聲明位置的上下文中，而非聲明變數總是全局的

由於變數聲明（以及其他聲明）總是在任意代碼執行之前處理的，所以在代碼中的任意位置聲明變數總是等效於在代碼開頭聲明


const 聲明創建一個值的只讀引用 (即指針)

這裡就要介紹下 JS 常用類型 

String、Number、Boolean、Array、Object、Null、Undefined

其中基本類型 有 Undefined、Null、Boolean、Number、String，保存在棧中；

複合類型 有 Array、Object ，保存在堆中；


基本數據當值發生改變時，那麼其對應的指針也將發生改變，故造成 const申明基本數據類型時，

再將其值改變時，將會造成報錯， 例如 const a = 3 ; a = 5 時 將會報錯；

但是如果是複合類型時，如果只改變複合類型的其中某個Value項時， 將還是正常使用；

箭頭函數

語法比函數表達式更短，並且不綁定自己的this，arguments，super或 new.target。這些函數表達式最適合用於非方法函數，並且它們不能用作構造函數。

事件的各個階段

1：捕獲階段 ---> 2：目標階段 ---> 3：冒泡階段

document   ---> target目標 ----> document


由此，addEventListener的第三個參數設置為true和false的區別已經非常清晰了：


true表示該元素在事件的“捕獲階段”（由外往內傳遞時）響應事件；


false表示該元素在事件的“冒泡階段”（由內向外傳遞時）響應事件。

跨域的幾種方式

首先瞭解下瀏覽器的同源策略 同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+功能變數名稱+埠"三者相同，即便兩個不同的功能變數名稱指向同一個ip地址，也非同源。

解決方法：

1 通過jsonp跨域

    1.）原生實現：

     <script>

        var script = document.createElement('script');

        script.type = 'text/javascript';


        // 傳參並指定回調執行函數為onBack

        script.src = 'http://www.....:8080/login?user=admin&callback=onBack';

        document.head.appendChild(script);


        // 回調執行函數

        function onBack(res) {

            alert(JSON.stringify(res));

        }

     </script>

2、 document.domain + iframe跨域  

    此方案僅限主域相同，子域不同的跨域應用場景。

    1.）父視窗：(http://www.domain.com/a.html)


        <iframe id="iframe" src="http://child.domain.com/b.html"></iframe>

        <script>

            document.domain = 'domain.com';

            var user = 'admin';

        </script>

        2.）子視窗：(http://child.domain.com/b.html)


        <script>

            document.domain = 'domain.com';

            // 獲取父視窗中變數

            alert('get js data from parent ---> ' + window.parent.user);

        </script>3、 nginx代理跨域

4、 nodejs中間件代理跨域

5、 後端在頭部信息裡面設置安全功能變數名稱

其餘跨域可以自行去網上瞭解

 

渲染優化

1.禁止使用iframe（阻塞父文檔onload事件）；

    *iframe會阻塞主頁面的Onload事件；

    *搜索引擎的檢索程式無法解讀這種頁面，不利於SEO;

    *iframe和主頁面共用連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行載入。


    使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript

    動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。


2.禁止使用gif圖片實現loading效果（降低CPU消耗，提升渲染性能）；

3、使用CSS3代碼代替JS動畫（儘可能避免重繪重排以及迴流）；

4、對於一些小圖標，可以使用base64位編碼，以減少網路請求。但不建議大圖使用，比較耗費CPU；

        小圖標優勢在於：

            1.減少HTTP請求；

            2.避免文件跨域；

            3.修改及時生效；


5、頁面頭部的<style></style> 會阻塞頁面；（因為 Renderer進程中 JS線程和渲染線程是互斥的）；

6、頁面頭部<script</script> 會阻塞頁面；（因為 Renderer進程中 JS線程和渲染線程是互斥的）；

7、頁面中空的 href 和 src 會阻塞頁面其他資源的載入 (阻塞下載進程)；


8、網頁Gzip，CDN托管，data緩存 ，圖片伺服器；

9、前端模板 JS+數據，減少由於HTML標簽導致的帶寬浪費，前端用變數保存AJAX請求結果，每次操作本地變數，不用請求，減少請求次數

10、用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。

11、當需要設置的樣式很多時設置className而不是直接操作style。

12、少用全局變數、緩存DOM節點查找的結果。減少IO讀取操作。

13、避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。

14、圖片預載入，將樣式表放在頂部，將腳本放在底部  加上時間戳。


15、 避免在頁面的主體佈局中使用table，table要等其中的內容完全下載之後才會顯示出來，顯示比div+css佈局慢。

    對普通的網站有一個統一的思路，就是儘量向前端優化、減少資料庫操作、減少磁碟IO。

        向前端優化指的是，在不影響功能和體驗的情況下，能在瀏覽器執行的不要在服務端執行，

        能在緩存伺服器上直接返回的不要到應用伺服器，程式能直接取得的結果不要到外部取得，

        本機內能取得的數據不要到遠程取，記憶體能取到的不要到磁碟取，緩存中有的不要去資料庫查詢。

        減少資料庫操作指減少更新次數、緩存結果減少查詢次數、將資料庫執行的操作儘可能的讓你的程式完成（例如join查詢），

        減少磁碟IO指儘量不使用文件系統作為緩存、減少讀寫文件次數等。程式優化永遠要優化慢的部分，換語言是無法“優化”的。

viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

// width    設置viewport寬度，為一個正整數，或字元串‘device-width’

// device-width  設備寬度

// height   設置viewport高度，一般設置了寬度，會自動解析出高度，可以不用設置

// initial-scale    預設縮放比例（初始縮放比例），為一個數字，可以帶小數

// minimum-scale    允許用戶最小縮放比例，為一個數字，可以帶小數

// maximum-scale    允許用戶最大縮放比例，為一個數字，可以帶小數

// user-scalable    是否允許手動縮放

css div盒子垂直水平居中

完整代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
    <style>
        .box{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            position: relative;
            border: 1px solid;
        }
        .child{
            width: 150px;
            height: 150px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin:  auto;
            border: 1px solid;
        }
        
    </style>
<body>
   <div class="box">
       <div class="child"></div>
   </div>
</body>
</html>

結果：

 

關於其他常見面試題還在做一下整理……

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 短視頻去水印解析介面！客戶端開發者的福音！
    本文適合這些人閱讀：iOS開發者、Android開發者、小程式開發人員、H5開發人員等客戶端開發人員。 今天要給客戶端開發者們介紹的一個介面是iiiLab提供的視頻去水印解析介面，介面特點： 1. 通用介面支持解析抖音、快手、火山、今日頭條、西瓜視頻、微博、秒拍、小咖秀、晃咖、微視、美拍、網易雲音樂 ...
  • 標把1-10之間所有的奇數，放到數組中
    標把1-10之間所有的奇數，放到數組中,既然是1--10的奇數，那就要判斷，判斷是否是奇數，當然也要定義一個空的數組，如果判斷的結果是奇數，那就將結果存放在空的數組中。 第一種方法，是運用數組的方法，將奇數追加在空數組中， 第二種方法，將數組的索引值寫成數組的長度，並將索引值賦值 第三種方法，定義一 ...
  • JavaScript知識點
    一、JavaScript特點 二、JavaScript三大部分：（ECMAScript、DOM、BOM） 三、JavaScript的基本語法 變數聲明 Js是一種弱數據類型的語言，任何類型的變數都用關鍵字Var來聲明。 賦值可以在聲明的的同時賦值，也可以在後面賦值。 這兩種方法是一樣的。 同時有一種 ...
  • 淺談CORS
    淺談CORS CORS全稱“跨站資源共用”（Cross Origin Resource Sharing），它允許瀏覽器剋服瀏覽器同源策略向跨域伺服器發出請求。 同源策略 概念 說到CORS，那麼就不得不提瀏覽器同源策略，所謂“同源”，是指伺服器URL的三個相同： 1.協議相同 2.功能變數名稱相同 3.埠 ...
  • vuex最詳細完整的使用用法
    來自：https://blog.csdn.net/qq_35430000/article/details/79412664#commentBox github倉庫地址：https://github.com/byla678/vuexdemo.git 侵刪 ...
  • js手寫'Promise'
    /* * pending:初始化成功 * fulfilled:成功 * rejected：失敗 * */ function Promise(executor) {// 執行器 this.status = 'pending'; this.value = undefined; this.reason =... ...
  • 結合Bootbox將後臺JSON數據填充Form表單
    序言： 剛結束公司的三個月試用期，意味著我即將正式步入社會成為廣大從事IT行業的一員。作為一個編程小白，無論從技術層面還是知識層面都是比較薄弱的，想要成為一個優秀的程式員不斷的學習與探索是不可避免的。我相信一切的付出與收穫是成正比的！Fighting！ 這幾天在做公司的實際項目的時候，需要實現選中B ...
  • vue 面試時需要準備的知識點
    前端火熱的框架層出不窮，作為碼農的我們，依舊需要去學習，去探索新的問題，學習新技術，其實就是為了寫一手好的，自認為是高質量的代碼。今天主要分享一下前端最火的框架vue，也是我比較喜歡的框架。 vue上手可以說是比較輕鬆而且簡單，如果你用過angular，react，你也會很喜歡vue。vue的核心思 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類