整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
ES6（ECMAScript 2015）及之后的版本引入了許多讓JavaScript編程更加高效、簡潔的新特性。以下是其中一些關鍵特性及示例：
const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(n => n * n); // 使用箭頭函數const name = "World";
console.log(`Hello, ${name}!`); // 使用模板字符串Promise是解決JavaScript異步編程的一個重要概念。它代表了一個尚未完成，但未來會完成的操作。Promise有三種狀態：pending（等待中）、fulfilled（已成功）和rejected（已失敗）。
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Data fetched"), 2000);
});
};
fetchData().then(data => console.log(data)); // 輸出：Data fetchedasync和await是基于Promise的語法糖，使異步代碼看起來和同步代碼類似，從而簡化了異步操作的書寫。
const fetchData = async () => {
const data = await new Promise((resolve, reject) => {
setTimeout(() => resolve("Data fetched with async/await"), 2000);
});
console.log(data);
};
fetchData(); // 輸出：Data fetched with async/await現代JavaScript框架，如Vue.js，大量使用了ES6+的新特性來提升開發效率和程序的可讀性。例如，Vue 3 利用了Proxy來實現響應式系統，同時也在其組件系統中廣泛使用了ES6+的特性，如模塊導入、箭頭函數等。
函數式編程是一種編程范式，它將計算視為數學函數的評估，并避免改變狀態和可變數據。JavaScript作為一種多范式語言，支持函數式編程的核心概念，如純函數、高階函數等。
const pureAdd = (a, b) => a + b; // 純函數const withLogging = fn => (...args) => {
console.log(`Calling function with arguments: ${args}`);
const result = fn(...args);
console.log(`Function returned: ${result}`);
return result;
};
const add = (a, b) => a + b;
const addWithLogging = withLogging(add);
addWithLogging(2, 3); // 日志輸出調用細節和結果在現代Web開發中，構建高效的動態用戶界面(UI)是至關重要的。JavaScript通過操作DOM（文檔對象模型）使得開發者能夠創建富交互的Web應用。通過監聽用戶的行為（如點擊、滾動等事件），JavaScript可以動態地修改HTML和CSS，提供動態內容的加載、動畫效果以及即時的用戶反饋。
document.getElementById('addButton').addEventListener('click', function() {
const listItem = document.createElement('li');
listItem.textContent = '新的列表項';
document.getElementById('myList').appendChild(listItem);
});隨著單頁應用（SPA）的流行，狀態管理變得越來越復雜。狀態管理是指在用戶與應用交互過程中，對狀態的有效管理和更新。常見的狀態管理方案包括Redux、Vuex（Vue的狀態管理方案）、以及React的Context API。
Redux示例：
Redux通過一個全局的store來存儲狀態，組件通過dispatch發送action來更新狀態，通過subscribe監聽狀態變化。
// 創建Reducer
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
// 創建store
let store = Redux.createStore(counter);
store.subscribe(() => console.log(store.getState()));
// 發送action
store.dispatch({ type: 'INCREMENT' });模塊化是指將大型的JavaScript應用分解成小的、可維護的、可重用的代碼塊。ES6引入了import和export語法，使得模塊化開發成為可能。
示例：
// math.js
export function add(x, y) {
return x + y;
}
// app.js
import { add } from './math.js';
console.log(add(2, 3));Web性能優化是提高用戶體驗的關鍵。它包括減少頁面加載時間、優化渲染路徑、減少JavaScript執行時間等。一些常見的性能優化技巧包括使用壓縮和合并資源文件、懶加載圖片和腳本、利用瀏覽器緩存等。
懶加載圖片示例：
使用Intersection Observer API實現圖片的懶加載。
document.addEventListener("DOMContentLoaded", function() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img);
});
});JavaScript的工程化是指使用工具和流程來提高開發效率和代碼質量。自動化測試則確保代碼更改不會破壞現有功能。
構建工具示例：Webpack
Webpack是一個模塊打包器，它可以處理依賴并將模塊打包成靜態資源。
自動化測試示例：Jest
Jest是一個JavaScript測試框架，支持單元測試和集成測試。
// sum.js
function sum(a, b) {
return a + b;
}
module.exports = sum;
// sum.test.js
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});在Web開發中，安全是一個重要考慮因素。常見的Web安全問題包括跨站腳本攻擊（XSS）、跨站請求偽造（CSRF）、SQL注入等。
// 使用DOMPurify清理HTML
const clean = DOMPurify.sanitize(dirtyHTML);
document.getElementById('someDiv').innerHTML = clean;響應式編程是一種異步編程范式，關注于數據流和變化傳播。RxJS是一個庫，用于使用可觀察對象來編寫響應式編程代碼，使得處理事件、異步請求和回調更加簡潔。
示例：從輸入框中捕獲輸入事件
const { fromEvent } = rxjs;
const input = document.querySelector('input');
const observable = fromEvent(input, 'input');
observable.subscribe(event => console.log(event.target.value));在JavaScript項目中的選擇：如果項目需要高度靈活的數據查詢能力，GraphQL可能是更好的選擇。如果項目有簡單的數據需求，或者已經存在RESTful API的基礎設施，那么繼續使用REST可能更合適。
TypeScript是JavaScript的一個超集，添加了類型系統和對ES6+的支持。TypeScript提供的類型安全可以幫助開發者在編譯時期捕獲錯誤，提高代碼的質量和可維護性。
示例：一個簡單的TypeScript函數
function greet(person: string, date: Date): string {
return `Hello ${person}, today is ${date.toDateString()}!`;
}
console.log(greet("Maddy", new Date()));漸進式Web應用（PWA）是一種可以提供類似于原生應用體驗的Web應用。通過Service Workers，PWA可以在離線時仍然提供核心功能。
注冊一個Service Worker示例：
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
console.log('Service Worker registered with scope:', registration.scope);
}).catch(function(err) {
console.log('Service Worker registration failed:', err);
});
}在sw.js中，你可以緩存關鍵資源，攔截網絡請求，并提供離線支持。
WebAssembly (Wasm) 是一種新的編碼方式，讓在網頁中運行的代碼可以接近原生執行速度，通過提供一個新的、高效的格式來在網頁上運行代碼。它對前端開發的主要影響是性能的顯著提升，特別是對于需要大量計算的應用，如游戲、視頻編輯、圖像處理等。
使用場景：
示例：將C/C++代碼編譯為WebAssembly并在網頁中運行。
<script>
fetch('example.wasm').then(response =>
response.arrayBuffer()
).then(bytes =>
WebAssembly.instantiate(bytes)
).then(results => {
results.instance.exports.exportedFunc();
});
</script>D3.js 是一個JavaScript庫，用于使用Web標準制作動態、交互式的數據可視化。它強大之處在于能夠綁定任意數據到DOM元素，并且對數據進行動態變化的表示，如通過SVG、Canvas來繪圖。
示例：使用D3.js創建一個簡單的柱狀圖。
<script src="https://d3js.org/d3.v6.js"></script>
<script>
const data = [4, 8, 15, 16, 23, 42];
const width = 420,
barHeight = 20;
const x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, width]);
const chart = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
const bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", (d, i) => "translate(0," + i * barHeight + ")");
bar.append("rect")
.attr("width", x)
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", d => x(d) - 3)
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(d => d);
</script>在前端安全中，防范XSS和CSRF攻擊是兩個主要的考慮點。
服務端渲染（SSR）是指JavaScript和應用程序界面在服務器上渲染成HTML，然后發送到客戶端的過程。這對SEO非常有利，因為搜索引擎爬蟲可以直接分析渲染好的頁面內容。
優勢：
前端監控是指對Web應用的性能、錯誤、用戶行為等進行實時監控。這有助于及時發現問題，優化用戶體驗和應用性能。
性能指標：
工具：Google的Lighthouse、WebPageTest、Chrome DevTools等都是優秀的性能監控和分析工具。
CSS-in-JS 是一種在JavaScript中編寫CSS的技術，它允許開發者在JS文件中直接包含CSS樣式，從而使樣式和組件邏輯緊密耦合。這種做法有助于避免樣式沖突，使得組件更加可重用。
框架選擇：流行的CSS-in-JS庫包括Styled-components、Emotion 和 JSS。這些庫提供了將CSS寫入JavaScript的能力，同時保持了CSS的動態性和復用性。
代碼示例（使用Styled-components）：
import styled from 'styled-components';
const Button = styled.button`
background: palevioletred;
color: white;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
// 在組件中使用
render() {
return <Button>點擊我</Button>;
}Web組件 是一套不同的技術，允許開發者創建可重用的定制元素 — 并且它們的功能性在Web應用中是封裝的。Web組件的核心技術包括Custom Elements、Shadow DOM和HTML templates。
微前端 是一種設計思想，允許將前端應用分解為更小、獨立交付的片段。每個團隊可以獨立開發和部署自己的功能區塊，最終集成到一個更大的應用中。微前端架構的目的是促進團隊之間的技術棧獨立性，加速開發流程。
使用JavaScript進行跨平臺開發的策略包括React Native和Electron。
這些工具和框架讓開發者能夠重用代碼并保持應用在不同平臺間的一致性。
設計模式是解決常見問題的可重用解決方案。
let instance = null;
class Singleton {
constructor() {
if (!instance) {
instance = this;
}
return instance;
}
}class Subject {
constructor() {
this.observers = [];
}
subscribe(observer) {
this.observers.push(observer);
}
notify(data) {
this.observers.forEach(observer => observer.update(data));
}
}JavaScript的垃圾回收機制是自動的，但是開發者仍需注意避免內存泄漏。內存泄漏通常是由不再需要的對象引用導致的，使得垃圾回收器無法釋放它們。
WebGL是一個JavaScript API，用于在不需要插件的情況下，在任何兼容的Web瀏覽器內渲染高性能的交互式2D和3D圖形。它通過引入與OpenGL ES 2.0緊密一致的API，使得可以在HTML <canvas> 元素中使用，從而充分利用用戶設備提供的硬件圖形加速?。為了開始使用WebGL，你需要創建一個canvas元素并在你的JavaScript代碼中初始化WebGL上下文??。對于想要深入了解和實踐WebGL，探索3D游戲開發，MDN提供了關于如何構建基本示例，包括使用A-Frame、Babylon.js、PlayCanvas和Three.js等流行框架的步驟??。
Node.js的出現使得JavaScript能夠被用于服務器端編程，從而開啟了全棧開發的大門，允許開發者使用同一種語言來編寫前端和后端代碼。這意味著開發者可以構建和維護具有復雜功能的Web應用，同時保持技術棧的一致性。Node.js的非阻塞I/O模型特別適合處理大量并發連接，使其成為構建高性能Web應用的理想選擇。
隨著前端應用的復雜性增加，采用恰當的架構模式變得至關重要。微服務架構允許將應用分解為小的、松耦合的服務，每個服務執行特定的業務功能，并通過輕量級通信機制進行交互。這種方式提高了應用的可維護性和可擴展性。另一種模式是后端為前端（BFF），它介于客戶端和微服務之間，為客戶端提供精確的API，進一步優化了數據交換和應用性能。
為了觸及全球用戶，前端應用需要支持多語言。國際化（i18n）是設計和開發應用以便它可以輕松地適配不同語言和地區，而不需要進行重大改動的過程。本地化（l10n）是將應用適配到特定區域或語言的過程，包括翻譯文本和適配格式（如日期和貨幣）。通過使用國際化庫如i18next，開發者可以更容易地實現多語言支持。
Web3和區塊鏈技術正在改變前端開發的景觀，提供了創建去中心化應用（DApps）的新方法。這些應用運行在區塊鏈上，提供高度的透明度、安全性和不可篡改性。Web3技術使得前端開發者能夠直接與區塊鏈交互，為用戶提供全新的在線交互體驗。隨著這些技術的成熟和發展，預計將會出現更多創新的Web應用和服務。
如果喜歡，可以點贊收藏，關注喲~
React 是 Facebook 在 2011 年開發的前端 JavaScript 庫。
它遵循基于組件的方法，有助于構建可重用的UI組件。
它用于開發復雜和交互式的 Web 和移動 UI。
盡管它僅在 2015 年開源，但有一個很大的支持社區。
它使用虛擬DOM而不是真正的DOM。
它可以用服務器端渲染。
它遵循單向數據流或數據綁定。
它提高了應用的性能
可以方便地在客戶端和服務器端使用
由于 JSX，代碼的可讀性很好
React 很容易與 Meteor，Angular 等其他框架集成
使用React，編寫UI測試用例變得非常容易
React 只是一個庫，而不是一個完整的框架
它的庫非常龐大，需要時間來理解
新手程序員可能很難理解
編碼變得復雜，因為它使用內聯模板和 JSX
JSX 是J avaScript XML 的簡寫。是 React 使用的一種文件，它利用 JavaScript 的表現力和類似 HTML 的模板語法。這使得 HTML 文件非常容易理解。此文件能使應用非?？煽?，并能夠提高其性能。下面是JSX的一個例子：
render(){
return(
<div>
<h1> Hello World from Edureka!!</h1>
</div>
);
}Virtual DOM 是一個輕量級的 JavaScript 對象，它最初只是 real DOM 的副本。它是一個節點樹，它將元素、它們的屬性和內容作為對象及其屬性。 React 的渲染函數從 React 組件中創建一個節點樹。然后它響應數據模型中的變化來更新該樹，該變化是由用戶或系統完成的各種動作引起的。
Virtual DOM 工作過程有三個簡單的步驟。
每當底層數據發生改變時，整個 UI 都將在 Virtual DOM 描述中重新渲染。
然后計算之前 DOM 表示與新表示的之間的差異。
完成計算后，將只用實際更改的內容更新 real DOM。
瀏覽器只能處理 JavaScript 對象，而不能讀取常規 JavaScript 對象中的 JSX。所以為了使瀏覽器能夠讀取 JSX，首先，需要用像 Babel 這樣的 JSX 轉換器將 JSX 文件轉換為 JavaScript對象，然后再將其傳給瀏覽器。
組件是 React 應用 UI 的構建塊。這些組件將整個 UI 分成小的獨立并可重用的部分。每個組件彼此獨立，而不會影響 UI 的其余部分。
每個React組件強制要求必須有一個 render()。它返回一個 React 元素，是原生 DOM 組件的表示。如果需要渲染多個 HTML 元素，則必須將它們組合在一個封閉標記內，例如 form、group、div 等。此函數必須保持純凈，即必須每次調用時都返回相同的結果。
Props 是 React 中屬性的簡寫。它們是只讀組件，必須保持純，即不可變。它們總是在整個應用中從父組件傳遞到子組件。子組件永遠不能將 prop 送回父組件。這有助于維護單向數據流，通常用于呈現動態生成的數據。
狀態是 React 組件的核心，是數據的來源，必須盡可能簡單。基本上狀態是確定組件呈現和行為的對象。與props 不同，它們是可變的，并創建動態和交互式組件?？梢酝ㄟ^ this.state()訪問它們。
React 組件的生命周期有三個不同的階段：
初始渲染階段：這是組件即將開始其生命之旅并進入 DOM 的階段。
更新階段：一旦組件被添加到 DOM，它只有在 prop 或狀態發生變化時才可能更新和重新渲染。這些只發生在這個階段。
卸載階段：這是組件生命周期的最后階段，組件被銷毀并從 DOM 中刪除。
componentWillMount() – 在渲染之前執行，在客戶端和服務器端都會執行。
componentDidMount() – 僅在第一次渲染后在客戶端執行。
componentWillReceiveProps() – 當從父類接收到 props 并且在調用另一個渲染器之前調用。
shouldComponentUpdate() – 根據特定條件返回 true 或 false。如果你希望更新組件，請返回true 否則返回 false。默認情況下，它返回 false。
componentWillUpdate() – 在 DOM 中進行渲染之前調用。
componentDidUpdate() – 在渲染發生后立即調用。
componentWillUnmount() – 從 DOM 卸載組件后調用。用于清理內存空間。
在 React 中，事件是對鼠標懸停、鼠標單擊、按鍵等特定操作的觸發反應。處理這些事件類似于處理 DOM 元素中的事件。但是有一些語法差異，如：
用駝峰命名法對事件命名而不是僅使用小寫字母。
事件作為函數而不是字符串傳遞。
事件參數重包含一組特定于事件的屬性。每個事件類型都包含自己的屬性和行為，只能通過其事件處理程序訪問。
合成事件是圍繞瀏覽器原生事件充當跨瀏覽器包裝器的對象。它們將不同瀏覽器的行為合并為一個 API。這樣做是為了確保事件在不同瀏覽器中顯示一致的屬性。
需要管理焦點、選擇文本或媒體播放時
觸發式動畫
與第三方 DOM 庫集成
高階組件是重用組件邏輯的高級方法，是一種源于 React 的組件模式。 HOC 是自定義組件，在它之內包含另一個組件。它們可以接受子組件提供的任何動態，但不會修改或復制其輸入組件中的任何行為。你可以認為 HOC 是“純（Pure）”組件。
代碼重用，邏輯和引導抽象
渲染劫持
狀態抽象和控制
Props 控制
純（Pure） 組件是可以編寫的最簡單、最快的組件。它們可以替換任何只有 render() 的組件。這些組件增強了代碼的簡單性和應用的性能。
key 用于識別唯一的 Virtual DOM 元素及其驅動 UI 的相應數據。它們通過回收 DOM 中當前所有的元素來幫助 React 優化渲染。這些 key 必須是唯一的數字或字符串，React 只是重新排序元素而不是重新渲染它們。這可以提高應用程序的性能。
React 路由是一個構建在 React 之上的強大的路由庫，它有助于向應用程序添加新的屏幕和流。這使 URL 與網頁上顯示的數據保持同步。它負責維護標準化的結構和行為，并用于開發單頁 Web 應用。 React 路由有一個簡單的API。
Router 用于定義多個路由，當用戶定義特定的 URL 時，如果此 URL 與 Router 內定義的任何“路由” 的路徑匹配，則用戶將重定向到該特定路由。所以基本上我們需要在自己的應用中添加一個 Router 庫，允許創建多個路由，每個路由都會向我們提供一個獨特的視圖。
就像 React 基于組件一樣，在 React Router v4 中，API 是 ‘All About Components’。可以將 Router 可視化為單個根組件（BrowserRouter），其中我們將特定的子路由（route）包起來。
無需手動設置歷史值：在 React Router v4 中，我們要做的就是將路由包裝在BrowserRouter 組件中。
包是分開的：共有三個包，分別用于 Web、Native 和 Core。這使我們應用更加緊湊?；陬愃频木幋a風格很容易進行切換。
類組件（ Class components ）
無論是使用函數或是類來聲明一個組件，它決不能修改它自己的 props 。
所有 React 組件都必須是純函數，并禁止修改其自身 props 。
React是單項數據流，父組件改變了屬性，那么子組件視圖會更新。
屬性 props 是外界傳遞過來的，狀態 state 是組件本身的，狀態可以在組件中任意修改組件的屬性和狀態改變都會更新視圖。
函數組件（functional component）
函數組件接收一個單一的 props 對象并返回了一個React元素
區別
函數組件和類組件當然是有區別的，而且函數組件的性能比類組件的性能要高，因為類組件使用的時候要實例化，而函數組件直接執行函數取返回結果即可。為了提高性能，盡量使用函數組件。
state 和 props都是普通的JavaScript對象。盡管它們兩者都具有影響渲染輸出的信息，但它們在組件方面的功能不同。即
props 是一個從外部傳進組件的參數，主要作為就是從父組件向子組件傳遞數據，它具有可讀性和不變性，只能通過外部組件主動傳入新的 props 來重新渲染子組件，否則子組件的 props以及展現形式不會改變。
state 的主要作用是用于組件保存、控制以及修改自己的狀態，它只能在 constructor 中初始化，它算是組件的私有屬性，不可通過外部訪問和修改，只能通過組件內部的 this.setState來修改，修改 state 屬性會導致組件的重新渲染。
在調用方法之前，子類構造函數無法使用 this 引用 super() 。
在ES6中，在子類的 constructor 中必須先調用 super 才能引用 this 。
在 constructor 中可以使用 this.props
在HTML當中，像 input , textarea , 和 select 這類表單元素會維持自身狀態，并根據用戶輸入進行更新。但在React中，可變的狀態通常保存在組件的狀態屬性中，并且只能用setState() 方法進行更新。
非受控組件
非受控組件，即組件的狀態不受React控制的組件，例如下邊這個
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Demo1 extends Component {
render() {
return (
<input />
)
}
}
ReactDOM.render(<Demo1/>, document.getElementById('content'))在這個最簡單的輸入框組件里,我們并沒有干涉input中的value展示,即用戶輸入的內容都會展示在上面。如果我們通過props給組件設置一個初始默認值,defaultValue屬性是React內部實現的一個屬性,目的類似于input的placeholder屬性。
受控組件
同樣的，受控組件就是組件的狀態受React控制。上面提到過，既然通過設置input的value屬性, 無法改變輸入框值,那么我們把它和state結合在一起,再綁定onChange事件,實時更新value值就行了。
class Demo1 extends Component {
constructor(props) {
super(props);
this.state = {
value: props.value
}
}
handleChange(e) {
this.setState({
value: e.target.value
})
}
render() {
return (
<input value={this.state.value} onChange={e =>
this.handleChange(e)}/>
)
}
}hooks 是react 16.8 引入的特性，他允許你在不寫class的情況下操作state 和react的其他特性。
hooks 只是多了一種寫組件的方法，使編寫一個組件更簡單更方便，同時可以自定義hook把公共的邏輯提取出來，讓邏輯在多個組件之間共享。
Hook 是什么
Hook 是什么？ Hook 是一個特殊的函數，它可以讓你“鉤入” React 的特性。例如，useState 是允許你在 React 函數組件中添加 state 的 Hook。稍后我們將學習其他 Hook。
什么時候我會用 Hook？ 如果你在編寫函數組件并意識到需要向其添加一些 state，以前的做法是必須將其它轉化為 class。現在你可以在現有的函數組件中使用 Hook。
ReactHooks的優點
無需復雜的DOM結構
簡潔易懂
React的StrictMode是一種幫助程序組件，可以幫助您編寫更好的react組件，您可以使用包裝一些組件， 并且基本上可以：
驗證內部組件是否遵循某些推薦做法，如果不在控制臺中，則會發出警告。
驗證不贊成使用的方法，如果使用了嚴格模式，則會在控制臺中警告您。
通過識別潛在風險來幫助您預防某些副作用。
React文檔官網并未對 Context 給出“是什么”的定義，更多是描述使用的 Context 的場景，以及如何使用 Context 。
官網對于使用 Context 的場景是這樣描述的：
In Some Cases, you want to pass data through the component tree without having to pass the props down manuallys at every level. you can do this directly in React with the powerful "context" API.
簡單說就是，當你不想在組件樹中通過逐層傳遞 props 或者 state 的方式來傳遞數據時，可以：
使用 Context 來實現 跨層級 的組件數據傳遞。
使用props或者state傳遞數據，數據自頂下流。
使用 Context ，可以跨越組件進行數據傳遞。
React Fiber 并不是所謂的纖程（微線程、協程），而是一種基于瀏覽器的單線程調度算法，背后的支持 API 是大名鼎鼎的：requestIdleCallback。Fiberl是一種將 recocilation （遞歸 diff），拆分成無數個小任務的算法；它隨時能夠停止，恢復。停止恢復的時機取決于當前的一幀（16ms）內，還有沒有足夠的時間允許計算。
把樹形結構按照層級分解，只比較同級元素。
給列表結構的每個單元添加唯一的 key 屬性，方便比較。
React 只會匹配相同 class 的 component（這里面的 class 指的是組件的名字） 合并操作，調用 component 的 setState 方法的時候, React 將其標記為 dirty.
到每一個事件循環結束, React 檢查所有標記 dirty 的 component 重新繪制. 選擇性子樹渲染。開發人員可以重寫 shouldComponentUpdate 提高 diff 的性能。
setState 是修改其中的部分狀態，相當于 Object.assign，只是覆蓋，不會減少原來的狀態replaceState 是完全替換原來的狀態，相當于賦值，將原來的 state 替換為另一個對象，如果新狀態屬性減少，那么 state 中就沒有這個狀態了
React.createClass()、ES6 class 和無狀態函數。
在 React 組件中，應該在 componentDidMount 中發起網絡請求。這個方法會在組件第一次“掛載”(被添加到 DOM)時執行，在組件的生命周期中僅會執行一次。
更重要的是，你不能保證在組件掛載之前 Ajax 請求已經完成，如果是這樣，也就意味著你將嘗試在一個未掛載的組件上調用 setState，這將不起作用。
在 componentDidMount 中發起網絡請求將保證這有一個組件可以更新了。
<!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html>標簽之前。告知瀏覽器的解析器,用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
HTML5 不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）；
而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。**
首先：CSS規范規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，如div的display默認值為“block”，則為“塊級”元素；span默認display屬性值為“inline”，是“行內”元素。
（1）行內元素有：a b span img input select strong（強調的語氣）
（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見的空元素：
<img><input><link><meta>
鮮為人知的是：
<area><base><col><command><embed><keygen><param><source><track><wbr>
4.頁面導入樣式時，使用link和@import有什么區別？
link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;
頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題;
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎。
Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原為：Presto，現為：Blink;]
Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產生負面影響的元素：frame，frameset，noframes；
用正確的標簽做正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重，利于SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。
在用戶沒有連網時，可以正常訪問站點或應用，在用戶與網絡連接時更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處于離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
如何使用：
頁面頭部像下面一樣加入一個manifest的屬性；
在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
在離線狀態時，操作window.applicationCache進行需求實現。
在線的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據manifest文件的內容下載相應的資源并且進行離線存儲。如果已經訪問過app并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。
iframe會阻塞主頁面的Onload事件；
搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;
iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript
動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。
label標簽來定義表單控制間的關系,當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>WebSocket、也可以調用localstorge、cookies等本地存儲方式，還可以使用頁面的路有參數傳遞
localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發一個事件，
我們通過監聽事件，控制它的值來進行頁面信息通信；
14.如何在頁面上實現一個圓形的可點擊區域？
map+area或者svg
border-radius
純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等
title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；
strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：會重讀，而是展示強調內容。
i內容展示為斜體，em表示強調的文本；
h5新增的屬性
可以通過ele.dataset獲取到標簽上的data-x的屬性
返回一個對象
解決：解決方案是做成PNG8.
解決：方案是加一個全局的*{margin:0;padding:0;}來統一。
解決：解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)
漸進識別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“9”這一標記，將IE游覽器從所有情況中分離出來。 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
css
.bb{
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
解決：解決方法:統一通過getAttribute()獲取自定義屬性.
解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
解決：可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
解決：方法是改變CSS屬性的排列順序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
該標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，而 Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。
1）所有的標記都必須要有一個相應的結束標記
2）所有標簽的元素和屬性的名字都必須使用小寫
3）所有的XML標記都必須合理嵌套
4）所有的屬性必須用引號""括起來
5）把所有<和&特殊符號用編碼表示
6）給所有屬性賦一個值
7）不要在注釋內容中使“--”
8）圖片必須有說明文字
title是global attributes之一，用于為元素提供附加的advisory information。通常當鼠標滑動到元素上的時候顯示。
alt是<img>的特有屬性，是圖片內容的等價描述，用于圖片無法加載時顯示、讀屏器閱讀圖片?？商釄D片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。
改版的時候更方便 只要改css文件。
頁面加載速度更快、結構化清晰、頁面顯示簡潔。
表現與結構相分離。
易于優化（seo）搜索引擎更友好，排名更容易靠前。
派生選擇器（用HTML標簽申明）
id選擇器（用DOM的ID申明）
類選擇器（用一個樣式類名申明）
屬性選擇器（用DOM的屬性申明，屬于CSS2，IE6不支持，不常用，不知道就算了）
除了前3種基本選擇器，還有一些擴展選擇器，包括
后代選擇器（利用空格間隔，比如div .a{ }）
群組選擇器（利用逗號間隔，比如p,div,#a{ }）
那么問題來了，CSS選擇器的優先級是怎么樣定義的？
一般而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準確，它的優先級就越高。
復雜的計算方法：
用1表示派生選擇器的優先級
用10表示類選擇器的優先級
用100標示ID選擇器的優先級
div.test1 .span var 優先級 1+10 +10 +1
span#xxx .songs li 優先級1+100 + 10 + 1
xxx li 優先級 100 +1
那么問題來了，看下列代碼，<p>標簽內的文字是什么顏色的？
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body>
答案：red。與樣式定義在文件中的先后順序有關，即是后面的覆蓋前面的，與在<p class=’classB classA’>中的先后關系無關。
塊級元素(block)特性：
總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
內聯元素(inline)特性：
和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設置的），就是里面文字或圖片的大小。
那么問題來了，瀏覽器還有默認的天生inline-block元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。
外邊距重疊就是margin-collapse。
在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。
折疊結果遵循下列計算規則：
兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
兩個外邊距一正一負時，折疊結果是兩者的相加的和。
rgba()和opacity都能實現透明效果，但最大的不同是opacity作用于元素，以及元素內的所有內容的透明度，
而rgba()只作用于元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果?。?/p>
* 1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul < li）
6.后代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.偽類選擇器（a: hover, li: nth - child）
* 可繼承： font-size font-family color, UL LI DL DD DT;
* 不可繼承 ：border padding margin width height ;
* 優先級就近原則，樣式定義最近者為準;
* 載入樣式以最后載入的定位為準;優先級為:
!important > id > class > tag
important 比 內聯優先級高CSS3新增偽類舉例：
p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素。
:enabled、:disabled 控制表單控件的禁用狀態。
:checked，單選框或復選框被選中。給div設置一個寬度，然后添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;}
居中一個浮動元素
確定容器的寬高 寬500 高 300 的層
設置層的外邊距
.div {
Width:500px ; height:300px;//高度可以不設
Margin: -150px 0 0 -250px;
position:relative;相對定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
* IE瀏覽器的內核Trident、 Mozilla的Gecko、google的WebKit、Opera內核Presto；
* png24為的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.
* 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
* IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。
浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}
這種情況之下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)
漸進識別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。
接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
css
.bb{
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
* IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性.
解決方法:統一通過getAttribute()獲取自定義屬性.
* IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.
* （條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
* Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
超鏈接訪問過后hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
!important > id > class > 標簽
!important 比 內聯優先級高
可繼承： font-size font-family color, ul li dl dd dt;
不可繼承 ：border padding margin width height ;
講 DOM 先從 HTML 講起，講 HTML 先從 XML 講起。XML 是一種可擴展的標記語言，所謂可擴展就是它可以描述任何結構化的數據，它是一棵樹！
document.write只能重繪整個頁面
innerHTML可以重繪頁面的一部分
createDocumentFragment() //創建一個DOM片段
createElement() //創建一個具體的元素
createTextNode() //創建一個文本節點
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節點前插入一個新的子節點
getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強，會得到一個數組，其中包括id等于name值的)
getElementById() //通過元素Id，唯一性
attribute是dom元素在文檔中作為html標簽擁有的屬性；
property就是dom元素在js中作為對象擁有的屬性。
所以：
對于html的標準屬性來說，attribute和property是同步的，是會自動更新的，
但是對于自定義的屬性來說，他們是不同步的，
src用于替換當前元素，href用于在當前文檔和引用資源之間確立聯系。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。
Src source,指向外部資源的位置,如果我們添加<script src ="js.js"></script>瀏覽器會暫停其他資源的下載和處理,直到該資源加載,編譯,執行完畢(圖片和框架也是如此),這也就是為什么js腳本要放在底部。
src用于替換當前元素,href用于在當前文檔和引入資源之間建立聯系。
cookie 本身不是用來做服務器端存儲的（計算機領域有很多這種“狗拿耗子”的例子，例如 CSS 中的 float），它是設計用來在服務器和客戶端進行信息傳遞的，因此我們的每個 HTTP 請求都帶著 cookie。但是 cookie 也具備瀏覽器端存儲的能力（例如記住用戶名和密碼），因此就被開發者用上了。
使用起來也非常簡單，document.cookie = ....即可。
但是 cookie 有它致命的缺點：
存儲量太小，只有 4KB
所有 HTTP 請求都帶著，會影響獲取資源的效率
API 簡單，需要封裝才能用
后來，HTML5 標準就帶來了sessionStorage和localStorage，先拿localStorage來說，它是專門為了瀏覽器端緩存而設計的。
存儲量增大到 5MB
不會帶到 HTTP 請求中
API 適用于數據存儲 localStorage.setItem(key, value) localStorage.getItem(key)
sessionStorage的區別就在于它是根據 session 過去時間而實現，而localStorage會永久有效，應用場景不同。例如，一些需要及時失效的重要信息放在sessionStorage中，一些不重要但是不經常設置的信息，放在localStorage中。
標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要變動頁面內容、提供打印版本而不需要復制內容、提高網站易用性；
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
