9 основных стратегий и 6 основных индикаторов для оптимизации производительности, написанных для среднего и продвинутого фронтенда | Netease четыре года практики

автор:JowayYoung
склад:Github,CodePen
Блог:Официальный сайт,Наггетс,думаю нет,Знай почти
публика:Интерфейс IQ
Специальное заявление: Нелегко быть оригинальным, и перепечатка или плагиат не допускаются без разрешения.Если вам нужно перепечатать, вы можете связаться с автором для получения разрешения.

«Эта статья участвовала в мероприятии Haowen Convocation Order, щелкните, чтобы просмотреть:Двойные заявки на внутреннюю и внешнюю стороны, призовой фонд в 20 000 юаней ждет вас, чтобы бросить вызов!"

предисловие

Я был слишком занят в последнее время, и я не публиковал ни одной статьи в течение пяти месяцев.Многие читатели в частном порядке писали автору и спрашивали меня, что произошло в последнее время? В последние шесть месяцев автор был занят не только в отпуске, но и на работе. На работе я реконструировал проекты и разрабатывал новые проекты, а иногда писал технические патенты; в жизни дома и парковочные места, которые я начал в городском районе Гуанчжоу в 2019 году, были проверены в этот период, и я украшал и покупал мебель и бытовая техника. Сделайте паузу, чтобы обустроить новый дом, а иногда и написать буклет о самородках. Все время организовано правильно, поэтому я тоже получаю очень полезный опыт в работе и жизни.Я все делаю сама, а также благодарю брата и сестру за помощь, иначе я действительно не могу так быстро.

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

个人办公空间.jpg

Автор участвует в реконструкции проекта почти полгода, много приложил в процессе реконструкции.оптимизация производительностииШаблоны проектированиязнания с обеих сторон.оптимизация производительностииШаблоны проектированияОба аспекта знаний представляют собой высокочастотные сценарии применения в работе и собеседованиях.Пользуясь случаем участия в масштабной реконструкции проекта, автор тщательно отсортировал некоторые рутинные и обязательные к использованию性能优化建议При этом в сочетании с ежедневным опытом разработки я разобрал все полезные практики, которые автор отрабатывал в NetEase четыре года.性能优化建议, поделись со всеми! (Из-за нехватки места,设计模式Позже будет отдельная статья)

может быть, некоторые性能优化建议Это всем хорошо известно, но это не влияет на этот обмен.Конечно, автор также перечисляет некоторые детали, которые в обычное время могут быть незаметны.

Обычно люди думают性能优化Это сценарий неупорядоченного применения, но, по мнению автора, это сценарий упорядоченного применения, и существует множество性能优化Все они прокладывают путь друг другу и даже «Один пояс, один путь». От тенденции процесса,性能优化Его можно разделить насетевой уровеньиуровень рендеринга; Из тенденции результата,性能优化Его можно разделить наизмерение временииуровень громкости. Проще говоря要在访问网站时使其快准狠地立马呈现在用户眼前.

性能优化.png

все性能优化вокруг两大层面两小层面реализация, базовый уровень网络层面и渲染层面, вспомогательный уровень时间层面и体积层面, а вспомогательный уровень заполнен основным уровнем. Вот и автор разобрался с фронтендом через эту статью性能优化изДевять стратегийиШесть основных показателей. Конечно эти策略и指标Все они определены автором, что удобно для некоторых уточнений для оптимизации производительности в некотором роде.

Таким образом, сочетание этих характеристик в работе или на собеседовании может быть идеальной интерпретацией.性能优化расширенные знания.Впереди высокая энергия, ты должен собрать ее, даже если не смотришь на нее, поехали! ! !

所有代码示例为了凸显主题，只展示核心配置代码，其他配置并未补上，请自行脑补

Девять стратегий

сетевой уровень

сетевой уровеньОптимизация производительности, несомненно, заключается в том, как сделать ресурсы体积更小加载更快Поэтому автор делает предложения по следующим четырем аспектам.

построить стратегию: на основе инструментов сборки (Webpack/Rollup/Parcel/Esbuild/Vite/Gulp)
имиджевая стратегия: в зависимости от типа изображения (JPG/PNG/SVG/WebP/Base64)
стратегия распространения: на основе сети распространения контента (CDN)
стратегия кэширования: на основе кеша браузера (强缓存/协商缓存)

Вышеупомянутые четыре аспекта выполняются шаг за шагом, заполняя весь процесс проекта.построить стратегиюиимиджевая стратегияв стадии разработки,стратегия распределенияистратегия кэшированияОн находится в производстве, поэтому на каждом этапе можно проверить, в порядке ли вышеперечисленные политики. Таким образом, максимально性能优化сценарии применения.

построить стратегию

Стратегия в основном вращается вокругwebpackДелайте связанную обработку, и это также самый распространенный доступ性能优化策略. Обработка других инструментов сборки аналогична, и может быть просто непоследовательна в конфигурации. Говоря оwebpackиз性能优化, несомненно, из时间层面и体积层面Начать.

笔者发现目前webpack v5整体兼容性还不是特别好，某些功能配合第三方工具可能出现问题，故暂未升级到v5，继续使用v4作为生产工具，故以下配置均基于v4，但总体与v5的配置出入不大

Автор сделал 6 из двух уровней соответственно性能优化建议всего 12性能优化建议, в целях облегчения памяти используйте для обобщения четырехзначные слова, чтобы все могли усвоить. ⏱ указывает减少打包时间, 📦 указывает减少打包体积.

Сокращение времени упаковки:缩减范围,缓存副本,定向搜索,提前构建,并行构建,可视结构
Уменьшить размер упаковки:分割代码,摇树优化,动态垫片,按需加载,作用提升,压缩资源

⏱ Уменьшить масштаб

Настройте include/exclude, чтобы сузить область поиска Loader для файлов, польза避免不必要的转译.node_modules目录Если объем такой большой, сколько времени потребуется для извлечения всех файлов?

include/excludeобычно в основныхLoaderконфиг,src目录Обычно в качестве исходного каталога можно выполнить следующую обработку. Конечноinclude/excludeОн может быть изменен в соответствии с реальной ситуацией.

export default {
    // ...
    module: {
        rules: [{
            exclude: /node_modules/,
            include: /src/,
            test: /\.js$/,
            use: "babel-loader"
        }]
    }
};

⏱ Кэшированные копии

Настройте кэш для кэширования скомпилированной копии файла Loader., польза再次编译时只编译修改过的文件. Почему немодифицированные файлы должны быть перекомпилированы с измененными файлами?

самыйLoader/PluginОба предоставляют возможность использовать кеш компиляции, обычно содержащийcacheслова. отbabel-loaderиeslint-webpack-pluginНапример.

import EslintPlugin from "eslint-webpack-plugin";

export default {
    // ...
    module: {
        rules: [{
            // ...
            test: /\.js$/,
            use: [{
                loader: "babel-loader",
                options: { cacheDirectory: true }
            }]
        }]
    },
    plugins: [
        new EslintPlugin({ cache: true })
    ]
};

⏱ Целевой поиск

Настройте разрешение для повышения скорости поиска файлов, польза定向指定必须文件路径. Если какие-то сторонние библиотеки вводятся в обычном виде, то они могут сообщать об ошибках или требовать, чтобы программа автоматически индексировала определенные типы файлов.Этот способ можно использовать для решения проблемы.

aliasпути модулей карты,extensionsУказывает суффикс файла,noParseФильтровать независимые файлы. Обычно настраиваетсяaliasиextensionsдостаточно.

export default {
    // ...
    resolve: {
        alias: {
            "#": AbsPath(""), // 根目录快捷方式
            "@": AbsPath("src"), // src目录快捷方式
            swiper: "swiper/js/swiper.min.js"
        }, // 模块导入快捷方式
        extensions: [".js", ".ts", ".jsx", ".tsx", ".json", ".vue"] // import路径时文件可省略后缀名
    }
};

⏱ Создавайте заранее

Заранее настройте DllPlugin для упаковки сторонних зависимостей., польза将DLL与业务代码完全分离且每次只构建业务代码. Это старая конфигурация, вwebpack v2существовало, но сейчасwebpack v4+Эта конфигурация устарела, поскольку улучшение производительности, вызванное итерациями ее версии, незначительно.DllPluginпринесенные выгоды.

DLLозначает动态链接库, который относится к библиотеке, содержащей код, который может использоваться несколькими программами одновременно. Во фронтенде это можно рассматривать как наличие альтернативного кеша, который упаковывает публичный код в виде DLL-файла и сохраняет его на жестком диске, а при повторной упаковке динамически компонует.DLL文件Нет необходимости снова упаковывать этот общий код, что повышает скорость сборки и сокращает время упаковки.

настроитьDLLВообще говоря, по сравнению с другими конфигурациями процесс настройки можно условно разделить на три этапа.

Сначала сообщите скрипту сборки, какие зависимости сделатьDLLи генерироватьDLL文件иDLL映射表文件.

import { DefinePlugin, DllPlugin } from "webpack";

export default {
    // ...
    entry: {
        vendor: ["react", "react-dom", "react-router-dom"]
    },
    mode: "production",
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    chunks: "all",
                    name: "vendor",
                    test: /node_modules/
                }
            }
        }
    },
    output: {
        filename: "[name].dll.js", // 输出路径和文件名称
        library: "[name]", // 全局变量名称：其他模块会从此变量上获取里面模块
        path: AbsPath("dist/static") // 输出目录路径
    },
    plugins: [
        new DefinePlugin({
            "process.env.NODE_ENV": JSON.stringify("development") // DLL模式下覆盖生产环境成开发环境(启动第三方依赖调试模式)
        }),
        new DllPlugin({
            name: "[name]", // 全局变量名称：减小搜索范围，与output.library结合使用
            path: AbsPath("dist/static/[name]-manifest.json") // 输出目录路径
        })
    ]
};

затем вpackage.jsonНастройте скрипт выполнения здесь и выполняйте скрипт перед каждой сборкой для упаковки.DLL文件.

{
    "scripts": {
        "dll": "webpack --config webpack.dll.js"
    }
}

последняя ссылкаDLL文件и сообщитьwebpackпоражаемыйDLL文件Пусть читает сама. использоватьhtml-webpack-tags-pluginАвтоматически вставлять при упаковкеDLL文件.

import { DllReferencePlugin } from "webpack";
import HtmlTagsPlugin from "html-webpack-tags-plugin";

export default {
    // ...
    plugins: [
        // ...
        new DllReferencePlugin({
            manifest: AbsPath("dist/static/vendor-manifest.json") // manifest文件路径
        }),
        new HtmlTagsPlugin({
            append: false, // 在生成资源后插入
            publicPath: "/", // 使用公共路径
            tags: ["static/vendor.dll.js"] // 资源路径
        })
    ]
};

За временные затраты на эти несколько секунд автор рекомендует лучшую конфигурацию. Конечно, вы также можете использоватьautodll-webpack-pluginВместо ручной настройки.

⏱ Параллельная сборка

Настройте поток для преобразования одного процесса загрузчика в многопроцессный, польза释放CPU多核并发的优势. в настоящее время используетwebpackПри сборке проекта потребуется анализировать и обрабатывать множество файлов.Процесс сборки требует больших вычислительных ресурсов, и по мере увеличения количества файлов процесс сборки будет замедляться.

БегNodeвнутреннийwebpackЭто однопоточная модель, которая простоwebpackОбрабатываемые задачи должны обрабатываться одна за другой, и несколько задач не могут обрабатываться одновременно.

文件读写и计算操作неизбежно, можноwebpackОбрабатывайте несколько задач одновременно и играйте в многоядерные игрыCPUКак насчет мощности компьютера для увеличения скорости сборки?thread-loaderчтобы помочь вам, согласноCPUКоличество открытых тем.

Здесь есть проблема, на которую стоит обратить внимание, если файла проекта не слишком много, не используйте этот性能优化建议, в конце концов, открытие нескольких потоков также приведет к снижению производительности.

import Os from "os";

export default {
    // ...
    module: {
        rules: [{
            // ...
            test: /\.js$/,
            use: [{
                loader: "thread-loader",
                options: { workers: Os.cpus().length }
            }, {
                loader: "babel-loader",
                options: { cacheDirectory: true }
            }]
        }]
    }
};

⏱ Визуальная структура

Настройте BundleAnalyzer для анализа файловой структуры пакета., польза找出导致体积过大的原因. Таким образом, время строительства может быть сокращено за счет анализа причин и получения оптимизированного решения.BundleAnalyzerдаwebpackОфициальный плагин для интуитивного анализа打包文件Компоненты модуля, коэффициент объема модуля, отношение включения модуля, отношение зависимости модуля, дублируется ли файл, сравнение объема сжатия и другие визуальные данные.

быть пригодным для использованияwebpack-bundle-analyzerКонфигурация, с ее помощью мы можем быстро найти сопутствующие проблемы.

import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";

export default {
    // ...
    plugins: [
        // ...
        BundleAnalyzerPlugin()
    ]
};

📦 Разделить код

Разделите код каждого модуля и извлеките одну и ту же часть кода, польза减少重复代码的出现频率.webpack v4использоватьsplitChunksальтернативаCommonsChunksPluginРеализовать разделение кода.

splitChunksЕсть много конфигураций, пожалуйста, обратитесь к деталямОфициальный сайт, я вставляю сюда часто используемую конфигурацию.

export default {
    // ...
    optimization: {
        runtimeChunk: { name: "manifest" }, // 抽离WebpackRuntime函数
        splitChunks: {
            cacheGroups: {
                common: {
                    minChunks: 2,
                    name: "common",
                    priority: 5,
                    reuseExistingChunk: true, // 重用已存在代码块
                    test: AbsPath("src")
                },
                vendor: {
                    chunks: "initial", // 代码分割类型
                    name: "vendor", // 代码块名称
                    priority: 10, // 优先级
                    test: /node_modules/ // 校验文件正则表达式
                }
            }, // 缓存组
            chunks: "all" // 代码分割类型：all全部模块，async异步模块，initial入口模块
        } // 代码块分割
    }
};

📦Оптимизация встряхивания дерева

Удалить неиспользуемый код в проекте, польза移除重复代码和未使用代码.摇树优化впервые появился вrollup,ДаrollupОсновная концепция, позже вwebpack v2бери и пользуйся.

摇树优化только правильноESM规范Действует, недействителен для других спецификаций модуля.摇树优化Только для статического расчета конструкцийimport/exportобеспечить статический导入/导出Функции. Поэтому при написании бизнес-кода необходимо использоватьESM规范позволить摇树优化Удалите повторяющийся и неиспользуемый код.

существуетwebpackПросто установите среду упаковки на生产环境может сделать摇树优化Он вступает в силу, и бизнес-код используется одновременно.ESM规范пиши, пользуйсяimportимпортируйте модуль, используйтеexportэкспортный модуль.

export default {
    // ...
    mode: "production"
};

📦 Динамические прокладки

Вернуть текущую прокладку кода браузера на основе UA через службу прокладки, польза无需将繁重的代码垫片打包进去. Настройка каждой сборки@babel/preset-envиcore-jsв соответствии с определенными потребностямиPolyfillУпаковано внутри, что несомненно добавляет объему кода.

@babel/preset-envкоторый предоставилuseBuiltInsМожет быть импортирован по запросуPolyfill.

false: игнорироватьtarget.browsersположить всеPolyfillзагрузить
entry:в соответствии сtarget.browsersрасстанетсяPolyfillЗагрузите его (вводятся только те, которые не поддерживаются браузеромPolyfill, который требуется в файле вводаimport "core-js/stable")
usage:в соответствии сtarget.browsersи использование ES6 в коде обнаружения будет частичноPolyfillЗагрузите его (не нужно вводить файл вводаimport "core-js/stable")

Рекомендую всем использовать动态垫片.动态垫片судя по браузеруUserAgentВернуться к текущему браузеруPolyfill, идея основана на браузереUserAgentотbrowserlistУзнайте, какие функции не поддерживаются текущим браузером, и вернитеPolyfill. Учащиеся, интересующиеся этой областью, могут обратиться кpolyfill-libraryиpolyfill-serviceисходный код.

Вот два动态垫片службу, вы можете щелкнуть следующую ссылку в разных браузерах, чтобы увидеть разные выходные данныеPolyfill. ПолагатьIExploreвсе еще самыйPolyfill, он гордо говорит:我就是我，不一样的烟火.

Официальный CDN-сервис:полифилл.IO/V3/полифилл…
CDN-сервис Алибаба:полифилл.Ali CDN.com/полифилл.м…

использоватьhtml-webpack-tags-pluginАвтоматически вставлять при упаковке动态垫片.

import HtmlTagsPlugin from "html-webpack-tags-plugin";

export default {
    plugins: [
        new HtmlTagsPlugin({
            append: false, // 在生成资源后插入
            publicPath: false, // 使用公共路径
            tags: ["https://polyfill.alicdn.com/polyfill.min.js"] // 资源路径
        })
    ]
};

📦Загрузка по запросу

Упакуйте страницу маршрутизации/триггерную функцию в отдельный файл и загрузите ее при использовании., польза减轻首屏渲染的负担. Потому что чем больше функций проекта, чем больше объем упаковки, тем медленнее скорость рендеринга первого экрана.

При рендеринге первого экрана нужно только соответствоватьJS代码без другихJS代码, так что вы можете использовать按需加载.webpack v4Обеспечьте функцию резки и загрузки модуля по требованию, сотрудничайте сimport()Это может достичь эффекта уменьшения пакета рендеринга первого экрана, тем самым ускорив скорость рендеринга первого экрана. Только при запуске какой-либо функции будет загружена текущая функция.JS代码.

webpack v4Обеспечивает волшебное наименование аннотаций切割模块, если аннотации нет, модуль вырезания не может определить, к какому бизнес-модулю он принадлежит, поэтому обычно один бизнес-модуль разделяет один бизнес-модуль.切割模块название аннотации.

const Login = () => import( /* webpackChunkName: "login" */ "../../views/login");
const Logon = () => import( /* webpackChunkName: "logon" */ "../../views/logon");

При запуске консоль может сообщать об ошибке, вpackage.jsonизbabelДоступ в связанной конфигурации@babel/plugin-syntax-dynamic-importВот и все.

{
    // ...
    "babel": {
        // ...
        "plugins": [
            // ...
            "@babel/plugin-syntax-dynamic-import"
        ]
    }
}

📦Усиление эффекта

Анализируйте зависимости между модулями и объединяйте упакованные модули в одну функцию, польза减少函数声明和内存花销.作用提升впервые появился вrollup,ДаrollupОсновная концепция, позже вwebpack v3бери и пользуйся.

не включен作用提升Раньше в построенном коде было много замыканий функций. Из-за зависимостей модулей черезwebpackПосле упаковки он будет преобразован вIIFE, большое количество замыканий функций, обертывающих код, приведет к увеличению размера пакета (模块越多越明显). При выполнении кода создается больше областей действия функций, что приводит к увеличению объема памяти.

на作用提升После этого построенный код будет помещен в область действия функции в порядке введения и путем соответствующего переименования некоторых переменных, чтобы предотвратить конфликты имен переменных, тем самым уменьшая объявление функции и накладные расходы памяти.

существуетwebpackПросто установите среду упаковки на生产环境может сделать作用提升Вступить в силу или явно задатьconcatenateModules.

export default {
    // ...
    mode: "production"
};
// 显式设置
export default {
    // ...
    optimization: {
        // ...
        concatenateModules: true
    }
};

📦 Сжатые ресурсы

Сжимайте код HTML/CSS/JS, сжимайте шрифты/изображения/аудио/видео, польза更有效减少打包体积. Экстремальная оптимизация кода может оказаться не такой эффективной, как оптимизация размера файла ресурсов.

противHTMLкод, использоватьhtml-webpack-pluginВключите сжатие.

import HtmlPlugin from "html-webpack-plugin";

export default {
    // ...
    plugins: [
        // ...
        HtmlPlugin({
            // ...
            minify: {
                collapseWhitespace: true,
                removeComments: true
            } // 压缩HTML
        })
    ]
};

противCSS/JScode, используйте следующие плагины, чтобы включить сжатие. вOptimizeCssна основеcssnanoупаковка,UglifyjsиTerserобаwebpackОфициальные плагины, но также нужно обратить внимание на сжатиеJS代码нужно различатьES5иES6.

optimize-css-assets-webpack-plugin: сжатиеCSS代码
uglifyjs-webpack-plugin: сжатиеES5версияJS代码
terser-webpack-plugin: сжатиеES6версияJS代码

import OptimizeCssAssetsPlugin from "optimize-css-assets-webpack-plugin";
import TerserPlugin from "terser-webpack-plugin";
import UglifyjsPlugin from "uglifyjs-webpack-plugin";

const compressOpts = type => ({
    cache: true, // 缓存文件
    parallel: true, // 并行处理
    [`${type}Options`]: {
        beautify: false,
        compress: { drop_console: true }
    } // 压缩配置
});
const compressCss = new OptimizeCssAssetsPlugin({
    cssProcessorOptions: {
        autoprefixer: { remove: false }, // 设置autoprefixer保留过时样式
        safe: true // 避免cssnano重新计算z-index
    }
});
const compressJs = USE_ES6
    ? new TerserPlugin(compressOpts("terser"))
    : new UglifyjsPlugin(compressOpts("uglify"));

export default {
    // ...
    optimization: {
        // ...
        minimizer: [compressCss, compressJs] // 代码压缩
    }
};

против字体/音频/视频файл, не очень актуаленPluginДля нашего использования мы можем только попросить вас использовать соответствующий инструмент сжатия перед выпуском проекта на рабочий сервер. против图像документы, большинствоLoader/PluginВ пакете используются некоторые инструменты обработки изображений, а некоторые функции этих инструментов размещены на сторонних серверах, поэтому установка часто завершается сбоем. Для конкретных решений, пожалуйста, обратитесь к предыдущему сообщению автора«Поговорим об опасных ямах зеркалирования NPM»Статья ищет ответы.

Ввиду этого автор потратил немного навыка на разработкуPluginдля спариванияwebpackСжатые изображения, см.tinyimg-webpack-plugin.

import TinyimgPlugin from "tinyimg-webpack-plugin";

export default {
    // ...
    plugins: [
        // ...
        TinyimgPlugin()
    ]
};

вышесказанное构建策略интегрированы в авторский открытый исходный кодbruce-cli, этоReact/VueАвтоматизация приложений для создания строительных лесов, его преимущество в нулевой конфигурации «из коробки» очень подходит для студентов начального уровня, младших-средних и передовых студентов проектов быстрой разработки.Его также можно использовать при созданииbrucerc.jsФайл переопределяет конфигурацию по умолчанию, и вам нужно сосредоточиться только на написании бизнес-кода, а не на создании кода, что делает структуру проекта более лаконичной. Нажмите, чтобы узнать подробностиздесь, не забудьте проверить документацию при его использовании, поддержитеStarКакие!

имиджевая стратегия

Стратегия в основном вращается вокруг图像类型Выполняйте связанную обработку, а также снижайте стоимость доступа性能优化策略. Просто сделайте следующие две вещи.

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

图像选型Обязательно узнайте体积/质量/兼容/请求/压缩/透明/场景и другие относительные значения параметров, чтобы мы могли быстро принять решение о том, какой тип изображения использовать в какой сцене.

тип	объем	качество	совместимый	просить	компрессия	прозрачный	Сцены
JPG	маленький	середина	высокий	да	с потерями	не поддерживается	Фоновое изображение, карусельное изображение, красочное изображение
PNG	Большой	высокий	высокий	да	без потерь	служба поддержки	Иконки, прозрачные изображения
SVG	маленький	высокий	высокий	да	без потерь	служба поддержки	значок, вектор
WebP	маленький	середина	Низкий	да	оба	служба поддержки	см. совместимость
Base64	увидеть ситуацию	середина	высокий	нет	без потерь	служба поддержки	значок

图像压缩доступны на вышеуказанном构建策略-压缩资源Вы также можете использовать инструменты, чтобы завершить его самостоятельно. Поскольку большая частьwebpackИнструмент сжатия изображений - это либо сбой установки, либо различные проблемы с окружением (你懂的), поэтому автор все же рекомендует использовать инструменты сжатия изображений перед выпуском проекта на рабочий сервер, чтобы работа была стабильной и не увеличивала время упаковки.

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

инструмент	открытый источник	потери	API	Бесплатная пробная версия
QuickPicture	✖️	✔️	✖️	Есть много сжимаемых типов, текстура сжатия лучше, есть ограничения по объему, а есть ограничения по количеству
ShrinkMe	✖️	✖️	✖️	Есть много сжимаемых типов, текстура сжатия общая, нет ограничения по количеству и есть ограничение по объему.
Squoosh	✔️	✖️	✔️	Есть несколько сжимаемых типов, текстура сжатия общая, нет ограничения по количеству и есть ограничение по объему.
TinyJpg	✖️	✔️	✔️	Типов сжимаемых мало, текстура сжатия очень хорошая, есть ограничения по количеству, есть ограничения по объему
TinyPng	✖️	✔️	✔️	Типов сжимаемых мало, текстура сжатия очень хорошая, есть ограничения по количеству, есть ограничения по объему
Zhitu	✖️	✖️	✖️	Сжимаемый тип является общим, текстура сжатия является общей, существуют ограничения по количеству и объему.

Если вы не хотите перетаскивать файлы изображений туда и обратно на веб-сайте, вы можете использовать инструмент пакетной обработки изображений с открытым исходным кодом автора.img-masterВместо этого есть не только функции сжатия, но и функции группировки, функции маркировки и функции преобразования. В настоящее время все проекты, которыми руководит автор, используют этот инструмент для обработки, и он использовался постоянно!

图像策略Может быть, обработка одного изображения может взорвать все это构建策略, так что это очень дешево, но очень эффективно性能优化策略.

стратегия распределения

Стратегия в основном вращается вокруг内容分发网络Выполнение соответствующей обработки, но и стоимость доступа относительно высока性能优化策略, необходима достаточная финансовая поддержка.

Хотя стоимость доступа высока, большинство предприятий покупают некоторыеCDN服务器, поэтому вам не нужно слишком беспокоиться о развертывании, просто используйте его. Эта стратегия может играть как можно больше, следуя следующим двум пунктам.CDNмаксимальный эффект.

Все статические ресурсы идут в CDN: Этап разработки определяет, какие файлы относятся к статическим ресурсам.
Поместите статические ресурсы и главную страницу под другим доменным именем.: избегать просьбы принестиCookie

Сеть доставки контентакороткое имяCDN, относится к группе серверов, которые хранят копии данных, распределенных в различных местах, и могут удовлетворять запросы данных по принципу близости. Его основные черты缓存и回源, кэш копирует ресурс вCDN服务器, источник возврата资源过期/不存在Просто запросите и скопируйте на верхний серверCDN服务器внутри.

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

на основеCDNизПринцип близостиПреимущества, которые он дает, могут задействовать все статические ресурсы веб-сайта дляCDN服务器внутри. Какие файлы включает в себя статический ресурс? Вообще говоря, это ресурс, который можно получить без вычислений, генерируемых сервером, например, ресурс, который изменяется нечасто.样式文件,脚本文件и多媒体文件(字体/图像/音频/视频)Ждать.

Для индивидуальной настройкиCDN服务器, можно считатьОблачная OSS от Alibaba,NetEase Шуфан NOSиСемь Бычьих Облачных Кодо, конечно, вам необходимо приобрести соответствующий продукт для конфигурацииCDN服务. Из-за нехватки места для этих конфигураций после покупки будут соответствующие руководства, с которыми можно ознакомиться самостоятельно, и они не будут здесь описываться.

Автор рекомендует всем первый выборNetEase Шуфан NOS, ведь я вполне уверен в своих продуктах, и я случайно прорекламировал свои продукты, ха-ха!

стратегия кэширования

Стратегия в основном вращается вокруг浏览器缓存Делайте связанную обработку, и в то же время сделайте стоимость доступа самой низкой性能优化策略. Это значительно снижает потери, вызванные сетевой передачей, и повышает скорость доступа к веб-страницам.Это очень полезное использование.性能优化策略.

Как видно из рисунка ниже, для того, чтобы浏览器缓存Чтобы играть наибольшую роль, стратегия может играть как можно больше, следуя следующим пяти пунктам.浏览器缓存максимальный эффект.

Рассмотрите возможность отклонения всех стратегий кэширования:Cache-Control:no-store
Учитывайте, запрашивается ли ресурс на сервере каждый раз:Cache-Control:no-cache
Учитывайте, кэшируются ли ресурсы прокси-серверами:Cache-Control:public/private
Учитывайте время истечения ресурса:Expires:t/Cache-Control:max-age=t,s-maxage=t
Рассмотрите возможность согласования кешей:Last-Modified/Etag

缓存判断机制

в то же время浏览器缓存Это также один из наиболее часто задаваемых вопросов на собеседовании.Автор считает, что существительные, участвующие в приведенном выше, могут быть полностью поняты при разном порядке слов, чтобы по-настоящему понять浏览器缓存существует性能优化роль в.

缓存策略установивHTTPРеализация сообщения, в видеСильный кеш/Принудительный кешиСогласовать кеш/сравнить кеш. Для удобства сравнения некоторые детали автор показывает легендами, думаю, вы лучше поняли.

强缓存.png

协商缓存.png

весь缓存策略Механизм ясен,先走强缓存，若命中失败才走协商缓存. если попал强缓存, Используйте напрямую强缓存; если пропустить强缓存, отправьте запрос на сервер, чтобы проверить, попадает ли он协商缓存; если попал协商缓存, сервер возвращает 304, чтобы уведомить браузер о необходимости использования本地缓存, иначе возврат最新资源.

Есть еще два распространенных сценария применения, которые стоит использовать.缓存策略Попробуйте, конечно, в соответствии с требованиями проекта можно разработать больше сценариев приложений.

Часто меняющиеся ресурсы:настраиватьCache-Control:no-cache, чтобы браузер каждый раз отправлял запрос на сервер сLast-Modified/ETagУбедитесь, что ресурс действителен
Редко меняющиеся ресурсы:настраиватьCache-Control:max-age=31536000, Хэширование имени файла, создание нового имени файла при изменении кода и загрузка последнего файла только при импорте файла HTML и изменении имени файла.

уровень рендеринга

уровень рендерингаОптимизация производительности, несомненно, заключается в том, как сделать код解析更好执行更快. Поэтому автор делает предложения из следующих пяти аспектов.

CSS-стратегия: на основе правил CSS
Стратегия стакана цен: на основе манипулирования DOM
стратегия блокировки: загрузка на основе скрипта
Стратегия перекраски: Перерисовка на основе перекомпоновки
Стратегия асинхронного обновления: на основе асинхронных обновлений

Вышеуказанные пять аспектов выполняются при написании кода и заполняются на этапе разработки всего процесса проекта. Поэтому на этапе разработки вы всегда должны обращать внимание на каждый из следующих моментов и развивать хорошие привычки развития.性能优化Он также использовался естественным образом.

渲染层面из性能优化Это больше касается деталей кодирования, чем физического кода. Проще говоря, это следование определенным правилам кодирования, чтобы渲染层面из性能优化сделать большинство из этого.

Стратегия перекраскисуществует渲染层面из性能优化Вес относительно большой, и это также самый обычный性能优化один. Буклет The Nuggets, опубликованный автором в прошлом году«Искусство игры с CSS»Используйте целую главу, чтобы объяснить回流重绘, эта глава открыта для пробного прочтения, пожалуйста, нажмите для более подробной информацииздесь.

CSS-стратегия

Избегайте более трех слоев嵌套规则
избегать бытьID选择器Добавьте лишние селекторы
избегать использования标签选择器заменять类选择器
избегать использования通配选择器, объявить правила только для целевых узлов
Избегайте повторяющихся совпадений и повторяющихся определений, обратите внимание на可继承属性

Стратегия стакана цен

тайникDOM计算属性
избегать слишком многогоDOM操作
использоватьDOMFragmentПакетная обработка кэшаDOM操作

стратегия блокировки

сценарий сDOM/其它脚本Зависимость сильная: да<script>настраиватьdefer
сценарий сDOM/其它脚本Зависимости не сильные: да<script>настраиватьasync

Стратегия перекраски

тайникDOM计算属性
Используйте классы для объединения стилей, чтобы избежать изменения стилей один за другим
использоватьdisplayконтрольDOM显隐,будетDOM离线化

Стратегия асинхронного обновления

существует异步任务изменено вDOMпри упаковке как微任务

Шесть основных показателей

По мнению автора性能优化важность и практичность九大策略и六大指标на самом деле они все живы性能优化建议. немного性能优化建议Подключено оно или нет, не имеет большого значения, поэтому автор九大策略расположен выше六大指标. против九大策略По-прежнему рекомендуется подключаться на этапе разработки и производства, и его можно добавить при рассмотрении проекта.六大指标Структура соединения основана на фактическом сценарии приложения.

六大指标в основном охватывает большую часть性能优化подробности, доступные как九大策略добавка. Автор по каждому性能优化建议функции будут指标Он разделен на следующие шесть аспектов.

Оптимизация нагрузки: оптимизация производительности, которую можно выполнить при загрузке ресурсов.
выполнить оптимизацию: оптимизация производительности, которую ресурс может выполнять во время выполнения.
Оптимизация рендеринга: оптимизация производительности, которую могут выполнять ресурсы при рендеринге.
оптимизация стиля: оптимизация производительности, которую стили могут выполнять при написании кода.
Оптимизация скрипта: оптимизация производительности, которую скрипты могут выполнять при написании кода.
Оптимизация двигателя V8:противV8引擎Функции могут выполнять оптимизацию производительности

Оптимизация нагрузки

六大指标-加载优化.png

выполнить оптимизацию

六大指标-执行优化.png

Оптимизация рендеринга

六大指标-渲染优化.png

оптимизация стиля

六大指标-样式优化.png

Оптимизация скрипта

六大指标-脚本优化.png

Оптимизация двигателя V8

六大指标-V8引擎优化.png

Суммировать

оптимизация производительностиКак общеизвестное знание, оно неизбежно встречается на работе или на собеседовании. Часто я не думаю об определенном性能优化建议Просто сделайте это или ответьте на него, но чтобы иметь общее представление об этом аспекте, чтобы знать, почему он разработан таким образом, и какого эффекта может достичь цель этого дизайна.

性能优化Охватить все в одной статье невозможно, если рассказывать подробно, то может понадобиться написать две книги, чтобы дочитать до конца. Эта статья может дать вам направление и отношение, и вы сможете применить то, чему научились.Я надеюсь, что после прочтения этой статьи она будет вам полезна.

Наконец, автор организует все содержание этой статьи в карту мозга высокого разрешения.Из-за большого размера ее нельзя загрузить.Вы можете обратить внимание на личный публичный аккаунт автора.Интерфейс IQи ответь性能优化Получите карманный график знаний!

В прошлом Nuggets с более чем 50 000 прочтений

Гибкое использование навыков разработки CSS:4500+нравится,13.8wобъем чтения
Гибкое использование навыков разработки JS:1700+нравится,5.4wобъем чтения
15 000 слов, описывающих все возможности ES6:4500+нравится,16.5wобъем чтения
40 мобильных пит-гайдов H5, на которые стоит обратить внимание в продвинутом интерфейсе | Netease три года практики:3800+нравится,5.7wобъем чтения

Эпилог

❤️Подписаться + Нравится + Избранное + Комментарий + Переслать ❤️, оригинальность это не просто, поощряйте автора к созданию более качественных статей

Обратите внимание на публичный аккаунтIQ前端, внешний общедоступный аккаунт, ориентированный на навыки разработки CSS / JS, вас ждут другие галантереи переднего плана

Ответить после подписки资料Получите бесплатные учебные материалы
Ответить после подписки进群Втяните вас в группу технического обмена
Добро пожаловать, чтобы следоватьIQ前端,БолееНавыки разработки на CSS/JSНажимайте только на публичный аккаунт