Web-технологии. Лекция 5. Browser. Что такое Browser? ПО для работы с web-сайтами В общем – интерфейс взаимодействия. - презентация

1 Web-технологии. Лекция 5. Browser

2 Что такое Browser? ПО для работы с web-сайтами В общем – интерфейс взаимодействия

3 Движки Браузеров Webkit (Safari, Chrome) Gecko (Firefox) Trident (IE) Presto (Opera)

4 WebKit Apple Библиотеки KHTML и KJS Состоит из WebCore (визуализация и Document Object Model), JSCore (фреймворк для обработки сценариев) и Drosera (отладчик ошибок)

5 KHTML, KJS и DOM KDE & HTML – компонент для просмотра HTML под KDE W3C DOM: Level NULL – все специфические модели DOM, существовавшие до стандартизации (document.images/forms/layers/all) Level 1 – базовые возможности DOM (HTML и XML) – получать узлы документа, изменять и добавлять данные Level 2 – поддержка пространства имён XML и событий Level 3 – 6 спецификаций: Core, Load and Save, Xpath, Views and Formatting, Requirements, Validation (расширения DOM)

6 Пример кода для валидации DOM if (document.getElementById && document.getElementsByTagName) { // если методы getElementById и getElementsByTagName // доступны, то можно относительно точно предположить поддержку W3CDOM. obj = document.getElementById("navigation") // далее идёт другой код с использованием возможностей W3CDOM. //..... }

7 JS код function domImplementationTest(){ var featureArray = ['HTML', 'XML', 'Core', 'Views', 'StyleSheets', 'CSS', 'CSS2', 'Events', 'UIEvents', 'MouseEvents', 'HTMLEvents', 'MutationEvents', 'Range', 'Traversal']; var versionArray = ['1.0', '2.0', '3.0']; var i; var j; if(document.implementation && document.implementation.hasFeature){ for(i=0; i < featureArray.length; i++){ for(j=0; j < versionArray.length; j++){ document.write( 'Поддержка расширения '+ featureArray[i] + ' версии ' + versionArray[j] + ' : ' + document.implementation.hasFeature(featureArray[i], versionArray[j]) + ' ' ); } document.write(' '); }

8 Gecko Главная концепция – кросс- платформенность Поддержка XUL

9 Компоненты Gecko Синтаксический анализатор HTML и XML Движок для вёрстки Обработчик CSS Интерпретатор JS GL NetL Набор lib для визуализации графики Plug-in API Open Java Interface Библиотека отображения шрифтов Библиотека средств защиты

10 Trident COM-модель Косячит со стандартами (Tasman-версия – нет)

11 Presto Работа с JS (свои движки Carakan, Futhark и т.п.) Поддержка HTML5, CSS3, геолокация вшита в ядро

12 Тест Acid Тест поддержки браузером Web- стандартов (каждую версию – новые) Группы тестов: DOM Traversal, DOM Range, HTTP DOM Core, Events DOM Views, Style, CSS 3, Media Queries Поведение HTML таблиц и форм при управлении из скрипта, DOM HTML Свои Acid3 тесты ECMA Script (JS – его расширение)

13 Табличке IEFireFoxChromeSafariOperaOpera Mini NetscapeMozillaetc Фев-мар 0,98 0,28 0,52 0,23 0,02 0,14 0,37 0,02 Март 60,64 24,52 6,13 4,66 2,37 0,78 0,47 0,16 Февраль 61,62 24,24 5,61 4,43 2,35 0,64 0,74 0,14 0,18 январь 62,12 24,43 5,22 4,53 2,38 0,59 0,36 0,14 0,18

14 Табличке (протоколы и технологии) CSS2FramesJavaJSXHTMLRSSAtom FTPNNTPSSLIRCGopher Chrome Да ПлагинДа Нет ДаНетДаНетНеизвестно IE Да НетДа НетДаНетДаНетЧастично [ [ Opera Да FireFox Да ПлагинДаПлагинДаПлагинДа

15 Табличке (функционал) вкладкиМенеджер закачекПанель поиска Проверка орфографии Блокировка баннеров Блокировка всплывающих окон Фильтр фишинга Пропорцион альное увеличение Chrome Да РасширениеДа IE Да (с 7-й версии) Да ЧастичноДа Opera Да FireFox Да

16 Быстродействие Результаты тестирования в Sunspider (меньший результат – лучший): Firefox ms IE ms Chrome ms Объем занимаемой приложением памяти:Использование RAM (десять страниц): Firefox 3.1 – 91 Мбайт IE8 – 230 Мбайт Chrome – 141 Мбайт Использование RAM (одна страница): Firefox 3.1 – 50 Мбайт IE8 – 59 Мбайт Chrome – 22 Мбайт Время запуска: Firefox – 37с Chrome – 15с IE8 - n/a Время загрузки страницы: Firefox – 8с Chrome – 11с IE8 - n/а