一、對瀏覽器的了解？ 1.瀏覽器的構成： 瀏覽器可以分為兩部分，shell+內核。（shell種類多，內核較少。） ①Shell是指瀏覽器的外殼：例如菜單，工具欄等。主要是提供給用戶界面操作，參數設置等。它是調用內核來實現各種功能的。內核才是瀏覽器的核心。 ②內核：是基于標記語言顯示內容的程序或模塊。也有一些瀏覽器并不區分外殼和內核。 注：從Mozilla將Gecko獨立出來后，才有了外殼和內核的明確劃分。目前主流的瀏覽器有IE6、IE8、Mozilla、FireFox、Opera、Safari、Chrome、Netscape等。? 2.什么是瀏覽器內核? 瀏覽器內核：可以分成兩部分：渲染引擎(layout engineer或者Rendering Engine)和JS引擎。 作用：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。 瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。 JS引擎：是解析Javascript語言，執行javascript語言來實現網頁的動態效果。 注：最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎。 內核的種類：非商業的免費內核（很少使用），有10多種。 3.常見的瀏覽器內核介紹 常見的瀏覽器內核可分四種：Trident、Gecko、Presto、Webkit。 ①Trident又稱MSHTML，是微軟開發的渲染引擎，他已經深入了Windows操作系統的骨髓，例如Windows Media Play，Windows Explorer，Outlook Express等都使用了。目前很多瀏覽器都使用這個引擎，例如IE,MaxThon,TT,The World,360,搜狗瀏覽器等 。 ②Gecko是C++開發的，Open Source的渲染引擎，包括了SpiderMonkey(Rhino)。主要的使用者有Firefox。 ③Webkit是蘋果公司基于KHTML開發的。他包括Webcore和JavaScriptCore（SquirrelFish,V8）兩個引擎。主要的使用者有Safari，Chrome。 ④Presto由Opera Software公司開始的，用于Opera的渲染引擎。Macromedia Dreamweaver （MX版本及以上）和Adobe Creative Suite 2也使用了Presto的內核。 4.主流瀏覽器所使用的內核分類 Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等 Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等 Webkit內核：Safari,Chrome等 Presto內核：Opera7及以上 5.瀏覽器內核的優缺點? Trident：這種瀏覽器內核是IE瀏覽器用的內核，由于IE的高市場占有率，微軟也很長時間沒有更新Trident內核（本身BUG比較多），這導致了二個結果 1，Trident內核和W3C標準脫節。 2，Trident內核的大量Bug等安全問題沒有得到解決，加上一些專家學者公開自己認為IE瀏覽器不安全的觀點，使很多用戶開始轉向其他瀏覽器，FF,Opera就是這時期興起的。 Gecko：這是Firefox 和 Flock 所采用內核，這個內核的優點就是功能強大、豐富，可以支持很多復雜網頁效果和瀏覽器擴展接口，但是代價是也顯而易見就是要消耗很多的資源，比如內存。 Presto：Opera 采用的是 Presto內核， 優：Presto內核被稱為公認的瀏覽網頁速度最快的內核，這得益于它在處理JS腳本等腳本語言時，會比其他的內核快3倍左右。 缺：就是為了達到很快的速度而丟掉了一部分網頁兼容性。 Webkit：Webkit 是 Safari 采用的內核， 優：就是網頁瀏覽速度較快，雖然不及 Presto 但是也勝于 Gecko 和 Trident， 缺：是對網頁代碼的兼容性較低，會使一些編寫不標準的網頁無法正確顯示。 總結：就瀏覽器來說，互聯網經歷了十年的高速發展期，近幾年市場上也推出了很多新的瀏覽器，但是他們并非是采用自主開發的內核，所以瀏覽器內核本身實際沒有實質突破。 二、safari移動端click時間延遲300ms的解決方案？ 1.原因：這要追溯至 2007 年初。蘋果公司在發布首款 iPhone 前夕，遇到一個問題：當時的網站都是為大屏幕設備所設計的。于是蘋果的工程師們做了一些約定，應對 iPhone 這種小屏幕瀏覽桌面端站點的問題。這當中最出名的，當屬雙擊縮放(double tap to zoom)，這也是會有上述 300 毫秒延遲的主要原因。雙擊縮放，顧名思義，即用手指在屏幕上快速點擊兩次，iOS?自帶的 Safari 瀏覽器會將網頁縮放至原始比例。 2.解決方案? ①.粗暴型：禁用縮放? <meta?name="viewport"?content="width=device-width,?user-scalable=no">?? 這個屬于簡單粗暴型的，雖然看似完美，但有一個致命的缺陷，當你必須完全禁用縮放來達到目的時候，就傻眼了，只有特定場景下的交互界面，此方案才可行，其它大多數情況，此法都不可行。? 另外：Chrome 開發團隊不久前宣布，在 Chrome 32 這一版中，他們將在包含 width=device-width 或者置為比 viewport 值更小的頁面上禁用雙擊縮放。當然，沒有雙擊縮放就沒有 300 毫秒點擊延遲。 ②.FastClick：閃亮登場? FastClick是FT Labs專門為解決移動端瀏覽器 300 毫秒點擊延遲問題所開發的一個輕量級的庫。簡而言之，FastClick 在檢測到 touchend 事件的時候，會通過 DOM 自定義事件立即觸發一個模擬 click 事件，并把瀏覽器在 300 毫秒之后真正觸發的click事件阻止掉。? FastClick 的使用方法非常簡單，引用FastClick.js文件，在 window load 事件之后，在body上調用FastClick.attach()即可。 window.addEventListener(?"load",?function()?{?FastClick.attach(?document.body?);},?false?);?? attach方法雖可在更具體的元素上調用，直接綁定到body上可以確保整個應用都能受益。當 FastClick 檢測到當前頁面使用meta設置了user-scalable=no或者 touch-action 屬性的解決方案時，會靜默退出。可以說，這是真正的跨平臺方案出來之前一種很好的變通方案。? 就目前而言，FastClick 非常實際地解決 300 毫秒點擊延遲的問題，唯一的缺點可能也就是該腳本的文件尺寸 (盡管它只有10kb)。如果你連這10kb都接受不了的話，那么移動端類庫?jQuery和zepto.js都支持tap事件來解決這個問題，盡管它們的響應速度比FastClick慢一些。 三、常見瀏覽器兼容性問題與解決方案？ 所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。 瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補丁和內補丁不同 問 ? ? 題：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。 解決方案：CSS里??? *{margin:0;padding:0;} 備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符*來設置各個標簽的內外補丁是0。 瀏覽器兼容問題二：一個父標簽與幾個子標簽嵌套，父標簽不浮動，子標簽float，子標簽不撐開父的高度。 解決方法：a 在子標簽最后清浮動{<div style="height:0;clear:both;">&nbsp;</div>} b 父標簽添加{overflow：hidden；} c 給父標簽設置高度 瀏覽器兼容問題三：hack的兼容CSS設置

/*?CSS?hack*/?

寫的代碼IE不兼容，然后用hack來解決。使用hacker可以把瀏覽器分為3類：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等） ◆IE6認識的hacker 是下劃線_ 和星號 * ◆IE7 遨游認識的hacker是星號 * 比如這樣一個CSS設置： 2.height:300px;*height:200px;_height:100px;?

轉載于:https://www.cnblogs.com/webzwf/p/6552930.html

總結

以上是生活随笔為你收集整理的对浏览器的基本认知的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。