整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、定義
<meta> 標簽提供關于 HTML 文檔的元數據。它不會顯示在頁面上，但是對于機器是可讀的。可用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。
2、作用
meta里的數據是供機器解讀的，告訴機器該如何解析這個頁面，還有一個用途是可以添加服務器發送到瀏覽器的http頭部內容，例如我們為頁面中添加如下meta標簽：
瀏覽器的頭部就會包括這些:
只有瀏覽器可以接受這些附加的頭部字段，并能以適當的方式使用它們時，這些字段才有意義。
3、meta的必需屬性和可選屬性
meta的必需屬性是content，當然并不是說meta標簽里一定要有content，而是當有http-equiv或name屬性的時候，一定要有content屬性對其進行說明。例如：
必需屬性
<meta name="keywords" content="HTML,ASP,PHP,SQL">
這里面content里的屬性就是對keywords進行的說明，所以呢也可以理解成一個鍵值對吧，就是{keywords:"HTML,ASP,PHP,SQL"}。
可選屬性
在W3school中，對于meta的可選屬性說到了三個，分別是http-equiv、name和scheme。考慮到scheme不是很常用，所以就只說下前兩個屬性吧。
http-equiv
http-equiv屬性是添加http頭部內容，對一些自定義的，或者需要額外添加的http頭部內容，需要發送到瀏覽器中，我們就可以是使用這個屬性。在上面的meta作用中也有簡單的說明，那么現在再舉個例子。例如我們不想使用js來重定向，用http頭部內容控制，那么就可以這樣控制：
<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />
在頁面中加入這個后，5秒鐘后就會跳轉到指定頁面啦，效果可看W3school的例子
name
第二個可選屬性是name，這個屬性是供瀏覽器進行解析，對于一些瀏覽器兼容性問題，name屬性是最常用的，當然有個前提就是瀏覽器能夠解析你寫進去的name屬性才可以，不然就是沒有意義的。還是舉個例子吧:
<meta name="renderer" content="webkit">
這個meta標簽的意思就是告訴瀏覽器，用webkit內核進行解析，當然前提是瀏覽器有webkit內核才可以，不然就是沒有意義的啦。當然看到這個你可能會有疑問，這個renderer是從哪里冒出來的，我要怎么知道呢？這個就是在對應的瀏覽器的開發文檔里就會有表明的，例如這個renderer是在360瀏覽器里說明的。360瀏覽器內核控制Meta標簽說明文檔
常用meta標簽大總結
接下來就是常用的meta標簽大總結啦，我會盡可能的做到全
charset
charset是聲明文檔使用的字符編碼，解決亂碼問題主要用的就是它，值得一提的是，這個charset一定要寫第一行，不然就可能會產生亂碼了。
charset有兩種寫法
兩個都是等效的。
百度禁止轉碼
百度會自動對網頁進行轉碼，這個標簽是禁止百度的自動轉碼
<meta http-equiv="Cache-Control" content="no-siteapp" />
SEO 優化部分
viewport
viewport主要是影響移動端頁面布局的，例如：
content 參數：
各瀏覽器平臺
Microsoft Internet Explorer
Google Chrome
360瀏覽器
UC手機瀏覽器
UCBrowser_U3_API
QQ手機瀏覽器
Apple iOS
Google Android
App Links
最后——移動端常用的meta
eact18內核探秘：手寫React高質量源碼邁向高階開發
download: https://www.666xit.com/4202/
RN簡介React Native(簡稱RN)是Facebook于2015年4月開源的跨渠道移動運用開發結構，是Facebook新近開源的JS結構React在原生移動運用渠道的衍生產品，現在支撐iOS和安卓兩大渠道。RN運用Javascript言語，類似于HTML的JSX，以及CSS來開發移動運用，因此了解Web前端開發的技術人員只需很少的學習就能夠進入移動運用開發范疇。
React Native
看起來很像
React
，只不過其根底組件是原生組件而非 web 組件。要了解
React Native
運用的根本結構，首要需求了解一些根本的
React
的概念，比如
JSX
語法、組件、
state
狀況以及
props
特色。
React Native開發特色:
一次學習，隨處編寫:運用React Native可認為iOS和Android操作系統開發運用程序，不同渠道上的代碼依據渠道會有一些微小的差異。混合開發:React Native代碼開發的模塊與原生代碼開發的模塊能夠雙向通信、無縫聯接；高效的移動運用開發:（1）共同的UI完結結構（2）組件化開發（3）跨渠道移植代碼敏捷（4）自動匹配不同屏幕巨細的手機高效的移動運用開發調試高效的運用熱更新有效下降移動運用裝置包體積學習門檻低、開發難度低運用React Native開發的價值為了得到React Native開發的長處，運用React Native開發的APP也需求付出必定的價值。（1）內存耗費大運用React Native開發的程序運行所需的內存比原生代碼開發的程序略多。（2）運行速度運用React Native開發的代碼運行速度比原生代碼略慢。
React 與 React Native 除了在編碼體現層都運用 JSX 語法外，在 React 與 React Native 的底層都有 Virtual DOM 與 DOM 之間的映射與轉換，以完結了頁面組件高效更新的前端體現。
現在最新版本是0.59React Native中文網
React Native
與
React
的關系及特色:
React
是根底結構，是一套根底規劃完結理念，開發者不能直接運用它來開發移動運用或網頁。在
React
之上開展出了
React.js
結構用來開發網頁，開展出來
React Native
用來開發移動運用。底層原理是相同的，都是運用js完結虛擬dom樹來驅動頁面的烘托，react是驅動HTML dom的烘托，react native是驅動原生組件的烘托。
React.js
:目的 是為了使前端的V層更具組件化，能更好的復用，它能夠運用簡略的html標簽創立更多的自界說組件標簽，內部綁定事情，同時能夠讓你從操作dom中解脫出來，只需求操作數據就會改動相應的dom。
二者都是依據組件（
component
）開發，然后組件和組件之間經過
props
傳遞辦法，每個組件都有一個狀況
（state）
，當某個辦法改動了這個狀況值時，整個組件就會重繪，然后到達改寫。另外，說到重繪就要說到
虛擬dom
了，便是用js模仿
dom
結構，等整個組件的
dom
更新結束，它會有一個
diff
的進程，對比出哪些組件發生了改動，然后才烘托到頁面，簡略來說只更新了比較之前改動了的部分，而不是全部改寫，所以功率很高。
虛擬DOM（Virtual DOM）
的機制：在瀏覽器端用
Javascript
完結了一套
DOM API
。依據
React
進行開發時一切的
DOM
結構都是經過虛擬
DOM
進行，每當數據改動時，React都會從頭構建整個DOM樹，然后React將當時整個DOM樹和上一次的DOM樹進行對比，得到DOM結構的差異，然后只是將需求改動的部分進行實際的瀏覽器DOM更新。而且React能夠批處理虛擬DOM的改寫，在一個事情循環（Event Loop）內的兩次數據改動會被兼并。
2.React詳解
React 官網React GitHub 地址React菜鳥教程React介紹學習生態介紹
Vue生態：Vue + Vue-Router + Vuex + Axios + Babel + WebpackReact生態：React + React-Router + Redux + Axios + Babel + Webpack
2.1.React 簡介
React是一個聲明式，高效且靈活的用于構建用戶界面的 JavaScript 庫。運用 React 能夠將一些簡短、獨立的代碼片段組合成復雜的 UI 界面，這些代碼片段被稱作“組件”。
React
特色
1.聲明式規劃 React采用聲明范式，能夠輕松描繪運用。2.高效 React經過對DOM的模仿，最大極限地減少與DOM的交互。3.靈活 React能夠與已知的庫或結構很好地合作。4.JSX JSX是JavaScript語法的擴展。React 開發不必定運用 JSX ，但咱們主張運用它。5.組件 經過React構建組件，使得代碼愈加容易得到復用，能夠很好的運用在大項目的開發中。6.單向呼應的數據流 React完結了單向呼應的數據流，然后減少了重復代碼，這也是它為什么比傳統數據綁定更簡略。2.2 React運用
1.React 環境裝備裝置
運用 React CDN 庫經過 npm 運用 React運用 create-react-app 快速構建 React 開發環境2.3React render 烘托
屏幕輸出：Hello, React
Title
ReactDOM.render(
,document.getElementById('root'));
3.React JSX
React 運用 JSX 來代替慣例的 JavaScript。
1.React JSX簡介
JSX：JavaScript XML，一種類似于XML的JS擴展語法。也能夠了解成：契合 XML 標準的 JS 語法。
JSX語法的實質：以 React.createElement 的形式來完結的，并沒有直接把 用戶寫的 HTML代碼，烘托到頁面上。運用babel轉換工具將 JSX語法 轉換為 JS語法。
咱們不需求必定運用 JSX，但它有以下長處：
JSX 履行更快，由于它在編譯為 JavaScript 代碼后進行了優化。它是類型安全的，在編譯進程中就能發現錯誤。運用 JSX 編寫模板愈加簡略快速。
const element =
;
這種看起來或許有些奇怪的標簽語法既不是字符串也不是 HTML。它被稱為 JSX， 一種 JavaScript 的語法擴展。 咱們推薦在 React 中運用 JSX 來描繪用戶界面。JSX 是在 JavaScript 內部完結的。
2.JSX的根本語法
（1）在 JSX內部 寫 JS代碼：假如要在 JSX 語法內部，書寫 JS 代碼，那么，一切的JS代碼有必要寫到 {} 的內部。在{}內部，能夠寫任何契合JS標準的代碼。
例如：
var myTitle = '這是運用變量界說的 tilte 值'// 運用JSX語法 創立虛擬DOM目標var vDom = (
Hello, React!這是標題);
（2）當編譯引擎在編譯JSX代碼的時分，假如遇到了<，會把它當作 HTML代碼 去編譯；假如遇到了 {}， 會把方括號里邊的代碼當作 一般JS代碼 去編譯。
（3）在JSX中，假如要為元素添加class特色，則有必要寫成className，由于 class在ES6中是一個關鍵字；和class類似，label標簽的 for 特色需求替換為 htmlFor。
代碼舉例：
// 運用JSX語法 創立虛擬DOM目標var vDom = (
Hello, React!千古壹號
);
（4）在JSX創立DOM的時分，一切的節點，有必要有唯一的根元素進行包裹。
（5）假如要寫注釋，注釋有必要放到 {} 內部。例如：
// 運用JSX語法 創立虛擬DOM目標var vDom = (// 這一行是注釋
Hello, React!
千古壹號
{/*這一行也是注釋 */});
最后，再舉個比如：
Document
//頁面中的實在容器元素var containDiv = document.getElementById("app");var arr = []for (var i = 0; i < 6; i++) {var p = 這個是p標簽
// 注意這個地方的寫法： key = {i}arr.push(p)}//1、運用JSX語法 創立虛擬DOM目標var vDom = (Hello, React!{arr});//2、烘托虛擬DOM目標ReactDOM.render(vDom, containDiv); // 參數1：虛擬DOM目標；參數2：頁面中的容器
4.React 組件 狀況(State&props) 生命周期詳解
React 把組件看成是一個狀況機（State Machines）。經過與用戶的交互，完結不同狀況，然后烘托 UI，讓用戶界面和數據保持一致。
React 里，只需更新組件的 state，然后依據新的 state 從頭烘托用戶界面（不要操作 DOM）。
創立組件的第一種方式:在React中，結構函數便是一個最根本的組件。假如想要把組件放到頁面中，能夠把結構函數的名稱當作組件的名稱，以 HTML標簽形式引進頁面中即可。創立組件的第二種方式：運用 class 關鍵字運用 function 創立的組件，叫做【無狀況組件】；運用 class 創立的組件，叫做【有狀況組件】。實質差異：有狀況組件和無狀況組件，最實質的差異，便是有無 state 特色。同時， class 創立的組件，有自己的生命周期函數，可是，function 創立的 組件，沒有自己的生命周期函數。
state 和 props 主要的差異在于 props 是不可變的，而 state 能夠依據與用戶交互來改動。這便是為什么有些容器組件需求界說 state 來更新和修改數據。 而子組件只能經過 props 來傳遞數據。
組件API
設置狀況：setState替換狀況：replaceState設置特色：setProps替換特色：replaceProps強制更新：forceUpdate獲取DOM節點：findDOMNode判別組件掛載狀況：isMounted
組件的生命周期可分成三個狀況：
在組件創立、到加載到頁面上運行、以及組件被毀掉的進程中，總是伴隨著各式各樣的事情，這些在組件特定時期，觸發的事情統稱為組件的生命周期。Mounting：已插入實在 DOMUpdating：正在被從頭烘托Unmounting：已移出實在 DOM
生命周期的辦法有：
componentWillMount 在烘托前調用,在客戶端也在服務端。componentDidMount : 在第一次烘托后調用，只在客戶端。之后組件現已生成了對應的DOM結構，能夠經過this.getDOMNode()來進行拜訪。 假如你想和其他JavaScript結構一起運用，能夠在這個辦法中調用setTimeout, setInterval或許發送AJAX請求等操作(防止異步操作阻塞UI)。componentWillReceiveProps 在組件接納到一個新的 prop (更新后)時被調用。這個辦法在初始化render時不會被調用。shouldComponentUpdate 回來一個布爾值。在組件接納到新的props或許state時被調用。在初始化時或許運用forceUpdate時不被調用。能夠在你確認不需求更新組件時運用。componentWillUpdate在組件接納到新的props或許state但還沒有render時被調用。在初始化時不會被調用。componentDidUpdate 在組件完結更新后立即調用。在初始化時不會被調用。componentWillUnmount在組件從 DOM 中移除之前馬上被調用。1.組件創立階段
組件創立階段的生命周期函數，有一個明顯的特色：創立階段的生命周期函數，在組件的一輩子中，只履行一次。
getDefaultProps初始化 props 特色默認值。
getInitialState初始化組件的私有數據。由于 state 是界說在組件的 constructor 結構器當中的，只需new 了 class類，必定會調用 constructor結構器。
componentWillMount()組件將要被掛載。此刻還沒有開端烘托虛擬DOM。
在這個階段，不能去操作DOM元素，但能夠操作特色、狀況、function。相當于 Vue 中的Create()函數。
render()第一次開端烘托真實的虛擬DOM。當render履行完，內存中就有了完好的虛擬DOM了。
意思是，此刻，虛擬DOM在內存中創立好了，可是還沒有掛在到頁面上。
在這個函數內部，不能去操作DOM元素，由于還沒return之前，虛擬DOM還沒有創立；當return履行結束后，虛擬DOM就創立好了，可是還沒有掛在到頁面上。
componentDidMount()當組件（虛擬DOM）掛載到頁面之后，會進入這個生命周期函數。
只需進入到這個生命周期函數，則必定闡明，頁面上現已有可見的DOM元素了。此刻，組件現已顯示到了頁面上，state上的數據、內存中的虛擬DOM、以及瀏覽器中的頁面，現已徹底保持一致了。
當這個辦法履行完，組件就進入都了 運行中 的狀況。所以說，componentDidMount 是創立階段的最后一個函數。
在這個函數中，咱們能夠放心的去 操作 頁面上你需求運用的 DOM 元素了。假如咱們想操作DOM元素，最早只能在 componentDidMount 中進行。相當于 Vue 中的 mounted() 函數
2、組件運行階段
有一個明顯的特色，依據組件的state和props的改動，有選擇性的觸發0次或屢次。
componentWillReceiveProps()組件將要接納新特色。只有當父組件中，經過某些事情，從頭修改了 傳遞給 子組件的 props 數據之后，才會觸發這個鉤子函數。
shouldComponentUpdate()判別組件是否需求被更新。此刻，組件尚未被更新，可是，state 和 props 肯定是最新的。
componentWillUpdate()組件將要被更新。此刻，組件還沒有被更新，在進入到這個生命周期函數的時分，內存中的虛擬DOM還是舊的，頁面上的 DOM 元素也是舊的。（也便是說，此刻操作的是舊的 DOM元素）
render此刻，又要依據最新的 state 和 props，從頭烘托一棵內存中的 虛擬DOM樹。當 render 調用結束，內存中的舊DOM樹，現已被新DOM樹替換了！此刻，虛擬DOM樹現已和組件的 state 保持一致了，都是最新的；可是頁面還是舊的。
componentDidUpdate此刻，組件完結更新，頁面被從頭烘托。此刻，state、虛擬DOM 和 頁面現已徹底保持同步。
3、組件毀掉階段
一輩子只履行一次。
componentWillUnmount: 組件將要被卸載。此刻組件還能夠正常運用。生命周期對比：
vue中的生命周期圖React Native 中組件的生命周期
組件生命周期的履行次序總結
1、Mounting：
constructor()componentWillMount()render()componentDidMount()2、Updating：
componentWillReceiveProps(nextProps)：接納父組件傳遞過來的特色shouldComponentUpdate(nextProps, nextState)：一旦調用 setState，就會觸發這個辦法。辦法默認 return true；假如 return false，后續的辦法就不會走了。componentWillUpdate(nextProps, nextState)render()componentDidUpdate(prevProps, prevState)3、Unmounting：
componentWillUnmount()5.React 事情處理
React 元素的事情處理和 DOM 元素類似。可是有一點語法上的不同:
React 事情綁定特色的命名采用駝峰式寫法，而不是小寫。假如采用 JSX 的語法你需求傳入一個函數作為事情處理函數，而不是一個字符串(DOM 元素的寫法)
//HTML 一般寫法是：激活按鈕//React 中寫法為：激活按鈕
瀏覽器的功能：顯示在計算機中的網頁實際上是位于許多不同的計算機文件中的元素的集合。因此，瀏覽器的功能首先是檢索文件，然后將頁面的各個部分組合起來，根據文本中的HTML命令排列這些部分。
瀏覽器內核分為兩部分：渲染引擎 和 JavaScript引擎。其中，渲染引擎是瀏覽器內核中比較重要的部分，現在所說的內核一般指的都是渲染引擎。
常見的瀏覽器內核：
四大內核：
1、Trident內核，也稱IE內核。
2、Webkit內核。
3、Gecko內核。
4、Presto內核。
各瀏覽器所用內核：
1、IE瀏覽器內核：Trident內核，也是俗稱的IE內核；
2、Chrome瀏覽器內核：統稱為Chromium內核或Chrome內核，以前是Webkit內核，現在是Blink內核；
3、Firefox瀏覽器內核：Gecko內核，俗稱Firefox內核；
4、Safari瀏覽器內核：Webkit內核；
5、Opera瀏覽器內核：最初是自己的Presto內核，后來是Webkit，現在是Blink內核；
6、360瀏覽器、獵豹瀏覽器內核：IE+Chrome雙內核；
7、搜狗、遨游、QQ瀏覽器內核：Trident（兼容模式）+Webkit（高速模式）；
8、百度瀏覽器、世界之窗內核：IE內核；
9、2345瀏覽器內核：以前是IE內核，現在也是IE+Chrome雙內核；
1. 從網絡層（networking）獲取請求文檔的內容，解析HTML/SVG/XHTML，形成一個DOM樹(DOM Tree)
默認情況下，加載和執行javascript都會阻止DOM tree的構建。
內部js腳本會在引入它的位置執行，外聯腳本則是加載完畢后執行。
注意：因此，不管是內聯腳本還是外部腳本，都應該盡量放在標簽結束之前（除非某些腳本需要在頁面加載完之前調用），這樣可以保證在運行腳本之前，頁面已經基本加載完成。
2. 解析CSS代碼，計算出最終的樣式數據，產生一個CSS規則樹(CSS Rule Tree)
解析CSS的時候的順序：瀏覽器默認設置，用戶設置，外鏈樣式，內聯樣式，html中的style
3. 解析JavaScript
通過DOM API來操作DOM Tree，通過CSSOM API來操作CSS Rule Tree
4. 解析完上述三種代碼之后，就構建一個渲染樹 (rendering tree)
渲染樹和DOM樹有所不同：
渲染樹中不包括不需要渲染的節點 : html head meta link style script display : none的元素，渲染樹中每一個節點都儲存有對應的CSS屬性，加載css會阻止render tree的構建
5. 開始渲染，頁面初始化時會發生一次回流。
1. 什么是頁面的重繪和回流
回流：當render tree中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。（需要改變布局、幾何屬性）
重繪：當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪。
因此回流必定影響重繪，重繪不一定引起回流。回流比重繪的代價要更高
2. 回流何時發生
當頁面布局和幾何屬性改變時就需要回流。下述情況會發生瀏覽器回流：
1、添加或者刪除可見的DOM元素；
2、元素位置改變；
3、元素尺寸改變——邊距、填充、邊框、寬度和高度
4、內容改變——比如文本改變或者圖片大小改變而引起的計算值寬度和高度改變；
5、頁面渲染初始化；
6、瀏覽器窗口尺寸改變——resize事件發生時；（所以需要函數節流）
3. 瀏覽器對回流和重繪做的優化工作
瀏覽器會維護1個隊列，把所有會引起回流、重繪的操作放入這個隊列，等隊列中的操作到了一定的數量或者到了一定的時間間隔，瀏覽器就會釋放隊列，進行一個批處理。這樣就會讓多次的回流、重繪變成一次回流重繪。(有點類似文檔碎片frameElement感覺)
雖然有了瀏覽器的優化，但有時候我們寫的一些代碼可能會強制瀏覽器提前釋放隊列，這樣瀏覽器的優化可能就起不到作用了。當你請求向瀏覽器請求一些 style信息的時候，就會讓瀏覽器釋放隊列，比如：
offsetTop, offsetLeft, offsetWidth, offsetHeight scrollTop/Left/Width/Height clientTop/Left/Width/Height width,height 請求了getComputedStyle(), 或者 IE的 currentStyle
當你請求上面的一些屬性的時候，瀏覽器為了給你最精確的值，需要釋放隊列，因為隊列中可能會有影響到這些值的操作。即使你獲取元素的布局和樣式信息跟最近發生或改變的布局信息無關，瀏覽器都會強行刷新渲染隊列。
4. 減少回流reflow和重繪repaint
(1) 不要一條一條修改DOM的樣式
替換方法：
預先定義好css，然后修改DOM的className，修改style的style.cssText
(2) 把DOM離線后修改
先把DOM給display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他顯示出來。clone一個DOM結點到內存里，然后想怎么改就怎么改，改完后，和在線的那個的交換一下。
(3) 不要把DOM結點的屬性值放在一個循環里當成循環的變量。
(4) 盡可能修改層級比較低的DOM
(5) 為動畫的HTML元素使用fixed或者absolute的position
修改他們的CSS是不會reflow的，因為使用fixed或者absolute的元素會脫離文檔流
(6) 千萬不要使用table布局
注意：CSS匹配DOM Tree主要是從右到左解析CSS的Selector，CSS匹配HTML元素是一個相當復雜和有性能問題的事情。DOM樹要小，CSS盡量用id和class，千萬不要過渡層疊下去。
歡迎關注。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
