Здесь водятся драконы

Об авторе

10 лет профессиональной веб-разработки.

• Программирую с детства.
• Дотошен, изобретателен, перфекционист, люблю когда красиво.
• Мейнтейнер SVGO в свободное время (которого нет).

Веб-технологии

Зачем нужно знание технологий

1. Фундамент для разработки.
2. Ориентирование в предметной области.
3. «Вечные ценности», которые никогда не устареют.

Таблицы

Таблицы

1. Мейнстрим 90-х.
2. Дурной тон в 2000-х.

Таблицы: страхи

1. Непредсказуемы.
2. Баг с тенью внутри в IE9.

Таблица: внешний вид

Таблица: переполнение

Свойство table-layout: fixed

CSS 2, раздел 17.5.2 «Table width algorithms: the 'table-layout' property».

• Говорит не учитывать содержимое ячеек. (Учитывается только первый ряд.)
• Заданные размеры жёстко соблюдаются.
• При заданной ширине таблицы, ячейки распределяются равномерно.
• Работает свойство overflow

Таблица: table-layout: fixed

Бой с тенью

Internet Explorer 9

IE9: чистая таблица

border-collapse: collapse

CSS 2, раздел 17.6 «Borders».

• Объединяет границы ячеек.
• Убирает зазор между ячейками подобно border-spacing: 0 (IE8+) и <table cellspacing=0>.
• Поддерживается даже в IE6.

Таблицы: выводы

1. table-layout: fixed делает таблицы предсказуемыми.
   • Как вариант может помочь max-width.
2. По возможности избегайте border-collapse: collapse (IE9−).

Основные способы вёрстки

1. Таблица
2. Бестабличная вёрстка

Общие выводы

1. Знайте спецификации.
2. Пересматривайте устоявшиеся подходы.
3. Проверяйте гипотезы.

ECMAScript 5

Индекс строки

		'кот'[0]  // => 'к'
	

Инициалы

		firstName[0] + lastName[0]
	

Если индекса нет

		''[0]  // -> undefined
	

Итог

		(firstName[0] || '') + (lastName[0] || '')
	

ECMAScript 3

		str.charAt(index)
	

ECMAScript 3

		firstName.charAt(0) + lastName.charAt(0)
	

Как оценить новую технологию

1. Какая проблема решается?
2. В чём новизна?
3. Какие преимущества и недостатки?

shouldComponentUpdate

Пример: компонент таблицы

class Table extends Component {
  render() {
    return (
      <div>
        {this.props.items.map(i =>
          <Cell data={i}
                options={this.props.options || []} />
        )}
      </div>
	

Пустой массив в константу

const default = [];
class Table extends Component {
  render() {
    return (
      <div>
        {this.props.items.map(i =>
          <Cell data={i}
                options={this.props.options || default} />
         )}
      </div>
	

Стрелочная функция

class TextField extends Component {
  render() {
    return (
      <Input
        onChange={e => this.props.update(e.target.value)}/>;
    )
  }
}
	

Связывание функции

class TextField extends Component {
  update(e) {
    this.props.update(e.target.value);
  }
  render() {
    return (
      <Input onChange={this.update.bind(this)}/>;
    )
  }
	

Предварительное связывание

class TextField extends Component {
  constructor(props) {
    super(props);
    this.update = this.update.bind(this);
  }
  render() {
    return <Input onChange={this.update}/>;
  }
	

Источник

React.js pure render performance anti-pattern

Выводы

1. Фреймворк — только инструмент.
2. Полезно знать как работает фреймворк.
3. Оптимизируйте код в «горячих» местах.

Размерности блочной модели

Установка title

for (var tr = tbody.firstChild; tr = tr.nextSibling;)
    for (var td = tr.firstChild; td = td.nextSibling;)
        if (td.scrollWidth > td.clientWidth)
            td.title = td.textContent;

	

Выносим из цикла

var cells = [];
for (var tr = tbody.firstChild; tr = tr.nextSibling;)
    for (var td = tr.firstChild; td = td.nextSibling;)
        if (td.scrollWidth > td.clientWidth)
            cells.push(td);

for (var i = cells.length; i--;)
    cells[i].title = cells[i].textContent;

	

Ускорение в ~5 раз.

Выводы

1. Используйте эффективные алгоритмы.
2. Знайте, как работают браузеры.

jsperf.com

Что быстрее?

var elem = document.getElementsByClassName('class')[0];
var elem = document.querySelector('.class');
	

Выводы

1. jsPerf(DOM) =
2. Не занимайтесь микрооптимизациями.
3. Знание основных принципов помогает сделать верные выводы.

Ссылки

1. HTML Living Standard
2. CSS current work
3. You Don't Know JS (book series)
4. learn.javascript.ru
5. Mozilla Developer Network
6. How browsers work