Книги по клиентской оптимизации

Эти две книги Стива Содерса я прочитал еще осенью прошлого года. Вообще для меня вопросы клиентской оптимизации вышли на передний план в прошлом году, что отчасти связано с переходом в Яндекс, где степень повернутости на оптимизации гораздо выше, чем в Студии, отчасти с тем, что сейчас это в целом мощный тренд, и все сообщество веб-разработчиков повернуто на этой теме.

Steve Souders - High Performance Web Sites: Essential Knowledge for Front-End Engineers

Думаю, что эта книга обязательна к прочтению всеми фронтэндерами. Она небольшая и содержит 14 правил, которые помогут сделать ваш сайт быстрее. Конечно, многие правила вы наверняка уже знаете или хотя бы слышали о них, однако после прочтения этой книги все обрывки знаний уложатся в систему, восполнятся какие-то пробелы. Скажем, для меня новыми стали знания про CDN (Content Delivery Networks) и ETags. В завершение Стив устраивает своеобразную «порку» десяти крупнейших сайтов и на примере показывает, как определять требующие улучшения места, и каких результатов можно добиться, применив описанные в книге правила.

Steve Souders - Even Faster Web Sites

Хотите выжать из своих сайтов еще больше производительности и каждая миллисекунда у вас на счету? Вторая книга Содерса предлагает нам самые передовые идеи по убыстрению сайтов. В первую очередь она понравится тем, у кого шило в одном месте кто любит экспериментировать. Зачастую в книге предлагается проблема, возможные подходы к ее решению, за и против каждого подхода, потенциальные засады и пути обхода, и под конец Стив суммирует все свои тесты в дерево решений, которое позволяет выбрать подходящий подход в зависимости от обстоятельств. Несмотря на то, что Содерс сам умеет увлекательно излагать материал, шесть глав написаны приглашенными экспертами (Крокфорд, Закас, Стефанов), что, несомненно, бодрит.

***

Тем временем загрузил в свою читалку две книги Николая Мациевского — «Разгони свой сайт» и «Реактивные веб-сайты». Плюс очень жду новую книгу Николаса Закаса High Performance JavaScript.

Cоздание элементов из HTML-строк в jQuery 1.4

Еще немного на тему простого шаблонирования в JavaScript

Используя jQuery, я довольно часто создаю элементы из HTML-строк с последующим добавлением атрибутов и навешиванием обработчиков событий. Примерно так:

$("<input/>")
    .attr({
        type: "text",
        name: "city"
    })
    .val("Moscow")
    .focusin(function() {
        $(this).addClass("active");
    })
    .focusout(function() {
        $(this).removeClass("active");
    })
    .appendTo("form");

В jQuery 1.4 есть приятное нововведение: вторым аргументом можно передать объект со свойствами создаваемого элемента. Код становится проще и аккуратнее:

$("<input/>", {
    type: "text",
    name: "city",
    val: "Moscow",
    focusin: function() {
        $(this).addClass("active");
    },
    focusout: function() {
        $(this).removeClass("active");
    }
}).appendTo("form");

Этот объект может содержать любые свойства понимаемые методом attr(), там же можно навесить обработчики событий, а также, не отходя от кассы, можно задать значения для методов val, css, html, text, data, width, height и offset.

Кроме того, в такой записи неплохо смотрится и более сложный шаблон с вложенным элементом:

$("<a/>", {
    href: "/test/",
    "class": "my_link",
    html: $("<img/>", {
        src: "test.gif",
        width: 60,
        height: 30
    }),
    click: function() {
        doSomething();
    }
}).appendTo("body");