2016-07-05 3 views
0

Итак, у меня есть вопрос о том, как я должен реализовать несколько веб-страниц. Поскольку более < ссылка> замедлит работу, потому что больше HTTP-запроса = медленнее, я решил разместить таблицу стилей рабочего стола, планшета и мобильного телефона в один файл css, используя правило @media. Тем не менее, у меня есть более одной страницы, где каждая страница имеет один и тот же заголовок и нижний колонтитул, но другой раздел контента, поэтому мне нужно настроить css каждого контента. Моя проблема и вопрос заключается в том, следует ли поместить все содержимое css в один и тот же файл, чтобы был один файл css или разбить его, поэтому есть общий файл css и еще один css для каждой страницы. Пример структуры различий:html & css эффективность и производительность выпуск

Option 1 - One single css file: 
    - home.html 
     - common.css 
    - page-one.html 
     - common.css 
    - gallery.html 
     - common.css 

=== === или

Option 2 - Split css file: 
    - home.html 
     - common.css 
     - home.css 
    - page-one.html 
     - common.css 
     - p1.css 
    - gallery.html 
     - common.css 
     - gallery.css 

Причина я не могу решить, какой метод я не знаю, как CSS файлы обрабатываются. Я предполагаю, что веб-браузеры просматривают весь файл css и ищут тег (i.e: #myHeader) в html снизу вверх, затем применяются, когда совпадают теги. Вроде как это:

while(!End Of *css* File){ 
    while(!EO *html* F){ 
     if(cssTag == htmlTag) 
      applyCss() 
    } 
} 

Так, если в этом случае, я бы предположить CSS теги, которые даже не в текущей HTML страницы будет замедлить ход событий, так как он должен пройти через весь HTML-страницу в применять стиль или нет, прежде чем перейти к следующему стилю. Вариант 2 устраняет эту проблему, но представляет проблему наличия дополнительного HTTP-запроса на каждой странице. Теперь мой пример имеет только 3 страницы, но на самом деле у меня 8-10 страниц. С помощью этого большого количества страниц время, затрачиваемое на применение стилей на текущей странице, будет больше (Option1), но больше, чем HTTP-запрос (Option2)?

+0

Вы рассмотрели вариант 3: 'common.css' +'