Как сделать веб-сайт выполненным быстрее?
Позвольте мне попытаться объяснить (подробнее на Блог ):
- Когда вы пишете
Carконструкторvar Car = function(){}, это то, как все происходит внутри:
У нас есть одна {prototype}скрытая ссылка наFunction.prototype, которая недоступна, и однаprototypeссылка наCar.prototype, которая доступна и имеет фактическоеconstructorизCar. И Function.prototype, и Car.prototype имеют скрытые ссылки наObject.prototype. -
Когда мы хотим создать два эквивалентных объекта, используя оператор
newи методcreate, мы должны сделать это следующим образом:Honda = new Car();иMaruti = Object.create(Car.prototype).
Что происходит? Honda = new Car();& mdash; Когда вы создаете такой объект, скрытое свойство{prototype}указывает наCar.prototype. Итак, здесь{prototype}объекта Honda всегда будетCar.prototype& mdash; у нас нет никакой возможности изменить свойство{prototype}объекта. Что если я захочу изменить прототип нашего вновь созданного объекта?
Maruti = Object.create(Car.prototype)& mdash; Когда вы создаете такой объект, у вас есть дополнительная опция для выбора свойства{prototype}вашего объекта. Если вы хотите Car.prototype в качестве{prototype}, то передайте его в качестве параметра в функцию. Если вам не нужен{prototype}для вашего объекта, вы можете передатьnullследующим образом:Maruti = Object.create(null).
Заключение & mdash; Используя метод Object.create, вы можете свободно выбирать свойство объекта {prototype}. В new Car(); у вас нет этой свободы.
Предпочтительный способ в OO JavaScript:
Предположим, у нас есть два объекта a и b.
var a = new Object();
var b = new Object();
Теперь предположим, что a имеет несколько методов, к которым b также хочет получить доступ. Для этого нам необходимо наследование объекта (a должен быть прототипом b, только если мы хотим получить доступ к этим методам). Если мы проверим прототипы a и b, то мы обнаружим, что они имеют прототип Object.prototype.
Object.prototype.isPrototypeOf(b); //true
a.isPrototypeOf(b); //false (the problem comes into the picture here).
Задача - Мы хотим, чтобы объект a был прототипом b, но здесь мы создали объект b с прототипом Object.prototype. Решение - ECMAScript 5, представленное Object.create(), для легкого достижения такого наследования. Если мы создадим объект b следующим образом:
var b = Object.create(a);
, то
a.isPrototypeOf(b);// true (problem solved, you included object a in the prototype chain of object b.)
Итак, если вы делаете объектно-ориентированный сценарий, то Object.create() очень полезен для наследования.
11 ответов
Установите плагины YSlow и Pagespeed для Firefox. Затем начните искать способы неоптимизации вашего сайта. Это будет очень похоже на попытку сделать глоток воды из пожарного гидранта.
Использование минимизированного (и, возможно, агрегированного) Javascript и CSS вместе с хорошим, здоровым, сроком действия в далеком будущем - действительно хороший способ начать.
- Не забудьте сжать.
- И используйте Etags.
- И поместите ваш CSS в начало документа.
- И поместите javascript в конец.
- И используйте отдельные домены для статических ресурсов.
- И избегайте перенаправления URL-адресов.
- И удалите дублирующиеся javascript и CSS.
И ... посмотрите, что я имею в виду, говоря о пожарном гидранте!
Если у вас много javascript, вы может захотеть использовать сжатие Javascript. Dojo предоставляет один из таких инструментов SHRINKSAFE для сжатия вашего javascript. Найдите ссылку ниже: http://www.dojotoolkit.org/docs/shrinksafe
Существует еще один инструмент с открытым исходным кодом от Google, называемый скоростью страницы, который может помочь вам оптимизировать производительность веб-сайта. Он использовался внутри компании до того, как недавно был открыт для всех. http://google-code-updates.blogspot.com/2009/06/introduction-page-speed.html http://code.google.com/speed/page-speed/
Надеюсь, это поможет.
Меньше файлов - больше - CSS-спрайты , возможно, стоит рассмотреть. По моему опыту, вы должны сбалансировать свой CSS-файл между скоростью и удобством обслуживания - одно правило более или менее не повлияет на ночь и день ...
Для IE см. http://www.fiddler2.com/fiddler/Perf/ Новый плагин neXpert для Fiddler ( http://www.fiddler2.com/fiddler2/addons/nexpert.asp ) предлагает функции, аналогичные тем, которые есть в YSlow и PageSpeed.
Для Firefox есть отличный плагин под названием Dust-Me Selectors. Он сканирует ваши файлы css и позволяет вам находить селекторы, которые не используются / стали избыточными в вашей разметке.
https://addons.mozilla.org/en-US/firefox/addon/5392
Вы также должны доставлять свой статический контент через CDN. Параллельная загрузка статических файлов ускорит рендеринг вашей страницы. Лучшее объяснение здесь: http://www.sitecheck.be/tips/speed-up-your-site-using-a-cdn/
Google в настоящее время собирает всевозможные советы по повышению производительности на своей новой странице «Давайте сделаем Интернет быстрее» здесь: http://code.google.com/intl/de- CH / speed / article /
К вашему сведению: не вся информация на этих страницах действительна, особенно советы по PHP.
Используя ColdFusion, вы должны убедиться, что ваши запросы кэшируются . Используйте анализатор запросов (при использовании сервера mssql), чтобы убедиться, что медленная загрузка страницы не является результатом неверного запроса. На стороне базы данных вы также захотите обеспечить правильную индексацию.
Большим фактором производительности является количество отправленных HTTP-запросов для изображений, файлов и т.д. YSlow покажет вам эту информацию. Он доступен только для firefox.
I '
Посмотрите эти видео от Стива Содерса (автора YSlow):
http://www.youtube.com/ смотрите? v = aJGC0JSlpPE
http://www.youtube.com/watch?v=BTHvs3V8DBA
У него также есть пара книг.
Чтобы подвести итог вышесказанному:
Скорость веб-сайта зависит от нескольких вещей:
- Сервер
- Соединение
- Клиент
И на В каждой этой части можно делать улучшения.
Сервер: , если вы полагаетесь на базу данных, проверьте, кэшируются ли ваши запросы, и, что более важно, проверьте, кэшированы ли ваши данные. Например, если на каждой странице вы получаете меню из базы данных, вы можете кэшировать этот результат. Кроме того, вы можете проверить свой код и посмотреть, есть ли место для оптимизации. Также играет роль само оборудование. Если вы используете план виртуального хостинга, возможно, на сервере полно других неоптимизированных приложений, которые наносят ущерб серверу.
Подключение: Здесь пригодятся YSlow и Pagespeed, а также Fiddler . Вы можете кэшировать статический контент (CSS и JS). Установите срок их действия в далеком будущем. Использование GZIP для уменьшения их содержимого и объединение статических файлов в определенной степени помогает. Вдобавок, возможно, у сервера низкая пропускная способность.
Клиент: , если вы используете дурацкий javascript или используете медленные селекторы CSS, это может снизить производительность клиента. Но это зависит от скорости клиентского компьютера.
Вы должны кодировать многопоточные программы очень осторожно. Короткого пути нет, вы должны понимать ход своей программы, иначе вы будете обречены.
Что касается браузеров, Safari 4 утверждает, что это «самый быстрый браузер в мире», и я могу сказать, что версия для Mac определенно хороша и быстра (не говоря уже об элегантности!). Однако приведенные выше предложения будут иметь гораздо большее значение, чем то, какой браузер вы используете.
Стив
Вы не должны рекомендовать какой-либо конкретный браузер, но разработайте свою веб-страницу в соответствии с текущими стандартами с некоторыми исправлениями для старых моделей, если это необходимо. С моей точки зрения, все может повлиять на скорость, но CSS - наименее важный, и в реальных примерах пользователь этого не заметит. В большинстве случаев четкое разделение объявлений html и стилей поможет. Что действительно имеет влияние? Прежде всего, вы можете просто потратить деньги на решение проблемы, заключив контракт на лучший хостинг (возможно, выделенный сервер). Еще один способ повысить скорость загрузки веб-сайта - это снизить качество ваших изображений и уменьшить использование CSS-спрайтов. Очень часто на динамических веб-страницах база данных является узким местом, и поэтому кеширование и хороший уровень абстракции базы данных могут улучшить ситуацию (PHP: PDO вместо простого использования mysql ()). GZip ваш вывод для пользователя. Есть намного больше вещей, но многие из них очень зависят от языка ..
Я рекомендую использовать FireBug и loadimpact.com для тестирования.