Закрытие и оптимизация производительности переднего плана, как много вы знаете?

внешний интерфейс
Закрытие и оптимизация производительности переднего плана, как много вы знаете?

В этой статье мы начинаем обобщать наиболее часто задаваемые вопросы во время предварительных интервью весной 2019 года. Он будет представлен в виде типа вопроса + метод опроса/тестовый сайт + эталонный ответ.Если есть какие-либо ошибки или упущения, я надеюсь, что вы их вовремя исправите, чтобы вы могли их правильно слушать.

1. Закрытие

Тестовый сайт:

что такое закрытие

Роль замыканий (плюсы и минусы, сценарии использования)

написать закрытие

Определение (на мой взгляд):Замыкание относится к феномену функции, который может читать переменные внутри функции вне функции, это мост, соединяющий внутреннюю и внешнюю части функции.

выгода:Прочитайте переменную внутри функции и сохраните значение переменной в памяти и не будет выпущено после выполнения функции.

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

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

Используйте сценарии/рукописные замыкания:

Народное объяснение:

иметь функциюfn, обладающий обычными свойствамиa(обычная переменная), также имеет свойства типа функцииfn2. Согласно правилам области действия js, внешняя часть функции хочет получить ее напрямую.aнедоступен, а fn2 можно легко получитьa.

Поэтому мы можем пройтиfn2Мост попадает в цельa,В настоящее времяfn2функция называетсяЗакрытие

Вот основная предпосылка, на которую стоит обратить внимание:fnдолжно бытьfn2функцияreturnout, иначе реализация закрытия завершится ошибкой!\color{#FF3030}{Здесь следует обратить внимание на основное условие: fn должна возвращать функцию fn2, иначе реализация замыкания не удастся! }

Каштан в обеих руках:

function fn(){
    var status = '11';
    return {
        Arrive:function(){
            status = '快递已签收';
        },
        Lost:function(){
            status = '快递已丢件';
        },
        getStatus:function(){
            return status;
        }
    }
}
var shunfeng = fn();
console.log(shunfeng.getStatus());//11
shunfeng.Lost();
console.log(shunfeng.getStatus());//快递已丢件
var shunfeng2 = fn();
console.log(shunfeng2.getStatus());//快递已丢件

Снова вызвав fn, вы обнаружите, что состояние экспресса по-прежнему «экспресс потерян» и не был инициализирован пустой строкой.Это фактический сценарий использования замыкания, то есть: я хочу сохранить уникальное состояние, даже если функция выполняется. Оно все еще существует после завершения.

Очистить замыкание:\color{#FF3030}{Очистить закрытие:}Причина, по которой переменная состояния по-прежнему имеет значение «Экспресс был потерян», заключается в том, что текущий «shunfeng» все еще действителен и все еще ссылается на него, и закрытие может быть очищено путем прерывания ссылки.

shunfeng = null;
var shunfeng2 = fn();
console.log(shunfeng2.getStatus());// 11

Использование замыканий разумно.Приведенный мной пример относительно элементарный.Можете попробовать сами.

Боюсь, что я введу вас в заблуждение, вот заключительная интерпретация Учителя Жуань Ифэн:Изучите замыкания Javascript

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

Эта проблема имеет наибольшую частотность и почти каждое интервью.

Вопрос:

  • Что вы знаете об оптимизации производительности переднего плана?
  • Оптимизация производительности, которую вы сделали на работе
  • Вы делаете это без ущерба для производительности?
  • Есть ли способ улучшить производительность этого?
  • Пожалуйста, ответьте на этот вопрос с точки зрения производительности
  • ...

Очевидно, что оптимизации производительности переднего плана уделяется все больше и больше внимания, и текущие версии различных популярных технологий также основаны на производительности. Однако объем этого вопроса слишком широк, и я не очень хорошо ответил на него во время интервью, я проверил много информации в Интернете и дал эталонные ответы из следующих аспектов:

1. Сокращение HTTP-запросов (эта оптимизация наиболее очевидна)

1) 图片地图，允许在一个图片上关联多个URL，目标URL取决于用户单击的图片上的位置。
2) 雪碧图
3) 合并JS和CSS文件
4) 减少http请求头
5）配置多个域名和CDN加速
6）使用缓存（HTTP缓存、浏览器缓存、应用缓存）
7）优化cookie

Ссылаться на:сегмент fault.com/ah/119000000…

2.HTML

1）减少DOM元素数量:页面中存在大量DOM元素,会导致javascript遍历DOM的效率变慢。尤其要尽量少用iframe，它是耗能最大的dom元素，而且会阻塞onload事件
2）使用css+div代替table布局，去掉格式化控制标签如：strong，b，i等，使用css控制
3）减少不必要的嵌套，尽量扁平化，因为当浏览器编译器遇到一个标签时就开始寻找它的结束标签，直到它匹配上才能显示它的内容，所以当嵌套很多时打开页面就会特别慢。

Все более и более полный справочник по оптимизации производительности HTML:блог woo woo.cn на.com/chasing/afraid/504…

3.CSS

Ключевые слова:селекторы, дорогие атрибуты стиля, наследование, иерархия, сжатие...

Блог Wooooooo.cn на .com/hero есть /afraid/9…

Baijiahao.Baidu.com/is?ID=160325…

tips:Отвечая на эти два аспекта, необходимо упомянутьПерекомпоновать и перекрасить, каждый из ваших ответов, скорее всего, будет следующим вопросом, который задаст вам интервьюер. Если вы действительно не можете вспомнить это в то время, то избегайте этого и выберите несколько ответов, которые обычно используются в реальной работе.Если вы процитируете всю статью, это будет немного фальшиво.

3.JS

1) Уменьшить поиск глобальных переменных. Поскольку глобальные переменные находятся в верхней части цепочки областей видимости, частые поиски обходятся дорого.
举个栗子：
var globalVar = 1; 
function myCallback(info){ 
    for( var i = 100000; i--;){ 
        globalVar += i; 
        //每次访问 globalVar 都需要查找到作用域链最顶端，本例中需要访问 100000 次 
    }
}
优化：
var globalVar = 1; 
function myCallback(info){
   var localVar = globalVar; 
   for( var i = 100000; i--;){ 
       localVar += i; 
       //访问局部变量是最快的
   } 
}
2) Использовать с осторожностью, таймер
3) Оптимизировать цикл
4) Меньше манипуляций с DOM
5) Конкатенация строк

Все больше и больше полных (носильщиком не буду):

Блог Woo Woo.cn on.com/cn blog - Procuratorate...

Блог Woohoo.cn на.com/Wang Xiaona/Afraid/5…

blog.CSDN.net/Lulululu123/…

woo woo woo.cn blog on.com/Marco Han/afraid/…

4. Оптимизация сервера

1)CDN：把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。
2)GZIP压缩
3)设置ETag：ETags（Entity tags，实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。
4)提前刷新缓冲区

5. Пользовательский опыт

1）预加载，懒加载
2）浏览器缓存，应用缓存
3）细节设计（全选/反全选/自动补全……所有你能想到的）

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

Прикреплен ответ от фронтенда Али:Когда интервьюер спрашивает вас, как оптимизировать производительность, вы должны ответить (1)

наконец:

Я так устала. Сегодня напишу здесь, а завтра продолжу обновлять, ведь у меня еще много тем, которыми можно поделиться~

Свежие вопросы интервью, добро пожаловать на чтение:Резюме часто задаваемых вопросов в интервью Ченг Юаня (2)

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

Категории