① 前端開發主要學哪些內容
1、HTML超文本標記性語言：盡量掌握盡可能多的標記或標記對。
（1）必須掌握的標記或標記對包括：<html>、<head>、<title>、<body>、<h1>、<p>、<a>、<img>、<table>、<tr>、<td>、<th>、<form>、<input>、<select>、<option>、<textarea>、<div>、<span>、<script>、<link>等。
4、操作系統
了解Unix和Linux的基本知識，對於開發人員有益無害。
5、網路伺服器
了解Web伺服器，包括對Apache的基本配置，htaccess配置技巧的掌握等。
② 前端map標簽裡面放area標簽就能實現圖片熱點嗎
不是的，圖片還要通過usemap關聯對應的map。
1. map標簽定義一個圖像映射。
2. map內的area元素定義圖像映射中的區域，可通過shape定義區域形狀，coords定義形狀的坐標，href定義鏈接。
3. 圖片中必須指定usemap，並通過id關聯對應的map標簽。
③ 前端開發應該學習什麼內容
前端開發應該學習的內容有PC端網站布局、HTML5+CSS3基礎項目、WebAPP頁面布局等。
學習web前端開發，網頁開發工具有FrontPage，會用 Word 的人很容易學會FrontPage。還有一個常用的是Dreamweaver。這兩種都是使用最多的HTML網頁製作工具。
4、html5和css3。可以先了解一下，然後再入手。畢竟IE的瀏覽器大多還不支持。
5、瀏覽器兼容。懂web標准，熟練手寫 xhtml css3 並符合 符合w3c標准。代碼能兼容主流瀏覽器Firfox，Chrome、Safari、IE、Opera。雖然IE6很多都不兼容，但現在還使用的人還是有的。
6、熟悉一門後台編程語言 asp、php、jsp等。
④ 常見的前端性能優化手段都有哪些都有多大收益
規則01：盡量減少HTTP請求
前端優化的黃金准則指導著前端頁面的優化策略：只有10%-20%的最終用戶響應時間花在接受請求的HTML文檔上，剩下的80%-90%時間花在為HTML文檔所引用的所有組件（圖片、腳本、樣式表等）進行的HTTP請求上。因此，改善響應時間的最簡單途徑就是減少組件的數量，並由此減少HTTP請求的數量。當然很多人就會說，既然這樣，那我們就減少頁面組件的數量不就OK了嗎？那你試試，你會掀起一場性能優化和產品設計之間的大PK。
所以，我們要減少HTTP請求是要平衡性能和設計的。如果找到這個平衡點呢？書中從以下幾個方面做了介紹，我逐一說明：
① 圖片地圖
初看「圖片地圖」四個字，對非專業的前端人員來說一頭霧水，我的第一印象就是這樣的，咱們以京東的移動站點為例，右側用戶和購物車的圖標，正常實現我會選擇如下方式：
<a href=」用戶跳轉頁面URL」>
<div class=」定義用戶icon顯示的樣式表」></div>
</a>
<a href=」購物車跳轉頁面URL」>
<div class=」 定義用戶icon顯示的樣式表」></div>
</a>
這種方式無可厚非的，但是兩張圖片就有兩個HTTP請求，這明顯是增加了頁面中的HTTP請求。那麼我們可以把這兩個HTTP請求變成一個嗎？
答案當然是可以的，這就是圖片地圖：允許在一張圖片上關聯多個URL，而目標URL的選擇取決於用戶單擊了圖片上的哪個位置。
這樣上面京東兩個圖標合並成一張圖片，這樣圖片的HTTP請求就減少了一個。
示例代碼如下：
<img src=合並後的圖片>
<map name=」map1」>
<areashape=」rect」 coords=」0,0,40,40」 href=」用戶跳轉頁面URL」>
<areashape=」rect」 coords=」50,0,90,40」 href=」購物車跳轉頁面URL」>
</map>
不過圖片地圖只支持矩形形狀，其他形狀不支持。
② 請CSS喝「雪碧」（CSS Sprites）CSS Sprites一句話：將多個圖片合並到一張單獨的圖片，這樣就大大減少了頁面中圖片的HTTP請求。
③ 內聯圖片和腳本使用data:URL（Base64編碼）模式直接將圖片包含在Web頁面中而無需進行HTTP請求。但是此種方法存在明顯缺陷：- 不受IE的歡迎；- 圖片太大不宜採用這種方式，因為Base64編碼之後會增加圖片大小，這樣頁面整體的下載量會變大；- 內聯圖片在頁面跳轉的時候不會被緩存。（大圖片可以使用瀏覽器的本地緩存，在首次訪問的時候保存到瀏覽器緩存中，典型的是HTML5的manifest緩存機制以及LocalStorage等）。
④ 樣式表的合並將頁面樣式定義、腳本、頁面本身代碼嚴格區分開，但是樣式表、腳本也不是分割越細越好，因為沒多引用一個樣式表就增加一次HTPP請求，能合並的樣式表盡量合並。一個網站有一個公用樣式表定義，每個頁面只要有一個樣式表就OK啦。
通過以上四個努力之後，你會發現你的網頁響應時間最多能減少一半，這不是作者說大話，也不是我狂吹，我親手用我的移動網站首頁做了一個嘗試，本地測試之後響應時間能減少40%左右。所以減少頁面HTTP請求數量，是一個很重要的原則。遵循此原則可以同時改善首次訪問和後續訪問的響應時間，而每一個網站的首次響應時間會決定用戶之後還來不來的重要原因。
規則02：使用內容發布網路（CDN的使用）
什麼叫內容發布網路（CDN）？它是一組分布在多個不同地理位置的Web伺服器，用於更加有效地向用戶發布內容。主要用於發布頁面靜態資源：圖片、css文件、js文件等。如此，能輕易地提高響應速度。關於CDN的具體詳細原理以及優缺點，各位可以自行詢問度娘或者google。
規則03：添加Expires頭
瀏覽器使用緩存來減少HTTP請求的數據，並減小HTTP響應的大小，使頁面載入更快。Web伺服器使用Expires頭來告訴瀏覽器它可以使用一個組件的當前副本，直到指定的deadline為止。HTTP規范中稱此頭為：在這一時間之後響應被認為失效。個人對這塊表示不想使用，其實就是一句話，把一些css、js、圖片在首次訪問的時候全部緩存到瀏覽器本地，從我做移動網站的過程中發現，其實沒有這么復雜，完全可以使用HTML5提供的本地緩存機制就OK了。關於HTML5本地緩存機制，各位可以查閱相關資料。後續我也會對HTML5的緩存機制進行介紹的。
規則04：壓縮組件（使用Gzip方式）
書中關於壓縮從gzip壓縮方式到如何壓縮講了很多，我想直接跳過，對於做PC網站或者移動網站來說，急需要壓縮的是css文件和js文件，至於如何壓縮，網上有很多在線工具，去挑選一個自己用的順手看的順眼的就好，當然也有人選擇對HTML進行壓縮，這樣也可以。但是實際工作中我沒有這么做。之所謂沒有這么做，是因為我覺得很麻煩。不要鄙視我，畢竟我不是一個真正意義上的前端工程師，哈哈！
規則05：將CSS樣式表放在頂部
如果將css樣式定義放在頁面中或者頁面底部，會出現短暫白屏或者某一區域短暫白板的情況，這和瀏覽器的運營機制有關的，不管頁面如何載入，頁面都是逐步呈現的。所以在每做一個頁面的時候，用Link標簽把每一個樣式表定義放在head中。
規則06：將javascript腳本放在底部
瀏覽器在載入css文件時，頁面逐步呈現會被阻止，直到所有css文件載入完畢，所以要把css文件的引用放到head中去，這樣在載入css文件時不會組織頁面的呈現。但是對於js文件，在使用的時候，它下面所有也頁面內容的呈現都會被阻塞，將腳本放在頁面越靠下的地方，就意味著越多的內容能夠逐步呈現。
規則07：避免使用CSS表達式
CSS表達式是動態玩CSS的一種很強大的方式，但是強大的同時也存在很高的危險性。因為css表達式的頻繁求值會導致css表達式性能低下。如果真想玩css表達式，可以選用只求值一次的表達式或者使用事件處理來改變css的值。
規則08：使用外部javascript和CSS內聯js和css其實比外部文件有更快的響應速度，那為什麼還要用外部呢？因為使用外部的js和css可以讓瀏覽器緩存他們，這樣不僅HTML文檔大小減少，而且不會增加HTTP請求數量。另外，使用外部js和css可以提高組件的可復用性。
規則09：減少DNS查詢
DNS查詢有時間開銷，通常一個瀏覽器查找一個給定主機名的IP地址需要20-120ms。緩存DNS：緩存DNS查詢可以很好地提高網頁性能，一旦緩存了DNS查詢，之後對於相同主機名的請求就無需進行再次的DNS查找，至少短時間內不需要。所以在使用頁面中URL、圖片、js文件、css文件等時，不要使用過多不同的主機名。
規則10：精簡javascript
如何精簡？
其實W3Cfuns已經給大家准備好精簡JS所需的所有工具「前端神器」，這點W3Cfuns為大家做的很不錯，在這個規則里我們就用到「JS壓縮/混淆/美化工具」
最初始的精簡方式：就是移除不必要的字元減小js文件大小，改善載入時間。包括所有的注釋、不必要的空白字元。
高級一點的精簡方式就是：混淆。
它不但會移除不必要的字元，還會改寫代碼，比如函數和變數的名字會被改成很短的字元串，這樣使js代碼更簡練更難閱讀。
但是我一般很少使用混淆，一個現在互聯網時代，代碼沒有必要整的那麼神秘，大可以大家一起share，天下代碼一起抄，只要抄出自己的特色就ok了。
而且一旦使用混淆，對於js代碼的維護和調試都很復雜，因為有時候混淆之後的js代碼完全看不懂。其實實際開發過程中，從文件大小和代碼可復用性來說，不僅僅是js代碼需要精簡，css代碼一樣也很需要精簡。
規則11：避免重定向
重定向的英文是Redirect，用於將用戶從一個URL重新跳轉到另一個URL。
最常見的Redirect就是301和302兩種。
關於重定向的性能影響這里就不說了，自行查閱相關資料吧。
在我們實際開發中避免重定向最簡單也最容易被忽視的一個問題就是，設置URL的時候，最後的「/」，有些人有時候會忽略，其實你少了「/」，這時候的URL就被重定向了，所以在給頁面鏈接加URL的時候切記最後的「/」不可丟。
規則12：刪除重復腳本
重復的js代碼除了有不必要的HTTP請求之外，還會浪費執行js的時間。
將你使用的js代碼模塊化，可以很好地避免這個問題，至於js模塊化如何實現，現在有很多可以使用的開源框架，我用的比較多的是我們公司玉伯的Sea.js。
規則13：配置ETag
Etag（Entity Tag），實體標簽，是Web伺服器和瀏覽器用戶確認緩存組件的有效性的一種機制。寫的很復雜，對我這種非專業的前端開發人員來說，有點過了，關於這個原則有興趣的自己看吧。
規則14：使Ajax可緩存
針對頁面中主動的Ajax請求返回的數據要緩存到本地，當然這個是針對短期內不會變化的數據。如果不確定數據變化周期的話，可以增加一個修改標識的判斷，我正常處理過程中會給一些Ajax請求返回的數據增加一個MD5值的判斷，每次請求會判斷當前MD5是否變化，如果變化了取最新的數據，如果不變化，則不變。
⑤ 前端開發的基本方法
CSS部分
盒子邊傾斜
clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
禁止點擊事件/滑鼠事件「穿透」
div * { pointer-events: none; /*鏈接啊，點擊事件啊，都沒有效果了*/ }
用來控制元素在移動設備上使用滾動回彈效果
.main{
-webkit-overflow-scrolling: touch;
}
可解決在IOS中使用overflow:auto 形成的滾動條，滾動不流暢的情況
文字漸變效果
.text-gradient{ background-image: linear-gradient(135deg, deeppink, deepskyblue);
-webkit-background-clip: text; color: transparent;
}
css三角形
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;
}
實現圓弧
clip-path: ellipse(80%60% at50%40%);
JS部分
JavaScript中檢測數組的方法
(1)、typeof操作符
這種方法對一些常用的類型檢查沒有問題，但對array和null 都判斷為object
(2)、instanceof操作符
這個操作符是檢測對象的原型鏈是否指向構造函數的prototype對象的
(3)、對象的constructor屬性
const arr = []
console.log(arr.constructor === Array) // true
(4)、Object.prototype.toString
constarr=[]console.log(Object.prototype.toString.call(arr)==='[objectArray]')//true
(5)、Array.isArray()
常用的字元串操作
字元串轉化toString()
字元串分隔split()
字元串替換replace()
獲取長度length
查詢子字元串 indexOf
返回指定位置的字元串或字元串編碼 charAt charCodeAt
字元串匹配 match
字元串拼接concat
字元串的切割或提取slice() substring() substr()
字元串大小寫轉化 toLowerCase toUpperCase
字元串去空格 trim() 用來刪除字元串前後的空格
- const str = '11122223333'const uniqueStr = [...new Set(str)].join('')
- arr.rece(callback,[initialValue])
- 跳過第一個索引。如果提供initialValue，從索引0開始。
- const arr = [1, 2, 3, 1, 2, 3]const uniqueArr = [...new Set(arr)]
- var a = {};Object.defineProperty(a, 'name', { value : 'kong', enumerable : true //該屬性是否可枚舉})
- function a(){}
- var b = new a();console.log(a.prototype.isPrototypeOf(b));//true
- if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded();
- }, 0);
- }
- });
- };
- /**
- * 向URL追加參數
- * @function stringifyUrlArgs
- * @param {string} url - URL路徑
- * @param {object} params - 參數對象
- * @return {string}
- const stringifyUrlArgs = (url, params) => {
- url += (/?/).test(url) ? '&' : '?'
- url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&') return url
- }
- /**
- * 解析URL參數
- * @function parseUrlArgs
- * @param {string} url - 字元串
- * @return {object}export const parseUrlArgs = url => { const arr = url.match(/([^?=&]+)(=([^&]*))/g) || [] const args = arr.rece((a, v) => {
- a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1) return a
- }, {}) return args
- }
- NP.strip(num) // strip a number to nearest right numberNP.plus(num1, num2, num3, ...) // addition, num + num2 + num3, two numbers is required at least.NP.minus(num1, num2, num3, ...) // subtraction, num1 - num2 - num3NP.times(num1, num2, num3, ...) // multiplication, num1 * num2 * num3NP.divide(num1, num2, num3, ...) // division, num1 / num2 / num3NP.round(num, ratio) // round a number based on ratio
其中第9中三者的區別如下：
（1）slice(), 參數可以是負數，負數表示從字元串最後一個位置開始切割到對應結束位置
（2）substring()，參數不可為負數，切割第一個位置到第二個位置的字元串
（3）substr()， 參數可以是負數，第一個參數是開始位置，第二個參數為切割的長度
字元串去重
常用的數組操作
1、Array.map()
此方法是將數組中的每個元素調用一個提供的函數，結果作為一個新的數組返回，並沒有改變原來的數組
2、Array.forEach()
此方法是將數組中的每個元素執行傳進提供的函數，沒有返回值，注意和map方法區分
3、Array.filter()
此方法是將滿足條件的元素作為一個新數組返回
4、Array.every()
此方法將數組所有元素進行判斷返回一個布爾值，如果所有元素都符合判斷條件，則返回true，否則返回false
5、Array.some()
此方法將數組所有元素進行判斷返回一個布爾值,如果有一個元素滿足判斷條件，則返回true，所有元素都不滿足則返回false
6、Array.rece()
此方法為所有元素調用返回函數
7、Array.push()
在數組最後面添加新元素
8、Array.shift()
刪除數組第一個元素
9、Array.pop()
刪除數組最後一個元素
10、Array.unshift()
在數組最前面增加元素
11、Array.isArray()
判斷是否為一個數組
12、Array.concat()
數組拼接
13、Array.toString()
數組轉化為字元串
14、Array.join()
數組轉化為字元串，並用第一個參數作為連接符
15、Array.splice(開始位置，刪除個數，元素)
其中rece使用方法為：
callback （執行數組中每個值的函數，包含四個參數）
1、previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
2、currentValue （數組中當前被處理的元素）
3、index （當前元素在數組中的索引）
4、array （調用 rece 的數組） initialValue （作為第一次調用 callback 的第一個參數。）
如果沒有提供initialValue，rece 會從索引1的地方開始執行 callback 方法，
數組去重：
常用對象方法
1、Object.assign()
用於克隆，兩個參數，將第二個對象分配到第一個中
2、Object.is()
用於判斷兩個值是否相同
//注意，該函數與==運算符不同，不會強制轉換任何類型， 應該更加類似於===，但值得注意的是它會將+0和-0視作不同值
3、Object.keys()
用於返回對象可枚舉的屬性和方法的名稱，返回一個屬性或方法名稱的字元串數組。
4、Object.defineProperty()
劫持變數的set和get方法,將屬性添加到對象，或修改現有屬性的特性
5、Object.defineProperties()
可添加多個屬性,與Object.defineProperty()對應,
6、isPrototypeOf
安卓監聽可視區域變化，讓輸入框移動至可視區域
vue中平滑滾動到某個位置
this.$refs.rule.scrollIntoView({ block: 'start', behavior: 'smooth' })
向URL追加參數
解析URL參數
好用的JavaSrcipt庫與模塊（包）
日期時間處理庫
1、monent.js
2、day.js
day相對於monent要輕量許多
高精度數學運算
number-precision
實用工具庫
Lodash
lodash 是一個 JavaScript 實用工具庫，提供一致性，及模塊化、性能和配件等功能。
Lodash 消除了處理數組的麻煩，從而簡化了 JavaScript、 數字、對象、字元串等
⑥ 前端可以用js獲取textarea中當前游標位置的行數嗎
獲取不了,你的textare的行數,和你的textarea的樣式有很大的關系,已經你的textarea在不同的瀏覽器會出現可以拉伸和縮短的現象。
⑦ 前端面試有什麼套路
一般前端面試會問HTML5新增了哪些內容或API，使用過哪些，input和textarea的區別等，具體的還是要看你掌握的扎實不扎實了，慕課網有相關課程的
⑧ 前端怎樣把查詢的東西顯示在textarea里
寫個js：修改按鈕綁定onclick方法，獲取content。通過選擇器獲取textarea的對象或者new一個，將內容寫入。具體js和jquery寫法有些區別
⑨ Web 前端怎樣入門
方法：
第一：理清Web前端的知識結構。要想高效學習Web前端知識，首先應該搞清楚Web前端都包括哪些技術結構。Web前端開發雖然技術難度並不高，但是技術細節卻比較多，內容也比較雜。Web前端的基礎包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是學習的重點，也是難點。另外，vue等框架也是需要熟練掌握的。
第二：緊跟技術發展趨勢。目前Web前端的技術發展趨勢有三個，其一是前端開發數據化;其二是前端開發高效化;其三是前端開發全棧化。前端開發數據化主要是大數據發展的影響，在大數據的推動下，Web前端逐漸涉及到了大量的數據展示任務。前端開發高效化主要體現在Web前端正在進行獨立部署，前端與後端的溝通主要通過資源介面的方式來進行。前端開發全棧化也是一個比較明顯的趨勢，比如Nodejs的應用。
第三：注重動手實踐能力的培養。學習前端開發一定要注重動手實踐能力的培養，因為前端開發的細節比較多，所以只有多操作才能逐漸熟悉。
前端開發目前被稱為「大前端」，整個前端開發也被賦予了更多的含義，包括Web前端開發、移動端開發、大數據呈現端開發以及部分後端開發任務等等。所以，想要在前端行業中走的更遠，一定要注重知識結構的豐富性。
與其他編程語言相比，前端是公認的入行門檻較低的一門語言，但依然有很多人在學習之前會問零基礎學習web前端難不難，要多久才能學會。學習的難易和時間當然是取決於學習的方式。
前端入門簡單，但是深入學習之後，還是有一定學習難度的。如果你是零基礎自學web前端的話，那麼所花費的時間與精力是不可估計的。 如果系統學習5個月的時間可以幫助你快速成長為合格的web前端工程師。
至於視頻教程，我這里有很多前端的全套教程，如果你需要的話，可以加一下我的學習交流裙裙，找我要就行了！
⑩ 前端問題 map area
api有的 不知道你是什麼開發。下邊是高德地圖js API我寫的例子
var markers = app.json;// 取ajax介面數據
// 添加一些點到地圖上
markers.forEach(function(marker) {
var mMrak = new AMap.Marker({
map: map,
icon: '../img/home/dyj.png',
position: [marker.position[0], marker.position[1]],
offset: new AMap.Pixel(-12, -36)
});
mMrak.on('click', function(e) {
// 點擊彈出一個div，內容可以自己設計
// 控制彈出層的顯示('myPop是一個矩形框div')
document.getElementById("myPop").style.display = 'block';
});
});