使用 HTML 服務建立使用者介面時，許多模式和做法都與其他類型的網頁開發相同。不過，有些方面是 Apps Script 環境獨有的，或是值得特別強調。下文將介紹一些最佳做法，方便您在開發自己的 HTML 服務 UI 時參考。
HTML、CSS 和 JavaScript 分開
將所有 HTML、CSS 和 JavaScript 程式碼放在一個檔案中，可能會導致專案難以閱讀和開發。雖然 Apps Script 規定用戶端程式碼必須放在 .html 檔案中，但您仍可將 CSS 和用戶端 JavaScript 分別放在不同檔案中，然後使用自訂函式將這些檔案納入主要 HTML 網頁。
以下範例會在 Code.gs 檔案中定義自訂伺服器端 include() 函式，將 Stylesheet.html 和 JavaScript.html 檔案內容匯入 Page.html 檔案。使用列印指令碼片段呼叫時，這個函式會將指定檔案內容匯入目前檔案。請注意，內含檔案含有 <style> 和 <script> 標記，因為這些是 HTML 程式碼片段，而非純 .css 或 .js 檔案。
Code.gs
function doGet(request) {
return HtmlService.createTemplateFromFile('Page')
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}Page.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylesheet'); ?>
</head>
<body>
<h1>Welcome</h1>
<p>Please enjoy this helpful script.</p>
<?!= include('JavaScript'); ?>
</body>
</html>Stylesheet.html
<style>
p {
color: green;
}
</style>JavaScript.html
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>非同步載入資料，而非在範本中載入
範本化 HTML 可用於快速建構簡單的介面，但應限制使用，確保 UI 具有回應性。範本中的程式碼會在網頁載入時執行一次，且在處理完成前，不會將任何內容傳送至用戶端。如果腳本程式碼中有長時間執行的工作，可能會導致 UI 顯示緩慢。
使用 scriptlet 標記執行快速的一次性工作，例如納入其他內容或設定靜態值。所有其他資料都應使用 google.script.run 呼叫載入。以這種非同步方式編碼較為困難，但可加快 UI 載入速度，並讓 UI 有機會向使用者顯示微調器或其他載入訊息。
不要 - 載入範本
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>正確做法：非同步載入
<p>List of things:</p>
<ul id="things">
<li>Loading...</li>
</ul>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
google.script.run.withSuccessHandler(showThings)
.getLotsOfThings();
});
function showThings(things) {
var list = $('#things');
list.empty();
for (var i = 0; i < things.length; i++) {
list.append('<li>' + things[i] + '</li>');
}
}
</script>使用 HTTPS 載入資源
如果網頁是使用較新的 IFRAME
沙箱模式提供，包括未使用 HTTPS 提供的 JavaScript 或 CSS 檔案，就會導致錯誤，如下所示。
複合型內容：網頁「https://...」是透過 HTTPS 載入，但要求了不安全的指令碼「http://...」。這項要求已遭封鎖； 內容必須透過 HTTPS 提供。
大多數熱門程式庫都支援 HTTP 和 HTTPS，因此通常只要在網址中插入額外的「s」即可切換。
使用 HTML5 文件類型宣告
如果網頁是使用較新的 IFRAME
沙箱模式放送，請務必在 HTML 檔案頂端加入下列程式碼片段。
<!DOCTYPE html>
這個文件類型宣告會告訴瀏覽器，您設計的網頁適用於新式瀏覽器，因此不應使用「相容模式」轉譯網頁。即使您不打算使用新式 HTML5 元素或 JavaScript API，這項做法也有助於確保網頁正確顯示。
最後載入 JavaScript
許多網頁開發人員建議在網頁底部載入 JavaScript 程式碼，以提高回應速度，這對 HTML 服務而言更是重要。將 <script> 標記移至網頁結尾，即可在處理 JavaScript 前轉譯 HTML 內容，向使用者顯示微調器或其他訊息。
善用 jQuery
jQuery 是熱門的 JavaScript 程式庫，可簡化網頁開發中的許多常見工作。