Опции за навигация за SharePoint Online

Важно : Тази статия е преведена машинно – вижте отказа от отговорност. Английската версия на тази статия за справка можете да намерите тук .

Тази статия описва как да се подобри времето за зареждане на страница за SharePoint Online с помощта на структурни навигация и свързани с търсене навигация.

Глобална навигация и заявки, необходими за изграждане на структурни навигация да направите страниците се зареждат по-бавно в SharePoint Online. Това е защото всяка от тези заявки изпраща друга заявка към SQL server. За всеки сайт и подсайт, който имате повече заявки направени в SQL server. Този проблем засяга и страниците образци. Това означава, че глобална навигация също е повлияна.

Някои сайтове на SharePoint изисква големи и сложни структури. Използване на употреба структурни навигация, която използва съдържание от заявка, може да доведе до времето за зареждане на страницата с бавна поради няколко сайта слоя. Всеки от слоеве на подсайтове също създава друга заявка.

Има две опции за навигация на употреба в SharePoint, както и друг, по избор, свързани с търсене подход. Всяка опция има и против, както е посочено в таблицата по-долу.

Структурни навигация

Управлявана навигация

Свързани с търсене навигация

Професионалистите:

  • Лесно за конфигуриране

  • Защита изрязал

  • Автоматично актуализира като сайтове се добавят

Професионалистите:

  • Лесни за поддръжка

Професионалистите:

  • Защита изрязал

  • Автоматично актуализира като сайтове се добавят

  • Бързо зареждане време и локално кеширани навигационна структура

Против:

  • Може да изпълнява лошо със сложните структура

Против:

  • Не се актуализират автоматично да отрази структура на сайта

Против:

  • Няма възможност за лесно поръчка сайтове

  • Изисква персонализиране на страницата образец (технически умения, необходими)

Ако имате сайт с много подсайтове и използвате структурни навигация, това може да бъде забавяне на зареждане на страницата значително. Най-подходящата опция за вашия сайт ще зависи от изискванията на вашия сайт и на вашия технически възможности. Ако е удобно да използвате потребителска страница образец и има някои възможности в организацията, за да запазите промените, които могат да се появят в страницата образец по подразбиране за SharePoint Online, свързани с търсене опция ще генерира най-добро впечатление. Ако искате просто средно положение между готови употреба структурни навигация и търсене, управлявана навигация е много добър вариант. Управлявана навигация опция може да се поддържа чрез конфигурация, не е свързан с код персонализация файлове, а той е значително по-бързо от готови употреба структурни навигация.

Друг подход е да голямо съществуващия сайт и да намалите броя на елементите за навигация и подсайтове задължително. Това е защото структурни навигация изпълнява добре, докато структурата на сайта и навигация не е твърде сложно.

В тази статия сравнява различните подходи пример за колекция от сайтове. Пример за колекцията от сайтове, има 11 подсайтове и всеки подсайт има най-малко четири допълнителни подсайтове.

Екранна снимка, показваща сайтовете и подсайтовете

Използване на структурни навигация в SharePoint Online

Това е извън употреба навигация, използвана по подразбиране и е най-ясно и подходящо решение в повечето случаи. Освен ако не е сложна структура на множество подсайтове или много нива на подсайтове, структурни навигация работи добре. Главните предимства на този подход са, че е изрязал защита, автоматично се актуализира, когато се появяват нови сайтове и не изисква никакво персонализиране на страницата образец. Нетехнически потребител може да също така лесно добавяне на елементи, скриете елементите и управление на навигацията от страницата с настройки.

Включването на структурните навигация в SharePoint Online

За да илюстрират как производителността в стандартен решение на SharePoint Online със структурни навигация и Покажи подсайтовете опция включена. По-долу е снимка на екрана настройки, намерени на страницата Настройки на сайта > навигация.

Екранна снимка, показваща подсайтовете

Анализиране на производителността на структурни навигация в SharePoint Online

За анализиране на производителността на страница на SharePoint използвайте раздела мрежа от инструменти за разработчици F12 в Internet Explorer.

Екранна снимка, показваща раздела "Мрежа" на инструментите за разработчици F12

В раздела " мрежа " щракнете върху .aspx страницата, която се зарежда и след това щракнете върху раздела подробни данни .

Функции на InfoPath 2010, недостъпни във формуляри на уеб браузър

Щракнете върху Заглавки на отговор

Екранна снимка на раздела за подробни данни

SharePoint връща полезна диагностична информация в горни му отговор. Един от най-полезните е сини    , което е стойност, в милисекунди, от колко време искане, изразходвано за обработка на сървъра.

На следващия екран снимка Покажи подсайтовете е отметнато за структурните навигация. Това означава, че има само връзката за колекция от сайтове в глобалната навигация на:

Екранна снимка, показваща времената на зареждане като продължителност на искането

Сини    ключ има стойност 245 милисекунди. Това представлява времето, необходимо за да се върнете на искането. Тъй като има само един елемент от навигацията на сайта, това е добър показател за как SharePoint Online се изпълнява без тежко навигация. Следващата екранна снимка показва как Добавяне в подсайтовете засяга този ключ.

Екранна снимка, показваща искане за продължителност на 2502 ms

Добавяне на подсайтовете увеличи значително времето, необходимо за да се върнете на страницата искане.

Предимствата от използването на обикновения структурирани навигацията е, че можете лесно да организирате реда, скриване на сайтове, Добавяне на страници, резултатите са защита изрязал и вие не се отклонява от поддържани страници образци, използвани в SharePoint Online. Ако структура да сайт внимателно и намали размера на подсайтовете в колекцията от сайтове след това структурни навигация работи добре.

Използване на управлявана навигация и управлявани метаданни в SharePoint Online

Управлявана навигация е друга опция от употреба, които можете да използвате, за да създадете отново едни и същи функции като структурни навигация.

Предимството на използването на управлявани метаданни е, че той е много по-бързо да извлечете данни от използването на съдържание от заявка за изграждане на навигацията на сайта. Въпреки че е много по-бързо, няма начин да защитата trim резултатите така че ако потребителят няма достъп до даден сайт, връзката ще продължи да показва, но ще доведе до съобщение за грешка.

Как да се приложи управлявана навигация и резултатите   

Има няколко статии в TechNet за подробности за управлявана навигация, например, вижте общ преглед на управлявана навигация в SharePoint Server 2013.

За да се изпълнят управлявана навигация, трябва да имат срок за съхраняване на разрешения на администратор. Чрез задаване на условия с URL адреси, които съответстват на структурата на колекция от сайтове, управлявана навигация може да се използва за заместване на структурни навигация. Например:

Екранна снимка на Subsite1 пример

Следващият пример показва производителността на сложни навигация чрез управлявана навигация.

Екранна снимка на пример за SPRequestDuration

Използването на управлявана навигация последователно подобрява производителността в сравнение със съдържанието от заявка структурни навигация подход.

Използване на търсене, управлявани от страна на клиента скриптове

Използване на търсене можете да се възползвате индекси, които са изградени във фонов режим с помощта на непрекъснато обхождане. Това означава, че няма големи съдържание заявки. Резултатите от търсенето са изтеглени от индекса за търсене и резултатите са изрязал защита. Това е по-бързо от използването на обикновения съдържание заявки. Използване на търсене за структурни навигация, особено ако имате сложните структура, ще ускори значително време на зареждане на страницата. Основното предимство на този над управлявана навигация е, можете да се възползвате от допълнителна защита.

Този подход включва създаване на потребителска страница образец и заменя кодът на употреба навигация с потребителски HTML. Следвайте тази процедура, за да замените кода за навигация в seattle.html файл.

В този пример ще се отвори seattle.html файла и заместване на целия елемент ИД = "Файловете" с потребителски HTML код.

Пример: За да заместите кодът на употреба навигация в страницата образец

  1. Преминете към страницата Настройки на сайта.

  2. Отворете галерията със страници образец, като щракнете върху Страници образец.

  3. Оттук можете да се придвижвате между библиотеката и Изтеглете файла seattle.master.

  4. Редактиране на код, с помощта на текстов редактор и изтриване на блока с код на следващия екран снимка.

    Записване на файловете в облака
  5. Премахване на код между < SharePoint:AjaxDelta ИД = "Файловете" > "и" < \SharePoint:AjaxDelta > етикети и да го заместите със следния откъс:

    <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. Заместване на URL адреса в зареждане изображение котва маркер в началото, с връзка към изображение на натоварването в колекцията ви от сайтове. След като сте направили промени, преименувате файла и след това го качвате в галерията със страници образец. Това създава нов файл .master.

  7. Този HTML е основни маркиране, която ще се попълва от резултатите от търсенето, върнати от кода на JavaScript. Ще трябва да редактирате следния код, за да промените стойността за var root = “site collection URL , както е показано в следния откъс:

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

    Цялата JavaScript файл е както следва:

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

    Да обобщите кода, показан по-горе в jQuery $(document).ready функция има viewModel обект, създаден и след това loadNavigationNodes() функция на този обект се нарича. Тази функция или да зарежда йерархията на предварително създадените навигация, съхранени в HTML5 локалното хранилище на клиентския браузър или я разговори функция queryRemoteInterface().

    QueryRemoteInterface() изгражда заявка, като използвате функцията getRequest() с параметър на заявка, дефинирани по-рано в скрипта и след това връща данни от сървъра. Тези данни е общо взето масив с всички сайтове в колекцията от сайтове, представени като прехвърляне на обекти с данни с различни свойства. Тези данни след това се анализира в предварително дефинирани SPO.Models.NavigationNode обекти, които използват Knockout.js да създадете наблюдавана свойства за използване от данни за обвързване на стойностите в HTML кода, която дефинирахме по-рано. Обектите, след това се поставят в масив с резултати. Този масив е анализирана в JSON чрез нокаут и съхраняват в хранилището за локалния браузър за подобрена производителност за бъдещи страница се зарежда.

  8. След това резултатите са ви дадени self.nodes масив и йерархия е изграден от обекти, с помощта на linq.js възлагане на изхода масив self.heirarchy. Този масив е обекта, която е обвързана с HTML. Това става във функцията toggleView() като мине самостоятелно обекта на ko.applyBinding() функция. Това след това води до йерархията масив, за да бъде обвързана със следния HTML:

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

    И накрая манипулатори за mouseenter и mouseexit се добавят към най-високо ниво навигация да обработва подсайт падащи менюта, което се извършва на функцията addEventsToElements() .

    Резултатите от навигацията може да се види в екранната снимка по-долу:

    Екранна снимка на резултатите от навигацията

    В нашия пример сложни навигация нова страница натоварване без местни кеширане показва времето, прекарано на сървъра е нарязани от показател структурни навигацията за да получите подобни резултати като управлявана навигация подход.

    Поредица от сини плочки, които посочват основните стълбове за функциите на SharePoint 2013, които са споделяне, организиране, откриване, създаване и управление.

    Една голяма полза от този подход е, че с помощта на локално съхранение HTML5, навигацията се съхраняват локално за потребителя следващия път, когато те зареждане на страницата.

Ние се основни подобрения от чрез търсене API за структурни навигация; Въпреки това е необходимо някои техническа възможност да изпълни и персонализиране на тази функционалност. В примера изпълнение сайтовете са подредени по същия начин като готови употреба структурни навигация; по азбучен ред. Ако искате да се отклонява от тази поръчка, ще бъде по-сложни за разработване и поддръжка. Освен това този подход изисква да се отклонява от поддържани страници образци. Ако не се поддържа потребителска страница образец, вашият сайт ще пропуснат на актуализации и подобрения, които Microsoft прави страниците образци.

По-горе код има следните зависимости:

Текущата версия на LinqJS не съдържа ByHierarchy метод, използван в по-горе код и ще бъдат разделени на кода за навигация. За да коригирате това, добавете следния метод Linq.js файла преди линия "Flatten: функция ()".

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

Забележка : Отказ от отговорност за машинен превод: Тази статия е преведена от компютърна система без човешка намеса. Microsoft предлага тези машинни преводи, за да помогне на потребителите, които не говорят английски, да се възползват от съдържанието за продукти, услуги и технологии на Microsoft. Тъй като статията е преведена машинно, е възможно да съдържа грешки в речника, синтаксиса и граматиката.

Разширете уменията си
Преглед на обучението
Получавайте първи новите функции
Присъединете се към участниците в Office Insider

Беше ли полезна тази информация?

Благодарим ви за обратната връзка!

Благодарим ви за вашата обратна връзка. Изглежда, че ще бъде полезно да ви свържем с един от нашите агенти по поддръжката на Office.

×