Opcije za navigaciju za SharePoint Online

Važno : Ovaj članak je mašinski preveden, pogledajte odricanje odgovornosti. Pogledajte verziju ovog članka na engleskom jeziku ovde za referencu.

Ovaj članak opisuje kako da poboljšate vremenima učitavanja stranice za SharePoint Online pomoću strukturnu navigaciju i pretraživanja za navigaciju.

Globalna navigacija i upiti potrebni da biste napravili strukturnu navigaciju mogu da stranica učita više sporo u sistemu SharePoint Online. To je zato što svaki od ovih upita šalje još jedan zahtev za SQL server. Za sve lokacije i podlokacije koje imate, zahtevi više su napravljene na SQL server. Ovaj problem takođe utiče na master stranice. To znači da globalna navigacija takođe filter.

Neke SharePoint lokacije zahtevaju velike i složene strukture. Koristi se za strukturnu navigaciju, koji koristi sadržaj tako što ćete upit, može da dovede vremenima učitavanja spora stranice zbog više lokacija slojeva. Svaka od slojeva podlokacija kreira i drugog upita.

Postoje dva glavna navigacija se dobijaju opcije u sistemu SharePoint, kao i treću, prilagođene, pretraživanja pristup. Svaku opciju ima prednosti i nedostatke što je opisano u sledećoj tabeli.

Strukturnu navigaciju

Kontrolisanu navigaciju

Pretraživanja za navigaciju

Prednosti:

  • Lako da biste konfigurisali

  • Skrati bezbednosti

  • Automatski ažurira dok se dodaju lokacije

Prednosti:

  • Lako se održava

Prednosti:

  • Skrati bezbednosti

  • Automatski ažurira dok se dodaju lokacije

  • Brzo učitavanje strukturom vreme i lokalno keširane navigacije

Nedostatke:

  • Možete da izvršite loše sa struktura složene lokacije

Nedostatke:

  • Neće automatski ažurirati kako bi odražavali struktura lokacije

Nedostatke:

  • Nema mogućnost da se lako redosled lokacije

  • Zahteva za prilagođavanje master stranice (tehničke stručnosti obavezno)

Ako imate lokacije sa veliki broj podlokacija i koristite strukturnu navigaciju, to može biti usporava stranicu učitava znatno. Najbolji odgovarajuću opciju za vašu lokaciju zavise od toga na svojim zahtevima lokacije i na vaš tehničke mogućnosti. Ako ste upoznati sa korišćenjem prilagođenu master stranicu i imate nekoliko mogućnosti u organizaciji da bi se promene do kojih može doći u podrazumevanu master stranicu za SharePoint Online, zatim opciju pretraživanja daće najbolje iskustvo korisnika. Ako želite jednostavno sredina između se dobijaju strukturnu navigaciju i pretrage, kontrolisanu navigaciju je dobra opcija. Opciju kontrolisanu navigaciju možete da se održi kroz konfiguracija ne uključuje datoteke za prilagođavanje kôd i je znatno brže od se dobijaju strukturnu navigaciju.

Drugi pristup je restruktuiranje postojećoj lokaciji i smanjili broj stavki navigacije i podlokacija obavezno. To je zato što strukturnu navigaciju izvršava pa kao strukturu lokacije i navigacije nije komplikovano.

Ovaj članak se porede raznih pristupa u primeru kolekciji lokacija. Primer kolekcije lokacija ima 11 podlokacija i svaki podlokacija ima najmanje četiri dodatne podlokacije.

Snimak ekrana koji prikazuje lokacija i podlokacija

Koristi strukturnu navigaciju u sistemu SharePoint Online

Ovo je podrazumevano koristi se za navigacije i jednostavno i odgovarajuće rešenje u većini slučajeva. Ukoliko ne postoji složenoj strukturi više podlokacija ili više nivoa podlokacija, izvršava pa strukturnu navigaciju. Glavnih prednosti ovog pristupa su da je bezbednost odsečene, automatski ažurira kada se dodaju nove lokacije i ne zahteva sva prilagođavanja master stranice. Nisu stručne korisnika možete takođe lako Dodavanje stavki Sakrij stavke i upravljanje navigaciju na stranici sa postavkama.

Uključivanje strukturnu navigaciju u sistemu SharePoint Online

Za ilustraciju kako performanse u standardne SharePoint Online rešenje sa strukturnu navigaciju i Prikaži podlokacije opciju uključeno. Ispod je na snimak ekrana opcije postavke na stranici Postavke lokacije > Navigacija.

Snimak ekrana koji prikazuje podlokacija

Analiziranje performansi strukturnu navigaciju u sistemu SharePoint Online

Da biste analizirali performanse na SharePoint stranici koristite karticu " mreža " F12 alatki za programere u programu Internet Explorer.

Snimak ekrana koji prikazuje F12 projektante "Alatke za mrežu"

Na kartici na mreži , kliknite na .aspx stranici koja je učitavanja, a zatim izaberite stavku na kartici Detalji .

Snimak ekrana koji prikazuje karticu "Detalji"

Izaberite stavku Zaglavlja odgovora.

Snimak ekrana detalje kartica

SharePoint daje dijagnostičke informacije u zaglavljima svoj odgovor. Jedna od najkorisniji je SPRequestDuration    što je vrednost u milisekundama od koliko zahtev za trebalo da proces na serveru.

Na sledećem ekranu snimak Prikaži podlokacije je opozvan izbor za strukturnu navigaciju. To znači da je samo veze kolekcije lokacije u traku za globalnu navigaciju:

Snimak ekrana koji prikazuje vremenima učitavanja kao trajanje zahteva

Taster SPRequestDuration    ima vrednost od 245 milisekundi. Ovo predstavlja vreme koje je potrebno da biste se vratili na zahtev. Pošto postoji samo jedan stavke navigacije na lokaciji, ovo je dobar referentnu za kako SharePoint Online izvršava bez prekomerna za navigaciju. Sledeći snimak ekrana prikazuje kako dodati u podlokacije utiče na ovaj ključ.

Snimak ekrana koji prikazuje zahtev za trajanje 2502 ms

Dodavanje podlokacije znatno povećao vreme koje je potrebno da biste se vratili na zahtevu za stranicu.

Prednosti korišćenja običan strukturirane navigacije je da možete lako organizovanje redosled, skrivanje lokacije, dodajte stranice, rezultati odsečene bezbednost, a koje se ne skrenuli iz podržani master stranica koristi u sistemu SharePoint Online. Ako ste pažljivo Strukturiranje na lokaciju i umanjite podlokacije u kolekciji lokacija zatim strukturnu navigaciju izvršava dobro.

Korišćenje kontrolisanu navigaciju i kontrolisane metapodatke u sistemu SharePoint Online

Kontrolisanu navigaciju je druga opcija se dobijaju koje možete koristiti da biste ponovo kreirajte ista vrsta funkcionalnost kao strukturnu navigaciju.

Prednost korišćenja kontrolisanih metapodataka je mnogo brže da biste preuzeli podatke od sadržaja pomoću upita za kreiranje navigaciju lokacije. Iako je mnogo brži nema bezbednosti trim rezultate tako ako korisnik ne imaju pristup određenoj lokaciji, veze će i dalje pokazuju, ali će vas odvesti poruku o grešci.

Kako da primenite kontrolisanu navigaciju i rezultati   

Postoji nekoliko članaka na lokaciji TechNet za detalje o kontrolisanu navigaciju, na primer, pogledajte članak Pregled kontrolisanu navigaciju u sistemu SharePoint Server 2013.

Da biste primenili kontrolisanu navigaciju, morate imati termina skladištenje administratorske dozvole. Podešavanjem uslovima URL adresama koje se podudara sa strukturom kolekcije lokacija, kontrolisanu navigaciju se može koristiti da biste zamenili strukturnu navigaciju. Na primer:

Snimak ekrana Subsite1 primer

Sledeći primer prikazuje performanse složene navigacije pomoću kontrolisanu navigaciju.

Snimak ekrana SPRequestDuration primer

Dosledno koristite kontrolisanu navigaciju poboljšava performanse u odnosu na sadržaj tako što ćete upit strukturnu navigaciju pristup.

Korišćenje pretraživanja izvršavanje skripti strani klijenta

Korišćenje pretrage možete da ostvarite indeksa koji su ugrađeni u pozadini pomoću neprekidnog popisivanja. To znači da su upiti bez prekomerna sadržaja. Rezultati pretrage su povučeni iz indeksa za pretraživanje, a rezultati su odsečene bezbednost. Ovo je brže od korišćenja običan sadržaja upita. Koristite pretragu za strukturnu navigaciju, naročito ako imate strukturu složene lokacije će ubrza učitavanje vreme znatno stranice. Glavni prednost ovo preko kontrolisanu navigaciju jeste da vam njegova bezbednosnu proveru.

Ovaj pristup obuhvata Kreiranje prilagođene master stranice i zamena prilagođenom HTML kôd se okvir za navigaciju. Sledite ovu proceduru da biste zamenili kôd za navigaciju u datoteci seattle.html.

U ovom primeru, će otvoriti datoteku seattle.html i zamenite celu element id = „DeltaTopNavigation” sa prilagođenim kodom HTML.

Primer: Da biste zamenili kôd se okvir za navigaciju u master stranice

  1. Idite na stranicu " Postavke lokacije ".

  2. Otvorite galeriji master stranica tako što ćete kliknuti na dugme Master stranice.

  3. Odavde možete da se krećete kroz biblioteke i preuzimanje datoteka seattle.master.

  4. Uređivanje koda u uređivaču teksta i izbrišite Šifra blok na sledećem ekranu snimak.

    Snimak ekrana DeltaTopNavigation kôd da biste izbrisali
  5. Uklonite kôd između na < SharePoint:AjaxDelta id = „DeltaTopNavigation” > i < \SharePoint:AjaxDelta > oznake i zamenite ga sledeće isečak:

    <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. Zamena URL ADRESE u učitavanja slika sidro oznake na početku, sa vezom ka učitavanja slika u kolekciji lokacija. Kada napravite promene, preimenujte datoteku i zatim je otpremite u galeriji master stranica. Ovo će kreirati novu datoteku .master.

  7. Ova HTML je osnovni naznaka koje će biti popunjeno tako što ćete rezultati pretrage iz JavaScript koda. Moraćete da biste uredili sledeći kôd da biste promenili vrednost za var root = “site collection URL kao što je objašnjeno u sledeće isečak:

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

    Cela JavaScript datoteka je na sledeći način:

    //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("HSHSL");
                        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);
    
                    var newItem = new SPOCustom.Models.NavigationNode();
                    newItem.Title("StaffHelp");
                    newItem.Url("https://staff.hshsl.umaryland.edu/staffhelp");
                    newItem.Parent(null);
                    sortedArray.push(newItem);
    
    
    
                    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");
    

    Da biste rezimirali kôd prikazan iznad u funkciji $(document).ready jQuery se objekta u viewModel kreirali, a zatim loadNavigationNodes() funkcioniše na taj objekat je. Ova funkcija ili učitava hijerarhiji prethodno izgrađenih navigacije uskladištene u HTML5 lokalno skladištenje klijenta pregledača ili poziva funkcija queryRemoteInterface().

    QueryRemoteInterface() pravi zahtev za korišćenje funkcije getRequest() sa parametar upita koji je definisan ranije u scenariju, a zatim vraća podatke sa servera. Ovi podaci su u suštini niz sve lokacije u kolekciji lokacija koji je predstavljen kao objekti za prenos podataka sa raznim svojstva. Ove podatke zatim raščlaniti u prethodno definisane SPO.Models.NavigationNode objekte koji koristite Knockout.js da biste kreirali vidljivom svojstva za korišćenje podataka povez vrednosti u HTML koji smo definisani ranije. Objekti su postavite u rezultatima niza. Ovaj niz je raščlaniti u JSON pomoću nokaut i skladište u skladištu lokalnog pregledača za poboljšane performanse na mnogo buduće stranice.

  8. Zatim, rezultati su dodeljene self.nodes niza i hijerarhije je izgrađen iz objekata pomoću linq.js dodeljivanje izlaz u nizu self.heirarchy. Ovaj niz je objekat koji je povezan sa HTML. Ovo se obavlja u funkciji toggleView() prelazi na sebi objekat za ko.applyBinding() funkciju. Zatim na ovaj način hijerarhije nizu da se povežu sa sledeće HTML:

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

    Na kraju, rukovaoce za mouseenter i mouseexit se dodaju navigaciona traka rukovanja podlokacije padajućeg menija koja se obavlja u funkciji addEventsToElements() .

    Rezultati navigacije mogu da vide na ekranu snimak ispod:

    Snimak rezultata za navigaciju

    U našem primeru složene navigacije svežim stranice učitavanja bez lokalne keširanje prikazuje na vreme utrošeno na serveru smanjena sa referentnu strukturnu navigaciju da biste dobili slične rezultate kao kontrolisanu navigaciju pristup.

    Snimak ekrana SPRequestDuration 301

    Glavna prednost ovog pristupa je da pomoću HTML5 lokalno skladištenje navigacije uskladišteni lokalno za korisnika kada sledeći put su učitavanje stranice.

Poboljšanja performansi glavne se iz pomoću pretrage API za strukturnu navigaciju; Međutim, potrebno je neke tehničke mogućnost da izvrši i prilagodili ove funkcije. U primeru sprovođenje, lokacija su raspoređeni na isti način kao izlaz za strukturnu navigaciju; abecednim redom. Ako biste želeli da odstupim sa sledećim redosledom, bilo bi složeniju za razvijanje i održavanje. Takođe, ovaj pristup zahteva da odstupim od podržanih master stranice. Ako se prilagođena master stranica ne održavaju, vaše lokacije će propustim ispravke i poboljšanja koje Microsoft obezbeđuje master stranica.

Kôd za gorenavedene ima sledeće zavisnosti:

Trenutna verzija LinqJS ne sadrži ByHierarchy metod iznad kôd i će preloma kôd za navigaciju. Da biste rešili ovaj problem, dodajte sledeći metod Linq.js datoteku pre nego što reda „Flatten: funkcija ()”.

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

Napomena : Odricanje odgovornosti za mašinski prevod: Ovaj članak je preveo računarski sistem bez ljudske intervencije. Microsoft nudi ove mašinske prevode da bi pomogao korisnicima koji ne govore engleski da uživaju u sadržaju o Microsoft proizvodima, uslugama i tehnologijama. Budući da je članak mašinski preveden, može da sadrži greške u rečniku, sintaksi ili gramatici.

Unapredite veštine
Istražite obuku
Prvi nabavite nove funkcije
Pridružite se Office Insider korisnicima

Da li su vam ove informacije koristile?

Hvala vam na povratnim informacijama!

Hvala za povratne informacije! Zvuči da će biti od pomoći ako vas povežemo sa našim agentima Office podrške.

×