Clever Geek Handbook

ラグナロクが来ます！ または途中でOpera 11.50

Ragnarök-新しいHTML5解析アルゴリズムを備えたバイキングブラウザー！



今週、ラグナロクと呼ばれるラボビルドがデビューし、HTML5解析アルゴリズムの実装が含まれています。 このアセンブリをテストしてください。 次のリンクを選択できます。







今週は、クールなHTML5の例を見るでしょう。



インターネットには、HTML5ビデオプレーヤーでのゲーム、ドラッグアンドドロップのウィズバング、およびHTML5と「HTML5」の他の例がたくさんあります。 しかし、ここであなたは本当に今週、おそらく最高の面白い例を見るでしょう。 準備はいいですか

だから： 

 <b><b><i>Yo!</b></i></b>



私はあなたがのは間違っているか見てみましょうどのような、不思議に思っていることがわかります。 要素が正しくネストされていない、この場合はタグ 
 <i>
最初に閉じてください。 また、異なるブラウザはどのようにDOMを構築しますか？



これはOpera Dragonflyと同等のもの、またはIan HicksonのDOMビューアで確認できます



Internet Explorer 9およびSafari 5は、次の結果を提供します。 

 <!DOCTYPE HTML> <html><HEAD></HEAD><BODY> <B><I>Yo!</I></B><I></I> </BODY></html>



Opera、Firefox、Chromeはこれを提供します 

 <!DOCTYPE HTML> <html><HEAD></HEAD><BODY> <B><I>Yo!</I></B> </BODY></html>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     </ I> </ B> <!DOCTYPE HTML> <html><HEAD></HEAD><BODY> <B><I>Yo!</I></B> </BODY></html>



すべてのブラウザーは、正しくないネストでソートされましたが、順次ではなく、Internet ExplorerとSafariには追加の空の要素があることに注意してください 
 <i>
、Opera、Firefox、Chromeにはありません。 何が正しい？ HTML4では、両方とも当てはまります。 HTML4仕様では、適切なマークアップを使用して何をすべきかを記述しているだけで、悪いマークアップを記述していないため、Webの95％が検証に合格しないことがわかっています。 したがって、HTML4仕様ではエラー処理が提供されていないため、ブラウザーは独自のデバイスに任され、貧弱なマークアップをどうするかを自分で考える必要があります。



このような単純なマークアップはすでに非常に異なるDOMを生成し、今では想像します

それは、数十または数百の要素のタグから実際の例より多くの数になります。 このような不一致があるすべてのブラウザで同等に動作するjavascriptコードを記述することは、脱毛やWeb開発者の泣き声の主な理由の1つです。



幸いなことに、現在この問題の解決策があります。



HTML5解析アルゴリズム。

HTML5仕様には、有効かつ無効なマークアップを解析するためのルールが含まれています 。 すべてのブラウザーがHTML5解析アルゴリズムを受け取った後、同じマークアップにより、関連するすべてのブラウザーで同じDOMが生成されます。

これには2つの主な結果があります。





検証は過去のものですか？

絶対にありません。 依然として重要な品質保証ツールであり、HTML5解析アルゴリズムが互換性のあるDOMを再生するからといって、それが必要なDOMであるとは限りません。



Operaの実装

15年前に書かれた内容に基づいて私たちの古いHTML構文解析アルゴリズム。 規格の変更や仕様に従わない多くの方法に対応するために、常に追加されていました。 すべての変更の後、コードは再描画されたクリスマスツリーのように見え始め、新しい機能を追加することはツリー全体をノックすることなく非常に困難になりました。



解析アルゴリズムを書き直す決定により、設計全体をクリアすることが可能になりました。



これで、新しいRagnarökパーサーがhtml5libに基づくHTML5仕様への準拠テストに99.9％合格したことを誇らしげに宣言できます。 失われた0.1％は、ラグナロクが金になるときまでに実現します。 テストのセット全体も公開されますので、自分ですべてを確認でき、さまざまなブラウザーを楽しむことができます。



ラグナロクは、やや不完全な（したがって誤解を招く） html5test.com （HTML5の埋め込みSVGとMathMLの2つのボーナスポイント）で11のうち11（プラス2のボーナスポイント）を獲得します。



メモリ消費

古いアルゴリズムを長い間使用してきた主な理由は、貧弱なマークアップで作業するときのメモリの効率的な使用です。 HTML5仕様で指定されたノードを複製する代わりに、アルゴリズムには、どのノードを複製するかを決定するポインターの複雑なシステムがありました。 これにより、不必要なメモリの割り当てから彼が救われ、コード全体が非常に複雑になりました。 ノードのコピーに切り替えましたが、これにはもう少しRAMが必要です。 Operaは常にメモリの効率的な使用を重視し、小さなデバイスで動作するため、最終リリースの前にこの副作用を最小限に抑えています。



性能

これは技術的なデモであり、リリースのような速度に最適化されていないため、現時点では明らかではありませんが、生産性を高めるためのもう1つの利点です。 HTMLコードの解析にかかる時間は、レンダリングやページの読み込みに比べて比較的短いため、全体的なパフォーマンスの向上はそれほど顕著ではありませんが、パフォーマンスの改善はすべて改善されていますか？



熱いうちにつかむ！

上記のリンクをダウンロードしてください。



ご注意

これは技術的なデモであり、動作しない場合があります。たとえば、m2にはいくつかの問題があります。



パーサーまたはエラーについてのコメントをここに残してください。


More articles:


All Articles