Reflexões sobre o mecanismo de publicação de arquivos CSS.JS

descrever

Observação

nível de recurso

Nível de recurso da página:

1. Nível global (comum)
2. Nível do módulo
3. Nível da página (página)

Plano de otimização

A otimização concentra-se principalmente nos seguintes aspectos:

1. Reduza o tamanho de bytes de um único arquivo
2. Reduza o número de arquivos (ou seja, reduza o número de solicitações HTTP)

Outras otimizações são baseadas em habilidades de desenvolvimento e dependem do nível de especialização

Solução de saída de arquivo

1. mesclar
2. compressão

Com base nos níveis de recursos e planos de otimização, são formulados os quatro planos a seguir:


1. Cite diretamente um único arquivo e apresente-o em sequência (<link/>, <script/>)


2. Com base em 1, execute compactação de arquivo único


3. Mesclar em um novo arquivo único de acordo com o nível de recurso


4. Com base em 3, compacte os arquivos mesclados

Pensamentos

Opção 3: Como determinar o número de arquivos mesclados?

problema de cache

Usar sufixo de carimbo de data/hora

f2econfig_json

Arquivo de configuração:

var f2eJson={
"Versão":"v3",//versão

"Update":"20091015",//Atualiza o cache de acordo com o timestamp

"Compactar":"1",//Esquema de saída do arquivo (1, 2, 3, 4)

"Common":[//Estilo público para todo o site

"comum/global.css"

],

"Módulo":{ //Módulo e estilo

"Módulo 1":["produto,.css"]

},

"Página":{//estilos pertencentes a cada página

"index.php":["","sys/index.css"],

//O primeiro elemento armazena o nome de referência do módulo, caso contrário, deixe em branco.

"search.php":["Módulo 1","produto/search.css"]

//Referencia vários módulos, separados por ",", por exemplo: módulo 1, módulo 2

}

}

1. PHP tem uma biblioteca de conversão json dedicada
2. A estrutura de configuração do js é a mesma da configuração json do css

f2engine.php

1. Quando o arquivo de configuração não é atualizado, o json é analisado apenas uma vez em um array.
2. Analise o recurso apenas uma vez e salve o resultado para uso direto na próxima vez

exemplo

Por exemplo, a referência de estilo da página search.php

1. Encontre recursos no nível da página com base na página: Page["search.php"]
2. Encontre o estilo do módulo referenciado com base no primeiro valor desta matriz
3. Determine o esquema de saída do arquivo com base no valor "Compactar" no arquivo de configuração e processe-o
4. Saída na página

   //Estilo de site completo comum

   <link type="text/css" href="common/global.pack.css?20091015" rel="stylesheet" />

   //Módulo estilo módulo

   <link type="text/css" href="product.pack.css?20091015" rel="stylesheet" />

   //Página de estilo de página

   <link type="text/css" href="product/serach.pack.css?20091015" rel="stylesheet" />

   Nota: Após a compactação, o nome do arquivo passa a ser search.pack.css