SlideShare a Scribd company logo
1 of 38
Background threads in the browser
handleM

          for 8 sec
          ouseClick




 timerTask for 2
 sec

timerTask for 2
sec

timerTask for 2
sec
Your favorite JavaScript library
may not work with workers
Polling, Long Polling & Streaming
GET /PollingStock//PollingStock HTTP/1.1

Host: localhost:8080

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.5)
Gecko/20091102 Firefox/3.5.5

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: en-us

Accept-Encoding: gzip,deflate

Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7

Keep-Alive: 300

Connection: keep-alive

Referer: http://www.example.com/PollingStock/

Cookie: showInheritedConstant=false; showInheritedProtectedConstant=false;
showInheritedProperty=false; showInheritedProtectedProperty=false;
showInheritedMethod=false; showInheritedProtectedMethod=false;
showInheritedEvent=false; showInheritedStyle=false; showInheritedEffect=false
HTTP/1.x 200 OK

X-Powered-By: Servlet/2.5

Server: Sun Java System Application Server 9.1_02

Content-Type: text/html;charset=UTF-8

Content-Length: 21

Date: Sat, 07 Nov 2009 00:32:46 GMT
GET /text HTTP/1.1rn
         Upgrade: WebSocketrn
         Connection: Upgradern
         Host: www.websocket.orgrn
         …rn

         HTTP/1.1 101 WebSocket Protocol Handshakern
         Upgrade: WebSocketrn
         Connection: Upgradern …rn




The WebSocket handshake (browser request and server response)




           Source: http://www.websocket.org/quantum.html
http://www.websocket.org/quantum.html
Java
                 Jetty        C++
                                libwebsocket
                                s
              Ruby
                EventMachin
                e
                                .NET
Erlang       Python               SuperWebSocket
   Shirasu     pywebsocket
               Tornado
<section itemscope itemtype="http://data-vocabulary.org/Person">
     Hello, my name is
     <span itemprop="name">Suresh Balla</span>,
     I am a
     <span itemprop="title">principal consultant</span>
     at the
     <span itemprop="affiliation">Neudesic India</span>.
     My friends call me
     <span itemprop="nickname">Suresh</span>.
     You can visit my homepage at
     <a href="http://www.SureshBalla.com" itemprop="url">www.SureshBalla.com</a>.
     <section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
           I live at
           <span itemprop="street-address">1234</span>
           <span itemprop="locality">White field</span>
           <span itemprop="region">Bangalore</span>.
     </section>
</section>
Developers can test pages containing
Microdata using Google's Rich Snippet
Testing Tool
Defines a group of
<section itemscope itemtype="http://data-vocabulary.org/Person">
                                                                             vocabulary name/pair
     Hello, my name is
     <span itemprop="name">Suresh Balla</span>,
                                                                                    values
     I am a
     <span itemprop="title">principal consultant</span>
     at the
     <span itemprop="affiliation">Neudesic India</span>.
     My friends call me
     <span itemprop="nickname">Suresh</span>.
     You can visit my homepage at
     <a href="http://www.SureshBalla.com" itemprop="url">www.SureshBalla.com</a>.
     <section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
           I live at
           <span itemprop="street-address">1234</span>
           <span itemprop="locality">White field</span>
           <span itemprop="region">Bangalore</span>.
     </section>
</section>
<section itemscope itemtype="http://data-vocabulary.org/Person">              URL that identifies the
     Hello, my name is                                                                scope
     <span itemprop="name">Suresh Balla</span>,
     I am a
     <span itemprop="title">principal consultant</span>
     at the
     <span itemprop="affiliation">Neudesic India</span>.
     My friends call me
     <span itemprop="nickname">Suresh</span>.
     You can visit my homepage at
     <a href="http://www.SureshBalla.com" itemprop="url">www.SureshBalla.com</a>.
     <section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
           I live at
           <span itemprop="street-address">1234</span>
           <span itemprop="locality">White field</span>
           <span itemprop="region">Bangalore</span>.
     </section>
</section>
<section itemscope itemtype="http://data-vocabulary.org/Person">                Adds a property to
     Hello, my name is                                                               element
     <span itemprop="name">Suresh Balla</span>,
     I am a
     <span itemprop="title">principal consultant</span>
     at the
     <span itemprop="affiliation">Neudesic India</span>.
     My friends call me
     <span itemprop="nickname">Suresh</span>.
     You can visit my homepage at
     <a href="http://www.SureshBalla.com" itemprop="url">www.SureshBalla.com</a>.
     <section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
           I live at
           <span itemprop="street-address">1234</span>
           <span itemprop="locality">White field</span>
           <span itemprop="region">Bangalore</span>.
     </section>
</section>
Element              Attribute Containing Value

meta         content
audio        src
embed        src
iframe       src
img          src
source       src
video        src
a            href
area         href
link         href
object       data
time         datetime
All others   Text content
Suresh.Balla@neudesic.com

More Related Content

Similar to Html5 advanced part2

Copy of-a-walk-around-westfall-plaza
Copy of-a-walk-around-westfall-plazaCopy of-a-walk-around-westfall-plaza
Copy of-a-walk-around-westfall-plaza
helgawerth
 
Semantic web support for POSH
Semantic web support for POSHSemantic web support for POSH
Semantic web support for POSH
Dinu Suman
 
Microdata semantic-extend
Microdata semantic-extendMicrodata semantic-extend
Microdata semantic-extend
Seek Tan
 
Microformats and SEO
Microformats and SEOMicroformats and SEO
Microformats and SEO
Glenn Jones
 
Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)
Joao Lucas Santana
 

Similar to Html5 advanced part2 (20)

Copy of-a-walk-around-westfall-plaza
Copy of-a-walk-around-westfall-plazaCopy of-a-walk-around-westfall-plaza
Copy of-a-walk-around-westfall-plaza
 
FamilySearch Reference Client
FamilySearch Reference ClientFamilySearch Reference Client
FamilySearch Reference Client
 
Semantic web support for POSH
Semantic web support for POSHSemantic web support for POSH
Semantic web support for POSH
 
Microdata semantic-extend
Microdata semantic-extendMicrodata semantic-extend
Microdata semantic-extend
 
Microformats and SEO
Microformats and SEOMicroformats and SEO
Microformats and SEO
 
20190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React201920190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React2019
 
[SUTD GDSC] Intro to HTML and CSS
[SUTD GDSC] Intro to HTML and CSS[SUTD GDSC] Intro to HTML and CSS
[SUTD GDSC] Intro to HTML and CSS
 
Linked Data Presentation at TDWI Mpls
Linked Data Presentation at TDWI MplsLinked Data Presentation at TDWI Mpls
Linked Data Presentation at TDWI Mpls
 
Semantic markup language
Semantic markup languageSemantic markup language
Semantic markup language
 
Jarrar: RDFa
Jarrar: RDFaJarrar: RDFa
Jarrar: RDFa
 
Jarrar: RDFa
Jarrar: RDFaJarrar: RDFa
Jarrar: RDFa
 
Body
BodyBody
Body
 
Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)
 
RDFa in ostala spletna semantika
RDFa in ostala spletna semantikaRDFa in ostala spletna semantika
RDFa in ostala spletna semantika
 
Building scalable products with WordPress - WordCamp London 2018
Building scalable products with WordPress - WordCamp London 2018Building scalable products with WordPress - WordCamp London 2018
Building scalable products with WordPress - WordCamp London 2018
 
rel=alternate, hreflang=x - International Duplicate Content Issues
rel=alternate, hreflang=x - International Duplicate Content Issuesrel=alternate, hreflang=x - International Duplicate Content Issues
rel=alternate, hreflang=x - International Duplicate Content Issues
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
Small tricks to improve your website
Small tricks to improve your website Small tricks to improve your website
Small tricks to improve your website
 
Gaurav Jatav , BCA Third Year
Gaurav Jatav , BCA Third YearGaurav Jatav , BCA Third Year
Gaurav Jatav , BCA Third Year
 

More from Suresh Balla

Docker, a new LINUX container technology based light weight virtualization
Docker, a new LINUX container technology based light weight virtualizationDocker, a new LINUX container technology based light weight virtualization
Docker, a new LINUX container technology based light weight virtualization
Suresh Balla
 
Architecting JavaScript Code
Architecting JavaScript CodeArchitecting JavaScript Code
Architecting JavaScript Code
Suresh Balla
 

More from Suresh Balla (6)

React native - Under the Hood and App Live Updates without App Store Approval
React native - Under the Hood and App Live Updates without App Store ApprovalReact native - Under the Hood and App Live Updates without App Store Approval
React native - Under the Hood and App Live Updates without App Store Approval
 
Real Time Communication with WebRTC
Real Time Communication with WebRTCReal Time Communication with WebRTC
Real Time Communication with WebRTC
 
Docker, a new LINUX container technology based light weight virtualization
Docker, a new LINUX container technology based light weight virtualizationDocker, a new LINUX container technology based light weight virtualization
Docker, a new LINUX container technology based light weight virtualization
 
Developing context aware applications with iBeacons technology
Developing context aware applications with iBeacons technologyDeveloping context aware applications with iBeacons technology
Developing context aware applications with iBeacons technology
 
Architecting JavaScript Code
Architecting JavaScript CodeArchitecting JavaScript Code
Architecting JavaScript Code
 
Html5 Canvas and Media
Html5 Canvas and MediaHtml5 Canvas and Media
Html5 Canvas and Media
 

Recently uploaded

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 

Html5 advanced part2

  • 1.
  • 2.
  • 3. Background threads in the browser
  • 4. handleM for 8 sec ouseClick timerTask for 2 sec timerTask for 2 sec timerTask for 2 sec
  • 5. Your favorite JavaScript library may not work with workers
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14. Polling, Long Polling & Streaming
  • 15.
  • 16.
  • 17.
  • 18. GET /PollingStock//PollingStock HTTP/1.1 Host: localhost:8080 User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: http://www.example.com/PollingStock/ Cookie: showInheritedConstant=false; showInheritedProtectedConstant=false; showInheritedProperty=false; showInheritedProtectedProperty=false; showInheritedMethod=false; showInheritedProtectedMethod=false; showInheritedEvent=false; showInheritedStyle=false; showInheritedEffect=false
  • 19. HTTP/1.x 200 OK X-Powered-By: Servlet/2.5 Server: Sun Java System Application Server 9.1_02 Content-Type: text/html;charset=UTF-8 Content-Length: 21 Date: Sat, 07 Nov 2009 00:32:46 GMT
  • 20. GET /text HTTP/1.1rn Upgrade: WebSocketrn Connection: Upgradern Host: www.websocket.orgrn …rn HTTP/1.1 101 WebSocket Protocol Handshakern Upgrade: WebSocketrn Connection: Upgradern …rn The WebSocket handshake (browser request and server response) Source: http://www.websocket.org/quantum.html
  • 22.
  • 23.
  • 24.
  • 25. Java Jetty C++ libwebsocket s Ruby EventMachin e .NET Erlang Python SuperWebSocket Shirasu pywebsocket Tornado
  • 26.
  • 27.
  • 28.
  • 29.
  • 30. <section itemscope itemtype="http://data-vocabulary.org/Person"> Hello, my name is <span itemprop="name">Suresh Balla</span>, I am a <span itemprop="title">principal consultant</span> at the <span itemprop="affiliation">Neudesic India</span>. My friends call me <span itemprop="nickname">Suresh</span>. You can visit my homepage at <a href="http://www.SureshBalla.com" itemprop="url">www.SureshBalla.com</a>. <section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> I live at <span itemprop="street-address">1234</span> <span itemprop="locality">White field</span> <span itemprop="region">Bangalore</span>. </section> </section>
  • 31. Developers can test pages containing Microdata using Google's Rich Snippet Testing Tool
  • 32. Defines a group of <section itemscope itemtype="http://data-vocabulary.org/Person"> vocabulary name/pair Hello, my name is <span itemprop="name">Suresh Balla</span>, values I am a <span itemprop="title">principal consultant</span> at the <span itemprop="affiliation">Neudesic India</span>. My friends call me <span itemprop="nickname">Suresh</span>. You can visit my homepage at <a href="http://www.SureshBalla.com" itemprop="url">www.SureshBalla.com</a>. <section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> I live at <span itemprop="street-address">1234</span> <span itemprop="locality">White field</span> <span itemprop="region">Bangalore</span>. </section> </section>
  • 33. <section itemscope itemtype="http://data-vocabulary.org/Person"> URL that identifies the Hello, my name is scope <span itemprop="name">Suresh Balla</span>, I am a <span itemprop="title">principal consultant</span> at the <span itemprop="affiliation">Neudesic India</span>. My friends call me <span itemprop="nickname">Suresh</span>. You can visit my homepage at <a href="http://www.SureshBalla.com" itemprop="url">www.SureshBalla.com</a>. <section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> I live at <span itemprop="street-address">1234</span> <span itemprop="locality">White field</span> <span itemprop="region">Bangalore</span>. </section> </section>
  • 34. <section itemscope itemtype="http://data-vocabulary.org/Person"> Adds a property to Hello, my name is element <span itemprop="name">Suresh Balla</span>, I am a <span itemprop="title">principal consultant</span> at the <span itemprop="affiliation">Neudesic India</span>. My friends call me <span itemprop="nickname">Suresh</span>. You can visit my homepage at <a href="http://www.SureshBalla.com" itemprop="url">www.SureshBalla.com</a>. <section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> I live at <span itemprop="street-address">1234</span> <span itemprop="locality">White field</span> <span itemprop="region">Bangalore</span>. </section> </section>
  • 35. Element Attribute Containing Value meta content audio src embed src iframe src img src source src video src a href area href link href object data time datetime All others Text content
  • 36.
  • 37.

Editor's Notes

  1. Developers mimic &apos;concurrency&apos; by using techniques like setTimeout(), setInterval(), XMLHttpRequest, and event handlers. Yes, all of these features run asynchronously, but non-blocking doesn&apos;t necessarily mean concurrency. Asynchronous events are processed after the current executing script has yielded. The good news is that HTML5 gives us something better than these hacks!
  2. Exceptions like locationhref (location object)
  3. Source: http://websocket.org/quantum.html
  4. Source: http://websocket.org/quantum.html
  5. http://data-vocabulary.org/Personhttp://data-vocabulary.org/Addresshttp://schema.org/Person