Opțiuni de navigare pentru SharePoint Online

Important : Acest articol este tradus automat, consultați exonerarea de răspundere. Versiunea în limba engleză a acestui articol se poate găsi aici pentru referință.

Acest articol descrie cum se îmbunătățește ori pagina de încărcare pentru SharePoint Online utilizând navigarea structurală și navigare determinate de căutare.

Navigare globală interogări necesare pentru a construi navigarea structurală pot face paginile încărcați mai multe încet în SharePoint Online. Aceasta este că fiecare dintre aceste interogări trimite solicitarea alt SQL Server. Pentru fiecare site și subsite-ul pe care le aveți, mai multe solicitările efectuate la SQL server. Această problemă afectează, de asemenea, pagini coordonatoare. Acest lucru înseamnă că navigare globală, de asemenea, este afectată.

Unele site-uri SharePoint necesită structuri de mari dimensiuni și complexe. Utilizați Navigarea structurală out of box, care utilizează conținut de interogare, poate avea ca rezultat ori lentă pagina de încărcare din cauza mai multe site-ul straturi. Fiecare dintre straturi de subsite-uri creează, de asemenea, o altă interogare.

Există două opțiuni de navigare principală out of box în SharePoint, precum un al treilea, abordare particularizate, determinate de căutare. Fiecare opțiune are tari și punctele slabe ca evidențiate în tabelul următor.

Navigarea structurală

Navigarea gestionată

Navigare determinate de căutare

Pro:

  • Simplu pentru a configura

  • Împodobite de securitate

  • Actualizează automat așa cum se adaugă site-uri

Pro:

  • Simplu pentru a păstra

Pro:

  • Împodobite de securitate

  • Actualizează automat așa cum se adaugă site-uri

  • Rapid încărcarea structuri de navigare timp și local memorate în cache

Contra:

  • Puteți efectua slab cu structură de site complexă

Contra:

  • Nu automat actualizate pentru a reflecta structura site-ului

Contra:

  • Fără capacitatea de a cu ușurință ordinea de site-uri

  • Necesită particularizarea paginii coordonatoare (aptitudini tehnice obligatoriu)

Dacă aveți un site cu o mulțime de subsite-uri și utilizați Navigarea structurală, acesta poate fi lent de pagină se încarcă în jos în mod semnificativ. Opțiunea cea mai potrivită pentru site-ul depind de cerințe de site-ul și pe capacitatea de tehnică. Dacă sunteți obișnuit să utilizați o pagină coordonatoare particularizată și au capacitatea de unele din organizație pentru a păstra modificările pe care pot apărea în pagina coordonatoare implicite pentru SharePoint Online, apoi opțiunea determinate de căutare vor produce cea mai bună experiență de utilizator. Dacă doriți un mijloc simplu între out of box navigarea structurală și căutare, apoi navigarea gestionată este o opțiune foarte bună. Opțiunea navigarea gestionată pot fi menținute prin configurare, implică cod particularizare fișiere și este în mod semnificativ mai rapid decât navigarea structurală out of box.

O altă abordare este să restructureze site-ul existent și a reduce numărul de elemente de navigare și subsite-uri necesare. Acest lucru se întâmplă deoarece navigarea structurală efectuează bine, cât timp structura site-ului și navigare nu este prea complicată.

Acest articol compară abordări diverse o colecție de site-uri exemplu. Colecția de site-uri exemplu are 11 subsite-uri și fiecare site sub are cel puțin patru subsite-uri suplimentare.

Captură de ecran afișând site-uri și subsite-uri

Utilizați Navigarea structurală în SharePoint Online

Acest lucru este panoul de navigare din out of box utilizate în mod implicit și este soluția cea mai simplă și corespunzătoare în majoritatea cazurilor. Dacă nu există o structură complexă de subsite-uri pentru mai multe sau mai multe niveluri de subsite-uri, navigarea structurală efectuează bine. Principalele avantaje ale acestei abordări sunt că acesta este ascuns parțial de securitate, actualizează automat când se adaugă noile site-uri și nu necesită orice particularizarea paginii coordonatoare. Un utilizator non-tehnice pot, de asemenea, cu ușurință adăugarea elementelor, ascunde elementele și gestionarea navigării de pe pagina setări.

Activarea navigarea structurală în SharePoint Online

Pentru a ilustra cum performanța într-o soluție SharePoint Online standard cu navigarea structurală și Afișare subsite-uri de opțiune activată. Mai jos este o captură de ecran cu setările de pe pagina Setări Site > navigare.

Captură de ecran afișând subsite-uri

Analiza navigarea structurală performanță în SharePoint Online

Pentru a analiza performanța de o pagină SharePoint utilizați fila rețea F12 dezvoltator instrumente din Internet Explorer.

Captură de ecran afișând fila rețea F12 dezvoltare instrumente

Pe fila rețea , faceți clic pe pagina .aspx care este încărcat și apoi faceți clic pe fila detalii .

Captură de ecran care afișează fila Detalii

Faceți clic pe Anteturi de răspuns.

Captură de ecran de detalii fila

SharePoint returnează unele informații de diagnosticare utile din sa anteturile de răspuns. Unul dintre cele mai utile este SPRequestDuration    care este valoarea, în milisecunde de cât de mult o solicitare de luat la procesul de pe server.

În următorul ecran captură Afișare subsite-uri este debifată pentru navigarea structurală. Acest lucru înseamnă că este doar colecției de site-ul link în navigarea globală:

Captură de ecran ce afișează timpul de încărcare ca durată de solicitare

Tasta SPRequestDuration    are o valoare de 245 milisecunde. Acest lucru reprezintă timp a luat pentru a returna solicitarea. Deoarece este doar un singur element de navigare pe site-ul, acesta este un bun punct de reper pentru modul în care efectuează fără intens navigare SharePoint Online. Următoarea captură de ecran afișează modul în care adăugați în subsite-urile afectează această cheie.

Captură de ecran afișând o solicitare de durată de 2502 ms

Adăugarea de subsite-uri a crescut semnificativ timpul necesar pentru a reveni la solicitarea de pagină.

Avantajele utilizării regulate navigare structurate este că puteți organiza ordinea cu ușurință, ascunde site-uri, adăugați pagini, rezultatele sunt împodobite de securitate și care nu sunt bursă din paginile coordonatoare acceptat utilizat în SharePoint Online. Dacă structura site-ul cu grijă și minimiza cantitatea de subsite-urile din colecția de site-ul apoi navigarea structurală efectuează bine.

Utilizați Navigarea gestionată și metadatele gestionate în SharePoint Online

Navigarea gestionată este o altă opțiune out of box care se pot utiliza pentru a recrea același fel de funcționalitate ca navigarea structurală.

Avantajul utilizării de metadate gestionate este că este mult mai rapid pentru a regăsi date decât utilizarea conținutului de interogare pentru a construi navigarea în site. Deși este mult mai rapid e nici o cale de securitate trim rezultatele așadar, dacă un utilizator nu are acces la un anumit site, linkul va arăta în continuare, dar va duce la un mesaj de eroare.

Cum se implementează navigarea gestionată și rezultatele   

Există mai multe articole pe TechNet despre detaliile navigarea gestionată, de exemplu, consultați Prezentare generală a navigării gestionate în SharePoint Server 2013.

Pentru a implementa navigarea gestionată, trebuie să aveți termeni stocați permisiuni de administrator. Prin configurarea de termeni cu URL-uri care se potrivesc cu structura de o colecție de site-ul, navigarea gestionată pot fi utilizate pentru a înlocui navigarea structurală. De exemplu:

Captură de ecran a Subsite1 exemplu

Următorul exemplu Arată performanța de navigare complexe utilizând navigarea gestionată.

Captură de ecran a SPRequestDuration exemplu

Utilizați Navigarea gestionată în mod unitar îmbunătățește performanța comparativ cu conținutul de interogare navigarea structurală abordarea.

Utilizarea determinate de căutare scriptarea partea client

Utilizarea căutării, puteți să optimizați indexuri care sunt construite în fundal folosind accesării continue cu crawlere. Acest lucru înseamnă că există interogări fără intens conținut. Rezultatele căutării sunt transferat din indexul de căutare și rezultatele sunt împodobite de securitate. Acest lucru este mai rapid decât utilizarea interogărilor conținut normal. Utilizarea căutării pentru navigarea structurală, mai ales dacă aveți o structură de site complexă va accelera pagina de încărcare mult timp. Avantajul principal al acest lucru peste navigarea gestionată este că puteți beneficia de limitări de securitate.

Această abordare implică crearea unei pagini coordonatoare particularizate și înlocuirea codul out of box navigare cu particularizate HTML. Urmați această procedură pentru a înlocui codul de navigare în seattle.html fișier.

În acest exemplu, va deschide fișierul seattle.html și înlocuiți elementul întreaga id = "DeltaTopNavigation" cu codul HTML particularizate.

Exemplu: Pentru a înlocui codul out of box navigarea într-o pagină coordonatoare

  1. Navigați la pagina Setări Site .

  2. Deschide Galeria de pagini coordonatoare, făcând clic pe Pagini coordonatoare.

  3. De aici puteți naviga prin Biblioteca și descărcați fișierul seattle.master.

  4. Editarea codului utilizând un editor de text și ștergeți bloc de cod în următorul ecran.

    Captură de ecran a DeltaTopNavigation codul pentru a șterge
  5. Eliminarea codul între < SharePoint:AjaxDelta id = "DeltaTopNavigation" > și < \SharePoint:AjaxDelta > etichete și să îl înlocuiți cu fragmentul următoarele:

    <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. Înlocuiți URL-ul în încărcare imagine etichetă ancoră la începutul, cu un link la o imagine de încărcare în colecția de site-ul. După ce ați efectuat modificările, redenumiți fișierul și apoi încărcați-l în Galeria de pagini coordonatoare. Acest lucru generează un fișier nou .master.

  7. Acest HTML este marcajul de bază, care va fi populată cu rezultatele căutării returnate de la cod JavaScript. Va trebui să-l editați următorul cod pentru a modifica valoarea pentru var root = “site collection URL ca evidență în fragmentul de următoarele:

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

    Fișier JavaScript întreaga este după cum urmează:

    //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");
    

    Pentru a rezuma codul afișat deasupra în jQuery $(document).ready funcția există un obiect viewModel creat și apoi loadNavigationNodes() funcția pe acel obiect se numește. Această funcție fie încarcă ierarhia de navigare anterior construit stocate în stocare HTML5 locală a browserului client sau apelează funcția queryRemoteInterface().

    QueryRemoteInterface() construiește o solicitare de utilizând funcția getRequest() cu parametri de interogare definite mai devreme în script și apoi returnează date de pe server. Aceste date este, în esență, o matrice de toate site-urile din colecția de site-ul reprezentat ca obiecte de transfer de date cu diverse proprietăți. Aceste date este apoi analizate în definită anterior SPO.Models.NavigationNode obiectele care utilizează Knockout.js pentru a crea observabile proprietăți pentru a fi utilizat de legare valorile în HTML care am definit-o versiune anterioară de date. Obiectele sunt apoi pune într-o matrice de rezultate. Această matrice este analizate în JSON utilizând obturare și stocate în spațiul de stocare de browserul local pentru îmbunătățirea performanțelor pe încărcarea paginii viitoare.

  8. În continuare, rezultatele sunt atribuite matrice self.nodes și o ierarhie este construită din obiectelor utilizând linq.js atribuirea rezultatul la o matrice self.heirarchy. Această matrice este obiectul pe care este legat la HTML. Acest lucru se face în funcție de toggleView() prin care trece obiectul sine funcției ko.applyBinding() . Acest lucru provoacă apoi matrice ierarhie să fie legat la HTML următoarele:

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

    În cele din urmă, gestionari de eveniment pentru mouseenter și mouseexit sunt adăugate la nivel superior navigare să gestioneze subsite meniurile verticale care se termină în funcția addEventsToElements() .

    Rezultatele de navigare pot fi văzute în ecran de mai jos:

    Captură de ecran a rezultatelor de navigare

    În exemplul nostru complexe de navigare o pagină proaspete încărcare fără afișează memorare în cache locală timpul petrecut pe server a fost tăiat în jos din punct de reper navigarea structurală pentru a obține un rezultat similar ca abordare navigarea gestionată.

    Captură de ecran a SPRequestDuration 301

    Un beneficiu principale de a acestei abordări este că utilizând HTML5 stocare locale, panoul de navigare este stocat local pentru utilizator data viitoare când încărcarea paginii.

Vom lua îmbunătățiri ale performanței principale de la utilizarea căutării API pentru navigarea structurală; cu toate acestea, este nevoie de câteva tehnice capacitatea de a rula și să particularizați această funcționalitate. În implementarea de exemplu, site-uri sunt ordonate în același mod ca navigarea structurală out of box; ordine alfabetică. Dacă ați vrut să o abatere de la această ordine, va fi mai complicată pentru a dezvolta și menține. De asemenea, această abordare necesită o abatere de la paginile coordonatoare acceptate. Dacă pagina coordonatoare particularizată nu sunt menținute, site-ul va pierde pe actualizări și îmbunătățirile care Microsoft face la paginile coordonatoare.

Codul de mai sus are dependențe următoarele:

Versiunea curentă a LinqJS nu conține metoda ByHierarchy utilizate în codul de mai sus și va întrerupe codul de navigare. Pentru a remedia acest lucru, adăugați metoda următoare în fișierul Linq.js înainte de a linia "aplatiza: funcția ()".

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);
         })
     });
 },

Notă : Exonerare de răspundere pentru traducere automată: Acest articol a fost tradus de un sistem computerizat, fără intervenție umană. Microsoft oferă aceste traduceri automate pentru a ajuta utilizatorii vorbitori de alte limbi decât engleza să beneficieze de conținutul despre produsele, serviciile și tehnologiile Microsoft. Pentru că articolul a fost tradus de un computer, poate conține erori de vocabular, sintaxă sau gramatică.

Extindeți-vă competențele
Explorați instruirea
Fiți primul care obține noile caracteristici
Alăturați-vă utilizatorilor Office Insider

Au fost utile aceste informații?

Vă mulțumim pentru feedback!

Vă mulțumim pentru feedback! Se pare că ar fi util să luați legătura cu unul dintre agenții noștri de asistență Office.

×