В этой статье мы познакомимся с эффективными приемами работы с DOM, которые помогут минимизировать потребление памяти и обеспечить высокую производительность ваших приложений.
Рубрика «dom»
Шаблоны для эффективной работы с DOM с помощью современного чистого JavaScript
2024-09-15 в 8:05, admin, рубрики: document object model, dom, javascript, memory, timeweb_статьи_перевод, объектная модель документа, память
Три кита. Краткая история трех популярных CMS и попытка заглянуть в будущее
2023-06-01 в 10:27, admin, рубрики: API-First, ASP, CDA, CMA, cms, dom, dreamweaver, drupal, FrontPage, javascript, Joomla, JSP, mariadb, mysql, percona server, php, posgresql, sqlite, wordpress, Блог компании Serverspace, Читальный зал
Во второй половине «девяностых» индустрия «сайтостроения» переживала расцвет. Каждая компания стремилась заявить о себе в интернете, каждый пользователь мечтал завести личную «домашнюю страничку». На помощь веб-мастерам приходили всевозможные программы вроде FrontPage и Dreamweaver, но большинство сайтов все еще представляли собой набор статических HTML-страниц, иногда — с вкраплением CSS. Чуть позже появилась технология Server Side Includes, позволявшая динамически собирать сайт на сервере из стандартных блоков: «шапки», панели меню, «подвала» и, собственно, полезного содержимого. После этого оставался только один шаг до внедрения баз данных и систем управления контентом, значительно упростивших жизнь как разработчикам, так и владельцам ресурсов.
Читать полностью »
Как я в десять раз ускорил работу таблицы Google одной строкой CSS
2021-12-02 в 12:38, admin, рубрики: css, dom, Google, timeweb_статьи_перевод, Блог компании Timeweb Cloud, веб-сайты, производительность, Разработка веб-сайтов, скроллинг, тестирование, фронтендНаша компания использует Google Search Console для проверки статуса индексации и оптимизации видимости наших веб-сайтов. Также в консоли можно проверить, какие внешние веб-сайты ссылаются на вашу страницу. Однажды я просматривал страницу «Top linking sites» и заметил сильное торможение скроллинга. Оно происходило, когда я выбирал отображение большого массива данных (500 строк) вместо стандартных 10 результатов.
Раздел «Top linking sites» в Google Search Console, 500 строк на страницу
Я интересуюсь производительностью фронтенда, поэтому не мог удержаться и решил разобраться, в чём дело. В конце концов, Google активно стремится к повышению веб-производительности, поэтому стоит ожидать, что собственные публичные приложения компании будут хорошим эталоном.
Читать полностью »
Шпаргалка по JS-методам для работы с DOM
2021-05-15 в 7:00, admin, рубрики: dom, html, javascript, vds, vps, vps для сайтов, Блог компании Маклауд, выгодный vds, дешевые серверы, Разработка веб-сайтов, разработка сайтов
Основные источники
- DOM Living Standart
- HTML Living Standart
- Document Object Model (DOM) Level 3 Core Specification
- DOM Parsing and Serialization
Введение
JavaScript предоставляет множество методов для работы с Document Object Model или сокращенно DOM (объектной моделью документа): одни из них являются более полезными, чем другие; одни используются часто, другие почти никогда; одни являются относительно новыми, другие признаны устаревшими.
Я постараюсь дать вам исчерпывающее представление об этих методах, а также покажу парочку полезных приемов, которые сделают вашу жизнь веб-разработчика немного легче.
Размышляя над подачей материала, я пришел к выводу, что оптимальным будет следование спецификациям с промежуточными и заключительными выводами, сопряженными с небольшими лирическими отступлениями.
Сильно погружаться в теорию мы не будем. Вместо этого, мы сосредоточимся на практической составляющей.
Для того, чтобы получить максимальную пользу от данной шпаргалки, пишите код вместе со мной и внимательно следите за тем, что происходит в консоли инструментов разработчика и на странице.
Паттерн порталов в Angular: для чего нужен root-компонент в Taiga UI
2021-01-26 в 10:27, admin, рубрики: angular, css, dom, dropdown, html, javascript, modal, open source, Portal, taiga, TypeScript, z-index, Блог компании Tinkoff, Разработка веб-сайтовМой коллега Роман недавно объявил о выходе нашей новой библиотеки компонентов под Angular Taiga UI. В инструкциях Getting started сказано, что приложение нужно обернуть в некий tui-root. Давайте разберемся, что он делает, узнаем, как и зачем мы используем порталы и что это вообще такое.
Конец эпохи Trident
2020-01-28 в 12:04, admin, рубрики: activex, ajax, chromium, css, CSS Expressions, CSS Houdini, CSS Transforms, dom, edge, Embedded OpenType, EOT, gmail, gzip, html, HTML Components, html5, internet explorer 10, Internet Explorer 5.0, javascript, MHTML, MicroType Express, MSXML, Outlook Web Access, ramjet, SMIL, Trident, Viewlink, vml, web components, winjs, woff, XML, XMLHTTP, браузеры, компонентизация, Разработка веб-сайтовtl;dr Я бы сказал, что Microsoft на несколько световых лет опередила всех в разработке инструментов для проектирования сложных веб-сайтов. Сейчас эти технологии изобретают заново на руинах погибшей цивилизации.
Когда я был ребёнком, меня всегда завораживали истории о древних цивилизациях. Я зачитывался книгами об Атлантиде, об истории открытия Трои Генрихом Шлиманом, о греках, римлянах, империи инков и Древнем Египте. И меня всегда восхищали их продвинутые знания в области астрономии, математики и медицины, их невероятные достижения, возведение этих огромных монументов и построение высокофункциональных социальных систем. Что ещё более невероятно, так это то, что всё это было сделано за тысячи лет до появления христианской культуры!
Однако все эти высокоразвитые цивилизации в конце концов исчезли. Некоторые просто тихо вымерли, других вытеснили цивилизациями с лучшим вооружением. В большинстве случаев достижения побеждённых не передавались доминирующей группе, никак не обогащая победителей. Они просто исчезали. Что я всегда считал неудачным развитием событием.
Читать полностью »
Веб тренды 2020, которые стоит попробовать
2020-01-27 в 21:32, admin, рубрики: css, dom, html, JS, web, веб-дизайн, дизайн, Разработка веб-сайтов
Последние несколько лет мы наблюдаем множество изменений в мире веб технологий. В 2020 году, я хочу обратить ваше внимание на два основных тренда/цели которые есть у веб комьюнити: расширяемость и совместимость.
Расширяемость (Extensibility)
Расширяемость это когда вы можете взять технологию и расширить ее для своих нужд. На протяжении нескольких лет мы используем компоненты повсюду, как в качестве разработки приложений (компоненты на React, Vue, Svelte) так и в качестве разработки дизайна (дизайн системы).
На данный момент мы пытаемся сделать эти компоненты более уникальными и удобными для использования. Расширяемость в вебе позволяет нам использовать платформу (браузеры, html/css/js движки) для собственных нужд и экспериментов, разумеется для получения большей выгоды.
Расширяемые расширения в JavaScript
2020-01-18 в 13:31, admin, рубрики: css, dom, javascript, web-разработка, Блог компании Издательский дом «Питер», браузер, Клиентская оптимизация, книги, Программирование, Профессиональная литератураПривет!
Обращаем ваше внимание на долгожданную допечатку книги "Выразительный JavaScript", которая только-только пришла из типографии.
Тем, кто еще не знаком с творчеством автора книги (при всей энциклопедичности она понравится и начинающим разработчиком) — предлагаем познакомиться со статьей из его блога; в статье изложены мысли об организации расширений в языке JavaScript
«WARNING: sanitizing HTML stripped some content» и как с ним правильно бороться
2019-09-27 в 14:14, admin, рубрики: angular, css, dom, dompurify, html, javascript, JS, sanitize, sanitizers, TypeScript, Блог компании Tinkoff.ru, Разработка веб-сайтовВсем, кому приходилось вставлять HTML содержимое в DOM в Angular, доводилось видеть это сообщение. Конечно, все мы получаем проверенное содержимое с нашего же сервера и просто хотим застилизовать сообщение об ошибке. Или вставляем HTML из наших же констант, инлайним наши SVG иконки, ведь нам всего лишь нужно покрасить их в цвет текста. Ведь ничего плохого не случится, если мы просто скажем Angular`у — не дрейфь, там всё чисто.
Чаще всего это может быть и так, но в крупных проектах с массой разработчиков, которые пишут независимые компоненты, никогда не знаешь наверняка, где может оказаться твой код. А если вы, как я, разрабатываете библиотеку переиспользуемых компонентов, то подобную ситуацию нужно решить на корню.
Механизмы расширяемых расширений в JavaScript
2019-09-20 в 14:28, admin, рубрики: dom, javascript, Блог компании Издательский дом «Питер», Веб-разработка, книги, Программирование, Профессиональная литератураЗдравствуйте, коллеги!
Напоминаем, что не так давно у нас вышло 3-е издание легендарной книги «Выразительный JavaScript» (Eloquent JavaScript) — на русском языке напечатано впервые, хотя качественные переводы предыдущих изданий встречались в Интернете.
Тем не менее, ни JavaScript, ни исследовательская работа господина Хавербеке, конечно же, не стоят на месте. Продолжая тему выразительного JavaScript, предлагаем перевод статьи о проектировании расширений (на примере разработки текстового редактора), опубликованной в блоге автора в конце августа 2019 года
Читать полностью »