Заголовок сегодняшнего дня

внешний интерфейс сервер JavaScript DNS
Заголовок сегодняшнего дня

Дуй, дуй, моя гордость и снисхождение, 2017 год, сегодня начало зимы, хоть осенний ветер еще дует, но солнышко пригревает, и настроение тоже греет. Деревья по обеим сторонам дороги были одеты в золото, шумели и шумели, а мертвые листья на земле были подхвачены ветром и вращались вокруг меня.

Оставьте несколько слов, чтобы увидеть, хотите ли вы решить, говорить их или нет, и сначала перейдите к вопросам интервью:

Вопрос 1 (CSS)

Ответ 20px.

Вопрос 2 (html)

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

Поскольку скорость разрешения DNS является основным протоколом Интернета, оптимизаторы веб-сайтов легко упускают из виду. Теперь большинство новых браузеров оптимизированы для разрешения DNS.Типичное разрешение DNS занимает 20-120 миллисекунд.Это хороший метод оптимизации для сокращения времени и времени разрешения DNS. Предварительная выборка DNS позволяет разрешать доменное имя с этим атрибутом в фоновом режиме без нажатия пользователем ссылки, а разрешение доменного имени и загрузка содержимого являются последовательными сетевыми операциями, поэтому этот метод может сократить время ожидания пользователя и улучшить взаимодействие с пользователем. .

По умолчанию браузер предварительно выбирает доменное имя на странице, которая не находится в том же домене, что и текущее доменное имя (доменное имя просматриваемой веб-страницы), и кэширует результат, который является неявным DNS Prefetch. Если вы хотите выполнить предварительную выборку доменов, которые не отображаются на странице, вы будете использовать явную предварительную выборку DNS.

В настоящее время большинство браузеров уже поддерживают это свойство, и поддерживаются следующие версии:

  • Safari: 5+
  • Chrome: All
  • Firefox: 3.5+
  • Opera: Unknown
  • IE: 9+ (называется «Предварительное разрешение» на blogs.msdn.com)

Среди них Chrome и Firefox 3.5+ имеют встроенную технологию предварительной выборки DNS и соответствующие настройки оптимизации для предварительного разрешения DNS. Таким образом, даже если это свойство не установлено, Chrome и Firefox 3.5+ могут автоматически выполнять предварительный анализ в фоновом режиме.

DNS Prefetch следует размещать как можно ближе к началу веб-страницы, и рекомендуется размещать его сзади. Конкретное использование заключается в следующем:

<meta http-equiv="x-dns-prefetch-control" content="on">

<link rel="dns-prefetch" href="//www.itechzero.com">

<link rel="dns-prefetch" href="//api.share.baidu.com">

<link rel="dns-prefetch" href="//bdimg.share.baidu.com">

Следует отметить, что хотя использование DNS Prefetch может ускорить разрешение страниц, им нельзя злоупотреблять, поскольку некоторые разработчики указывалиОтключение упреждающего чтения DNS экономит 10 миллиардов DNS-запросов в месяц..

Если вам нужно отключить неявную предварительную выборку DNS, вы можете использовать следующие теги:

<meta http-equiv="x-dns-prefetch-control" content="off">

Вопрос 3 (CSS)

стоимость описывать
absolute

Генерирует абсолютно позиционированные элементы, позиционированные относительно первого родительского элемента, отличные от статического позиционирования.

Положение элемента задается свойствами «слева», «сверху», «справа» и «снизу».
fixed

Генерирует абсолютно позиционированные элементы, расположенные относительно окна браузера.

Положение элемента задается свойствами «слева», «сверху», «справа» и «снизу».
relative

Создает относительно позиционированный элемент, расположенный относительно его нормального положения.

Таким образом, "left:20" добавляет 20 пикселей к ЛЕВОЙ позиции элемента.
static По умолчанию. Без позиционирования элементы отображаются в обычном потоке (игнорируя объявления top, bottom, left, right или z-index).
inherit Указывает, что значение свойства position должно быть унаследовано от родительского элемента.

Вопрос 4 (регулярное выражение)

В нем рассматривается принцип работы внешнего шаблонизатора.

ты видишь это9 строк кода для реализации шаблона engine.js

Tpl = function(tpl, data) {
	var fn = tpl.replace(/</g, '<').replace(/>/g, '>') //    转义 <>
		.replace(/(<%=)([\s\S]*?)(%>)/g, '$1_html_+= ($2)\n$3') // <%= %>  [\s\S]允许换行
		.replace(/(<%)(?!=)([\s\S]*?)(%>)/g, '$1\n\t$2\n$3') // <% js code %>  (?!=)不要匹配到<%= %>
		.replace(/(^|%>|%>)([\s\S]*?)(<%=|<%|$)/g, function($, $1, $2, $3) { // 边界符外的html, html 中的(\|"|\r|\n) 要转义
			return '_html_+= "' + $2.replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\r?\n/g, '\\n') + '"\n'
		});
	return (fn = Function('data', 'with(data||{}){\nvar _html_=""\n' + fn + '\nreturn _html_\n}')), data ? fn(data) : fn
};

Вопрос 5 (http)

Cache-Control определяет запросы и ответы механизма кэширования. Хороший механизм кэширования может уменьшить пропускную способность сети, повысить скорость доступа, улучшить взаимодействие с пользователем, а также снизить нагрузку на сервер.

Cache-Control в основном имеет следующие типы:

(1) Запрос запроса:

  • no-cache Не читать файлы в кеше, запрашивать повторный запрос к WEB серверу
  • Запросы и ответы без сохранения запрещено кэшировать
  • max-age означает, что при повторном доступе к этой веб-странице в течение max-age секунд она не будет обращаться к серверу для запроса.Его функция аналогична Expires, за исключением того, что Expires сравнивается на основе определенного значения даты. Если собственное время кешировщика неточное, результат может быть неправильным, и у max-age, очевидно, нет этой проблемы. Приоритет Max-age также выше, чем у Expires.
  • max-stale позволяет читать кэшированные объекты, время истечения которых должно быть меньше значения max-stale.
  • min-fresh принимает кешированные объекты, время жизни которых max-age больше, чем сумма их текущего времени и значения min-fresh
  • only-if-cached сообщает кешировщику, что я хочу, чтобы контент исходил из кеша, и мне все равно, свежий ли кешированный ответ.
  • no-transform указывает агенту не изменять тип мультимедиа, например jpg, который вы заменяете на png.

(2) Ответ Ответ:

  • Все общедоступные данные сохраняются, даже веб-страницы, защищенные паролем, сохраняются, а безопасность очень низкая.
  • Содержимое личных данных может храниться только в частном кеше, действительно только для определенного пользователя и не может быть передано
  • no-cache может кэшироваться, но может быть возвращен клиенту только после проверки его достоверности на веб-сервере
  • Запросы и ответы без сохранения запрещено кэшировать
  • max-age Время истечения срока действия объекта, содержащегося в этом ответе.
  • Обязательная повторная проверка Если срок действия кеша истек, он снова проверит исходный сервер, являются ли это последними данными, а не прокси-сервером посередине.
  • max-stale позволяет читать кэшированные объекты, время истечения которых должно быть меньше значения max-stale.
  • proxy-revalidate похож на Must-revalidate, разница в том, что proxy-revalidate исключает кэш пользовательского агента. То есть его правила не применяются к локальному кешу пользовательского агента.
  • Единственная разница между -maxage и max-age заключается в том, что s-maxage применяется только к общим кешам и не применяется к однопользовательским кешам, таким как локальные кеши пользовательских агентов.Кроме того, s-maxage имеет более высокий приоритет, чем max -возраст .
  • no-transform указывает агенту не изменять тип мультимедиа, например jpg, который вы заменяете на png.

Вопрос 6 (html)

  • <script src="script.js"></script>Без отсрочки или асинхронности браузер загрузит и выполнит указанный скрипт немедленно. «Немедленно» означает, что перед рендерингом элемента документа под тегом script, то есть он не ждет следующего загруженного элемента документа, а загружает его как как только он будет прочитан и выполнен.

  • <script async src="script.js"></script>При использовании асинхронности процесс загрузки и рендеринга последующих элементов документа будет происходить параллельно (асинхронно) с загрузкой и выполнением script.js.

  • <script defer src="myscript.js"></script>С defer процесс загрузки последующих элементов документа будет выполняться параллельно (асинхронно) с загрузкой script.js, но выполнение script.js будет завершено после парсинга всех элементов и до запуска события DOMContentLoaded.

Затем, с практической точки зрения, лучше всего сначала выбрасывать все скрипты перед

, потому что это единственный вариант оптимизации для старых браузеров, и этот метод гарантирует, что все остальное, что не является скриптом, может быть загружено и проанализировано. как можно быстрее.

Далее смотрим на картинку:

Синяя линия представляет чтение из сети, красная линия — время выполнения, как для сценариев, так и зеленая линия — синтаксический анализ HTML.

Эта диаграмма говорит нам о следующих моментах:

  • Отсрочка и Async одинаковы с точки зрения считывания сети (загрузки), оба являются асинхронными (по сравнению с разбором HTML).
  • Разница между ними заключается в том, когда скрипт загружается и выполняется.Очевидно, что defer наиболее близок к нашим требованиям к загрузке и выполнению скрипта приложения.
  • Что касается отсрочки, незавершенная часть этой диаграммы заключается в том, что она выполняет сценарии в порядке загрузки, что следует использовать с пользой.
  • Async — мастер выполнения не по порядку, так или иначе, для него загрузка и выполнение скриптов идут рядом друг с другом, поэтому в каком бы порядке вы ни объявляли, пока он загружен, он будет выполняться немедленно .
  • Если подумать, асинхронность не очень полезна для сценариев приложений, потому что она вообще не учитывает зависимости (даже выполнение самого низкого порядка), но она подходит для сценариев, которые могут зависеть или не зависеть от какого-либо сценария. типичный пример: Google Analytics.

Вопрос 7 (javascript)

Вопрос 8 (javascript)

Ответ 4;

Вопрос 9 (CSS3)

Исходный код:

<style>
.coin{
			background: #666;
			width: 10%;
			padding-bottom: 10%;
			background: linear-gradient(to bottom right, hsla(0, 0%, 0%, .5), hsla(0, 0%, 0%, .1));
			border-radius: 50%;
			border: 2px solid #999;
			animation: rotate-coin-y 1s linear infinite;
		}
		@keyframes rotate-coin-y{
			0%{
				transform: rotateY(0deg);
			}
			50%{
				transform: rotateY(180deg);
			}
			100%{
				transform: rotateY(360deg);
			}
		}
</style>
<div class="coin"></div>

вопросы по программированию

Категории