Вопросы для собеседования с фронтенд-инженером (оптимизация производительности)

1. Оптимизация производительности 1

1.1 Как работает рефакторинг страницы?

网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。
也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。

对于传统的网站来说重构通常是：

表格(table)布局改为DIV+CSS
使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
对于移动平台的优化
针对于SEO进行优化
深层次的网站重构应该考虑的方面

减少代码间的耦合
让代码保持弹性
严格按规范编写代码
设计可扩展的API
代替旧有的框架、语言(如VB)
增强用户体验
通常来说对于速度的优化也包含在重构中

压缩JS、CSS、image等前端资源(通常是由服务器来解决)
程序的性能优化(如数据读写)
采用CDN来加速资源加载
对于JS DOM的优化
HTTP服务器的文件缓存

1.2 Что такое изящная деградация и прогрессивное улучшение?

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会针对旧版本的IE进行降级处理了,使之在旧式浏览器上以某种形式降级体验却不至于完全不能用。
如：border-shadow

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新版本浏览器才支持的功能,向页面增加不影响基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
如：默认使用flash上传，但如果浏览器支持 HTML5 的文件上传功能，则使用HTML5实现更好的体验；

1.3 Как оптимизировать производительность интерфейса?

(1) Уменьшите количество http-запросов: спрайты CSS, JS, сжатие исходного кода CSS, соответствующий контроль размера изображения; веб-страница Gzip, хостинг CDN, кеш данных, сервер изображений.

(2) Внешний шаблон JS + данные, сокращение потерь полосы пропускания, вызванных HTML-тегами, внешний интерфейс использует переменные для сохранения результатов запроса AJAX, каждая операция с локальными переменными, отсутствие запросов, уменьшение количества запросов

(3) Используйте innerHTML для замены операций DOM, уменьшения количества операций DOM и оптимизации производительности JavaScript.

(4) Если необходимо установить много стилей, установите className вместо непосредственного управления стилем.

(5) Используйте меньше глобальных переменных и кешируйте результаты поиска узлов DOM. Уменьшите количество операций чтения ввода-вывода.

(6) Избегайте использования выражения CSS (выражения CSS), также известного как динамические свойства (динамические свойства).

(7) Изображения предварительно загружаются, таблицы стилей размещаются вверху, а сценарии размещаются внизу с отметками времени.

(8) Избегайте использования таблицы в основном макете страницы, таблица не будет отображаться до тех пор, пока содержимое в ней не будет полностью загружено, что медленнее, чем макет div+css.

Для обычных веб-сайтов существует единая идея, заключающаяся в максимально возможной оптимизации внешнего интерфейса, сокращении операций с базой данных и сокращении дискового ввода-вывода. Фронтенд-оптимизация означает, что, не влияя на функциональность и опыт, то, что может быть выполнено в браузере, не должно выполняться на сервере, что может быть возвращено непосредственно на кеш-сервере, не должно отправляться на сервер приложений, а результаты которые программа может получить напрямую, не должны отправляться на сервер приложений.Для внешнего сбора данные, которые могут быть получены на локальном компьютере, не должны извлекаться удаленно, данные, которые могут быть получены из памяти, не должны извлекаться из диск, а некоторые в кеше не должны быть получены из базы данных. Сокращение операций с базой данных относится к уменьшению количества обновлений, кешированию результатов для уменьшения количества запросов, максимальному выполнению вашей программой операций, выполняемых базой данных (таких как запросы на соединение), а сокращение дискового ввода-вывода относится к тому, чтобы не использовать файловая система в качестве кеша, насколько это возможно, и сокращение количества раз чтения и записи файлов Подождите. Оптимизация программы всегда будет оптимизировать медленную часть, а "оптимизировать" сменой языка невозможно.

1.4 Страница отображается от входного URL до отображения загрузки страницы

注：Этот вопрос сильно дифференцирован и охватывает широкий круг знаний. Даже люди, которые не понимают, могут ответить на несколько предложений. Эксперты могут свободно играть в соответствии со своими областями знаний, от спецификации URL, протокола HTTP, DNS, CDN, базы данных. запрос и т. д. Для синтаксического анализа потоковой передачи в браузере, построения правил CSS, макета, рисования, загрузки/дома, выполнения JS, привязки JS API и т. д.;

Подробная версия:

Браузер откроет поток для обработки запроса, и если URL-адрес проанализирован и оценен, он будет обработан в соответствии с веб-методом, если это протокол http;
Вызовите соответствующий метод в ядре браузера, например метод loadUrl в WebView;
Получить IP-адрес веб-сайта через разрешение DNS, установить UA и другую информацию для отправки второго запроса GET;
Для проведения сеанса протокола HTTP клиент отправляет заголовок (заголовок запроса);
Войдите в веб-сервер на веб-сервере, таком как Apache, Tomcat, Node.JS и другие серверы;
Введите развернутые серверные приложения, такие как PHP, Java, JavaScript, Python и т. д., чтобы найти соответствующую обработку запроса;
Конец обработки возвращает заголовок, если браузер обращался к нему и в кеше есть соответствующий ресурс, он будет сравниваться с временем последней модификации сервера, и если он непротиворечив, будет возвращено 304;
Браузер начинает загрузку html-документа (заголовок ответа, код состояния 200), при этом используя кеш;
Устанавливается дерево документов, указывается тип файла MIME (например, css, js) в соответствии с запросом тега, одновременно устанавливается файл cookie;
Страница начинает отображать DOM, JS обрабатывает DOM в соответствии с DOM API, выполняет привязку событий и т. д., и отображение страницы завершается.

Краткая версия:

Браузер отправляет запрошенный URL-адрес для разрешения доменного имени DNS, находит реальный IP-адрес и инициирует запрос на сервер;
Сервер возвращает данные после завершения фоновой обработки, а браузер получает файлы (HTML, JS, CSS, изображения и т. д.);
Браузер анализирует загруженные ресурсы (HTML, JS, CSS и т. д.) и устанавливает соответствующую внутреннюю структуру данных (например, HTML DOM);
Загрузите проанализированный файл ресурсов, визуализируйте страницу и завершите работу.

1.5 Как вы обычно управляете своим проектом?

Первая команда должна определить глобальный стиль (globe.css), режим кодирования (utf-8) и т. д.;

Навыки письма должны быть последовательными (например, все они написаны в стиле наследования, а отдельные стили написаны в одну строку);

Писатель стиля аннотации, каждый модуль размечается по времени (маркировка места вызова ключевого стиля);

Страницы аннотируются (например, начало и конец модуля страницы);

CSS и HTML хранятся в параллельных папках, и имена должны быть унифицированы (например, style.css);

Хранилище подпапок JS Название основано на английском переводе функции JS.