前端層級聯動原理

『壹』 前端 元素的層級 背景

background-color
background-color屬性用來為元素設置背 景顏色。
需要指定一個顏色值，當指定了一個顏色 以後，整個元素的可見區域都會使用這個 顏色作為背景色。
如果不設置背景顏色，元素默認背景顏色 為透明，實際上會顯示父元素的背景顏色

background-image
background-image可以為元素指定背景 圖片。
和background-color類似，這不過這里使 用的是一個圖片作為背景。
需要一個url地址作為參數，url地址需要指 向一個外部圖片的路徑
例如：
background-image: url(1.jpg)

background-repeat
background-repeat用於控制背景圖片的 重復方式4 。
如果只設置背景圖片默認背景圖片將會使 用平鋪的方式，可以通過該屬性進行修改。
可選值：
repeat：默認值，圖片左右上下平鋪
no-repeat：只顯示圖片一次，不會平鋪
repeat-x：沿x軸水平平鋪一張圖片
repeat-y：沿y軸水平平鋪一張圖片

background-position
background-position用來精確控制背景 圖片在元素中的位置。
可以通過三種方式來確定圖片在水平方向 和垂直方向的起點。
關鍵字：top right bottom left center
百分比
數值

background-attachment
background-attachment用來設置背景圖 片是否隨頁面滾動。
可選值：
scroll：隨頁面滾動
fixed：不隨頁面滾動

background
background是背景的簡寫屬性，通過這個 屬性可以一次性設置多個樣式，而且樣式 的順序沒有要求。
例如：
background: green url(1.jpg) no-repeat center center fixed;

『貳』 Web前端新手要掌握的性能優化

今天小編要跟大家分享的文章是關於Web前端新手要掌握的性能優化知識。本文將分享一些前端性能優化的常用手段，包括減少請求次數、減小資源大小、各種緩存、預處理和長連接機制，以及代碼方面的性能優化等方面。下面來和小編一起看一看吧！

base64：尤其是在移動端，小圖標可以base64(webpack)，大圖片慎用(如果載入速度過於慢的，而且很重要的圖片，可以用base64)


1、減少HTTP的請求次數和傳輸報文的大小


「CSSSprite(雪碧圖、圖片精靈)技術」


使用字體圖標(IconFont)或者SVG等矢量圖


+減少HTTP請求次數或者減少請求內容的大小


+渲染更快：因為它們是基於代碼渲染的，而對於點陣圖(png/jpg/gif)是需要先把圖片編碼在渲染


+不容易是幀變形


+也可以使用webp格式圖片，這種格式要小一些(但是需要伺服器端支持這種格式的請求處理)


「圖片懶載入(延遲載入)技術」


+第一次載入頁面的時候不去請求真實的圖片，提高第一次渲染頁面的速度，請求圖片的額外消耗盡可能不要處理


+當頁面載入完，把出現在用戶視野區域中的圖片做真實載入，沒有出現的先不載入(節約流浪，也能減少對伺服器的請求壓力)


o對於數據我們也盡可能分批載入(不要一次請求過多的數據，例如分頁技術)


音視頻文件取消預載入(preload='none')，這樣可以增加第一次渲染頁面的速度，當需要播放的時候在載入


客戶端和伺服器端的數據傳輸盡可能基於JSON格式完成，XML格式比JSON格式要大一些(還可以基於二進制編碼或者文件流格式，這種格式比文件傳輸好很多)


「把頁面的css/js等文件進行合並壓縮」


合並：爭取css和js都只導入一個(webpack可以實現並合並壓縮哦)


壓縮：基於webpack可以壓縮，對於圖片自己找工具先壓縮，可以使用伺服器的GZIP壓縮


圖片BASE64(用BASE64碼代表圖片，減少HTTP，增加瀏覽器渲染速度，所以真是項目中，尤其是移動端，如果圖片載入緩慢，BASE64一下就好了，;但是base64會導致文件中心的代碼超級惡心，不利於維護和開發，所以減少使用);webpack中科院配置圖片


2、設置各種緩存、預處理和長連接機制


不經常更改的靜態資源做緩存處理(一般做的是304或者ETAG等協商緩存)


「建立Cache-Control和ExpiresHTTP的強緩存」


DNS緩存或者預處理(DNSPrefetch)，減少DNS的查找


設置本地的離線存儲(manifest)或者把一些不經常更改的數據做本地臨時存儲(webstorage，indexdb)等


有錢就做CDN(地域分布式伺服器)，或者加伺服器


「建立Connection：keep-aliveTcp長連接」


使用HTTP2版本協議(現在用的一般都是http1.1)，可以多條tcp通道共存=>管道化鏈接


一個項目分為不同的域(不同的伺服器)，例如：資源web伺服器、數據伺服器，圖片伺服器，視頻伺服器等，合理利用伺服器資源，但是導致過多的DNS解析


Cache-Control的優先順序高於Expires


基於本地存儲，做數據的存儲


3、代碼方面的性能優化


減少對閉包的使用(因為過多使用閉包會產生很多不銷毀的內存，處理不好的話，會導致內存溢出「棧溢出」)，減少閉包的嵌套(減少作用域鏈的查找層級)


對於動畫來說：能用css解決的不用js(能夠用transform處理的，不用傳統的css樣式，因為transform開啟硬體加速，不會引發迴流，或者使用定位的元素也會好很多，因為定位的元素脫離文檔流，不會對其他元素的位置造成影響)，能用
requestAnimationFrame解決的不用定時器


+用requestAnimationFrame還有一個好處，當頁面處於休眠無訪問狀態，動畫會自己暫停，知道回復訪問才開始，而定時器是不論什麼狀態，只要頁面不管，就一直處理


避免使用iframe(因為iframe會嵌入其他頁面，這樣父頁面渲染的時候，還要同時把子頁面也渲染了，渲染進度會變慢)


減少直接對DOM的操作(原因是減少DOM的迴流和重繪...)，當代項目基本基於mvvm，mvc數據驅動視圖渲染的，對DOM的操作框架本身完成，性能要好很多


低耦合高內聚(基於封裝的方式：方法封裝，插件，組件，框架，類庫等封裝，減少頁面中的冗餘代碼，提高代碼使用率)


盡可能使用事件委託


避免出現死循環或者嵌套循環(嵌套循環會成倍增加循環的次數)


項目中盡可能使用非同步編程來模擬出多線程的效果，避免主線程阻塞(非同步操作基於Promise設計模式來管理)


JS中不要使用with


避免使用css表達式


函數的防抖和節流


減少使用eval(主要原因是防止壓縮代碼的時候，由於符號書寫不合規，導致代碼混亂)


圖片地圖：對於多次調取使用的圖片(尤其是背景圖)，盡可能把它提取成為公共的樣式，而不是每一次重新設置background


減少filter濾鏡的使用


盡可能減少選擇器的層級


盡可能減少table布局


手動回收堆棧內存(賦值為null)


「棧溢出：死遞」


functionfunc(){


func();


}func();


解決方案：


functionfunc(){


setTimeout(func,0);


}func();


相互引用：引用類型之間的相互調用，形成嵌套式內存


letobj1={


name:'obj1',};


letobj2={


name:'obj2',


x:obj1}


obj1.x=obj2;


以上就是小編今天為大家分享的關於Web前端新手要掌握的性能優化知識的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的web前端工程師。

『叄』 二級聯動是前端寫還是php寫

一般是前端用來實現聯動效果，後端(php)提供數據，二者相結合

『肆』 電子圍欄與視頻監控怎麼聯動，具體怎麼聯動越詳細越好

電子圍欄與監控的聯動是指當電子圍欄系統產生報警時，附近區域的攝像機可以馬上把鏡頭轉向報警區域，並進行錄像，同時監控畫面立即顯示在控制中心的顯示屏（或者監視器）中。監控中心安保人員能夠可以及時全面的了解現場情況和調查取證。

電子圍欄跟監控的聯動方式通常有以下幾種：

第一種聯動方式：前端物理連接聯動（通過485信號傳輸）

電子圍欄報警信號（開關量）直接接入對應的攝像機報警輸入介面。這樣連接的優點是：由於信號傳輸距離短，聯動反應快，不會出現延遲。

請點電子圍欄與監控聯動接線圖

第二種聯動方式：電子圍欄報警信號傳輸至控制中心後通過報警主機控制軟體來實現聯動（通過網路傳輸）。

網路TCP/IP傳輸是如今較為常見的傳輸方式，軟體控制界面較為清晰，可選擇的功能設置較多，如可以設置自動錄像，自動抓拍，自動存儲等。

『伍』 在一個系統里,比如績效,在前端代碼編寫上,如何區分同一個崗位下的上下級關系

這種情況一般都是職務來區分，比如總經理，經理，主管，職員

『陸』 微軟BI前端如何展現圖表數據聯動效果

1、數據聯動可以參考B老師的這篇博客
微軟BI 之SSRS 系列 - 如何實現報表導航 Navigation 和鑽取 Drill Down 的效果

2、SSAS 的數據展示 前端是通過SSRS 不支持推拽分析， 要麼就是通過EXECL 連接 支持推拽
要麼可能需要自己開發 前端展示的東西

『柒』 前端頁面有哪三層構成，分別是什麼作用是什麼

最准確的網頁設計思路是把網頁分成三個層次，即：結構層、樣式層、行為層。

HTML：結構層

網頁的結構或內容層是該頁面的基礎HTML代碼。正如房屋的框架為房屋的其他部分構建了一個堅實

的基礎，HTML的堅實基礎創建了一個可以在其上創建網站的平台。

結構層用於存儲客戶想要閱讀或查看的所有內容。HTML結構可以包含文本和圖像，它包括訪問者用

於瀏覽網站的超鏈接。這是在符合標準的HTML5中編碼的，可以包括文本，圖像和多媒體（視頻，音頻等）。

網站內容的每個方面都應該在結構層中表示。這允許關閉JavaScript的客戶或無法查看整個網站的

CSS訪問許可權的客戶（如果不是所有功能）。

CSS：樣式層

該層指示結構化HTML文檔如何看待網站的訪問者，並由CSS（層疊樣式表）定義。這些文件包含有

關如何在Web瀏覽器中顯示文檔的樣式說明。樣式層通常包括基於屏幕大小和設備更改站點顯示的

媒體查詢。

網站的所有視覺樣式都應位於外部樣式表中。您可以使用多個樣式表，但請記住，每個CSS文件都需

要HTTP請求才能獲取它，從而影響站點性能。

JavaScript：行為層

行為層使網站具有交互性，允許頁面響應用戶操作或基於一組條件進行更改。JavaScript是行為層最

常用的語言，但CGI和PHP也經常被使用。

當開發人員引用行為層時，大多數都是指在Web瀏覽器中直接激活的層。您可以使用此圖層直接與

DOM（文檔對象模型）進行交互。在內容層中編寫有效的HTML對於行為層中的DOM交互非常重

要。在構建行為層時，應該像使用CSS一樣使用外部腳本文件來優化速度和性能。

(7)前端層級聯動原理擴展閱讀：

分層的一些好處是：

• 共享資源：當您編寫外部CSS或JavaScript文件時，站點上的任何頁面都可以使用該文件。如果

您需要對該文件進行更改，也許更新網站上的某些排版樣式，則使用該樣式表的每個頁面都會得到

更改。沒有必要單獨編輯網站的每個頁面，這對於大型網站來說可能是一項艱苦的任務。

• 下載速度更快：首次由客戶下載腳本或樣式表後，Web瀏覽器會對其進行緩存。由於這些共享

資源現在包含在瀏覽器的緩存中，因此瀏覽器中請求的其他頁面載入速度更快，從而提高了整體頁

面速度和性能。

• 多人團隊：如果您有多個人同時在網站上工作，您可以使用允許文件簽入和簽出的系統，以確

保每個人都使用最新版本。如果樣式和行為與結構文檔交織在一起，那就更難了。

• 搜索引擎優化：一個明確分離風格和結構的網站可能會對搜索引擎有更好的表現，因為它們可以更有效地抓取內容並理解頁面而不會陷入視覺風格和行為信息。

• 輔助功能：外部樣式表和腳本文件更易於人們和瀏覽器訪問。屏幕閱讀器等軟體可以更輕松地

處理結構層中的內容，而無需處理無論如何都無法使用的樣式。

• 向後兼容性：使用單獨的開發層設計的站點更可能向後兼容，因為無法使用某些CSS樣式或禁

用了JavaScript的瀏覽器和設備仍然可以查看HTML。然後，您可以使用支持它們的瀏覽器的功能逐

步增強您的網站。

『捌』 Web前端學習基礎之HTML&CSS知識介紹

今天小編要跟大家分享的文章是關於Web前端學習基礎之HTML&CSS知識介紹。正在學習Web前端知識的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。


01、HTML概述全稱：HyperTextMarkupLanguage（超文本標記語言），定義頁面內容結構，該語言書寫的代碼通常會被瀏覽器解析執行。


HyperText(超文本)：不僅包括文本，還可以包括圖片、鏈接、音樂、視頻等非文本元素


MarkupLanguage(標記語言)：是一套標記標簽，html使用標記標簽來描述網頁


02、HTML文檔結構


文檔聲明定義：它既不是元素，也不是注釋，寫在html代碼的第一行；用來解析元素，通知瀏覽器使用哪一個html版本


html元素（又叫根標記），是所有其他元素的祖先元素，最頂層


文檔頭，它是html元素的第一個子元素，可以嵌套其他元素；裡面的內容不會在頁面上顯示


charset="UTF-8">空元素，解析文本


ame="viewport"content="width=device-width,
initial-scale=1.0">SEO搜索引擎優化