Оптимизация производительности Общего интерфейсной и вопросы совместимости браузера

Общая оптимизация производительности переднего конца Что?

• 01. HTTP просит, чтобы минимизировать
• 02. Использование CDN (Content Delivery Network)
• 03. Добавить Expirem голову
• 04. сжатия в сборе (Gzip)
• 05. Стиль CSS лист на верхней части (головки)
• 06. Сценарий на расслоение плотной нижней
• 07. Избегайте использование выражений CSS
• 08. Сокращение DNS запросов
• 09. обтекание JS (сжатие / спутать)
• 10. Избегайте перенаправления (не потерять «/»)
• 11. Использование Ajax кэшируемым
• 12. Удалите дубликаты скриптов (код модульные)

проблемы совместимости общего браузера грузозахватные

• 1. различных вкладок браузера по умолчанию внешний и внутренний патч патча

  Решение: CSS увеличилось по маске

* {
    margin: 0 ;
    padding: 0 ;
}

• 2.IE6 из двусторонних вопросов: установление поплавка в IE6, но и установить запас, запас будет проблемой

  Решение: Установить display:inline;

• 3. При установке высоты метки ниже 10px, в IE6, IE7 появится в позиции, расположенной за пределами их

  Решение: за положение по высоте метки overflow:hidden, или значения параметра линии высоты меньше , чем высота ваших настроек

• 4. Изображение разрыв по умолчанию

  Решение: Используйте поплавок для макета IMG

• 5.IE9 следующие браузеры не могут использовать прозрачность

  Решение:

  opacity:0.5;
  filter:alpha(opacity = 50);
  filter:progid:DXImageTranform.Microsoft.Alpha(style = 0,opacity = 50);

• 6. поля перекрываются: когда два соседних элемента снабжены запасом рентабельности, рентабельность будет принимать максимальное, минимальное отбрасывается;

  Решение: Для того чтобы предотвратить перекрывающиеся поля, родительский элемент может быть добавлено к югу от элемента с родительским элементом к переполнению: скрытый;

• 7. cursor:handДисплей руки, не поддерживается на сафари

  Решение: унифицированы использование курсора: указатель;

• 8. Два элементов блока, родительский элемент , расположенный overflow:auto;подэлемент множество позиции: относительная; и высота больше , чем родительский элемент, будет скрыты в IE6, IE7 не переполнение;

  Решение: родительский элемент устанавливается `положение: относительная;