Mogućnosti navigacije za SharePoint Online

Važno :  Ovaj je članak strojno preveden. Pogledajteizjavu o odricanju od odgovornosti. Verziju ovog članka na engleskom potražite ovdje.

U ovom se članku opisuje kako unaprijediti vremena učitavanja stranice u sustavu SharePoint Online pomoću strukturnu i navigacije utemeljenima na pretraživanju.

Web-mjesto globalne navigacije i u okvir za upite potrebno da biste sastavili strukturnih navigacije možete napraviti stranica učitavanje više sporo u sustavu SharePoint Online. To je jer se svaki od tih upita šalje drugi zahtjev za SQL server. Za svaku web-mjesta i web-podmjesto koje imate zahtjevi vrše na SQL server. Taj se problem utječe i osnovnih stranica. To znači da se globalne navigacije i utjecati.

Neka web-mjesta sustava SharePoint potreban je veliki i složeni strukture. Korištenje navigacije strukturnih Izlaz u-tvorničke, koji koristi sadržaj upit, može rezultirati vremena učitavanja sporo stranice zbog više web-mjesto slojeve. Svaki od Slojevi web-podmjesta stvara i drugi upit.

Postoje dvije mogućnosti glavna Navigacija Izlaz u-tvorničke u sustavu SharePoint kao i nekog drugog prilagođene, utemeljenima na pretraživanju pristup. Sve mogućnosti imaju argumente za i protiv kao što je vidljivo u sljedećoj tablici.

Strukturnu

Upravljanu navigaciju

Navigacija utemeljenima na pretraživanju

Profesionalce:

  • Jednostavno da biste konfigurirali

  • Sigurnost obrezivanja

  • Automatski ažurira kako se dodaju web-mjesta

Profesionalce:

  • Olakšava održavanje

Profesionalce:

  • Sigurnost obrezivanja

  • Automatski ažurira kako se dodaju web-mjesta

  • Brzo učitavanje vremena i lokalnu navigacijske strukture

Protiv:

  • Na raspolaganju loše sa strukturom složene web-mjesta

Protiv:

  • Neće automatski ažurirati strukture web-mjesta

Protiv:

  • Nema mogućnost jednostavno redoslijed web-mjesta

  • Potreban je prilagodbe osnovne stranice (Tehnički znanja i vještine potrebne)

Ako imate web-mjesta s mnogo web-podmjesta i koristite strukturnu, može biti usporavanja stranici učitava znatno. Mogućnost najprikladniji za vaše web-mjesto ovise svojim potrebama web-mjesta i na vašem tehničke mogućnost. Ako ste upoznati s korištenjem prilagođenu osnovnu stranicu i imate nekoliko mogućnosti u tvrtki ili ustanovi da biste zadržali promjene koje se može pojaviti u zadane osnovne stranice sustava SharePoint Online, mogućnost utemeljenima na pretraživanju će stvoriti najbolje korisničkog sučelja. Ako želite da se jednostavno dna srednje između Izlaz u-tvorničke strukturnu i pretraživanje, upravljanu navigaciju je odlično mogućnost. Mogućnost upravljanu navigaciju mogu održavati kroz konfiguracija obuhvaćaju datoteke za prilagodbu kod, a nije znatno brže nego Izlaz u-tvorničke strukturnu.

Drugi način je Preustroj postojećeg web-mjesta i smanjiti broj navigacijske stavke i obavezno web-podmjesta. To je zato strukturnu izvodi dobro dok god strukture web-mjesta i navigacije nije previše složeno.

U ovom se članku uspoređuju različite postupke u primjeru zbirci web-mjesta. Zbirke web-mjesta primjer sadrži 11 web-podmjesta i svakog web-mjesta sub ima najmanje četiri dodatna podmjesta.

Snimka zaslona s prikazom web-mjesta i podmjesta

Korištenje strukturnu u sustavu SharePoint Online

To je izlaz u-tvorničke navigacije po zadanom koristi i jasan i odgovarajuće rješenja u većini slučajeva. Ako ne postoji složenoj strukturi više podmjesta ili broj razina web-podmjesta, dobro se izvodi strukturnu. Glavnih prednosti takvog su da je sigurnost obrezivanja, automatski ažurira prilikom dodavanja novih web-mjesta i ne zahtijeva sve prilagodbe osnovne stranice. Nisu tehničke prirode korisnika i jednostavno možete dodati stavke, skrivanje stavke i upravljati navigacije sa stranice postavke.

Uključivanje strukturnu u sustavu SharePoint Online

Da biste ilustrirali kako performanse u standardni rješenja sustava SharePoint Online s strukturnu i Prikaži podmjesta mogućnost na uključeno. U nastavku je na snimka zaslona postavke nalazi se na stranici Postavke web-mjesta > Navigacija.

Snimka zaslona s prikazom web-podmjesta

Analiza performansi strukturnu u sustavu SharePoint Online

Da biste analizirali performanse stranicu sustava SharePoint pomoću kartice mreža alata za razvojne inženjere F12 u pregledniku Internet Explorer.

Snimka zaslona s prikazom F12 razvojni ugniježđena mreže

Na kartici mreže na stranici .aspx koja se učitava kliknite, a zatim na kartici pojedinosti .

Značajke programa InfoPath 2010 koje nisu dostupne u obrascima web-preglednika

Kliknite Zaglavlja odgovora.

Snimka zaslona obrascima web-preglednika

SharePoint vraća neke korisne dijagnostičke informacije u zaglavljima njegov odgovor. Jedna od najkorisniji je SPRequestDuration    što je vrijednost u milisekundama od koliko zahtjeva obrade na poslužitelju.

Na sljedećem zaslonu snimka Pokaži web-podmjesta poništen potvrdni okvir za strukturnih navigacije. To znači da je samo veza zbirke web-mjesta u globalnoj navigaciji za:

Snimka zaslona s prikazom učitavanje kao polje u drugoj

Ključ SPRequestDuration    ima vrijednost od 245 milisekundi. Time se povećava vrijeme trajanja da biste se vratili na zahtjev. Budući da je samo jednu stavku navigacije na web-mjesto, to je dobro usporednih za kako sustava SharePoint Online izvršava bez podebljanom navigacije. Na sljedećem snimci zaslona prikazano kako dodati u web-podmjesta utječe na tu tipku.

Snimka zaslona s prikazom drugoj 2502 ms

Dodavanje web-podmjesta sadrži znatno povećava se na vrijeme potrebno da biste se vratili na zahtjev za stranicu.

Prednosti korištenja običnog strukturirane navigacije je da možete jednostavno organiziranje redoslijed, skrivanje web-mjesta, dodati stranice, rezultati su sigurnost obrezivanja, a koje su deviating iz podržanih osnovnih stranica u sustavu SharePoint Online. Ako je pažljivo struktura web-mjesta i smanjiti količinu web-podmjesta u zbirci web-mjesta pa strukturnu izvodi dobro.

Korištenje web-mjesto upravljanu navigaciju i u okvir za upravljane metapodatke u sustavu SharePoint Online

Upravljanu navigaciju je neku drugu mogućnost Izlaz u-tvorničke koje možete koristiti da biste ponovno stvoriti istu sortiranje funkcija kao strukturnu.

Prednost korištenja upravljanih metapodataka je mnogo brže dohvaćanje podataka od koristiti sadržaja pomoću upita za sastavljanje navigacije web-mjesta. Iako je mnogo brže ne postoji način sigurnost trim rezultate pa ako korisnik nema pristup određenom web-mjestu, vezu će i dalje prikazuju, ali vodi do poruka o pogrešci.

Kako implementirati upravljanu navigaciju i rezultata   

Postoji nekoliko članaka na mreži TechNet o detaljima upravljanu navigaciju, primjerice, pročitajte članak Pregled upravljanu navigaciju u sustavu SharePoint Server 2013.

Da biste implementirali upravljanu navigaciju, morate koristiti termina pohranu administratorske dozvole. Postavljanjem riječi s URL-ovi koji se podudaraju strukturu zbirke web-mjesta upravljanu navigaciju može se koristiti da biste zamijenili strukturnu. Ako, na primjer:

Snimka zaslona Subsite1 primjer

Sljedeći primjer prikazuje performanse složene navigacije pomoću upravljanu navigaciju.

Snimka zaslona SPRequestDuration primjer

Dosljedno korištenje upravljanu navigaciju poboljšavaju performanse po pristup strukturnu upita u usporedbi sa sadržajem.

Korištenje utemeljenima na pretraživanju skriptiranje na klijentskoj strani

Pomoću pretraživanja možete koristiti indeksi ugrađenih prema gore u pozadini pomoću neprekidno pretraživanje radi indeksiranja. To znači da nema podebljanom sadržaja upita. Rezultati pretraživanja koji se povlače se iz indeksa pretraživanja, a rezultati su sigurnost obrezati. Ovo je brže nego pomoću običnog sadržaja upita. Korištenje pretraživanja za strukturnu, osobito ako je struktura složene web-mjesta, će ubrzati znatno učitavanje vrijeme stranice. Glavni prednost to putem upravljanu navigaciju jest pogodnost sigurnosno ograničenje.

Taj se način uključuje stvaranjem prilagođene osnovne stranice i izlaz u-tvorničke navigacije kod zamjenjuje prilagođeni HTML. Slijedite ovaj postupak da biste zamijenili kod navigacije u seattle.html datoteke.

U ovom primjeru će otvoriti datoteku seattle.html i zamijeni element cijeli id = "DeltaTopNavigation" prilagođeni HTML koda.

Primjer: Da biste zamijenili kod Izlaz u-tvorničke navigacije u osnovne stranice

  1. Idite na stranicu Postavke web-mjesta .

  2. Otvorite galeriju osnovnih stranica tako da kliknete Osnovnih stranica.

  3. Na tom mjestu možete prijeći u biblioteku i preuzimanje datoteke seattle.master.

  4. Uređivanje koda u uređivaču teksta i brisanje blokova Šifra na sljedećem zaslonu snimka.

    Spremanje datoteka u oblak
  5. Uklanjanje koda između na < SharePoint:AjaxDelta id = "DeltaTopNavigation" > i < \SharePoint:AjaxDelta > oznake i zamijeniti ga sljedeće isječ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. Zamjena URL u učitavanju slika oznake sidra na početku s vezom na učitavanja slike u zbirci web-mjesta. Nakon što ste napravili promjene, preimenujte datoteku, a zatim prenesite galeriju osnovnih stranica. Taj se način stvara novu datoteku da.

  7. U ovom HTML je osnovni oznake koje će biti popunjena rezultati pretraživanja koji je vratio JavaScript kod. Morat ćete uređivanje sljedeći kod da biste promijenili vrijednost za var root = “site collection URL kao što je prikazano u sljedećim isječak:

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

    Cijeli JavaScript datoteka je na sljedeć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("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");
    

    Sažetak kod gore navedenoj sintaksi u funkciji $(document).ready jQuery je stvaranje viewModel objekta, a zatim loadNavigationNodes() funkcionirati na tom objektu naziva. Ova funkcija ili učitava prethodno ugrađeni navigacijskoj hijerarhiji pohranjene u HTML5 lokalno spremište preglednik klijenta ili poziva funkcija queryRemoteInterface().

    QueryRemoteInterface() sastavlja zahtjeva za funkciju getRequest() pomoću definirani ranije u skripti parametar upita, a zatim vraća podatke s poslužitelja. U ovom se podaci zapravo polja sva web-mjesta u zbirci web-mjesta predstavljen kao objekata prijenos podataka s različitim svojstva. Ove podatke pa raščlaniti u prethodno definirane SPO.Models.NavigationNode objekata koji omogućuju stvaranje observable svojstava za korištenje Knockout.js podataka povezivanje vrijednosti u HTML koji ste definirali neke starije verzije. Objekti se zatim smještaju u rezultate polja. U ovom polju je raščlaniti u JSON pomoću prekrivanja i spremljene u lokalnom pregledniku prostora za pohranu za bolje performanse na opterećenje buduće stranice.

  8. Zatim rezultate su dodijeljene self.nodes array i hijerarhije ugrađen iz objekata pomoću linq.js korisnicima dodijelite izlaz polja self.heirarchy. U ovom polju je objekt koji je povezan s HTML. To se radi u funkciji toggleView() prosljeđivanjem prošao na samostalnom objekt funkciju ko.applyBinding() . To se zatim uzrokuje hijerarhije polja da biste biti povezan sa sljedećim HTML:

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

    Na kraju, rukovatelja događajima za mouseenter i mouseexit dodaju Navigacija najviše razine za rukovanje padajuće izbornike web-podmjesto koje se mijenja u funkciju addEventsToElements() .

    Rezultati navigacije mogu vidjeti na zaslonu snimka ispod:

    Snimka zaslona rezultata za navigaciju

    U našem primjeru složene navigacije Osvježi stranica učitavanje bez lokalne predmemoriranja prikazuje vrijeme utrošeno na poslužitelju sadrži je izrezivanje prema dolje iz usporednih strukturnu da bi se slično kao rezultat kao pristup upravljanu navigaciju.

    Snimka zaslona SPRequestDuration 301

    Jedan glavnih prednosti takvog je koji pomoću HTML5 lokalno spremište navigacije spremljeni lokalno za korisnika na sljedećem su učitavanje stranice.

Poboljšanja performansi glavne smo zatražite od službe za pomoću pretraživanja API-JA za strukturnu; Međutim, vodi neke tehničke mogućnost izvršavanje i Prilagodba tu funkciju. Web-mjesta u implementaciji primjer su poredane na isti način kao u Izlaz u-tvorničke strukturnu; abecednim redom. Ako ste željeli proizlaze iz ovim redoslijedom, bio bi složenije razviti i održavanja. Osim toga, ovaj pristup zahtijeva proizlaze iz podržanih osnovnih stranica. Ako se ne održava prilagođenu osnovnu stranicu, web-mjestu će propustite Odjava dalje ažuriranja i poboljšanja koji Microsoft čini u osnovne stranice.

Iznad kod sastoji se od sljedećih ovisnosti:

Trenutnu verziju LinqJS sadrže ByHierarchy načina koji se koristi u kodu iznad i će prekinuti kod navigacije. Da biste riješili taj problem, dodajte na sljedeći način Linq.js datoteku prije u retku "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 : Izjava o odricanju od odgovornosti za strojni prijevod: ovaj je članak preveo računalni sustav bez ljudske intervencije. Microsoft nudi strojne prijevode da bi korisnicima koji ne razumiju engleski omogućio čitanje sadržaja o Microsoftovim proizvodima, uslugama i tehnologijama. Budući da je preveden strojno, članak možda sadrži pogreške u vokabularu, sintaksi ili gramatici.

Proširite svoje vještine
Istražite osposobljavanje

Jesu li vam ove informacije bile korisne?

Hvala vam na povratnim informacijama!

Hvala vam na povratnim informacijama! Čini se da bi vam pomoglo kad bismo vas povezali s nekim od naših agenata podrške za Office.

×