SharePoint Online’i navigeerimissuvandid

NB! :  See artikkel on masintõlgitud, vaadake lahtiütlust. Selle artikli ingliskeelse versiooni leiate aadressilt (viiteks).

Selles artiklis kirjeldatakse, kuidas kiirendada SharePoint Online‘i lehtede laadimist struktuurnavigeerimise ja otsingupõhise navigeerimise abil.

Globaalne navigeerimine ja struktuurnavigeerimiseks vajalikud päringud võivad teie lehtede laadimise SharePoint Online‘is aeglasemaks muuta. Seda seetõttu, et kõik need päringud saadavad uue päringu SQL-i serverisse. Enamasti saadetakse saitide ja alamsaitide päringud SQL-i serverisse. See probleem mõjutab ka juhtlehti. See omakorda mõjutab kogu globaalset navigeerimist.

Mõnede SharePoint Online‘i saitide jaoks on vaja suuri ja keerukaid struktuure. Struktuurnavigeerimise valmislahendus, mis hangib sisu päringute abil, võib lehtede laadimist mitme saidikihi tõttu aeglustada. Kõik alamsaitide kihid loovad omakorda uued päringud.

SharePointis on kaks navigeerimise valmislahendust ja kolmas kohandatud otsingupõhine lahendus. Igal variandil on plussid ja miinused, mida on kirjeldatud järgmises tabelis.

Struktuurnavigeerimine

Hallatav navigeerimine

Otsingupõhine navigeerimine

Plussid

  • Hõlpsalt konfigureeritav

  • Piiratav juurdepääs

  • Värskendatakse saitide lisamisel automaatselt

Plussid

  • Hõlpsalt hallatav

Plussid

  • Piiratav juurdepääs

  • Värskendatakse saitide lisamisel automaatselt

  • Kiire laadimisaeg ja kohalikku vahemällu salvestatud navigeerimisstruktuur

Miinused

  • Jõudlus võib keerukate saidistruktuuride puhul olla väike

Miinused

  • Ei värskendata saidistruktuuri muutumisel automaatselt

Miinused

  • Saite ei saa hõlpsalt ümber järjestada

  • Nõuab juhtlehe kohandamist (eeldab tehnilisi oskusi)

Kui teil on paljude alamsaitidega sait, võib struktuurnavigeerimine teie lehtede laadimist oluliselt aeglustada. Sobivaim variant teie saidi jaoks sõltub teie vajadustest ja tehnilistest oskustest. Kui oskate kasutada kohandatavat juhtlehte ja teie ettevõttes on keegi, kes suudab hallata SharePoint Online‘is vaikejuhtlehel tehtud muudatusi, tagab otsingupõhine varianti parima jõudluse. Kui soovite struktuurnavigeerimise valmislahenduse ja otsingupõhise variandi vahepealset lihtsat lahendust, sobib hallatav navigeerimine. Hallatava navigeerimise lahenduse saab häälestada konfigureerimise käigus, see ei eelda failides koodi muutmist ja see on märgatavalt kiirem kui struktuurnavigeerimise valmislahendus.

Teine võimalus on olemasolev sait ümber korraldada ja vähendada päritavate navigeerimisüksuste ja alamsaitide arvu. Seda seetõttu, et struktuurnavigeerimine toimib hästi seni, kuni saidi struktuur ega navigatsioon liiga keeruliseks ei muutu.

Selles artiklis võrreldakse eri lahendusi näidissaidikogumi näitel. Näidissaidikogumis on 11 alamsaiti ja igal alamsaidil on omakorda vähemalt neli alamsaiti.

Saitide ja alamsaitide kuvatõmmis

SharePoint Online'is struktuurnavigeerimise kasutamine

See on vaikimisi kasutatav valmislahendus ja kõige lihtsam ja sobivam lahendus enamikul juhtudel. Struktuurnavigeerimine toimib hästi, kui sait ei koosne paljudest alamsaitidest ega mitmest alamsaiditasemest. Selle lähenemise peamiseks eeliseks on see, et see on turvalisuse tagamiseks piiratava juurdepääsuga, seda värskendatakse uute saitide lisamisel automaatselt ja see ei nõua juhtlehe kohandamist. Ka tehnilise taustata kasutaja saab hõlpsalt üksusi lisada ja peita ning navigeerimist sätete lehel hallata.

SharePoint Online'is struktuurnavigeerimise sisselülitamine

Tavalise SharePoint Online‘i struktuurnavigeerimisega lahenduse jõudluse illustreerimiseks on alamsaitide kuvamine sisse lülitatud. Allpool on kuvatõmmis lehest kohas Saidisätted > Navigeerimine.

Alamsaitide kuvatõmmis

SharePoint Online'is struktuurnavigeerimise jõudluse analüüsimine

SharePointi lehe jõudluse analüüsimiseks kasutage Internet Exploreri F12 arendajatööriistade vahekaarti Võrk.

Kuvatõmmis, millel on kujutatud F12 arendusriistade menüü Võrk

Klõpsake vahekaardil Võrk laaditavat ASPX-lehte ja klõpsake vahekaarti Üksikasjad.

Üksikasjade vahekaardi kuvatõmmis

Valige Vastuse päised.

Vahekaardi Üksikasjad kuvatõmmis

SharePoint tagastab vastuspäistest kasulikku diagnostikateavet. Üks kasulikumatest on SPRequestDuration   , mis on aeg millisekundites, mis kulus serveris päringu töötlemiseks.

Järgmisel kuvatõmmisel on struktuurnavigeerimise säte Kuva alamsaidid välja lülitatud. See tähendab, et globaalses navigeerimises on ainult üks saidikogumi link.

Kuvatõmmis, millel on kujutatud laadimisajad päringu kestusena

Väärtus SPRequestDuration    on 245 millisekundit. See tähistab päringu tagastamiseks kulunud aega. Saidil on ainult üks navigeerimisüksus, seega on see hea võrdlusalus selle kohta, kuidas SharePoint Online toimib ilma keeruka navigatsioonita. Järgmisel kuvatõmmisel on näidatud, kuidas alamsaitide lisamine seda väärtust mõjutab.

Kuvatõmmis, millel on kujutatud päringu kestus 2502 ms

Alamsaitide lisamine on lehe päringu tagastamiseks kuluvat aega märgatavalt pikendanud.

Tavalise struktuurnavigeerimise kasuks räägivad asjaolud, et saite saab hõlpsalt ümber korraldada ja peita, lehti saab peita, tulemid on turvalisuse tagamiseks kärbitud ja te ei kaldu kõrvale SharePoint Online‘is kasutatavate juhtlehtede põhimõtetest. Kui plaanite oma saidi struktuuri hoolikalt ja minimeerite kogumis alamsaitide arvu, toimib struktuurnavigeerimine hästi.

SharePoint Online‘is hallatava navigeerimise ja hallatavate metaandmete kasutamine

Hallatav navigeerimine on veel üks valmislahendus, mida saate kasutada struktuurnavigeerimisega sarnase funktsionaalsuse loomiseks.

Hallatavate metaandmete eeliseks on asjaolu, et neid saab saidi navigatsiooni koostamiseks hankida palju kiiremini kui päringupõhist sisu. Kuigi see on palju kiirem, ei saa tulemeid turvalisuse tagamiseks piirata. Seega kui kasutajal pole teatud saidile juurdepääsemise õigust, on link küll nähtaval, aga selle avamisel kuvatakse tõrketeade.

Hallatava navigeerimise rakendamine ja tulemid   

TechNetis on hallatava navigeerimise kohta mitu artiklit (nt Ülevaade hallatavast navigeerimisest SharePoint Server 2013-s (inglise keeles).

Hallatava navigeerimise rakendamiseks peavad teil olema terminisalve administraatori õigused. Struktuurnavigeerimise asendamiseks hallatava navigeerimisega saab saidikogumi struktuurile vastavate URL-idega häälestada terminid. Näide.

Näite Alamsait1 kuvatõmmis

Järgmises näites on kujutatud hallatavat navigeerimist kasutava keeruka navigeerimislahenduse jõudlust.

Näite SPRequestDuration kuvatõmmis

Hallatav navigeerimine tagab päringupõhist sisu kasutava struktuurnavigeerimisega võrreldes järjekindlalt parema tulemuse.

Otsingupõhiste kliendipoolsete skriptide kasutamine

Otsingu abil saate kasutada pidevanalüüsi käigus taustal loodavaid registreid. See välistab mahukad sisupäringud. Otsingutulemid tuuakse otsinguregistrist ja tulemid on turvalisuse tagamiseks kärbitud. See on kiirem kui tavalised sisupäringud. Struktuurnavigeerimise jaoks otsingu kasutamine aitab lehtede laadimist oluliselt kiirendada, eriti kui teil on keerukas saidistruktuur. Selle peamine eelis hallatava navigeerimise ees on see, et tulemid kärbitakse.

See lahendus eeldab kohandatud juhtlehe loomist ja navigeerimislahenduse valmiskoodi kohandatud HTML-iga asendamist. Failis „seattle.html“ navigeerimislahenduse koodi asendamiseks järgige siin toodud juhiseid.

Selles näites tuleb avada fail „seattle.html“ ja asendada kogu elemendi id=”DeltaTopNavigation” sisu kohandatud HTML-koodiga.

Näide: juhtlehel navigeerimislahenduse valmiskoodi asendamine

  1. Avage leht Saidi sätted.

  2. Juhtlehtede galerii avamiseks klõpsake nuppu Juhtlehed.

  3. Siin saate teeki sirvida ja faili seattle.master alla laadida.

  4. Redigeerige koodi tekstiredaktoris ja kustutage järgmisel kuvatõmmisel näidatud koodiplokk.

    Kuvatõmmis, millel on kujutatud kustutatav DeltaTopNavigationi kood
  5. Eemaldage kood elementide <SharePoint:AjaxDelta id=”DeltaTopNavigation”> ja <\SharePoint:AjaxDelta> vahelt ning asendage see järgmise koodilõiguga:

    <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. Asendage laadimise URL piltide ankrusildi laadimise pilt oma saidikogumis lingiga alguses. Pärast muudatuste tegemist, Nimetage fail ja laadige juhtlehtede galeriisse. See loob uue faili .master.

  7. See HTML-kood on lihtne kood, mida täiendatakse JavaScripti koodi põhjal tagastatud tulemitega. Muutuja var root = “site collection URL väärtuse muutmiseks tuleb redigeerida järgmist koodi, nagu on näidatud järgmises koodilõigus.

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

    Kogu JavaScripti fail on järgmine.

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

    Eespool näidatud funktsiooni jQuery $(document).ready seal on loodud viewModel objekt ja seejärel loadNavigationNodes() funktsiooni objekti kood summeerimiseks nimetatakse. See funktsioon laadib Kas HTML5 kohalikku talletusruumi kliendi brauseri talletatud varasemate navigeerimishierarhias või selle kutsub funktsioon queryRemoteInterface().

    QueryRemoteInterface() koostab getRequest() funktsiooni abil päringu parameetriga määratletud varem skripti taotlus ja tagastab andmed serverist. Andmed on põhiosas massiiv kõikide saitide saidikogumi esitatud andmete edastamine objektide erinevad atribuudid. Andmed on seejärel sõeluda eelnevalt määratletud SPO.Models.NavigationNode objektid, mis Knockout.js abil saate luua jälgitav atribuutide kasutamine andmete Köitmine HTML, mida me varem määratletud väärtused. Objektide pannakse seejärel tulemuste massiivi. Selles massiivis sõeluda JSON abil Knockout ja talletatud kohalikust brauserist salvestusruumi jaoks tulevikus lehe laadimise täiustatud jõudlus.

  8. Järgmiseks tulemused määratakse self.nodes massiiv ja hierarhia on ehitatud välja objektide määramine väljund on massiiv self.heirarchylinq.js abil. See on massiiv objekti, mis on seotud HTML-i. Selleks funktsiooni toggleView() läbides ise objekti ko.applyBinding() funktsiooni. See siis põhjustab hierarhia massiiv olema seotud järgmised HTML-vormingus.

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

    Lõpuks mouseenter ja mouseexit sündmuseohjureid lisatakse ülataseme navigeerimise alamsaidi ripploendites käsitlema mis toimub addEventsToElements() funktsiooni.

    Selle tulemusena näeb navigeerimine välja järgmine:

    Navigeerimise tulemite kuvatõmmis

    Meie keeruka navigeerimisega näites on ilma kohaliku vahemäluta uue lehe laadimiseks kuluvast ajast näha, et serveris töötlemiseks kulunud aeg on hallatava navigeerimisega sarnase tulemuse saamiseks kärbitud.

    SPRequestDuration 301 kuvatõmmis

    Üks selle lähenemise eeliseid on see, et HTML5 kohaliku vahemälu kasutades talletatakse struktuur lehe avamisel kasutaja brauseri kohalikku mällu.

Koos struktuurnavigeerimisega otsinguliidese kasutamine parandab jõudlust märgatavalt, aga selle funktsiooni rakendamine ja kohandamine eeldab teatud tehnilisi teadmisi. Näites on saidid järjestatud samamoodi nagu struktuurnavigeerimise valmislahenduses: tähestikulises järjestuses. Kui soovite saidid järjestada teisiti, muutub arendamine ja haldus keerulisemaks. Lisaks tähendaks see, et kaldute kõrvale toetatud juhtlehtede põhimõtetest. Kui kohandatud juhtlehte ei hallata, ei rakendata teie saidile värskendusi ega täiustusi, mida Microsoft juhtlehtedele pakub.

Ülaltoodud kood on järgmised sõltuvused.

LinqJS praegune versioon ei sisalda ByHierarchy meetodit kasutada ülaltoodud kood ja kuvatakse leheküljepiiri navigeerimine kood. Vea parandamiseks lisada järgmise meetodi Linq.js faili enne rea "Ühenda: funktsioon ()".

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

Märkus. : Masintõlke lahtiütlus. Selle artikli tõlkis arvutisüsteem ilma inimese sekkumiseta. Microsoft pakub selliseid masintõlkeid, et inglise keelt mittekõnelevad kasutajad saaksid vaadata sisu Microsofti toodete, teenuste ja tehnoloogiate kohta. Kuna artikkel on masintõlgitud, võib see sisaldada sõnavara-, süntaksi- või grammatikavigu.

Täiendage oma oskusi
Tutvuge koolitusmaterjalidega
Kasutage uusi funktsioone enne teisi
Liituge Office Insideri programmiga

Kas sellest teabest oli abi?

Täname tagasiside eest!

Täname tagasiside eest! Tundub, et võiksime teid kokku viia ühega meie Office'i tugiagentidest, kes aitab teil probleemi lahendada.

×