diff options
Diffstat (limited to 'files/zh-cn/learn/html/howto')
| -rw-r--r-- | files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html | 213 | ||||
| -rw-r--r-- | files/zh-cn/learn/html/howto/use_data_attributes/index.html | 80 |
2 files changed, 293 insertions, 0 deletions
diff --git a/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html b/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..5a07e862a0 --- /dev/null +++ b/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,213 @@ +--- +title: 小贴士：如何制作快速加载的HTML页面 +slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages +tags: + - HTML + - 全部分类 + - 教程 +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +<p>以下技巧都是基于通用的知识和经验。</p> + +<p>一个好的页面不仅要给访客提供一个更有交互性的站点，同时也需要降低你的服务器压力和网络请求。后者对于那些高访问量的站点，或在有爆炸性新闻出现等特殊情况下会出现流量突增的站点来说尤为关键。</p> + +<p>页面加载性能的优化不仅仅是针对那些带宽有限的拨号上网或移动设备用户需要看的内容，对于提供给宽带用户访问的内容同样重要并且可以导致巨大的提升，哪怕对于那些拥有最快网速的访客。</p> + +<h2 id="Tips" name="Tips">Tips</h2> + +<h3 id=".E5.87.8F.E5.B0.8F.E9.A1.B5.E9.9D.A2.E7.9A.84.E5.A4.A7.E5.B0.8F" name=".E5.87.8F.E5.B0.8F.E9.A1.B5.E9.9D.A2.E7.9A.84.E5.A4.A7.E5.B0.8F">减小页面的大小</h3> + +<p>直至今日，页面的大小仍是页面加载性能的最重要因素。</p> + +<p>通过压缩——排除不必要空格，注释，和将脚本、CSS放入外部文件等减小页面的大小，可以在页面结构改变很小的情况下提高下载性能。</p> + +<p>诸如 <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> 这类的工具可以从有效的HTML源文件中自动截去行首空格和额外的空行，其它工具则可以通过重新格式化源代码来压缩JavaScript或者通过混淆源码将长<font color="#000000" face="Microsoft YaHei"><span style="font-size: 13px; line-height: normal; white-space: nowrap;">标识符</span></font>替换为短标识符来减小文件大小。</p> + +<h3 id="Minimize_the_number_of_files" name="Minimize_the_number_of_files">最小化文件数量</h3> + +<p>减少一个页面引用的文件数量可以降低在下载一个页面的过程中需要的<a href="https://developer.mozilla.org/en-US/docs/HTTP">HTTP</a>请求数量，从而减少这些请求的收发时间。</p> + +<p>根据其缓存设置，浏览器可能会为每个所引用的文件发送一个带 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/If-Modified-Since">If-Modified-Since</a> 的请求给网络服务器，以查询这些文件自上次加载后是否有被修改。查询引用文件上次修改时间会花费太多时间，导致网页首屏延迟，这是因为在渲染页面之前浏览器必须确认每个文件的修改时间。</p> + +<p>If you use background images a lot in your CSS, you can reduce the number of HTTP lookups needed by combining the images into one, known as an image sprite. Then you just apply the same image each time you need it for a background and adjust the x/y coordinates appropriately. This technique works best with elements that will have limited dimensions, and will not work for every use of a background image. However, the fewer HTTP requests and single image caching can help reduce page-load time.</p> + +<h3 id="使用_CDN">使用 CDN</h3> + +<p>For the purposes of this article, a CDN is a means to reduce the physical distance between your server and your visitor. As the distance between your server origin and visitor increases, the load times will increase. Suppose your website server is located in the United States and it has a visitor from India; the page load time will be much higher for the Indian visitor compared to a visitor from the US.</p> + +<p>A CDN is a geographically distributed network of servers that work together to shorten the distance between the user and your website. CDNs store cached versions of your website and serve them to visitors via the network node closest to the user, thereby reducing <a href="http://www.webperformancetoday.com/2012/04/02/latency-101-what-is-latency-and-why-is-it-such-a-big-deal/">latency</a>.</p> + +<p>Further reading:</p> + +<ul> + <li><a href="https://www.incapsula.com/cdn-guide/what-is-cdn-how-it-works.html">Understanding CDNs</a></li> +</ul> + +<h3 id="Reduce_domain_lookups" name="Reduce_domain_lookups">减少域名查找</h3> + +<p>每个独立的域名都会消耗DNS查找的时间，页面加载时间会随着独立域名数量、CSS链接数量、JavaScript还有图片资源的数量增加而增加。</p> + +<p>这条可能算不上实用，然而，在你的页面中尽量少的使用来自不同域名的资源链接。</p> + +<ul> +</ul> + +<h3 id="Cache_reused_content" name="Cache_reused_content">缓存重用的内容</h3> + +<p>确保任何内容可以被缓存，并且拥有一个合理的有效期。</p> + +<p>特别要注意 <code>Last-Modified</code> 头，它会让页面高效的缓存。 自上次修改之后，这部分 header 指示将信息传递给用户代理（要加载这些信息的文件）。大部分网页服务器会自动追加 <code>Last-Modified</code> header 部分到静态页面（如 <code>.html</code>，<code>.css</code>），基于上次修改的日期储存在文件系统中。至于动态页面（如 <code>.php</code>，<code>.aspx</code>），便无法做到，这部分请求的头也就不会被发送出去。</p> + +<p>所以，特别是动态产生的页面，花点时间研究一下这个课题会是有益的。或许有些什么关联，无论怎样，这么做在那些不能被缓存的网页中都会节省很多的页面请求。</p> + +<p>更多信息：</p> + +<ol> + <li><a href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li> + <li><a href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li> + <li><a href="http://en.wikipedia.org/wiki/HTTP_ETag">HTTP ETag on Wikipedia</a></li> + <li><a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html">Caching in HTTP</a></li> +</ol> + +<h3 id="Optimally_order_the_components_of_the_page" name="Optimally_order_the_components_of_the_page">高效地排列页面组件</h3> + +<p>在页面最初显示时，会首先下载页面内容以及所需的CSS和JavaScript，这样在页面加载时用户可以最快获得外观的反馈。由于内容通常都是文本，有利于在传输过程中压缩，因此给用户以更快的响应。</p> + +<p>页面中任何具有动态特性的资源需要在页面被完全加载后才可以使用，所以最好在初始化时关闭动态特性（disable dynamic features ），等页面加载完后再打开它。这样JavaScript就会在网页内容之后才加载，有助于提升页面加载的整体表现。</p> + +<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">减少内联脚本的数量</h3> + +<p>内联脚本在页面加载过程中消耗很多资源，因为解析器认为内联脚本会改变页面结构。通常，尽量少的使用内联脚本和减少用<code>document.write()</code>来输出内容，在一定情况下可以加速整体页面的载入。现在浏览器中一般使用现代的 W3C DOM 方法操作页面内容，优于使用<code>document.write()</code>的传统方法。</p> + +<h3 id="Use_modern_CSS_and_valid_markup" name="Use_modern_CSS_and_valid_markup">使用现代CSS和合法标记</h3> + +<p>使用现代CSS减少标记（markup）的用量，可以减少对（spacer）图片的需求。在布局方面，图片通常可以用风格化的文本（text）来替代，这样会“节省”许多资源。</p> + +<p>使用合法标记还有其它优点。首先，浏览器在解释HTML时无需做错误校正（除了一些哲理性的问题，例如，是允许用户输入格式不一致，而后再用程序“校准”或统一化呢？ 还是加强约束规则，限制用户输入的格式？）。</p> + +<p>再者，合法标记可以让那些给你的网站做预处理的工具功能最大化。例如，<a class="external external-icon" href="http://tidy.sourceforge.net/">HTML Tidy</a> 可以移除空白（whitespace）和可选的末尾标记（ending tags）；然而，在有严重的错误标记的网页中这些工具便无法工作。</p> + +<h3 id="Chunk_your_content" name="Chunk_your_content">给内容分块</h3> + +<p>使用 table 布局是一种不应该再采用的传统方法，而应运用 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, 或 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">grids</a> 来布局。</p> + +<p>当然，table 仍是不失为一种有效的展示表格数据的方式。为了帮助浏览器更快速的渲染你的页面，你应该避免嵌套 table。</p> + +<p>相较于这种深度的嵌套：</p> + +<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span> + ... + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span></code></pre> + +<p>用下图这样的非嵌套结构更好一些：</p> + +<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span>...<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span>...<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span>...<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span></code></pre> + +<p>可参见 <a href="https://www.w3.org/TR/css-flexbox-1/" title="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout</a> 和 <a href="https://www.w3.org/TR/css-grid-1/" title="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout</a> 规范。</p> + +<h3 id="Minify_and_compress_SVG_assets">Minify and compress SVG assets</h3> + +<p>SVG produced by most drawing applications often contains unnecessary metadata which can be removed. Configure your servers, apply gzip compression for SVG assets.</p> + +<h3 id="Minify_and_compress_your_images">Minify and compress your images</h3> + +<p>Large images cause your page to take more time to load. Consider compressing your images before adding them to your page, using compression features built into image-manipulation tools such as Photoshop, or using a specialized tool such as <a href="https://compressjpeg.com/">Compress Jpeg</a> or <a href="https://tinypng.com/">Tiny PNG</a>,.</p> + +<h3 id="Specify_sizes_for_images_and_tables" name="Specify_sizes_for_images_and_tables">指定图像和表格的大小</h3> + +<p>如果浏览器可以即时决定你的照片（images）和表格（tables）宽高，它在展示网页时就不必进行内容重新排版。这不仅可以加速网页的显示，还能在网页完成加载的过程中防止恼人的布局改变。因此，图片的 <code>height</code> 和 <code>width</code> 应尽可能确定下来。</p> + +<p>表格可以使用 CSS 选择器：综合性能：</p> + +<pre class="line-numbers language-html"><code class="language-html">table-layout: fixed;</code></pre> + +<p>用 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col"><col></a></code> 和 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code> 元素来指定列宽。</p> + +<h3 id="Choose_your_user_agent_requirements_wisely" name="Choose_your_user_agent_requirements_wisely">合理的选择 user-agent</h3> + +<p>为使页面设计得到极大提升，应确保在工程中指定一个合理的user-agent。不要奢求你的内容在所有浏览器中都完美的展现，特别是在那些低版本的浏览器中。</p> + +<p>理想情况下，你的页面运行的最小环境要基于现代浏览器，这个浏览器起码要支持一些相关的标准（如 html5 标准）。可以是最近版本的火狐，IE，谷歌Chrome，Opera还有Safari。</p> + +<p>需要注意一下，这篇文章当中的许多tips都是些技术性常识，可以不必担心浏览器的支持需求而应用到任何user-agent和网页中去。</p> + +<h3 id="尽可能使用_async_和_defer">尽可能使用 async 和 defer</h3> + +<p>确保 JavaScript 脚本兼容 <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> 和 <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a>，任何时候都要尽可能使用 <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> ，特别是当你有较多的 script 标签时。</p> + +<p>这样在加载 JavaScript 的过程中页面就不会重新绘制，否则，浏览器在不具有这些特性的 script 标签后就不会重绘任何东西。</p> + +<p>注意：这些特性在页面第一次加载时会有所帮助，你可以这样用但不能指靠它在所有的浏览器中起作用。如果你遵循指南（guidelines）写出了非常优秀的 JavaScript 代码，也不必要再去修改它了。</p> + +<h2 id="Example_page_structure" name="Example_page_structure">页面结构示例</h2> + +<p>· <code>{{htmlelement('html')}}</code></p> + +<dl> + <dd>· <code>{{htmlelement('head')}}</code></dd> +</dl> + +<dl> + <dd> + <dl> + <dd>· <code>{{htmlelement('link')}} </code>...<br> + CSS 文件用来修饰页面外观。在调试维护中把不相关的 CSS 拆分在不同文件中，且尽量减少文件的数量可以提高性能。</dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd>· <code>{{htmlelement('script')}} </code>...<br> + JavaScript 文件用来实现<strong>页面加载时需要的函数</strong>，而避免在页面加载后才能运行的 JavaScript。</dd> + <dd>在调试维护中把不相关的 JavaScript 拆分在不同文件中，且尽量减少文件的数量可以提高性能。</dd> + </dl> + </dd> +</dl> + +<dl> + <dd>· <code>{{htmlelement('body')}}</code></dd> + <dd>· 用户能在完整页面下载完之前就可以看到的页面小分块 ( <code>{{htmlelement('header')}}</code>/ <code>{{htmlelement('main')}}/</code> <code>{{htmlelement('table')}}</code>) 。</dd> +</dl> + +<dl> + <dd> + <dl> + <dd>· <code>{{htmlelement('script')}} </code>...</dd> + <dd>DHTML 脚本通常在页面完全加载或者所有必要的对象（objects）已初始化完毕之后才能运行。没有必要在页面内容之前加载这些脚本，这只会拖慢页面加载和初始化的体验。</dd> + <dd>在调试维护中把不相关的 script 拆分在不同文件中，且尽量减少文件的数量可以提高性能。</dd> + <dd>如有图像用到了反转效果，你应该在页面内容下载完后预加载这些图像。</dd> + </dl> + </dd> +</dl> + +<h2 id="Related_Links" name="Related_Links">相关链接</h2> + +<ul> + <li>书籍： <a href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li> + <li>非常棒、讲的很全 <a class="external external-icon" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li> + <li>用来分析和优化的工具: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li> +</ul> + +<div class="originaldocinfo"> +<h3 id=".E6.96.87.E7.AB.A0.E5.8E.9F.E5.A7.8B.E4.BF.A1.E6.81.AF" name=".E6.96.87.E7.AB.A0.E5.8E.9F.E5.A7.8B.E4.BF.A1.E6.81.AF">文章原始信息</h3> + +<ul> + <li>作者：Bob Clary, Technology Evangelist, Netscape Communications</li> + <li>最后更新：Published 2003年4月4日</li> + <li>版权信息：Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>注意：This reprinted article was originally part of the DevEdge site.</li> +</ul> +</div> + +<div class="noinclude"></div> + +<p>{{ languages( { "en": "en/Tips_for_Authoring_Fast-loading_HTML_Pages", "ja": "ja/Tips_for_Authoring_Fast-loading_HTML_Pages", "pl": "pl/Porady_odno\u015bnie_tworzenia_szybko_\u0142aduj\u0105cych_si\u0119_stron_HTML" } ) }}</p> diff --git a/files/zh-cn/learn/html/howto/use_data_attributes/index.html b/files/zh-cn/learn/html/howto/use_data_attributes/index.html new file mode 100644 index 0000000000..009517f416 --- /dev/null +++ b/files/zh-cn/learn/html/howto/use_data_attributes/index.html @@ -0,0 +1,80 @@ +--- +title: 使用数据属性 +slug: Web/Guide/HTML/Using_data_attributes +tags: + - Custom Data Attributes + - HTML5 +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +<p>{{LearnSidebar}}</p> + +<p><a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a>是具有扩展性的设计，它初衷是数据应与特定的元素相关联，但不需要任何定义。<a href="/en-US/docs/Web/HTML/Global_attributes#data-*">data-* 属性</a>允许我们在标准内于HTML元素中存储额外的信息，而不需要使用类似于 <a href="/en-US/docs/Web/API/Element.classList">classList</a>，标准外属性，DOM额外属性或是 <a href="/en-US/docs/Web/API/Node.setUserData">setUserData</a> 之类的技巧。</p> + +<h2 id="HTML_语法">HTML 语法</h2> + +<p>语法非常简单。所有在元素上以<code>data-</code>开头的属性为数据属性。比如说你有一篇文章，而你又想要存储一些不需要显示在浏览器上的额外信息。请使用data属性：</p> + +<pre class="brush: html"><article + id="electriccars" + data-columns="3" + data-index-number="12314" + data-parent="cars"> +... +</article></pre> + +<h2 id="JavaScript_访问">JavaScript 访问</h2> + +<p>在外部使用<a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>去访问这些属性的值同样非常简单。你可以使用{{domxref("Element.getAttribute", "getAttribute()")}}配合它们完整的HTML名称去读取它们，但标准定义了一个更简单的方法：{{domxref("DOMStringMap")}}你可以使用{{domxref("HTMLElement.dataset", "dataset")}}读取到数据。</p> + +<p>为了使用<code>dataset</code>对象去获取到数据属性，需要获取属性名中<code>data-</code>之后的部分(要注意的是破折号连接的名称需要改写为骆驼拼写法(如"index-number"转换为"indexNumber"))。</p> + +<pre class="brush: js">var article = document.querySelector('#electriccars'); + +article.dataset.columns // "3" +article.dataset.indexNumber // "12314" +article.dataset.parent // "cars"</pre> + +<p>每一个属性都是一个可读写的字符串。在上面的例子中，<code>article.dataset.columns = 5</code>.将会调整属性的值为5。</p> + +<h2 id="CSS_访问">CSS 访问</h2> + +<p>注意，data设定为HTML属性，他们同样能被<a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>访问。比如你可以通过<a href="/en-US/docs/Web/CSS/content" title="/en-US/docs/Web/CSS/content">generated content</a>使用函数{{cssxref("attr")}}来显示data-parent的内容：</p> + +<pre class="brush: css">article::before { + content: attr(data-parent); +}</pre> + +<p>你也同样可以在CSS中使用<a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute_selectors">属性选择器</a>根据data来改变样式：</p> + +<pre class="brush: css">article[data-columns='3'] { + width: 400px; +} +article[data-columns='4'] { + width: 600px; +}</pre> + +<p>你可以在这个<a href="http://jsbin.com/ujiday/2/edit">JSBin </a>里看到全部演示。</p> + +<p>Data属性同样可以存储不断变化的信息，比如游戏的得分。使用CSS选择器与JavaScript去访问可以让你得到花俏的效果，这里你并不需要用常规的编写方案来编写代码。有关使用生成内容和CSS转换（<a href="https://jsbin.com/atawaz/3/edit">JSBin示例</a>）的示例，请参阅此<a href="https://www.youtube.com/watch?v=On_WyUB1gOk">视频</a>。</p> + +<p>数据值是字符串。必须在选择器中引用数值才能使样式生效。</p> + +<h2 id="Issues">Issues</h2> + +<p>不要在data attribute里储存需要显示及访问的内容，因为一些其他的技术可能访问不到它们。另外爬虫不能将data attribute的值编入索引中。</p> + +<p>IE的支持度及显示效果是最主要讨论的问题。IE11+支持这个标准，但所有更早期的版本都不支持<a href="http://caniuse.com/#feat=dataset">dataset</a>。为了支持IE10及以下的版本，你必须使用{{domxref("Element.getAttribute", "getAttribute()")}} 来访问。另外，<a href="http://jsperf.com/data-dataset">读取 data-attributes的行为</a>相比JS存储数据会慢。使用dataset 会比使用getAttribute()读取数据来得慢。</p> + +<p>尽管如此,对于那些与元素相关的数据,这依然是一个很好的解决方案.</p> + +<p>在FireFox 49.0.2(其他版本也有可能)中,javascript将无法读出包含1022个及以上字符的data属性(EcmaScript 4).</p> + +<h2 id="参阅" style="line-height: 30px; font-size: 2.14285714285714rem;">参阅</h2> + +<div> </div> + +<ul> + <li>该文章源自 <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS on hacks.mozilla.org</a>.</li> + <li>在 SVG 2中也同样支持自定义data属性; 请参看{{domxref("SVGElement.dataset")}} 和{{SVGAttr("data-*")}}.</li> + <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li> +</ul> |