डेवलपर्स के लिए WebKit

हम में से कई डेवलपर्स के लिए, WebKit एक ब्लैक बॉक्स है । हम एचटीएमएल, सीएसएस, जेएस और इसमें छवियों का एक गुच्छा फेंकते हैं, और वेबकिट, किसी भी तरह ... जादुई रूप से, हमें एक वेब पेज देता है जो दिखता है और अच्छी तरह से काम करता है।
लेकिन वास्तव में, जैसा कि मेरे सहयोगी इल्या ग्रिगोरिक कहते हैं :

वेब किट एक ब्लैक बॉक्स नहीं है । यह एक सफेद बॉक्स है। और न केवल सफेद, बल्कि एक खुले बॉक्स भी।

तो, चलिए कुछ बातों का पता लगाने की कोशिश करते हैं:

• WebKit क्या है?
• WebKit क्या नहीं है?
• WebKit का उपयोग WebKit ब्राउज़रों द्वारा कैसे किया जाता है?
• कई WebKit समान क्यों नहीं हैं?

अब, विशेष रूप से इस खबर के बाद कि ओपेरा WebKit में बदल गया है , हम कई WebKit ब्राउज़रों से घिरे हैं, और यह कहना मुश्किल है कि उन्हें क्या एकजुट करता है, और वे अपने तरीके से कहां जाते हैं। नीचे, मुझे आशा है कि हम इस मुद्दे पर कुछ प्रकाश डालने की कोशिश करेंगे। नतीजतन, आप ब्राउज़र के बीच के अंतरों को बेहतर ढंग से निर्धारित कर सकते हैं, सही ट्रैकर को बग भेज सकते हैं, और क्रॉस-ब्राउज़र विकास का अधिक कुशलता से संचालन कर सकते हैं।

मानक वेब ब्राउज़र घटक

आइए आधुनिक ब्राउज़रों के कुछ घटकों को सूचीबद्ध करें:

• पार्सिंग (पार्सिंग एचटीएमएल, एक्सएमएल, सीएसएस, जावास्क्रिप्ट)
• लेआउट (लेआउट)
• पाठ और ग्राफिक्स रेंडरिंग
• छवि डिकोडिंग
• GPU बातचीत
• नेटवर्क का उपयोग
• हार्डवेयर त्वरण

उनमें से कौन सा सभी WebKit ब्राउज़रों के लिए आम हैं? काफी हद तक, केवल पहले दो।

प्रत्येक WebKit "पोर्ट" अपने तरीके से शेष घटकों को लागू करता है। आइए देखें इसका क्या मतलब है।

वेबकिट पोर्ट

कई WebKit "पोर्ट" हैं, और मैं Aria Hideyat, WebKit हैकर और उन लोगों को प्रदान करता हूं। सिन्हा में निदेशक ने इसके बारे में बात करने का अधिकार:

WebKit के लिए सबसे लोकप्रिय एसोसिएशन आमतौर पर Apple का WebKit है, जो Mac OS X ( पहली और मूल WebKit लाइब्रेरी) पर चलता है। जैसा कि आप अनुमान लगा सकते हैं, विभिन्न इंटरफेस को विभिन्न देशी मैक ओएस एक्स पुस्तकालयों का उपयोग करके कार्यान्वित किया जाता है, मुख्य रूप से कोरफाउंडेशन घटक में केंद्रित है। उदाहरण के लिए, यदि आप रूपरेखा के लिए एक विशेष त्रिज्या के साथ एक रंग के फ्लैट बटन को परिभाषित करते हैं, तो WebKit जानता है कि इस बटन को कहां और कैसे आकर्षित किया जाए। उसी समय, बटन का अंतिम प्रतिपादन (उपयोगकर्ता के मॉनिटर पर पिक्सेल के रूप में) कोरग्राफिक्स के साथ रहता है ।

जैसा कि मैंने ऊपर बताया है, CoreGraphics का उपयोग प्रत्येक WebKit पोर्ट के लिए अद्वितीय है। Mac के लिए Chrome, उदाहरण के लिए, Skia का उपयोग करता है।

कुछ बिंदु पर, WebKit को डेस्कटॉप और मोबाइल दोनों के लिए अलग-अलग प्लेटफार्मों पर "पोर्ट" किया गया था। इस भिन्नता को आमतौर पर "वेबिट पोर्ट" कहा जाता है। सफ़ारी विंडोज़ के लिए, Apple ने भी अपने (सीमित कार्यान्वयन) CoreFoundation लाइब्रेरी के Windows संस्करण का उपयोग करके, Windows के तहत चलने के लिए "WebKit को पोर्ट किया" था।

... इस तथ्य के बावजूद कि विंडोज पर सफारी अब मृत है ।

इसके अलावा, कई अन्य "पोर्ट" भी थे ( पूरी सूची देखें)। Google ने अपने क्रोमियम पोर्ट का समर्थन और निर्माण जारी रखा है। Gtk + पर आधारित WebKitGtk भी है। Nokia (और अब ट्रोलटेक, जो इसे आगे बढ़ाते हैं) WebKit Qt पोर्ट का समर्थन करता है, जो कि QtWebKit मॉड्यूल के रूप में लोकप्रिय हो गया है।

कुछ वेबकिट पोर्ट

• सफारी
  - ओएस एक्स के लिए सफारी और विंडोज के लिए सफारी दो अलग-अलग पोर्ट हैं
  - WebKit रात का निर्माण एक मैक पोर्ट असेंबली है जो सफारी के लिए उपयोग किया जाता है, केवल नया
  
• मोबाइल सफारी
  - एक निजी शाखा में विकसित, लेकिन बाद में खोला गया ।
  - iOS के लिए Chrome (Apple के WebView का उपयोग करता है; अंतर के बारे में थोड़ी देर बाद)
  
• क्रोम (क्रोमियम)
  - Android के लिए Chrome (सीधे क्रोमियम "पोर्ट का उपयोग करता है")
  - क्रोमियम ब्राउज़रों के लिए भी आधार है: यांडेक्स , 360 , सोगौ , और जल्द ही, ओपेरा।
  
• Android ब्राउज़र
  - रिलीज के समय उपलब्ध नवीनतम WebKit स्रोत कोड का उपयोग करता है।
  
• और भी अधिक पोर्ट : अमेज़न सिल्क, डॉल्फिन, ब्लैकबेरी, QtWebKit, WebKitGTK +, EFL पोर्ट (Tizen), wxWebKit, WebKitWinCE, आदि।

विभिन्न पोर्ट विभिन्न कार्यों पर ध्यान केंद्रित कर सकते हैं। मैक पोर्ट फ़ोकस ब्राउज़र और ऑपरेटिंग सिस्टम के बीच अलगाव है, और ओबज-सी और सी ++ के प्रावधान देशी अनुप्रयोगों में रेंडरिंग इंजन को एम्बेड करने के लिए बाँधते हैं। क्रोमियम पोर्ट का ध्यान पूरी तरह से ब्राउज़र पर है। QtWebKit एक रेंडरिंग इंजन के रूप में अपने क्रॉस-प्लेटफॉर्म एप्लिकेशन आर्किटेक्चर के साथ पोर्ट का उपयोग करने का सुझाव देता है।

सभी WebKit ब्राउज़रों में क्या सामान्य है

आरंभ करने के लिए, आइए उन सभी वेब ब्राउज़रों में उपयोग किए जाने वाले सामान्य कार्यों को देखें:

आप जानते हैं कि यह हास्यास्पद है, मैंने इस पैराग्राफ को लिखने के लिए कई प्रयास किए। और हर बार, Chrome टीम ने मुझे ठीक किया, जैसा कि आप देखेंगे ...

1. और इसलिए, सबसे पहले, WebKit HTML को उसी तरह पार्स करता है। खैर, सिवाय इसके कि क्रोमियम इस समय एकमात्र बंदरगाह है जहां HTML को पार्स करने के लिए स्ट्रीम समर्थन शामिल है।
2. ... खैर, लेकिन HTML को पार्स करने के बाद, DOM ट्री का निर्माण उसी तरह किया जाता है। ठीक है, वास्तव में, शैडो डोम केवल क्रोमियम पोर्ट के लिए सक्षम है , अर्थात डोम का निर्माण भिन्न होता है। कस्टम तत्वों के लिए भी।
3. ... खैर, WebKit सभी के लिए समान विंडो और डॉक्यूमेंट ऑब्जेक्ट बनाता है। यह सच है, हालांकि वे गुण और निर्माण जो प्रदान करते हैं वे फ़ीचर फ़्लैग के उपयोग पर निर्भर हो सकते हैं।
4. ... सीएसएस पार्सिंग समान है। अपने सीएसएस खाने और इसे सीएसएसओएम में परिवर्तित करना बहुत मानक है। हाँ, हालाँकि Chrome केवल -webkit- उपसर्गों का समर्थन करता है, जब Apple और अन्य ब्राउज़र विरासत -ttml- और -apple- उपसर्गों का समर्थन करते हैं।
5. ... लेआउट ... स्थिति? यह रोटी और मक्खन की तरह है। हर जगह वही, सही? खैर पहले से ही! Subpixel लेआउट और समृद्ध लेआउट अंकगणित WebKit का हिस्सा है, लेकिन बंदरगाह से बंदरगाह तक भिन्न होता है।
6. सुपर।

तो यह मुश्किल है।

जैसे फ़्लिकर और जीथब विशेष झंडे के पीछे कार्यान्वित कार्यों को छिपाते हैं, वैबसाइट भी ऐसा ही करती है। यह WebKit संकलन-समय सुविधा झंडे का उपयोग करके संकलन चरण में किसी भी कार्यक्षमता को सक्षम / अक्षम करने की अनुमति देता है। कमांड लाइन (क्रोमियम के लिए) या कॉन्फ़िगरेशन जैसे : फ़्लैग के विकल्पों का उपयोग करके रनटाइम में फ़ंक्शंस को भी सक्षम किया जा सकता है।

अब, आइए संक्षेप में जानने की कोशिश करें कि वेबकीट की दुनिया में क्या आम है ...

क्या हर WebKit पोर्ट के लिए आम है।

• डोम, खिड़की, दस्तावेज
  कम या ज्यादा
  
• CSSOM
• सीएसएस पार्सिंग संपत्ति / मूल्य
  निर्माता उपसर्गों में अंतर
  
• HTML पार्सिंग और DOM बिल्डिंग
  समान रूप से, यदि हम Web Components के बारे में भूल जाते हैं।
  
• लेआउट और स्थिति
  फ्लेक्सबॉक्स, फ्लोट्स, ब्लॉक फॉरमेटिंग संदर्भ ... सभी में समान
  
• UI उपकरण और डेवलपर उपकरण जैसे Chrome DevTools aka WebKit निरीक्षक।
  हालांकि पिछले अप्रैल से, सफारी अपने स्वयं के सफारी निरीक्षक, गैर-वेबकिट का उपयोग बंद स्रोत के साथ कर रही है।
  
• विवादास्पद, पुशस्टेट, फ़ाइल एपीआई, सबसे एसवीजी, सीएसएस गणित परिवर्तन, वेब ऑडियो एपीआई, लोकलस्टोरेज जैसे कार्य
  यद्यपि कार्यान्वयन भिन्न हो सकता है। प्रत्येक पोर्ट लोकलस्टोरेज के लिए अपने स्वयं के स्टोरेज सिस्टम का उपयोग कर सकता है और वेब ऑडियो एपीआई के लिए एक अलग ऑडियो एपीआई का उपयोग कर सकता है।
  
• कई अन्य विशेषताएं।

यह काफी स्पष्ट नहीं है, इसलिए आइए कुछ मतभेदों को देखने की कोशिश करें।

अब, WebKit पोर्ट के लिए क्या सामान्य नहीं है:

• GPU संबंधित
  - 3 डी परिवर्तन
  - वेबजीएल
  - वीडियो डिकोडिंग
  
• स्क्रीन पर 2 डी प्रतिपादन
  - स्मूथिंग टेक्नोलॉजीज
  - एसवीजी और सीएसएस ग्रेडिएंट्स का प्रतिपादन
  
• पाठ प्रतिपादन और हाइफ़नेशन
• नेटवर्क प्रौद्योगिकियां (SPDY, प्री-रेंडरिंग, WebSocket ट्रांसपोर्ट)
• जावास्क्रिप्ट इंजन
  - जावास्क्रिप्टकोर इंजन वेबिट रिपॉजिटरी में है। लेकिन उसके और V8 दोनों के लिए WebKit में बाइंडर्स हैं।
• फार्म तत्वों का प्रतिपादन
• वीडियो और ऑडियो टैग और कोडेक समर्थन का व्यवहार
• छवि डिकोडिंग
• बैकवर्ड / फॉरवर्ड नेविगेशन
  - पुशस्टेट का हिस्सा ()
  
• एसएसएल सख्त परिवहन सुरक्षा और सार्वजनिक कुंजी पिन की तरह है

आइए उनमें से एक पर एक नज़र डालें: 2 डी ग्राफिक्स पोर्ट पर निर्भर करते हैं, हम स्क्रीन पर प्रतिपादन के लिए पूरी तरह से अलग पुस्तकालयों का उपयोग करते हैं:



या यदि आप विवरण में जाते हैं, तो हाल ही में जोड़ा गया फ़ंक्शन: CSS.supports () जीत और wincairo को छोड़कर सभी बंदरगाहों के लिए सक्षम था, जिसके लिए css3 (css3 सशर्त विशेषताएं) सशर्त फ़ंक्शन सक्षम नहीं थे।

अब, हम तकनीकी विवरणों में प्रवेश करते हैं ... पांडित्य बनने का समय। यहां तक ​​कि उपरोक्त भी पूरी तरह से सही नहीं है। यह वास्तव में एक वेबकोर है, एक सामान्य घटक है। WebCore HTML और SVG के लिए एक लेआउट, रेंडरिंग और DOM लाइब्रेरी है, और मूल रूप से जब लोग WebKit कहते हैं तो लोग क्या सोचते हैं। वास्तव में, "वेबकीट" तकनीकी रूप से वेबकोर और "पोर्ट्स" के बीच की एक परत है, हालांकि सामान्य बातचीत में यह अंतर ज्यादातर महत्वपूर्ण नहीं है।

चार्ट को मदद करनी चाहिए:



WebKit घटकों में से कई switchable (ग्रे में दिखाया गया है)।

उदाहरण के लिए, WebKit जावास्क्रिप्ट इंजन, JavaScriptCore, WebKit का डिफ़ॉल्ट इंजन है। यह मूल रूप से KJS (KDE से) उन दिनों पर आधारित था जब WebKit ने KHTML की एक शाखा के रूप में शुरू किया था। उसी समय, क्रोमियम पोर्ट V8 इंजन पर स्विच करता है और अद्वितीय DOM बाइंडिंग का उपयोग करता है।

फ़ॉन्ट्स और पाठ रेंडरिंग मंच का एक बहुत बड़ा हिस्सा हैं। WebKit में पाठ के लिए 2 अलग-अलग पथ हैं: फास्ट और कॉम्प्लेक्स। दोनों को प्लेटफ़ॉर्म-विशिष्ट समर्थन (पोर्ट साइड पर लागू) की आवश्यकता होती है, लेकिन फास्ट को केवल यह जानने की आवश्यकता है कि ग्लिफ़ को कैसे मैप किया जाए (जो प्लेटफ़ॉर्म के लिए वेबकेट कैश है), जब परिष्कृत पूरी तरह से प्लेटफ़ॉर्म स्तर पर तारों के प्रतिपादन को स्थानांतरित करता है और बस कहता है कि "इसे ड्रा करें, कृपया।"

“WebKit एक सैंडविच की तरह है। वैसे, क्रोमियम के मामले में, यह टैकोस की तरह अधिक है। वेब तकनीक से स्वादिष्ट टैकोस।
दिमित्री ग्लेज़कोव, क्रोम वेबिट हैकर। वेब कंपोनेंट्स की चैंपियन, और शैडो डोम।

अब, आइए अवलोकन का विस्तार करें, और कई पोर्ट और कई सबसिस्टम देखें। निम्नलिखित पांच WebKit पोर्ट हैं, ध्यान दें कि सामान्य घटकों के बावजूद उनमें से प्रत्येक के लिए टूलकिट कैसे अलग है:

	क्रोम (OS X)	सफ़ारी (OS X)	QtWebKit	Android ब्राउज़र	IOS के लिए क्रोम
प्रतिपादन	Skia	CoreGraphics	QtGui	Android स्टैक / स्किया	CoreGraphics
नेटवर्किंग	क्रोमियम नेटवर्क स्टैक	CFNetwork	QtNetwork	क्रोमियम के नेटवर्क स्टैक का कांटा	क्रोमियम का ढेर
फ़ॉन्ट्स	Skia के माध्यम से CoreText	CoreText	क्यूटी इंटर्नल	Android स्टैक	CoreText
जावास्क्रिप्ट	वी 8	जावास्क्रिप्ट कोर	JSC (V8 को Qt में कहीं और प्रयोग किया जाता है)	वी 8	JavaScriptCore (JITting के बिना) *

* IOS के लिए क्रोम के बारे में फुटनोट। यह UIWebView का उपयोग करता है, जैसा कि आप शायद जानते हैं। UIWebView की क्षमताओं के अनुसार, इसका मतलब है कि यह केवल मोबाइल सफारी, जावास्क्रिप्टकोर (और वी 8 नहीं) और एकल-थ्रेडेड मॉडल के रूप में एक ही रेंडरिंग इंजन का उपयोग कर सकता है। हालांकि, कुछ कोड क्रोमियम से उधार लिया जाता है, जैसे कि नेटवर्क सबसिस्टम, बुकमार्किंग इन्फ्रास्ट्रक्चर का सिंक्रनाइज़ेशन, ऑम्निबॉक्स, मेट्रिक्स और क्रैश रिपोर्टिंग। (इसके अलावा, जावास्क्रिप्ट मोबाइल उपकरणों पर शायद ही कभी एक अड़चन है कि जेटिंग कंपाइलर की कमी का न्यूनतम प्रभाव पड़ता है।)

ठीक है, तो हम क्या करने आए हैं?

और इसलिए, सभी WebKit अब पूरी तरह से अलग हैं। मुझे डर लग रहा है।

इसके लायक नहीं! लेआउट परीक्षण के साथ WebKit का कवरेज बहुत बड़ा है। (28,000 नवीनतम अनुमानों के अनुसार परीक्षण), और न केवल मौजूदा कार्यों के लिए, बल्कि सभी रजिस्टरों के लिए भी। वास्तव में, जब भी आप नए या "गुप्त" DOM ​​/ CSS / HTML-5 फ़ंक्शन का अध्ययन करते हैं, तो "लेआउटटेस्ट" टेस्ट सूट में आमतौर पर एक उत्कृष्ट न्यूनतम प्रदर्शन होता है।

इसके अलावा, W3C परीक्षण सूट को मानकीकृत करने के लिए प्रयास कर रहा है । इसका मतलब यह है कि हम उम्मीद कर सकते हैं कि WebKit बंदरगाहों और अन्य सभी ब्राउज़रों को एक ही परीक्षण सूट के साथ परीक्षण किया जाएगा, जिससे quirks में कमी और एक अधिक अंतर-वेब वेब होगा। उन सभी के लिए जिन्होंने टेस्ट द वेब फॉरवर्ड इवेंट में भाग लेकर अपने प्रयास किए ... धन्यवाद!

ओपेरा अभी-अभी WebKit में चला गया है। इसका क्या आएगा?

रॉबर्ट निमन और रॉब हॉक्स पहले ही इस विषय पर संपर्क कर चुके हैं , लेकिन मैं इसे जोड़ूंगा, घोषणा का एक महत्वपूर्ण हिस्सा यह था कि ओपेरा क्रोमियम में बदल रहा है । इसका मतलब है कि WebGL, Canvas, HTML5 फॉर्म, 2D ग्राफिक्स का कार्यान्वयन, ये सभी चीजें अब क्रोम और ओपेरा पर समान होंगी। समान एपीआई और निम्न-स्तरीय कार्यान्वयन। चूंकि ओपेरा क्रोमियम पर आधारित है, आप महसूस कर सकते हैं कि आप ओपेरा और क्रोम पर अपनी संगतता जांचों में कटौती कर रहे हैं।
मुझे यह भी ध्यान देना चाहिए कि सभी ओपेरा ब्राउज़र क्रोमियम में बदल जाएंगे। यही है, विंडोज, मैक, लिनक्स और ओपेरा मोबाइल (एक पूर्ण मोबाइल ब्राउज़र) के लिए ओपेरा। यहां तक ​​कि पतले क्लाइंट, ओपेरा मिनी, को क्रोमियम पर आधारित प्रेस्टो पर आधारित वर्तमान रेंडरिंग फार्म से स्विच किया जाएगा।

... और रात में WebKit का निर्माण। यह क्या है

यह WebKit का मैक पोर्ट है , सफारी के समान कोड पर चल रहा है (हालांकि कुछ आंतरिक पुस्तकालयों को बदल दिया गया है)। मूल रूप से, Apple इसका नेतृत्व करता है, इसलिए व्यवहार और सुविधा सेट मैच से मिलता है जो आप सफारी में पा सकते हैं। कई मामलों में, Apple रूढ़िवादी व्यवहार करता है जब यह उन सुविधाओं को सक्षम करने की बात आती है जो अन्य पोर्ट कार्यान्वित करते हैं या प्रयोग करते हैं। वैसे भी, यदि आप उपमाओं का उपयोग करते हैं, तो सोचें ... WebKit रात के निर्माण के लिए सफारी, यह क्रोम के लिए क्रोम की तरह है।
क्रोम कैनरी भी एक या एक दिन पहले नवीनतम WebKit स्रोत कोड का उपयोग करता है।

मुझे WebKit के बारे में अधिक बताएं।

धारण करो।