Opções de navegação para o SharePoint Online

Importante :  Este artigo foi traduzido por um sistema de tradução automática, leia o aviso de isenção de responsabilidade. Para sua referência, veja a versão em inglês deste artigo aqui.

Este artigo descreve como melhorar os tempos de carregamento de página do SharePoint Online usando a navegação estrutural e navegação orientada por pesquisa.

Navegação global e as consultas necessárias para criar a navegação estrutural podem tornar suas páginas a carregar mais lentamente no SharePoint Online. Isso ocorre porque cada uma dessas consultas envia outra solicitação para o SQL server. Para cada site e subsite que você tem, mais solicitações são feitas ao SQL server. Esse problema também afeta as páginas mestras. Isso significa que a navegação global também é afetada.

Alguns sites do SharePoint requerem estruturas grandes e complexas. Usar a navegação estrutural-de-prontos, que usa o conteúdo pela consulta, pode resultar em tempos de carregamento de página lenta devido a várias camadas de site. Cada uma das camadas de subsites também cria outra consulta.

Há duas opções de navegação de-prontos principal no SharePoint bem como um terceiro, abordagem orientadas por pesquisa personalizada. Cada opção tem prós e contras conforme descrito na tabela a seguir.

Navegação estrutural

Navegação gerenciada

Navegação orientadas por pesquisa

Profissionais:

  • Fácil de configurar

  • Cortado de segurança

  • Atualiza automaticamente conforme sites são adicionados

Profissionais:

  • Fácil de manter

Profissionais:

  • Cortado de segurança

  • Atualiza automaticamente conforme sites são adicionados

  • Fast Carregando estrutura de navegação de tempo e armazenadas em cache localmente

Desvantagens:

  • Pode executar mal com estrutura do site complexo

Desvantagens:

  • Não automaticamente atualizados para refletir a estrutura do site

Desvantagens:

  • Nenhuma capacidade de facilmente os sites de ordem

  • Requer a personalização da página mestra (qualificações técnicas necessárias)

Se você tiver um site com um monte de subsites e você estiver usando a navegação estrutural, ele pode estar provocando sua página carrega significativamente. A opção mais adequada para seu site será dependem de suas necessidades de site e sua capacidade técnica. Se você estiver familiarizado com o uso de uma página mestra personalizada e possuem alguns recursos em sua organização para manter as alterações que podem ocorrer na página mestra padrão do SharePoint Online, a opção orientadas por pesquisa produzirá a melhor experiência de usuário. Se você quiser um intermediário simple entre a navegação estrutural-de-prontos e pesquisa, a navegação gerenciada é uma ótima opção. A opção de navegação gerenciada pode ser mantida por meio de configuração, não envolvem arquivos de personalização de código e é significativamente mais rápido do que a navegação estrutural-de-prontos.

Outra abordagem é reestruturar o site existente e reduzir o número de itens de navegação e subsites obrigatórios. Isso ocorre porque a navegação estrutural executa bem desde que a estrutura do site e a navegação não é muito complicado.

Este artigo compara as diversas abordagens em um conjunto de sites de exemplo. O conjunto de sites de exemplo possui 11 subsites e cada subsite tenha pelo menos quatro subsites adicionais.

Guia Página Inicial do PowerPoint, grupo Formatar

Usar a navegação estrutural no SharePoint Online

Esta é a navegação de-de-prontos usada por padrão e é a solução mais simples e apropriada na maioria das circunstâncias. A menos que haja uma estrutura complexa de vários subsites ou vários níveis de subsites, a navegação estrutural executa bem. As principais vantagens dessa abordagem são que ele é cortado de segurança, é atualizada automaticamente quando novos sites são adicionados e não exige qualquer personalização da página mestra. Um usuário não técnico pode também é fácil adicionar itens, ocultar itens e gerenciar a navegação na página Configurações do.

Como ativar a navegação estrutural no SharePoint Online

Ilustrar como o desempenho em uma solução do SharePoint Online padrão com a navegação estrutural e mostrar subsites de opção ativado. A seguir é uma captura de tela configurações encontradas na página Configurações do Site > navegação.

Guia Pesquisa de Email, grupo 2

Analisar o desempenho da navegação estrutural no SharePoint Online

Para analisar o desempenho de uma página do SharePoint use a guia rede das ferramentas de desenvolvedor F12 no Internet Explorer.

Captura de tela mostrando a guia Rede nas ferramentas de desenvolvimento F12

Na guia rede, clique na página. aspx que está sendo carregada e clique na guia detalhes.

Recursos do InfoPath 2010 que estão indisponíveis nos formulários de navegador da Web

Clique em Cabeçalhos de resposta.

Captura de tela da guia Detalhes

SharePoint retorna algumas informações de diagnóstico útil em seus cabeçalhos de resposta. Um dos mais úteis é SPRequestDuration    , que é o valor, em milissegundos, de uma solicitação de quanto tempo levou para ser processada no servidor.

A tela a seguir captura Mostrar subsites estiver desmarcada para a navegação estrutural. Isso significa que há somente o link de conjunto de sites no painel de navegação global:

Captura de tela mostrando tempos de carregamento como duração da solicitação

A chave de SPRequestDuration    tem um valor de 245 milissegundos. Isso representa o tempo necessário para retornar a solicitação. Como há apenas um item de navegação do site, isso é uma boa referência para como do SharePoint Online executa sem navegação pesada. A próxima captura de tela mostra como adicionando nos subsites afeta esta tecla.

Captura de tela mostrando a duração de uma solicitação de 2502 ms

Adicionar os subsites aumentou significativamente o tempo necessário para retornar a solicitação de página.

As vantagens de usar a navegação estruturada regular é que você pode facilmente organizar a ordem, ocultar sites, adicionar páginas, os resultados são cortados de segurança e você não desviam-se de páginas mestras compatíveis usadas no SharePoint Online. Se você estrutura seu site cuidadosamente e minimiza a quantidade de subsites no seu conjunto de sites a navegação estrutural executa bem.

Usar a navegação gerenciada e metadados gerenciados no SharePoint Online

Navegação gerenciada é outra opção de-de-prontos que você pode usar para recriar o mesmo tipo de funcionalidade que a navegação estrutural.

A vantagem de usar metadados gerenciados é que é muito mais rápido para recuperar os dados que usando o conteúdo por consulta para criar a navegação do site. Embora seja que muito mais rápido não há nenhuma maneira de segurança arrumar os resultados por isso se um usuário não tem acesso a um determinado site, o link ainda mostrará mas conduzirá a uma mensagem de erro.

Como implementar a navegação gerenciada e os resultados   

Há vários artigos no TechNet sobre os detalhes de navegação gerenciada, por exemplo, consulte Visão geral de navegação gerenciada no SharePoint Server 2013.

Para implementar navegação gerenciada, é necessário ter o termo armazenar permissões de administrador. Configurando termos com URLs que correspondem a estrutura de um conjunto de sites, navegação gerenciada pode ser usada para substituir a navegação estrutural. Por exemplo:

Captura de tela do exemplo de Subsite1

O exemplo a seguir mostra o desempenho da navegação complexa usando navegação gerenciada.

Captura de tela do exemplo de SPRequestDuration

Usando a navegação gerenciada consistentemente melhora o desempenho em comparação ao conteúdo pela abordagem de navegação estrutural de consulta.

Usando o script de cliente orientadas por pesquisa

Usando a pesquisa, você pode aproveitar os índices que são criados em segundo plano usando o rastreamento contínuo. Isso significa que não há nenhuma consulta de conteúdo pesada. Resultados da pesquisa são extraídos de índice de pesquisa e os resultados são cortados de segurança. Isso é mais rápido que usar consultas de conteúdo normais. Usando a pesquisa para a navegação estrutural, especialmente se você tiver uma estrutura do site complexo, irá acelerar consideravelmente o tempo de carregamento de página. A principal vantagem dessa sobre navegação gerenciada é que você se beneficiar filtragem de segurança.

Essa abordagem envolve a criação de uma página mestra personalizada e substituindo o código de navegação de-prontos com HTML personalizado. Siga este procedimento para substituir o código de navegação no seattle.html arquivo.

Neste exemplo, você irá abrir o arquivo de seattle.html e substituir o elemento inteiro id = "Seus arquivos na" com o código HTML personalizado.

Exemplo: Para substituir o código de navegação de-prontos em uma página mestra

  1. Navegue até a página de Configurações do Site.

  2. Abra a Galeria de páginas mestras clicando em Páginas mestras.

  3. A partir daqui, você pode navegar por meio da biblioteca e baixar o arquivo seattle.master.

  4. Editar o código usando um editor de texto e excluir o bloco de código na captura de tela a seguir.

    Salvar seus arquivos na nuvem
  5. Remover o código entre o < SharePoint:AjaxDelta id = "Seus arquivos na" > e < \SharePoint:AjaxDelta > marcas e substituí-lo com o trecho a seguir:

    <div id="loading">
      <!--Replace with path to loading image.-->
      <div style="background-image: url(''); height: 22px; width: 22px; ">
      </div>
    </div>
    <!-- Main Content-->
    <div id="navContainer" style="display:none">
        <div data-bind="foreach: hierarchy" class="noindex ms-core-listMenu-horizontalBox">
            <a class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" data-bind="attr: { href: item.Url, title: item.Title }">
                <span class="menu-item-text" data-bind="text: item.Title">
                </span>
            </a>
            <ul id="menu" data-bind="foreach: $data.children" style="padding-left:20px">
                <li class="static dynamic-children">
                    <a class="static dynamic-children menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" data-bind="attr: { href: item.Url, title: item.Title }">
                        <span aria-haspopup="true" class="additional-background ms-navedit-flyoutArrow dynamic-children">
                            <span class="menu-item-text" data-bind="text: item.Title">
                            </span>
                        </span>
                    </a>
                    <ul id="menu" data-bind="foreach: children; visible: children.length>0" class="dynamic" >
                        <li class="dynamic">
                            <a class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" data-bind="attr: { href: item.Url, title: item.Title }">
                                <span class="menu-item-text" data-bind="text: item.Title">
                                </span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
  6. Substitua a URL no carregamento do marca de âncora no início, com um link para uma imagem de carregamento no seu conjunto de sites de imagem. Depois de fazer as alterações, renomeie o arquivo e carregue-o na Galeria de páginas mestras. Isso gera um novo arquivo. master.

  7. Este HTML é a marcação básica que será preenchida pelos resultados de pesquisa retornados do código JavaScript. Você precisará editar o código a seguir para alterar o valor para o var root = “site collection URL demonstrou no trecho a seguir:

    var root = “https://spperformance.sharepoint.com/sites/NavigationBySearch”;

    Todo o arquivo JavaScript é da seguinte maneira:

    //Models and Namespaces
    var SPOCustom = SPOCustom || {};
    SPOCustom.Models = SPOCustom.Models || {}
    SPOCustom.Models.NavigationNode = function () {
    
        this.Url = ko.observable("");
        this.Title = ko.observable("");
        this.Parent = ko.observable("");
    
    };
    
    var root = "https://spperformance.sharepoint.com/sites/NavigationBySearch";
    var baseUrl = root + "/_api/search/query?querytext=";
    var query = baseUrl + "'contentClass=\"STS_Web\"+path:" + root + "'&trimduplicates=false&rowlimit=300";
    
    var baseRequest = {
        url: "",
        type: ""
    };
    
    
    //Parses a local object from JSON search result.
    function getNavigationFromDto(dto) {
        var item = new SPOCustom.Models.NavigationNode();
        if (dto != undefined) {
    
            var webTemplate = getSearchResultsValue(dto.Cells.results, 'WebTemplate');
    
            if (webTemplate != "APP") {
                item.Title(getSearchResultsValue(dto.Cells.results, 'Title')); //Key = Title
                item.Url(getSearchResultsValue(dto.Cells.results, 'Path')); //Key = Path
                item.Parent(getSearchResultsValue(dto.Cells.results, 'ParentLink')); //Key = ParentLink
            }
    
        }
        return item;
    }
    
    function getSearchResultsValue(results, key) {
    
        for (i = 0; i < results.length; i++) {
            if (results[i].Key == key) {
                return results[i].Value;
            }
        }
        return null;
    }
    
    //Parse a local object from the serialized cache.
    function getNavigationFromCache(dto) {
        var item = new SPOCustom.Models.NavigationNode();
    
        if (dto != undefined) {
    
            item.Title(dto.Title);
            item.Url(dto.Url);
            item.Parent(dto.Parent);
        }
    
        return item;
    }
    
    /* create a new OData request for JSON response */
    function getRequest(endpoint) {
        var request = baseRequest;
        request.type = "GET";
        request.url = endpoint;
        request.headers = { ACCEPT: "application/json;odata=verbose" };
        return request;
    };
    
    /* Navigation Module*/
    function NavigationViewModel() {
        "use strict";
        var self = this;
        self.nodes = ko.observableArray([]);
        self.hierarchy = ko.observableArray([]);;
        self.loadNavigatioNodes = function () {
            //Check local storage for cached navigation datasource.
            var fromStorage = localStorage["nodesCache"];
            if (false) {
                var cachedNodes = JSON.parse(localStorage["nodesCache"]);
    
                if (cachedNodes && timeStamp) {
                    //Check for cache expiration. Currently set to 3 hrs.
                    var now = new Date();
                    var diff = now.getTime() - timeStamp;
                    if (Math.round(diff / (1000 * 60 * 60)) < 3) {
    
                        //return from cache.
                        var cacheResults = [];
                        $.each(cachedNodes, function (i, item) {
                            var nodeitem = getNavigationFromCache(item, true);
                            cacheResults.push(nodeitem);
                        });
    
                        self.buildHierarchy(cacheResults);
                        self.toggleView();
                        addEventsToElements();
                        return;
                    }
                }
            }
            //No cache hit, REST call required.
            self.queryRemoteInterface();
        };
    
        //Executes a REST call and builds the navigation hierarchy.
        self.queryRemoteInterface = function () {
            var oDataRequest = getRequest(query);
            $.ajax(oDataRequest).done(function (data) {
                var results = [];
                $.each(data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results, function (i, item) {
    
                    if (i == 0) {
                        //Add root element.
                        var rootItem = new SPOCustom.Models.NavigationNode();
                        rootItem.Title("Root");
                        rootItem.Url(root);
                        rootItem.Parent(null);
                        results.push(rootItem);
                    }
                    var navItem = getNavigationFromDto(item);
                    results.push(navItem);
                });
                //Add to local cache
                localStorage["nodesCache"] = ko.toJSON(results);
    
                localStorage["nodesCachedAt"] = new Date().getTime();
                self.nodes(results);
                if (self.nodes().length > 0) {
                    var unsortedArray = self.nodes();
                    var sortedArray = unsortedArray.sort(self.sortObjectsInArray);
    
                    self.buildHierarchy(sortedArray);
                    self.toggleView();
                    addEventsToElements();
                }
            }).fail(function () {
                //Handle error here!!
                $("#loading").hide();
                $("#error").show();
            });
        };
        self.toggleView = function () {
            var navContainer = document.getElementById("navContainer");
            ko.applyBindings(self, navContainer);
            $("#loading").hide();
            $("#navContainer").show();
    
        };
        //Uses linq.js to build the navigation tree.
        self.buildHierarchy = function (enumerable) {
            self.hierarchy(Enumerable.From(enumerable).ByHierarchy(function (d) {
                return d.Parent() == null;
            }, function (parent, child) {
                if (parent.Url() == null || child.Parent() == null)
                    return false;
                return parent.Url().toUpperCase() == child.Parent().toUpperCase();
            }).ToArray());
    
            self.sortChildren(self.hierarchy()[0]);
        };
    
    
        self.sortChildren = function (parent) {
    
            // sjip processing if no children
            if (!parent || !parent.children || parent.children.length === 0) {
                return;
            }
    
            parent.children = parent.children.sort(self.sortObjectsInArray2);
    
            for (var i = 0; i < parent.children.length; i++) {
                var elem = parent.children[i];
    
                if (elem.children && elem.children.length > 0) {
                    self.sortChildren(elem);
                }
            }
        };
    
        // ByHierarchy method breaks the sorting in chrome and firefix 
        // we need to resort  as ascending
        self.sortObjectsInArray2 = function (a, b) {
            if (a.item.Title() > b.item.Title())
                return 1;
            if (a.item.Title() < b.item.Title())
                return -1;
            return 0;
        };
    
    
        self.sortObjectsInArray = function (a, b) {
            if (a.Title() > b.Title())
                return -1;
            if (a.Title() < b.Title())
                return 1;
            return 0;
        }
    }
    
    //Loads the navigation on load and binds the event handlers for mouse interaction.
    function InitCustomNav() {
        var viewModel = new NavigationViewModel();
        viewModel.loadNavigatioNodes();
    }
    
    function addEventsToElements() {
        //events.
        $("li.dynamic-children").mouseover(function () {
            var position = $(this).position();
            $(this).find("ul").css({ width: 125, left: position.left + 10, top: 50 });
    
        })
            .mouseout(function () {
                $(this).find("ul").css({ width: 0, left: -99999, top: 0 });
            });
    }
    
    _spBodyOnLoadFunctionNames.push("InitCustomNav");
    

    Para resumir o código mostrado acima na função $(document).ready jQuery há um objeto de viewModel criado e, em seguida, o loadNavigationNodes() funcionar no objeto é chamado. Esta função ou carrega a hierarquia de navegação compilado anteriormente armazenada no HTML5 local do navegador do cliente ou ele chama a função queryRemoteInterface().

    QueryRemoteInterface() cria uma solicitação usando a função getRequest() com o parâmetro de consulta definido anteriormente no script e, em seguida, retorna os dados do servidor. Esses dados são essencialmente uma matriz de todos os sites no conjunto de sites representados como objetos de transferência de dados com várias propriedades. Esses dados, em seguida, são analisados para os objetos definidos anteriormente SPO.Models.NavigationNode que usar Knockout. js para criar propriedades observáveis para uso pelos dados associando os valores no HTML que definimos anteriormente. Os objetos são colocados em uma matriz de resultados. Essa matriz é analisada em JSON usando separação e armazenada no navegador local para melhorar o desempenho em carregamentos de página futuras.

  8. Em seguida, os resultados são atribuídos à matriz self.nodes e uma hierarquia baseia-se fora os objetos usando linq.js atribuindo a saída para uma matriz self.heirarchy. Essa matriz é o objeto que está associado ao HTML. Isso é feito na função toggleView() passando o objeto auto para a função ko.applyBinding() . Então, isso faz a matriz de hierarquia deve ser vinculado a seguinte HTML:

    <div data-bind=”foreach: hierarchy” class=”noindex ms-core-listMenu-horizontalBox”>

    Por fim, manipuladores de eventos para mouseenter e mouseexit são adicionados à navegação de nível superior para lidar com os menus suspensos subsite que é feita na função addEventsToElements() .

    Os resultados da navegação podem ser vistos na captura de tela abaixo:

    Captura de tela dos resultados de navegação

    Em nosso exemplo de navegação complexo uma página em branco carregamento sem mostra o cache local o tempo gasto no servidor foi cortado para baixo da navegação estrutural referência para obter um resultado semelhante como a abordagem de navegação gerenciada.

    Série de blocos azuis destacando os pilares fundamentais dos recursos do SharePoint 2013, que são Compartilhar, Organizar, Descobrir, Criar e Gerenciar.

    Um dos principal benefícios dessa abordagem é que usando armazenamento local do HTML5, a navegação é armazenada localmente para o usuário na próxima vez em que eles carregam a página.

Podemos obter melhorias de desempenho principais de usar a API de pesquisa para a navegação estrutural; No entanto, leva alguns capacidade técnica para executar e personalizar essa funcionalidade. No exemplo de implementação, os sites são ordenados da mesma maneira como a navegação estrutural-de-prontos; ordem alfabética. Se você quisesse desviar nesta ordem, seria mais complicada desenvolver e manter. Além disso, essa abordagem requer que você desviar das páginas mestras com suporte. Se a página mestra personalizada não é mantida, seu site vai perder out diante atualizações e aprimoramentos que Microsoft faz para as páginas mestras.

O código acima tem as seguintes dependências:

A versão atual do LinqJS não contém o método de ByHierarchy usado no código acima e interromperá o código de navegação. Para corrigir isso, adicione o seguinte método para o arquivo Linq.js antes da linha "nivelamento: funcionar ()".

ByHierarchy: function(firstLevel, connectBy, orderBy, ascending, parent) {
     ascending = ascending == undefined ? true : ascending;
     var orderMethod = ascending == true ? 'OrderBy' : 'OrderByDescending';
     var source = this;
     firstLevel = Utils.CreateLambda(firstLevel);
     connectBy = Utils.CreateLambda(connectBy);
     orderBy = Utils.CreateLambda(orderBy);
    
     //Initiate or increase level
     var level = parent === undefined ? 1 : parent.level + 1;

    return new Enumerable(function() {
         var enumerator;
         var index = 0;

        var createLevel = function() {
                 var obj = {
                     item: enumerator.Current(),
                     level : level
                 };
                 obj.children = Enumerable.From(source).ByHierarchy(firstLevel, connectBy, orderBy, ascending, obj);
                 if (orderBy !== undefined) {
                     obj.children = obj.children[orderMethod](function(d) {
                         return orderBy(d.item); //unwrap the actual item for sort to work
                     });
                 }
                 obj.children = obj.children.ToArray();
                 Enumerable.From(obj.children).ForEach(function(child) {
                     child.getParent = function() {
                         return obj;
                     };
                 });
                 return obj;
             };

        return new IEnumerator(

        function() {
             enumerator = source.GetEnumerator();
         }, function() {
             while (enumerator.MoveNext()) {
                 var returnArr;
                 if (!parent) {
                     if (firstLevel(enumerator.Current(), index++)) {
                         return this.Yield(createLevel());
                     }

                } else {
                     if (connectBy(parent.item, enumerator.Current(), index++)) {
                         return this.Yield(createLevel());
                     }
                 }
             }
             return false;
         }, function() {
             Utils.Dispose(enumerator);
         })
     });
 },

Observação : Aviso de Isenção de Tradução Automática: Este artigo foi traduzido por computador, sem intervenção humana. A Microsoft oferece essas traduções automáticas para ajudar as pessoas que não falam inglês a aproveitar os textos escritos sobre produtos, serviços e tecnologias da Microsoft. Como este artigo foi traduzido automaticamente, é possível que contenha erros de vocabulário, sintaxe ou gramática.

Expanda suas habilidades
Explore o treinamento
Obtenha novos recursos primeiro
Ingressar no Office Insider

Essas informações foram úteis?

Obrigado por seus comentários!

Agradecemos pelos seus comentários! Parece que pode ser útil conectar você a um de nossos agentes de suporte do Office.

×