diff --git a/files/zh-tw/web/media/formats/containers/index.html b/files/zh-tw/web/media/formats/containers/index.html
deleted file mode 100644
index 7c1ee71b0209a6..00000000000000
--- a/files/zh-tw/web/media/formats/containers/index.html
+++ /dev/null
@@ -1,1324 +0,0 @@
----
-title: Media container formats (file types)
-slug: Web/Media/Formats/Containers
-translation_of: Web/Media/Formats/Containers
----
-
{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}
-
-視訊與音訊的檔案格式被定義成兩個部分(當然如果一個檔案同時擁有影、音的話,那就有三個):一個是音訊或/和視訊的編解碼器(codecs,由 compress 和 decompress 所組成的詞語),另一個是媒體封裝的格式(media container format,即檔案類型)。在本次導覽中,我們將會看到網路上最常見的封裝格式,並介紹它們的基本規格、優點、限制,以及理想的使用情形。
-
-網頁即時通訊(WebRTC) 並不採用容器(container),而是以 {{domxref("MediaStreamTrack")}} 物件來表示編碼過的影軌和音軌(一個物件表示一種媒體軌),直接從一端串流到另一端。你可以參閱 WebRTC 使用的編解碼器 來了解進行 WebRTC 時常用的編解碼器,以及瀏覽器對它們的相容性。
-
-常見的封裝格式
-
-世上的媒體封裝格式多如牛毛,所以我們在這裡僅列出你最有機會遇到的幾種,其中有的只支援音訊,有的影音都支援。我們也會列出它們各自的媒體類型(MIME type)和副檔名(extension)。網路上最常見的封裝容器有 MPEG-4 (MP4)、QuickTime Movie (MOV),以及 Wavefile Audio File Format (WAV)。當然你也可能會遇到如 MP3、Ogg、WebM、AVI 等其他格式,但不是所有瀏覽器都支援它們就是了。為了方便起見,同時也是因為它們實在太常見了,有些封裝容器與編解碼器的組合會有專屬它們的副檔名跟媒體類型。好比說,只有一個 Opus 音軌的 Ogg 檔通常會被稱為 Opus 檔,它有自己的副檔名 .opus
,但它其實還是一個 Ogg 檔。
-
-由於特定的編解碼器通常會放在特定的封裝容器裡,所以這樣的組合會被特別看待,比方說 MP3 音訊檔就是一個很好的例子,它是由 MPEG-1 封裝容器與一個以 MPEG-1 Audio Layer III encoding 編碼過的音軌所組成,這種檔案使用 audio/mp3
作為媒體類型;.mp3
作為副檔名,即便它的封裝容器不過就是 MPEG 罷了。
-
-索引
-
-點擊列表中你想知道的封裝格式,即會將你傳送到該項目的細節內容,其中包含它的用途、它支援的編解碼器、支援它的瀏覽器等等。
-
-
-
-
- 編解碼器名(縮寫)
- 完整編解碼器名
- 瀏覽器相容性1
-
-
-
-
- 3GP
- Third Generation Partnership
- Firefox for Android
-
-
- ADTS
- Audio Data Transport Stream
- Firefox2
-
-
- FLAC
- Free Lossless Audio Codec
- Chrome 56, Edge 16, Firefox 51, Safari 11
-
-
- MPEG / MPEG-2
- Moving Picture Experts Group (1 and 2)
- —
-
-
- MPEG-4 (MP4)
- Moving Picture Experts Group 4
- Chrome 3, Edge 12, Firefox, Internet Explorer 9, Opera 24, Safari 3.1
-
-
- Ogg
- Ogg
- Chrome 3, Firefox 3.5, Edge 173 (desktop only), Internet Explorer 9, Opera 10.50
-
-
- QuickTime (MOV)
- Apple QuickTime movie
- 只有舊版的 Safari 和其他支援 Apple 的 QuickTime plugin 的瀏覽器
-
-
- WebM
- Web Media
- Chrome 6, Edge 173 (desktop only), Firefox 4, Opera 10.6, Safari (WebRTC only)
-
-
-
-
- 除非特別說明,否則表中提及的瀏覽器包含其行動版與桌面版。此外「支援」指的是針對封裝容器本身,而非特定的編解碼器。
-
- 只在作業系統底層的媒體框架(media framework)有支援時才有。
-
-[3] 需要安裝網路媒體延伸模組 。
-
-3GP
-
-3GP 或 3GPP 是用來封裝音訊和/或視訊的媒體容器,它服務的對象是透過行動網路(cellular network)進行傳輸的行動裝置。雖然這個格式是為了 3G 行動電話設計的,但現代的手機與網路還是可以使用它。話雖如此,由於現今的網路有更大的頻寬和更為寬鬆的公平使用原則(data caps),所以現在 3GP 格式也不是那麼需要了,只有較慢的網路和較差的手機才會使用這種格式。
-
-這個媒體封裝格式衍生自 ISO Base Media File Format 和 MPEG-4,特別針對低頻寬的情形做了最佳化。
-
-
- 基本的 3GP 媒體型態
-
-
- 音訊
- 視訊
-
-
-
-
- audio/3gpp
- video/3gpp
-
-
- audio/3gpp2
- video/3gpp2
-
-
- audio/3gp2
- video/3gp2
-
-
-
-
-上表是基本的 3GP 媒體型態,依照使用的編解碼器的不同,可能還會有其他型態。此外,你可以在媒體型態字串中添加 codecs
參數 來指明你的音軌和/或影軌所採用的編解碼器,也可以提供 組態(profile)、層級(level)等其他編解碼器的配置細節。
-
-
- 3GP 支援的視訊編解碼器
-
-
- 編解碼器
- 支援的瀏覽器
-
-
- Chrome
- Edge
- Firefox
- Safari
-
-
-
-
- AVC (H.264)
-
-
- Yes1 ,2
-
-
-
- H.263
-
-
- Yes1
-
-
-
- MPEG-4 Part 2 (MP4v-es)
-
-
- Yes1
-
-
-
- VP8
-
-
- Yes1
-
-
-
-
-
- Firefox 只在基於 OpenMAX 的裝置上支援 3GP,以目前的情況來看就是 Boot to Gecko (B2G) 平台.
-
- Firefox 支援 H.264 與否取決於作業系統的媒體建設如何,也就是說得要系統支援才行。
-
-
- 3GP 支援的音訊編解碼器
-
-
- 編解碼器
- 支援的瀏覽器
-
-
- Chrome
- Edge
- Firefox
- Safari
-
-
-
-
- AMR-NB
-
-
- Yes1
-
-
-
- AMR-WB
-
-
- Yes1
-
-
-
- AMR-WB+
-
-
- Yes1
-
-
-
- AAC-LC
-
-
- Yes1 ,2
-
-
-
- HE-AAC v1
-
-
- Yes1 ,2
-
-
-
- HE-AAC v2
-
-
- Yes1 ,2
-
-
-
- MP3
-
-
- Yes1
-
-
-
-
-
- Firefox 只在基於 OpenMAX 的裝置上支援 3GP,以目前的情況來看就是 Boot to Gecko (B2G) 平台.
-
- Firefox 支援 AAC 與否取決於作業系統的媒體建設如何,也就是說得要系統支援才行。
-
-ADTS
-
-Audio Data Transport Stream (ADTS ) 是 MPEG-4 Part 3 為音訊資料所訂定的封裝格式,著眼於音訊串流,如網路電台。它基本上是一個空的 AAC 音訊資料串流,由 ADTS 幀(frame)和一個很小的 header 組成。
-
-
- ADTS 媒體型態
-
-
- 音訊
-
-
-
-
- audio/aac
[1]
-
-
- audio/mpeg
[1]
-
-
-
-
- ADTS 使用哪個媒體型態依它使用的音訊幀(audio frame)而定。如果它使用 ADTS 幀,其媒體型態為 audio/aac
;如果它使用 MPEG-1/MPEG-2 Audio Layer I, II, or III 格式的音訊幀,它的媒體型態為 audio/mpeg
。
-
-
- ADTS 支援的音訊編解碼器
-
-
- 編解碼器
- 支援的瀏覽器
-
-
- Chrome
- Edge
- Firefox
- Safari
-
-
-
-
- AAC
-
-
- Yes1
-
-
-
- MP3
-
-
- Yes
-
-
-
-
-
- Firefox 支援 AAC 與否取決於作業系統的媒體建設如何,也就是說得要系統支援才行。
-
-FLAC
-
-Free Lossless Audio Codec (FLAC ) 是一個無損的音訊編解碼器,它有一個相關的精簡音訊封裝格式,也叫做 FLAC,這個格式不受任何專利約束,因此你可以安心地使用它。FLAC 檔只能用來封裝 FLAC 音訊資料。
-
-
- FLAC 媒體型態
-
-
- 音訊
-
-
-
-
- audio/flac
-
-
- audio/x-flac
(非標準)
-
-
-
-
-
- FLAC 支援的音訊編解碼器
-
-
- 編解碼器
- 支援的瀏覽器
-
-
- Chrome
- Edge
- Firefox
- Safari
-
-
-
-
- FLAC
-
-
- Yes
-
-
-
-
-
-MPEG/MPEG-2
-
-MPEG-1 和 MPEG-2 基本上是相同的。這兩個格式由 Moving Picture Experts Group (MPEG) 創造,廣泛用於實體媒體上,如 DVD 媒體所用的視訊格式。
-
-在網路上最常用來封裝音訊資料的 MPEG 檔案格式可能是 Layer_III/MP3 。也正是因為 MP3 檔被世界各地的數位音樂裝置使用,MPEG-1 和 MPEG-2 才能如此廣泛地應用於網路內容中。
-
-MPEG-1 和 MPEG-2 最主要的差別在於媒體資料格式而非封裝格式。MPEG-1 首見於西元 1992 年;而 MPEG-2 則出現在西元 1996 年。
-
-
- MPEG-1 與 MPEG-2 的媒體型態
-
-
- 音訊
- 視訊
-
-
-
-
- audio/mpeg
- video/mpeg
-
-
-
-
-
- MPEG-1 與 MPEG-2 支援的視訊編解碼器
-
-
- 編解碼器
- 支援的瀏覽器
-
-
- Chrome
- Edge
- Firefox
- Safari
-
-
-
-
- MPEG-1 Part 2
-
-
- No
-
-
-
- MPEG-2 Part 2
-
-
- No
-
-
-
-
-
-
- MPEG-1 與 MPEG-2 支援的音訊編解碼器
-
-
- 編解碼器
- 支援的瀏覽器
-
-
- Chrome
- Edge
- Firefox
- Safari
-
-
-
-
- MPEG-1 Audio Layer I
-
-
- No
-
-
-
- MPEG-1 Audio Layer II
-
-
- No
-
-
-
- MPEG-1 Audio Layer III (MP3)
-
-
- Yes
-
-
-
-
-
-MPEG-4 (MP4)
-
-MPEG-4 (MP4 ) 是最新版 MPEG 檔案格式。這個格式有兩種版本,分別定義於規範中的 part 1 和 part 14。MP4 是現今流行的封裝容器,它支援了大部份常用的編解碼器,同時它也廣泛地被支援。
-
-初版的 MPEG-4 Part 1 檔案格式首見於西元1999 年;第二版定義於 Part 14 在西元 2003 年時加入。MP4 檔案格式衍生於 ISO base media file format ,而該格式則是衍生於 Apple 開發的 QuickTime file format 。
-
-
- 基本的 MPEG-4 媒體型態
-
-
- 音訊
- 視訊
-
-
-
-
- audio/mp4
- video/mp4
-
-
-
-
-上表是基本的 MPEG-4 媒體型態,依照使用的編解碼器的不同,可能還會有其他型態。此外,當指出 MPEG-4 媒體型態時 (audio/mp4
或 video/mp4
),你可以在媒體型態字串中加上 codecs
參數 來指明你的音軌和/或影軌所採用的編解碼器,也可以提供組態(profile)、層級(level)等其他編解碼器的配置細節。
-
-
- MPEG-4 支援的視訊編解碼器
-
-
- 編解碼器
- 支援的瀏覽器
-
-
- Chrome
- Edge
- Firefox
- Safari
-
-
-
-
- AVC (H.264)
-
-
- Yes1
-
-
-
- AV1
-
-
- Yes1
-
-
-
- H.263
-
-
- No
-
-
-
- MPEG-4 Part 2 Visual
-
-
- No
-
-
-
- VP9
-
-
- Yes
-
-
-
-
-
- Firefox 支援 H.264 與否取決於作業系統的媒體建設如何,也就是說得要系統支援才行。
-
- Firefox 目前對 AV1 的支援預設是關閉的,它可以透過在偏好設定中將 media.av1.enabled
設定為 true
來開啟。
-
-
- MPEG-4 支援的音訊編解碼器
-
-
- 編解碼器
- 支援的瀏覽器
-
-
- Chrome
- Edge
- Firefox
- Safari
-
-
-
-
- AAC
-
-
- Yes1
-
-
-
- FLAC
-
-
- Yes
-
-
-
- MPEG-1 Audio Layer III (MP3)
-
-
- Yes
-
-
-
- Opus
-
-
- Yes
-
-
-
-
-
- Firefox 支援 H.264 與否取決於作業系統的媒體建設如何,也就是說得要系統支援才行。
-
-Ogg
-
-The Ogg container format is a free and open format maintained by the Xiph.org Foundation . The Ogg framework also defines patent unencumbered media data formats, such as the Theora video codec and the Vorbis and Opus audio codecs. Xiph.org documents about the Ogg format are available on their web site.
-
-While Ogg has been around for a long time, it has never gained the wide support needed to make it a good first choice for a media container. You are typically better off using WebM, though there are times when Ogg is useful to offer, such as when you wish to support older versions of Firefox and Chrome which don't yet support WebM. For example, Firefox 3.5 and 3.6 support Ogg, but not WebM.
-
-You can get more information about Ogg and its codecs in the Theora Cookbook .
-
-
- Base Ogg media MIME types
-
-
- Audio
- Video
-
-
-
-
- audio/ogg
- video/ogg
-
-
-
-
-The application/ogg
MIME type can be used when you don't necessarily know whether the media contains audio or video. If at all possible, you should use one of the specific types, but fall back to application/ogg
if you don't know the content format or formats.
-
-You can also add the codecs
parameter to the MIME type string to indicate which codecs are used for the audio and/or video tracks, and to optionally further describe the track media formats.
-
-
- Video codecs supported by Ogg
-
-
- Codec
- Browser support
-
-
- Chrome
- Edge
- Firefox
- Safari
-
-
-
-
- Theora
-
-
- Yes
-
-
-
- VP8
-
-
- Yes
-
-
-
- VP9
-
-
- Yes
-
-
-
-
-
-
- Audio codecs supported by Ogg
-
-
- Codec
- Browser support
-
-
- Chrome
- Edge
- Firefox
- Safari
-
-
-
-
- FLAC
-
-
- Yes
-
-
-
- Opus
-
-
- Yes
-
-
-
- Vorbis
-
-
- Yes
-
-
-
-
-
-QuickTime
-
-The QuickTime file format (QTFF , QT , or MOV ) was created by Apple for use by its media framework of the same name. The extension for these files, .mov
, comes from the fact that the format was initially used for movies and was usually called the "QuickTime movie" format. While QTFF served as the basis for the MPEG-4 file format, there are differences and the two are not quite interchangeable.
-
-QuickTime files support any sort of time-based data, including audio and video media, text tracks, and so forth. QuickTime files are primarily supported by macOS, but for a number of years, QuickTime for Windows was available to access them on Windows. However, QuickTime for Windows is no longer supported by Apple as of early 2016, and should not be used , as there are known security concerns. However, Windows Media Player now has integrated support for QuickTime version 2.0 and earlier files; support for later versions of QuickTime requires third-party additions.
-
-On Mac OS, the QuickTime framework not only supported QuickTime format movie files and codecs, but supported a vast array of popular and specialty audio and video codecs, as well as still image formats. Through QuickTime, Mac applications (including web browsers, through the QuickTime plugin or direct QuickTime integration) were able to read and write audio formats including AAC, AIFF, MP3, PCM, and Qualcomm PureVoice; and video formats including AVI, DV, Pixlet, ProRes, FLAC, Cinepak, 3GP, H.261 through H.265, MJPEG, MPEG-1 and MPEG-4 Part 2, Sorenson, and many more.
-
-In addition, a number of third-party components are available for QuickTime, some of which add support for additional codecs.
-
-Because QuickTime support is, for all intents and purposes, primarily available on Apple devices, it is no longer widely used on the internet. Apple itself generally now uses MP4 for video. In addition, the QuickTime framework has been deprecated on the Mac for some time, and is no longer available at all starting in macOS 10.15 Catalina.
-
-
- Base QuickTime media MIME type
-
-
- Video
-
-
-
-
- video/quicktime
-
-
-
-
-The video/quicktime
MIME type is the fundamental type for the QuickTime media container. It's worth noting that QuickTime (the media framework on Mac operating systems) supports a wide variety of containers and codecs, so it actually supports many other MIME types.
-
-You can add the codecs
parameter to the MIME type string to indicate which codecs are used for the audio and/or video tracks, and to optionally provide details about the profile, level, and/or other codec configuration specifics.
-
-
- Video codecs supported by QuickTime
-
-
- Codec
- Browser support
-
-
- Chrome
- Edge
- Firefox
- Safari
-
-
-
-
- AVC (H.264)
-
-
- No
-
-
-
- Cinepak
-
-
- No
-
-
-
- Component Video
-
-
- No
-
-
-
- DV
-
-
- No
-
-
-
- H.261
-
-
- No
-
-
-
- H.263
-
-
- No
-
-
-
- MPEG-2
-
-
- No
-
-
-
- MPEG-4 Part 2 Visual
-
-
- No
-
-
-
- Motion JPEG
-
-
- No
-
-
-
- Sorenson Video 2
-
-
- No
-
-
-
- Sorenson Video 3
-
-
- No
-
-
-
-
-
-
- Audio codecs supported by QuickTime
-
-
- Codec
- Browser support
-
-
- Chrome
- Edge
- Firefox
- Safari
-
-
-
-
- AAC
-
-
- No
-
-
-
- ALaw 2:1
-
-
- No
-
-
-
- Apple Lossless (ALAC)
-
-
- No
-
-
-
- HE-AAC
-
-
- No
-
-
-
- MPEG-1 Audio Layer III (MP3)
-
-
- No
-
-
-
- Microsoft ADPCM
-
-
- No
-
-
-
- µ-Law 2:1 (u-Law)
-
-
- No
-
-
-
-
-
-
-
-The Waveform Audio File Format (WAVE ), usually referred to simply as WAV due to its filename extension being .wav
, is a format developed by Microsoft and IBM to store audio bitstream data.
-
-It is derived from the Resource Interchange File Format (RIFF), and as such is similar to other formats such as Apple's AIFF. The WAV codec registry can be found at {{RFC(2361)}}; however, because nearly all WAV files use linear PCM, support for the other codecs is sparse.
-
-The WAVE format was first released in 1991.
-
-
- WAVE media MIME types
-
-
- Audio
-
-
-
-
- audio/wave
1
-
-
- audio/wav
-
-
- audio/x-wav
-
-
- audio/x-pn-wav
-
-
-
-
- The audio/wave
MIME type is the standard type, and is preferred; however, the others have been used by various products over the years and may be used as well in some environments.
-
-
- Audio codecs supported by WAVE
-
-
- Codec
- Browser support
-
-
- Chrome
- Edge
- Firefox
- Safari
-
-
-
-
- ADPCM (Adaptive Differential Pulse Code Modulation)
-
-
- No
-
-
-
- GSM 06.10
-
-
- No
-
-
-
- LPCM (Linear Pulse Code Modulation)
-
-
- Yes
-
-
-
- MPEG-1 Audio Layer III (MP3)
-
-
- No
-
-
-
- µ-Law (u-Law)
-
-
- No
-
-
-
-
-
-WebM
-
-WebM (Web Media ) is a format based on Matroska which is designed specifically for use in modern web environments. It's based entirely on free and open technologies and primarily uses codecs that are in turn free and open, although some products support other codecs in WebM containers as well.
-
-WebM was first introduced in 2010 and is now widely supported. Compliant implementations of WebM are required to support the VP8 and VP8 video codecs and the Theora and Opus audio codecs. The WebM container format and its required codecs are all available under open licenses. Any other codecs may require a license to use.
-
-
- WebM media MIME types
-
-
- Audio
- Video
-
-
-
-
- audio/webm
- video/webm
-
-
-
-
-
- Video codecs supported by WebM
-
-
- Codec
- Browser support
-
-
- Chrome
- Edge
- Firefox
- Safari
-
-
-
-
- AV1
- Yes
- Yes
- Yes1
- Yes
-
-
- VP8
- Yes
- Yes
- Yes
- Yes
-
-
- VP9
- Yes
- Yes
- Yes
- Yes
-
-
-
-
- Firefox support for AV1 was added to macOS in Firefox 66; for Windows in Firefox 67; and Firefox 68 on Linux. Firefox for Android does not yet support AV1; the implementation in Firefox is designed to use a secure process, which is not supported yet in Android.
-
-
- Audio codecs supported by WebM
-
-
- Codec
- Browser support
-
-
- Chrome
- Edge
- Firefox
- Safari
-
-
-
-
- Opus
- Yes
- Yes
- Yes
- Yes
-
-
- Vorbis
- Yes
- Yes
- Yes
- Yes
-
-
-
-
-Choosing the right container
-
-There are a few factors to consider when selecting the best container or containers to use for your media. The relative importance of each will depend on your needs, your license requirements, and the compatibility requirements of your target audience.
-
-Guidelines
-
-The best choice also depends on what you'll be doing with the media. Playing back media is a different thing than recording and/or editing it. If you're going to be manipulating the media data, using an uncompressed format can improve performance, while using a lossless compressed format at least prevent the accumulation of noise as compression artifacts are multiplied with each re-compression that occurs.
-
-
- If your target audience is likely to include users on mobile, especially on lower-end devices or on slow networks, consider providing a version of your media in a 3GP container with appropriate compression.
- If you have any specific encoding requirements, make sure the container you choose supports the appropriate codecs.
- If you want your media to be in a non-proprietary, open format, consider using one of the open container formats such as FLAC (for audio) or WebM (for video).
- If for any reason you are only able to provide media in a single format, choose a format that's available on the broadest selection of devices and browsers, such as MP3 (for audio) or MP4 (for video and/or audio).
- If your media is audio-only, choosing an audio-only container format likely makes sense. Now that the patents have all expired, MP3 is a widely supported and good choice. WAVE is good but uncompressed, so be aware of that before using it for large audio samples. FLAC is a very good choice, due to its lossless compression, if the target browsers all support it.
-
-
-Unfortunately, neither of the relatively major lossless compression formats (FLAC and ALAC) are universally supported. FLAC is the more broadly supported of the two, but is not supported by macOS without additional software installed, and is not supported at all on iOS. If you need to offer lossless audio, you may need to provide both FLAC and ALAC to get close to universal compatibility.
-
-Container selection advice
-
-The tables below offer suggested containers to use in various scenarios. These are just suggestions. Be sure to consider the needs of your application and your organization before selecting a container format.
-
-Audio-only files
-
-
-
-
- If you need...
- Consider using this container format
-
-
-
-
- Compressed files for general-purpose playback
- MP3 (MPEG-1 Audio Layer III)
-
-
- Losslessly compressed files
- FLAC with ALAC fallback
-
-
- Uncompressed files
- WAV
-
-
-
-
-Now that MP3's patents have all expired, the choice of audio file format has become much easier to make. It's no longer necessary to choose between MP3's broad compatibility and the need to pay royalties when using it.
-
-Video files
-
-
-
-
- If you need...
- Consider using this container format
-
-
- General purpose video, preferably in an open format
- WebM (ideally with MP4 fallback)
-
-
- General purpose video
- MP4 (ideally with WebM or Ogg fallback)
-
-
- High compression optimized for slow connections
- 3GP (ideally with MP4 fallback)
-
-
- Compatibility with older devices/browsers
- QuickTime (ideally with AVI and/or MPEG-2 fallback)
-
-
-
-
-These suggestions make a number of assumptions. You should carefully consider the options before making a final decision, especially if you have a lot of media that will need to be encoded.
-
-Maximizing compatibility with multiple containers
-
-To optimize compatibility, it's worth considering providing more than one version of media files, using the {{HTMLElement("source")}} element to specify each source within the {{HTMLElement("audio")}} or {{HTMLElement("video")}} element. For example, you can offer an Ogg or WebM video as the first choice, with a fallback in MP4 format. You could even choose to offer a retro-like QuickTime or AVI fallback for good measure.
-
-To do this, you create a <video>
(or <audio>
) element with no {{htmlattrxref("src", "video")}} attribute. Then add child {{HTMLElement("source")}} elements within the <video>
element, one for each version of the video you offer. This can be used to offer various versions of a video that can be selected depending on bandwidth availability, but in our case, we'll use it to offer format options.
-
-In the example shown here, a video is offered to the browser in two formats: WebM and MP4.
-
-{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}
-
-
-The video is offered first in WebM format (with the {{htmlattrxref("type", "video")}} attribute set to video/webm
). If the {{Glossary("user agent")}} can't play that, it moves on to the next option, whose type
is specified as video/mp4
. If neither of those can be played, the text "This browser does not support the HTML5 video element." is presented.
-
-Specifications
-
-
-
-Browser compatibility
-
-
-
-
- Container format name
- Audio
- Video
-
-
- MIME type
- Extension(s)
- Browser support
- MIME type
- Extension(s)
- Browser support
-
-
-
-
- 3GP
- audio/3gpp
- .3gp
- Firefox
- video/3gpp
- .3gp
- Firefox
-
-
- ADTS (Audio Data Transport Stream)
- audio/aac
- .aac
- Firefox
- —
- —
- —
-
-
- FLAC
- audio/flac
- .flac
- Firefox
- —
- —
- —
-
-
- MPEG-1 / MPEG-2 (MPG or MPEG)
- audio/mpeg
- .mpg
- .mpeg
- Firefox
- video/mpeg
- .mpg
- .mpeg
- Firefox
-
-
- audio/mp3
- .mp3
- Firefox
-
-
- MPEG-4 (MP4)
- audio/mp4
- .mp4
- .m4a
- Firefox
- video/mp4
- .mp4
- .m4v
- .m4p
- Firefox
-
-
- Ogg
- audio/ogg
- .oga
- .ogg
- Firefox
- video/ogg
- .ogv
- .ogg
- Firefox
-
-
- QuickTime Movie (MOV)
- —
- —
- —
- video/quicktime
- .mov
- Safari
-
-
- WAV (Waveform Audiofile)
- audio/wav
- .wav
- Firefox
- —
- —
- —
-
-
- WebM
- audio/webm
- .webm
- Firefox
- video/webm
- .webm
- Firefox
-
-
-
-
- See also
-
-
diff --git a/files/zh-tw/web/media/formats/containers/index.md b/files/zh-tw/web/media/formats/containers/index.md
new file mode 100644
index 00000000000000..bbf2f354042ddc
--- /dev/null
+++ b/files/zh-tw/web/media/formats/containers/index.md
@@ -0,0 +1,1214 @@
+---
+title: Media container formats (file types)
+slug: Web/Media/Formats/Containers
+translation_of: Web/Media/Formats/Containers
+---
+{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}
+
+視訊與音訊的檔案格式被定義成兩個部分(當然如果一個檔案同時擁有影、音的話,那就有三個):一個是音訊或/和視訊的編解碼器(codecs,由 compress 和 decompress 所組成的詞語),另一個是媒體封裝的格式(media container format,即檔案類型)。在本次導覽中,我們將會看到網路上最常見的封裝格式,並介紹它們的基本規格、優點、限制,以及理想的使用情形。
+
+[網頁即時通訊(WebRTC)](/zh-TW/docs/Web/API/WebRTC_API)並不採用容器(container),而是以 {{domxref("MediaStreamTrack")}} 物件來表示編碼過的影軌和音軌(一個物件表示一種媒體軌),直接從一端串流到另一端。你可以參閱 [WebRTC 使用的編解碼器](/zh-TW/docs/Web/Media/Formats/WebRTC_codecs)來了解進行 WebRTC 時常用的編解碼器,以及瀏覽器對它們的相容性。
+
+## 常見的封裝格式
+
+世上的媒體封裝格式多如牛毛,所以我們在這裡僅列出你最有機會遇到的幾種,其中有的只支援音訊,有的影音都支援。我們也會列出它們各自的媒體類型(MIME type)和副檔名(extension)。網路上最常見的封裝容器有 MPEG-4 (MP4)、QuickTime Movie (MOV),以及 Wavefile Audio File Format (WAV)。當然你也可能會遇到如 MP3、Ogg、WebM、AVI 等其他格式,但不是所有瀏覽器都支援它們就是了。為了方便起見,同時也是因為它們實在太常見了,有些封裝容器與編解碼器的組合會有專屬它們的副檔名跟媒體類型。好比說,只有一個 Opus 音軌的 Ogg 檔通常會被稱為 Opus 檔,它有自己的副檔名 `.opus`,但它其實還是一個 Ogg 檔。
+
+由於特定的編解碼器通常會放在特定的封裝容器裡,所以這樣的組合會被特別看待,比方說 MP3 音訊檔就是一個很好的例子,它是由 MPEG-1 封裝容器與一個以 MPEG-1 Audio Layer III encoding 編碼過的音軌所組成,這種檔案使用 `audio/mp3` 作為媒體類型;`.mp3` 作為副檔名,即便它的封裝容器不過就是 MPEG 罷了。
+
+### 索引
+
+點擊列表中你想知道的封裝格式,即會將你傳送到該項目的細節內容,其中包含它的用途、它支援的編解碼器、支援它的瀏覽器等等。
+
+| 編解碼器名(縮寫) | 完整編解碼器名 | 瀏覽器相容性[1](#index-foot-1) |
+| ----------------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| [3GP](#3gp) | Third Generation Partnership | Firefox for Android |
+| [ADTS](#adts) | Audio Data Transport Stream | Firefox[2](#index-foot-2) |
+| [FLAC](#flac) | Free Lossless Audio Codec | Chrome 56, Edge 16, Firefox 51, Safari 11 |
+| [MPEG / MPEG-2](#mpegmpeg-2) | Moving Picture Experts Group (1 and 2) | — |
+| [MPEG-4 (MP4)](#mpeg-4_mp4) | Moving Picture Experts Group 4 | Chrome 3, Edge 12, Firefox, Internet Explorer 9, Opera 24, Safari 3.1 |
+| [Ogg](#ogg) | Ogg | Chrome 3, Firefox 3.5, Edge 17[3](#index-foot-3) (desktop only), Internet Explorer 9, Opera 10.50 |
+| [QuickTime (MOV)](#quicktime) | Apple QuickTime movie | 只有舊版的 Safari 和其他支援 Apple 的 QuickTime plugin 的瀏覽器 |
+| [WebM](#webm) | Web Media | Chrome 6, Edge 17[3](#index-foot-3) (desktop only), Firefox 4, Opera 10.6, Safari (WebRTC only) |
+
+ 除非特別說明,否則表中提及的瀏覽器包含其行動版與桌面版。此外「支援」指的是針對封裝容器本身,而非特定的編解碼器。
+
+ 只在作業系統底層的媒體框架(media framework)有支援時才有。
+
+[3] 需要安裝[網路媒體延伸模組](https://www.microsoft.com/store/productId/9N5TDP8VCMHS)。
+
+### 3GP
+
+**3GP** 或 **3GPP** 是用來封裝音訊和/或視訊的媒體容器,它服務的對象是透過行動網路(cellular network)進行傳輸的行動裝置。雖然這個格式是為了 3G 行動電話設計的,但現代的手機與網路還是可以使用它。話雖如此,由於現今的網路有更大的頻寬和更為寬鬆的公平使用原則(data caps),所以現在 3GP 格式也不是那麼需要了,只有較慢的網路和較差的手機才會使用這種格式。
+
+這個媒體封裝格式衍生自 ISO Base Media File Format 和 MPEG-4,特別針對低頻寬的情形做了最佳化。
+
+| 音訊 | 視訊 |
+| ------------- | ------------- |
+| `audio/3gpp` | `video/3gpp` |
+| `audio/3gpp2` | `video/3gpp2` |
+| `audio/3gp2` | `video/3gp2` |
+
+上表是基本的 3GP 媒體型態,依照使用的編解碼器的不同,可能還會有其他型態。此外,你可以在媒體型態字串中[添加 `codecs` 參數](/zh-TW/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF)來指明你的音軌和/或影軌所採用的編解碼器,也可以提供 組態(profile)、層級(level)等其他編解碼器的配置細節。
+
+
+
+ 3GP 支援的視訊編解碼器
+
+
+
+ 編解碼器
+ 支援的瀏覽器
+
+
+ Chrome
+ Edge
+ Firefox
+ Safari
+
+
+
+
+ AVC (H.264)
+
+
+
+ Yes1 ,2
+
+
+
+
+ H.263
+
+
+
+ Yes1
+
+
+
+
+ MPEG-4 Part 2 (MP4v-es)
+
+
+
+ Yes1
+
+
+
+
+ VP8
+
+
+
+ Yes1
+
+
+
+
+
+
+ Firefox 只在基於 [OpenMAX](https://www.khronos.org/openmax/) 的裝置上支援 3GP,以目前的情況來看就是 Boot to Gecko (B2G) 平台.
+
+ Firefox 支援 H.264 與否取決於作業系統的媒體建設如何,也就是說得要系統支援才行。
+
+
+
+ 3GP 支援的音訊編解碼器
+
+
+
+ 編解碼器
+ 支援的瀏覽器
+
+
+ Chrome
+ Edge
+ Firefox
+ Safari
+
+
+
+
+ AMR-NB
+
+
+
+ Yes1
+
+
+
+
+ AMR-WB
+
+
+
+ Yes1
+
+
+
+
+ AMR-WB+
+
+
+
+ Yes1
+
+
+
+
+ AAC-LC
+
+
+
+ Yes1 ,2
+
+
+
+
+ HE-AAC v1
+
+
+
+ Yes1 ,2
+
+
+
+
+ HE-AAC v2
+
+
+
+ Yes1 ,2
+
+
+
+
+ MP3
+
+
+
+ Yes1
+
+
+
+
+
+
+ Firefox 只在基於 [OpenMAX](https://www.khronos.org/openmax/) 的裝置上支援 3GP,以目前的情況來看就是 Boot to Gecko (B2G) 平台.
+
+ Firefox 支援 AAC 與否取決於作業系統的媒體建設如何,也就是說得要系統支援才行。
+
+### ADTS
+
+**Audio Data Transport Stream** (**ADTS**) 是 MPEG-4 Part 3 為音訊資料所訂定的封裝格式,著眼於音訊串流,如網路電台。它基本上是一個空的 AAC 音訊資料串流,由 ADTS 幀(frame)和一個很小的 header 組成。
+
+| 音訊 |
+| --------------------------------- |
+| `audio/aac`[\[1\]](#adts-foot-1) |
+| `audio/mpeg`[\[1\]](#adts-foot-1) |
+
+ ADTS 使用哪個媒體型態依它使用的音訊幀(audio frame)而定。如果它使用 ADTS 幀,其媒體型態為 `audio/aac`;如果它使用 MPEG-1/MPEG-2 Audio Layer I, II, or III 格式的音訊幀,它的媒體型態為 `audio/mpeg`。
+
+
+
+ ADTS 支援的音訊編解碼器
+
+
+
+ 編解碼器
+ 支援的瀏覽器
+
+
+ Chrome
+ Edge
+ Firefox
+ Safari
+
+
+
+
+ AAC
+
+
+
+ Yes1
+
+
+
+
+ MP3
+
+
+ Yes
+
+
+
+
+
+ Firefox 支援 AAC 與否取決於作業系統的媒體建設如何,也就是說得要系統支援才行。
+
+### FLAC
+
+**Free Lossless Audio Codec** (**FLAC**) 是一個無損的音訊編解碼器,它有一個相關的精簡音訊封裝格式,也叫做 FLAC,這個格式不受任何專利約束,因此你可以安心地使用它。FLAC 檔只能用來封裝 FLAC 音訊資料。
+
+| 音訊 |
+| ----------------------- |
+| `audio/flac` |
+| `audio/x-flac` (非標準) |
+
+
+
+ FLAC 支援的音訊編解碼器
+
+
+
+ 編解碼器
+ 支援的瀏覽器
+
+
+ Chrome
+ Edge
+ Firefox
+ Safari
+
+
+
+
+ FLAC
+
+
+ Yes
+
+
+
+
+
+### MPEG/MPEG-2
+
+**[MPEG-1](https://zh.wikipedia.org/wiki/MPEG-1)** 和 **[MPEG-2](https://zh.wikipedia.org/wiki/MPEG-2)** 基本上是相同的。這兩個格式由 Moving Picture Experts Group (MPEG) 創造,廣泛用於實體媒體上,如 DVD 媒體所用的視訊格式。
+
+在網路上最常用來封裝音訊資料的 MPEG 檔案格式可能是 [Layer_III/MP3](https://zh.wikipedia.org/wiki/MPEG-1)。也正是因為 MP3 檔被世界各地的數位音樂裝置使用,MPEG-1 和 MPEG-2 才能如此廣泛地應用於網路內容中。
+
+MPEG-1 和 MPEG-2 最主要的差別在於媒體資料格式而非封裝格式。MPEG-1 首見於西元 1992 年;而 MPEG-2 則出現在西元 1996 年。
+
+| 音訊 | 視訊 |
+| ------------ | ------------ |
+| `audio/mpeg` | `video/mpeg` |
+
+
+
+ MPEG-1 與 MPEG-2 支援的視訊編解碼器
+
+
+
+ 編解碼器
+ 支援的瀏覽器
+
+
+ Chrome
+ Edge
+ Firefox
+ Safari
+
+
+
+
+ MPEG-1 Part 2
+
+
+ No
+
+
+
+ MPEG-2 Part 2
+
+
+ No
+
+
+
+
+
+
+
+ MPEG-1 與 MPEG-2 支援的音訊編解碼器
+
+
+
+ 編解碼器
+ 支援的瀏覽器
+
+
+ Chrome
+ Edge
+ Firefox
+ Safari
+
+
+
+
+ MPEG-1 Audio Layer I
+
+
+ No
+
+
+
+ MPEG-1 Audio Layer II
+
+
+ No
+
+
+
+ MPEG-1 Audio Layer III (MP3)
+
+
+ Yes
+
+
+
+
+
+### MPEG-4 (MP4)
+
+**[MPEG-4](https://zh.wikipedia.org/wiki/MPEG-4)** (**MP4**) 是最新版 MPEG 檔案格式。這個格式有兩種版本,分別定義於規範中的 part 1 和 part 14。MP4 是現今流行的封裝容器,它支援了大部份常用的編解碼器,同時它也廣泛地被支援。
+
+初版的 MPEG-4 Part 1 檔案格式首見於西元 1999 年;第二版定義於 Part 14 在西元 2003 年時加入。MP4 檔案格式衍生於 [ISO base media file format](https://zh.wikipedia.org/wiki/ISO_base_media_file_format),而該格式則是衍生於[ Apple](https://www.apple.com/) 開發的 [QuickTime file format](https://zh.wikipedia.org/wiki/QuickTime_file_format)。
+
+| 音訊 | 視訊 |
+| ----------- | ----------- |
+| `audio/mp4` | `video/mp4` |
+
+上表是基本的 MPEG-4 媒體型態,依照使用的編解碼器的不同,可能還會有其他型態。此外,當指出 MPEG-4 媒體型態時 (`audio/mp4` 或 `video/mp4`),你可以在媒體型態字串中[加上 `codecs` 參數](/zh-TW/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF)來指明你的音軌和/或影軌所採用的編解碼器,也可以提供組態(profile)、層級(level)等其他編解碼器的配置細節。
+
+
+
+ MPEG-4 支援的視訊編解碼器
+
+
+
+ 編解碼器
+ 支援的瀏覽器
+
+
+ Chrome
+ Edge
+ Firefox
+ Safari
+
+
+
+
+ AVC (H.264)
+
+
+
+ Yes1
+
+
+
+
+ AV1
+
+
+
+ Yes1
+
+
+
+
+ H.263
+
+
+ No
+
+
+
+ MPEG-4 Part 2 Visual
+
+
+ No
+
+
+
+ VP9
+
+
+ Yes
+
+
+
+
+
+ Firefox 支援 H.264 與否取決於作業系統的媒體建設如何,也就是說得要系統支援才行。
+
+ Firefox 目前對 AV1 的支援預設是關閉的,它可以透過在偏好設定中將 `media.av1.enabled` 設定為 `true` 來開啟。
+
+
+
+ MPEG-4 支援的音訊編解碼器
+
+
+
+ 編解碼器
+ 支援的瀏覽器
+
+
+ Chrome
+ Edge
+ Firefox
+ Safari
+
+
+
+
+ AAC
+
+
+
+ Yes1
+
+
+
+
+ FLAC
+
+
+ Yes
+
+
+
+ MPEG-1 Audio Layer III (MP3)
+
+
+ Yes
+
+
+
+ Opus
+
+
+ Yes
+
+
+
+
+
+ Firefox 支援 H.264 與否取決於作業系統的媒體建設如何,也就是說得要系統支援才行。
+
+### Ogg
+
+The **[Ogg](https://zh.wikipedia.org/wiki/Ogg)** container format is a free and open format maintained by the [Xiph.org Foundation](https://www.xiph.org/). The Ogg framework also defines patent unencumbered media data formats, such as the Theora video codec and the Vorbis and Opus audio codecs. [Xiph.org documents about the Ogg format](https://xiph.org/ogg/) are available on their web site.
+
+While Ogg has been around for a long time, it has never gained the wide support needed to make it a good first choice for a media container. You are typically better off using WebM, though there are times when Ogg is useful to offer, such as when you wish to support older versions of Firefox and Chrome which don't yet support WebM. For example, Firefox 3.5 and 3.6 support Ogg, but not WebM.
+
+You can get more information about Ogg and its codecs in the [Theora Cookbook](http://en.flossmanuals.net/ogg-theora/).
+
+| Audio | Video |
+| ----------- | ----------- |
+| `audio/ogg` | `video/ogg` |
+
+The `application/ogg` MIME type can be used when you don't necessarily know whether the media contains audio or video. If at all possible, you should use one of the specific types, but fall back to `application/ogg` if you don't know the content format or formats.
+
+You can also [add the `codecs` parameter](/zh-TW/docs/Web/Media/Formats/codecs_parameter#Ogg) to the MIME type string to indicate which codecs are used for the audio and/or video tracks, and to optionally further describe the track media formats.
+
+
+
+ Video codecs supported by Ogg
+
+
+
+ Codec
+
+ Browser support
+
+
+
+ Chrome
+ Edge
+ Firefox
+ Safari
+
+
+
+
+ Theora
+
+
+ Yes
+
+
+
+ VP8
+
+
+ Yes
+
+
+
+ VP9
+
+
+ Yes
+
+
+
+
+
+
+
+ Audio codecs supported by Ogg
+
+
+
+ Codec
+
+ Browser support
+
+
+
+ Chrome
+ Edge
+ Firefox
+ Safari
+
+
+
+
+ FLAC
+
+
+ Yes
+
+
+
+ Opus
+
+
+ Yes
+
+
+
+ Vorbis
+
+
+ Yes
+
+
+
+
+
+### QuickTime
+
+The **QuickTime** file format (**QTFF**, **QT**, or **MOV**) was created by Apple for use by its media framework of the same name. The extension for these files, `.mov`, comes from the fact that the format was initially used for movies and was usually called the "QuickTime movie" format. While QTFF served as the basis for the MPEG-4 file format, there are differences and the two are not quite interchangeable.
+
+QuickTime files support any sort of time-based data, including audio and video media, text tracks, and so forth. QuickTime files are primarily supported by macOS, but for a number of years, QuickTime for Windows was available to access them on Windows. However, QuickTime for Windows is no longer supported by Apple as of early 2016, and _should not be used_, as there are known security concerns. However, Windows Media Player now has integrated support for QuickTime version 2.0 and earlier files; support for later versions of QuickTime requires third-party additions.
+
+On Mac OS, the QuickTime framework not only supported QuickTime format movie files and codecs, but supported a vast array of popular and specialty audio and video codecs, as well as still image formats. Through QuickTime, Mac applications (including web browsers, through the QuickTime plugin or direct QuickTime integration) were able to read and write audio formats including AAC, AIFF, MP3, PCM, and Qualcomm PureVoice; and video formats including AVI, DV, Pixlet, ProRes, FLAC, Cinepak, 3GP, H.261 through H.265, MJPEG, MPEG-1 and MPEG-4 Part 2, Sorenson, and many more.
+
+In addition, a number of third-party components are available for QuickTime, some of which add support for additional codecs.
+
+Because QuickTime support is, for all intents and purposes, primarily available on Apple devices, it is no longer widely used on the internet. Apple itself generally now uses MP4 for video. In addition, the QuickTime framework has been deprecated on the Mac for some time, and is no longer available at all starting in macOS 10.15 Catalina.
+
+| Video |
+| ----------------- |
+| `video/quicktime` |
+
+The `video/quicktime` MIME type is the fundamental type for the QuickTime media container. It's worth noting that QuickTime (the media framework on Mac operating systems) supports a wide variety of containers and codecs, so it actually supports many other MIME types.
+
+You can [add the `codecs` parameter](/zh-TW/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF) to the MIME type string to indicate which codecs are used for the audio and/or video tracks, and to optionally provide details about the profile, level, and/or other codec configuration specifics.
+
+
+
+ Video codecs supported by QuickTime
+
+
+
+ Codec
+
+ Browser support
+
+
+
+ Chrome
+ Edge
+ Firefox
+ Safari
+
+
+
+
+ AVC (H.264)
+
+
+ No
+
+
+
+ Cinepak
+
+
+ No
+
+
+
+ Component Video
+
+
+ No
+
+
+
+ DV
+
+
+ No
+
+
+
+ H.261
+
+
+ No
+
+
+
+ H.263
+
+
+ No
+
+
+
+ MPEG-2
+
+
+ No
+
+
+
+ MPEG-4 Part 2 Visual
+
+
+ No
+
+
+
+ Motion JPEG
+
+
+ No
+
+
+
+ Sorenson Video 2
+
+
+ No
+
+
+
+ Sorenson Video 3
+
+
+ No
+
+
+
+
+
+
+
+ Audio codecs supported by QuickTime
+
+
+
+ Codec
+
+ Browser support
+
+
+
+ Chrome
+ Edge
+ Firefox
+ Safari
+
+
+
+
+ AAC
+
+
+ No
+
+
+
+ ALaw 2:1
+
+
+ No
+
+
+
+ Apple Lossless (ALAC)
+
+
+ No
+
+
+
+ HE-AAC
+
+
+ No
+
+
+
+ MPEG-1 Audio Layer III (MP3)
+
+
+ No
+
+
+
+ Microsoft ADPCM
+
+
+ No
+
+
+
+ µ-Law 2:1 (u-Law)
+
+
+ No
+
+
+
+
+
+### WAVE (WAV)
+
+The **Waveform Audio File Format** (**WAVE**), usually referred to simply as WAV due to its filename extension being `.wav`, is a format developed by Microsoft and IBM to store audio bitstream data.
+
+It is derived from the Resource Interchange File Format (RIFF), and as such is similar to other formats such as Apple's AIFF. The WAV codec registry can be found at {{RFC(2361)}}; however, because nearly all WAV files use linear PCM, support for the other codecs is sparse.
+
+The WAVE format was first released in 1991.
+
+| Audio |
+| ----------------------------- |
+| `audio/wave`[1](#wave-foot-1) |
+| `audio/wav` |
+| `audio/x-wav` |
+| `audio/x-pn-wav` |
+
+ The `audio/wave` MIME type is the standard type, and is preferred; however, the others have been used by various products over the years and may be used as well in some environments.
+
+
+
+ Audio codecs supported by WAVE
+
+
+
+ Codec
+
+ Browser support
+
+
+
+ Chrome
+ Edge
+ Firefox
+ Safari
+
+
+
+
+ ADPCM (Adaptive Differential Pulse Code Modulation)
+
+
+ No
+
+
+
+ GSM 06.10
+
+
+ No
+
+
+
+ LPCM (Linear Pulse Code Modulation)
+
+
+ Yes
+
+
+
+ MPEG-1 Audio Layer III (MP3)
+
+
+ No
+
+
+
+ µ-Law (u-Law)
+
+
+ No
+
+
+
+
+
+### WebM
+
+**[WebM](https://zh.wikipedia.org/wiki/WebM)** (**Web Media**) is a format based on [Matroska](https://zh.wikipedia.org/wiki/Matroska) which is designed specifically for use in modern web environments. It's based entirely on free and open technologies and primarily uses codecs that are in turn free and open, although some products support other codecs in WebM containers as well.
+
+WebM was first introduced in 2010 and is now widely supported. Compliant implementations of WebM are required to support the VP8 and VP8 video codecs and the Theora and Opus audio codecs. The WebM container format and its required codecs are all available under open licenses. Any other codecs may require a license to use.
+
+| Audio | Video |
+| ------------ | ------------ |
+| `audio/webm` | `video/webm` |
+
+
+
+ Video codecs supported by WebM
+
+
+
+ Codec
+
+ Browser support
+
+
+
+ Chrome
+ Edge
+ Firefox
+ Safari
+
+
+
+
+ AV1
+ Yes
+ Yes
+
+ Yes1
+
+ Yes
+
+
+ VP8
+ Yes
+ Yes
+ Yes
+ Yes
+
+
+ VP9
+ Yes
+ Yes
+ Yes
+ Yes
+
+
+
+
+ Firefox support for AV1 was added to macOS in Firefox 66; for Windows in Firefox 67; and Firefox 68 on Linux. Firefox for Android does not yet support AV1; the implementation in Firefox is designed to use a secure process, which is not supported yet in Android.
+
+
+
+ Audio codecs supported by WebM
+
+
+
+ Codec
+
+ Browser support
+
+
+
+ Chrome
+ Edge
+ Firefox
+ Safari
+
+
+
+
+ Opus
+ Yes
+ Yes
+ Yes
+ Yes
+
+
+ Vorbis
+ Yes
+ Yes
+ Yes
+ Yes
+
+
+
+
+## Choosing the right container
+
+There are a few factors to consider when selecting the best container or containers to use for your media. The relative importance of each will depend on your needs, your license requirements, and the compatibility requirements of your target audience.
+
+### Guidelines
+
+The best choice also depends on what you'll be doing with the media. Playing back media is a different thing than recording and/or editing it. If you're going to be manipulating the media data, using an uncompressed format can improve performance, while using a lossless compressed format at least prevent the accumulation of noise as compression artifacts are multiplied with each re-compression that occurs.
+
+- If your target audience is likely to include users on mobile, especially on lower-end devices or on slow networks, consider providing a version of your media in a 3GP container with appropriate compression.
+- If you have any specific encoding requirements, make sure the container you choose supports the appropriate codecs.
+- If you want your media to be in a non-proprietary, open format, consider using one of the open container formats such as FLAC (for audio) or WebM (for video).
+- If for any reason you are only able to provide media in a single format, choose a format that's available on the broadest selection of devices and browsers, such as MP3 (for audio) or MP4 (for video and/or audio).
+- If your media is audio-only, choosing an audio-only container format likely makes sense. Now that the patents have all expired, MP3 is a widely supported and good choice. WAVE is good but uncompressed, so be aware of that before using it for large audio samples. FLAC is a very good choice, due to its lossless compression, if the target browsers all support it.
+
+Unfortunately, neither of the relatively major lossless compression formats (FLAC and ALAC) are universally supported. FLAC is the more broadly supported of the two, but is not supported by macOS without additional software installed, and is not supported at all on iOS. If you need to offer lossless audio, you may need to provide both FLAC and ALAC to get close to universal compatibility.
+
+### Container selection advice
+
+The tables below offer suggested containers to use in various scenarios. These are just suggestions. Be sure to consider the needs of your application and your organization before selecting a container format.
+
+#### Audio-only files
+
+| If you need... | Consider using this container format |
+| --------------------------------------------- | ------------------------------------ |
+| Compressed files for general-purpose playback | MP3 (MPEG-1 Audio Layer III) |
+| Losslessly compressed files | FLAC with ALAC fallback |
+| Uncompressed files | WAV |
+
+Now that MP3's patents have all expired, the choice of audio file format has become much easier to make. It's no longer necessary to choose between MP3's broad compatibility and the need to pay royalties when using it.
+
+#### Video files
+
+| If you need... | Consider using this container format |
+| --------------------------------------------------- | --------------------------------------------------- |
+| General purpose video, preferably in an open format | WebM (ideally with MP4 fallback) |
+| General purpose video | MP4 (ideally with WebM or Ogg fallback) |
+| High compression optimized for slow connections | 3GP (ideally with MP4 fallback) |
+| Compatibility with older devices/browsers | QuickTime (ideally with AVI and/or MPEG-2 fallback) |
+
+These suggestions make a number of assumptions. You should carefully consider the options before making a final decision, especially if you have a lot of media that will need to be encoded.
+
+## Maximizing compatibility with multiple containers
+
+To optimize compatibility, it's worth considering providing more than one version of media files, using the {{HTMLElement("source")}} element to specify each source within the {{HTMLElement("audio")}} or {{HTMLElement("video")}} element. For example, you can offer an Ogg or WebM video as the first choice, with a fallback in MP4 format. You could even choose to offer a retro-like QuickTime or AVI fallback for good measure.
+
+To do this, you create a `` (or ``) element with no {{htmlattrxref("src", "video")}} attribute. Then add child {{HTMLElement("source")}} elements within the `` element, one for each version of the video you offer. This can be used to offer various versions of a video that can be selected depending on bandwidth availability, but in our case, we'll use it to offer format options.
+
+In the example shown here, a video is offered to the browser in two formats: WebM and MP4.
+
+{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}
+
+The video is offered first in WebM format (with the {{htmlattrxref("type", "video")}} attribute set to `video/webm`). If the {{Glossary("user agent")}} can't play that, it moves on to the next option, whose `type` is specified as `video/mp4`. If neither of those can be played, the text "This browser does not support the HTML5 video element." is presented.
+
+## Specifications
+
+| Specification | Comment |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
+| [ETSI 3GPP](https://portal.3gpp.org/desktopmodules/Specifications/SpecificationDetails.aspx?specificationId=1441) | Defines the 3GP container format |
+| [ISO/IEC 14496-3](https://www.iso.org/standard/53943.html) (MPEG-4 Part 3 Audio) | Defines MP4 audio including ADTS |
+| [FLAC Format](https://xiph.org/flac/format.html) | The FLAC format specification |
+| [ISO/IEC 11172-1](https://www.iso.org/standard/19180.html) (MPEG-1 Part 1 Systems) | Defines the MPEG-1 container format |
+| [ISO/IEC 13818-1](https://www.iso.org/standard/74427.html) (MPEG-2 Part 1 Systems) | Defines the MPEG-2 container format |
+| [ISO/IEC 14496-14](https://www.iso.org/standard/75929.html) (MPEG-4 Part 14: MP4 file format) | Defines the MPEG-4 (MP4) version 2 container format |
+| [ISO/IEC 14496-1](https://www.iso.org/standard/55688.html) (MPEG-4 Part 1 Systems) | Defines the original MPEG-4 (MP4) container format |
+| {{RFC(3533)}} | Defines the Ogg container format |
+| {{RFC(5334)}} | Defines the Ogg media types and file extensions |
+| [QuickTime File Format Specification](https://developer.apple.com/library/archive/documentation/QuickTime/QTFF/QTFFPreface/qtffPreface.html) | Defines the QuickTime movie (MOV) format |
+| [Multimedia Programming Interface and Data Specifications 1.0](https://web.archive.org/web/20090417165828/http://www.kk.iij4u.or.jp/~kondo/wave/mpidata.txt) | The closest thing to an official WAVE specification |
+| [Resource Interchange File Format](https://docs.microsoft.com/en-us/windows/desktop/xaudio2/resource-interchange-file-format--riff-) (used by WAV) | Defines the RIFF format; WAVE files are a form of RIFF |
+| [WebM Container Guidelines](https://www.webmproject.org/docs/container/) | Guide for adapting Matroska for WebM |
+| [Matroska Specifications](https://matroska.org/technical/specs/index.html) | The specification for the Matroska container format upon which WebM is based |
+| [WebM Byte Stream Format](https://w3c.github.io/media-source/webm-byte-stream-format.html) | WebM byte stream format for use with [Media Source Extensions](/zh-TW/docs/Web/API/Media_Source_Extensions_API) |
+
+## Browser compatibility
+
+
+
+
+
+ Container format name
+
+
+ Audio
+
+
+ Video
+
+
+
+ MIME type
+ Extension(s)
+
+ Browser support
+
+ MIME type
+ Extension(s)
+
+ Browser support
+
+
+
+
+
+ 3GP
+ audio/3gpp
+ .3gp
+
+ Firefox
+
+ video/3gpp
+ .3gp
+ Firefox
+
+
+
+ ADTS (Audio Data Transport Stream)
+
+ audio/aac
+ .aac
+
+ Firefox
+
+ —
+ —
+ —
+
+
+ FLAC
+ audio/flac
+ .flac
+
+ Firefox
+
+ —
+ —
+ —
+
+
+
+ MPEG-1 / MPEG-2 (MPG or MPEG)
+
+ audio/mpeg
+
+ .mpg
.mpeg
+
+
+ Firefox
+
+ video/mpeg
+
+ .mpg
.mpeg
+
+ Firefox
+
+
+ audio/mp3
+ .mp3
+
+ Firefox
+
+
+
+ MPEG-4 (MP4)
+ audio/mp4
+
+ .mp4
.m4a
+
+
+ Firefox
+
+ video/mp4
+
+ .mp4
.m4v
.m4p
+
+ Firefox
+
+
+ Ogg
+ audio/ogg
+
+ .oga
.ogg
+
+
+ Firefox
+
+ video/ogg
+
+ .ogv
.ogg
+
+ Firefox
+
+
+ QuickTime Movie (MOV)
+ —
+ —
+ —
+ video/quicktime
+ .mov
+ Safari
+
+
+ WAV (Waveform Audiofile)
+ audio/wav
+ .wav
+
+ Firefox
+
+ —
+ —
+ —
+
+
+ WebM
+ audio/webm
+ .webm
+
+ Firefox
+
+ video/webm
+ .webm
+ Firefox
+
+
+
+
+## See also
+
+- [WebRTC API](/zh-TW/docs/Web/API/WebRTC_API)
+- [MediaStream Recording API](/zh-TW/docs/Web/API/MediaStream_Recording_API)
+- {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements
diff --git a/files/zh-tw/web/media/formats/index.html b/files/zh-tw/web/media/formats/index.html
deleted file mode 100644
index 1c8d8d4ff2da97..00000000000000
--- a/files/zh-tw/web/media/formats/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: 'Media type and format guide: image, audio, and video content'
-slug: Web/Media/Formats
-tags:
- - API
- - Audio
- - Codecs
- - Containers
- - File Types
- - Files
- - Filetypes
- - Landing
- - Media
- - NeedsTranslation
- - TopicStub
- - Types
- - Video
- - Web
- - formats
-translation_of: Web/Media/Formats
----
-{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}
-
-Since nearly its beginning, the web has included support for some form of visual media presentation. Originally, these capabilities were limited, and were expanded organically, with different browsers finding their own solutions to the problems around including still and video imagery on the web. The modern web has powerful features to support the presentation and manipulation of media, with several media-related APIs supporting various types of content. Generally, the media formats supported by a browser are entirely up to the browser's creators, which can complicate the work of a web developer.
-
-This guide provides an overview of the media file types, {{Glossary("codec", "codecs")}}, and algorithms that may comprise media used on the web. It also provides browser support information for various combinations of these, and suggestions for prioritization of formats, as well as which formats excel at specific types of content.
-
-
-
-
References
-
-
Images
-
-
- Image file type and format guide
- Covers support of image file types and content formats across the major web browsers, as well as providing basic information about each type: benefits, limitations, and use cases of interest to web designers and developers.
- Image file types for web designers
- Fundamental information about the various image file types that may be useful for web designers, including best practices and use cases for each type, and guidelines for choosing the right image file format for specific types of content.
-
-
-
-
-
- Media containers (file types)
- A guide to the file types that contain media data. Some are audio-specific, while others may be used for either audio or combined audiovisual content such as movies. Includes overviews of each of the file types supported by the major web browsers, along with browser support information and supported features.
-
-
-
- Web audio codec guide
- A guide to the audio codecs allowed for by the common media containers, as well as by the major browsers. Includes benefits, limitations, key specifications and capabilities, and use cases. It also covers each browser's support for using the codec in given containers.
- Web video codec guide
- This article provides basic information about the video codecs supported by the major browsers, as well as some that are not commonly supported but that you might still run into. It also covers codec capabilities, benefits, limitations, and browser support levels and restrictions.
- The "codecs" parameter in common media types
- When specifying the MIME type describing a media format, you can provide details using the codecs
parameter as part of the type string. This guide describes the format and possible values of the codecs
parameter for the common media types.
- Codecs used by WebRTC
- WebRTC doesn't use a container, but instead streams the encoded media itself from peer to peer using {{domxref("MediaStreamTrack")}} objects to represent each audio or video track. This guide discusses the codecs commonly used with WebRTC.
-
-
-
-
-
Guides
-
-
Concepts
-
-
- Digital audio concepts
- An introduction to how audio is converted into digital form and stored for use by computers. It explains basic concepts about how audio is sampled, as well as concepts such as sample rate, audio frames, and audio compression.
- Digital video concepts
- A guide to fundamental concepts involved with digital video as used on the web, including basics about color formats, chroma subsampling, how human perception influences video coding, and so forth.
-
-
-
Tutorials and how-tos
-
-
- Learning: Video and audio content
- This tutorial introduces and details the use of media on the web.
- Handling media support issues in web content
- In this guide, we look at how to build web content that maximizes quality or performance while providing the broadest possible compatibility, by choosing media formats wisely, and offering fallbacks and alternate formats where it would be helpful.
-
-
-
Other topics
-
-
- Media Capabilities API
- The Media Capabilities API lets you discover the encoding and decoding capabilities of the device your app or site is running on. This lets you make real-time decisions about what formats to use and when.
-
-
-
diff --git a/files/zh-tw/web/media/formats/index.md b/files/zh-tw/web/media/formats/index.md
new file mode 100644
index 00000000000000..c935d8adc19249
--- /dev/null
+++ b/files/zh-tw/web/media/formats/index.md
@@ -0,0 +1,69 @@
+---
+title: 'Media type and format guide: image, audio, and video content'
+slug: Web/Media/Formats
+tags:
+ - API
+ - Audio
+ - Codecs
+ - Containers
+ - File Types
+ - Files
+ - Filetypes
+ - Landing
+ - Media
+ - NeedsTranslation
+ - TopicStub
+ - Types
+ - Video
+ - Web
+ - formats
+translation_of: Web/Media/Formats
+---
+{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}
+
+Since nearly its beginning, the web has included support for some form of visual media presentation. Originally, these capabilities were limited, and were expanded organically, with different browsers finding their own solutions to the problems around including still and video imagery on the web. The modern web has powerful features to support the presentation and manipulation of media, with several media-related APIs supporting various types of content. Generally, the media formats supported by a browser are entirely up to the browser's creators, which can complicate the work of a web developer.
+
+This guide provides an overview of the media file types, {{Glossary("codec", "codecs")}}, and algorithms that may comprise media used on the web. It also provides browser support information for various combinations of these, and suggestions for prioritization of formats, as well as which formats excel at specific types of content.
+
+## References
+
+### Images
+
+- [Image file type and format guide](/zh-TW/docs/Web/Media/Formats/Image_types)
+ - : Covers support of image file types and content formats across the major web browsers, as well as providing basic information about each type: benefits, limitations, and use cases of interest to web designers and developers.
+- [Image file types for web designers](/zh-TW/docs/Web/Media/Formats/Images_for_web_designers)
+ - : Fundamental information about the various image file types that may be useful for web designers, including best practices and use cases for each type, and guidelines for choosing the right image file format for specific types of content.
+
+### Media file types and codecs
+
+- [Media containers (file types)](/zh-TW/docs/Web/Media/Formats/Containers)
+ - : A guide to the file types that contain media data. Some are audio-specific, while others may be used for either audio or combined audiovisual content such as movies. Includes overviews of each of the file types supported by the major web browsers, along with browser support information and supported features.
+- [Web audio codec guide](/zh-TW/docs/Web/Media/Formats/Audio_codecs)
+ - : A guide to the audio codecs allowed for by the common media containers, as well as by the major browsers. Includes benefits, limitations, key specifications and capabilities, and use cases. It also covers each browser's support for using the codec in given containers.
+- [Web video codec guide](/zh-TW/docs/Web/Media/Formats/Video_codecs)
+ - : This article provides basic information about the video codecs supported by the major browsers, as well as some that are not commonly supported but that you might still run into. It also covers codec capabilities, benefits, limitations, and browser support levels and restrictions.
+- [The "codecs" parameter in common media types](/zh-TW/docs/Web/Media/Formats/codecs_parameter)
+ - : When specifying the MIME type describing a media format, you can provide details using the `codecs` parameter as part of the type string. This guide describes the format and possible values of the `codecs` parameter for the common media types.
+- [Codecs used by WebRTC](/zh-TW/docs/Web/Media/Formats/WebRTC_codecs)
+ - : [WebRTC](/zh-TW/docs/Web/API/WebRTC_API) doesn't use a container, but instead streams the encoded media itself from peer to peer using {{domxref("MediaStreamTrack")}} objects to represent each audio or video track. This guide discusses the codecs commonly used with WebRTC.
+
+## Guides
+
+### Concepts
+
+- [Digital audio concepts](/zh-TW/docs/Web/Media/Formats/Audio_concepts)
+ - : An introduction to how audio is converted into digital form and stored for use by computers. It explains basic concepts about how audio is sampled, as well as concepts such as sample rate, audio frames, and audio compression.
+- [Digital video concepts](/zh-TW/docs/Web/Media/Formats/Video_concepts)
+ - : A guide to fundamental concepts involved with digital video as used on the web, including basics about color formats, chroma subsampling, how human perception influences video coding, and so forth.
+
+### Tutorials and how-tos
+
+- [Learning: Video and audio content](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+ - : This tutorial introduces and details the use of media on the web.
+- [Handling media support issues in web content](/zh-TW/docs/Web/Media/Formats/Support_issues)
+ - : In this guide, we look at how to build web content that maximizes quality or performance while providing the broadest possible compatibility, by choosing media formats wisely, and offering fallbacks and alternate formats where it would be helpful.
+
+## Other topics
+
+- [Media Capabilities API](/zh-TW/docs/Web/API/Media_Capabilities_API)
+ - : The Media Capabilities API lets you discover the encoding and decoding capabilities of the device your app or site is running on. This lets you make real-time decisions about what formats to use and when.
diff --git a/files/zh-tw/web/media/index.html b/files/zh-tw/web/media/index.html
deleted file mode 100644
index e9708c42b2ae0f..00000000000000
--- a/files/zh-tw/web/media/index.html
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: Web media technologies
-slug: Web/Media
-tags:
- - 媒體技術
- - 網頁
- - 視訊
- - 音效
-translation_of: Web/Media
----
-這些年來,網頁來表達,創作及運用視訊及音訊以至其他媒介的能力不斷上升。今時今日存在了 大量可供運用的API及HTML元件,DOM介面,及其他不止於 發揮傳統效果,還能與其他網頁層面的技術產生協同效應和真實地令人深刻銘記 的特效。本文列出不同的APIs和連結其詳細資料的超連結,希望你能認為這些資訊能幫你盡快純熟這些技術。
-
-
-
-
References
-
-
HTML
-
-
這些文章包括HTML特效,供HTML媒體開發者參考。
-
-
- {{HTMLElement("audio")}}
- <audio>
元件,這是用來在網頁裡播放音效。此元件能 不被看見地運用來 作為一個 供更多其他繁雜的媒介放置的 位置。當然,也能放置一些可看見的控制器予用家來控制是否重播這些音訊。
- {{HTMLElement("video")}}
- <video>
元件,這是一個為了視訊內容在網頁裡播放的端點(endpoint).它能被簡單地只用作表現視訊,或者用作一個位置來放置即時視訊內容(streamed video).<video>也能被用作一個途徑來連結媒介APIs和其他HTML及DOM技術,當中包括
{{HTMLElement("canvas")}} (這是作 frame grabbing(?) 和其管控).
-
-
-
APIs
-
-
- Media Capture and Streams API
- 這是一個參考資料,關於串流,記錄,管控媒體資料,無論是本地的,透過網路的。這些包括本地的攝錄機及來捕流視訊,音效或圖像的麥克風。
- Web Audio API
- 你可以藉由此API產出、篩選及操作即時的聲音或是預先錄製好的材料,然後將音效送至<audio>
元件、影音串流或是儲存起來。
- WebRTC
- WebRTC (網頁即時通訊)能夠即時地串流影音,也能夠透過網際網路將兩個人的訊息資料互相傳遞,而不需要任何媒介。
-
-
-
-
-
指南
-
-
- 網頁傳播媒體的概述
- 支援影音撥放,操作與紀錄的網頁科技與API的概論。如果你不知道該使用哪一個API,請從這裡開始。
-
-
-
-
-
-
Other topics
-
-
Related topics which may be of interest, since they can be used in tandem with media APIs in interesting ways.
-
-
- The Canvas API
- The Canvas API lets you draw into an {{HTMLElement("canvas")}}, manipulating and changing the contents of an image. This can be used with media in many ways, including by setting a <canvas>
element as the destination for video playback or camera capture so that you can capture and manipulate video frames.
- WebGL
- WebGL provides an OpenGL ES compatible API on top of the existing Canvas API, making it possible to do powerful 3D graphics on the Web. Through a canvas, this can be used to add 3D imagery to media content.
-
-
-
diff --git a/files/zh-tw/web/media/index.md b/files/zh-tw/web/media/index.md
new file mode 100644
index 00000000000000..db45a29db42849
--- /dev/null
+++ b/files/zh-tw/web/media/index.md
@@ -0,0 +1,45 @@
+---
+title: Web media technologies
+slug: Web/Media
+tags:
+ - 媒體技術
+ - 網頁
+ - 視訊
+ - 音效
+translation_of: Web/Media
+---
+這些年來,網頁來表達,創作及運用視訊及音訊以至其他媒介的能力不斷上升。今時今日存在了 大量可供運用的 API 及 HTML 元件,DOM 介面,及其他不止於 發揮傳統效果,還能與其他網頁層面的技術產生協同效應和真實地令人深刻銘記 的特效。本文列出不同的 APIs 和連結其詳細資料的超連結,希望你能認為這些資訊能幫你盡快純熟這些技術。
+
+## References
+
+### HTML
+
+這些文章包括 HTML 特效,供HTML媒體開發者參考。
+
+- {{HTMLElement("audio")}}
+ - : `` 元件,這是用來在網頁裡播放音效。此元件能 不被看見地運用來 作為一個 供更多其他繁雜的媒介放置的 位置。當然,也能放置一些可看見的控制器予用家來控制是否重播這些音訊。
+- {{HTMLElement("video")}}
+ - : `` 元件,這是一個為了視訊內容在網頁裡播放的端點(endpoint).它能被簡單地只用作表現視訊,或者用作一個位置來放置即時視訊內容(streamed video).`也能被用作一個途徑來連結媒介APIs和其他HTML及DOM技術,當中包括` {{HTMLElement("canvas")}} (這是作 frame grabbing(?) 和其管控).
+
+### APIs
+
+- [Media Capture and Streams API](/zh-TW/docs/Web/API/Media_Streams_API)
+ - : 這是一個參考資料,關於串流,記錄,管控媒體資料,無論是本地的,透過網路的。這些包括本地的攝錄機及來捕流視訊,音效或圖像的麥克風。
+- [Web Audio API](/zh-TW/docs/Web/API/Web_Audio_API)
+ - : 你可以藉由此 API 產出、篩選及操作即時的聲音或是預先錄製好的材料,然後將音效送至``元件、影音串流或是儲存起來。
+- [WebRTC](/zh-TW/docs/Web/API/WebRTC_API)
+ - : WebRTC (網頁即時通訊)能夠即時地串流影音,也能夠透過網際網路將兩個人的訊息資料互相傳遞,而不需要任何媒介。
+
+## 指南
+
+- [網頁傳播媒體的概述](/zh-TW/docs/Web/Media/Overview)
+ - : 支援影音撥放,操作與紀錄的網頁科技與 API 的概論。如果你不知道該使用哪一個 API,請從這裡開始。
+
+## Other topics
+
+Related topics which may be of interest, since they can be used in tandem with media APIs in interesting ways.
+
+- [The Canvas API](/zh-TW/docs/Web/API/Canvas_API)
+ - : The Canvas API lets you draw into an {{HTMLElement("canvas")}}, manipulating and changing the contents of an image. This can be used with media in many ways, including by setting a `` element as the destination for video playback or camera capture so that you can capture and manipulate video frames.
+- [WebGL](/zh-TW/docs/Web/API/WebGL_API)
+ - : WebGL provides an OpenGL ES compatible API on top of the existing Canvas API, making it possible to do powerful 3D graphics on the Web. Through a canvas, this can be used to add 3D imagery to media content.
diff --git a/files/zh-tw/web/opensearch/index.html b/files/zh-tw/web/opensearch/index.html
deleted file mode 100644
index eda3065dfe2ba9..00000000000000
--- a/files/zh-tw/web/opensearch/index.html
+++ /dev/null
@@ -1,179 +0,0 @@
----
-title: 製作 OpenSearch 搜尋模組
-slug: Web/OpenSearch
-tags:
- - 待翻譯
- - 搜尋模組
-translation_of: Web/OpenSearch
----
-{{AddonSidebar}}
-
-OpenSearch 描述語法 敘述了搜尋引擎,以便網站用戶透過瀏覽器或其他用戶端程式使用之。OpenSearch 支援最新版的 Firefox、Internet Explorer、Safari、Chrome.
-
-Firefox 還支援搜尋建議與 <SearchForm>
元素……等 OpenSearch 標準內尚未包含的功能。這篇文章會聚焦在如何撰寫可支援 Firefox 特殊功能、且和 OpenSearch 格式相容的搜尋套件。
-
-OpenSearch 描述檔能由網站自動提示安裝 ,或是藉從網頁安裝搜尋模組 中描述的方式安裝。
-
-OpenSearch 描述檔
-
-這個描述搜尋引擎的 XML 檔其實很簡單,參考下面的基本樣板,以斜體標示的部分則依需求修改即可。
-
-<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
- xmlns:moz="http://www.mozilla.org/2006/browser/search/">
- <ShortName>SNK </ShortName>
- <Description>Search engine full name and summary </Description>
- <InputEncoding>UTF-8 </InputEncoding>
- <Image width="16" height="16" type="image/x-icon">data:image/x-icon;base64,AAABAAEAEBAAA ... </Image>
- <Url type="text/html" template="searchURL ">
- <Param name="key name " value="{searchTerms}"/>
- ...
- <Param name="key name " value="parameter value "/>
- </Url>
- <Url type="application/x-suggestions+json" template="suggestionURL "/>
- <moz:SearchForm>http://example.com/search </moz:SearchForm>
-</OpenSearchDescription>
-
-
- ShortName
- 搜尋引擎簡稱
- Restrictions: The value must contain 16 or fewer characters of plain text. The value must not contain HTML or other markup.
-
-
-
- Description
- 搜尋引擎的簡要描述
- Restrictions: The value must contain 1024 or fewer characters of plain text. The value must not contain HTML or other markup.
-
-
-
- InputEncoding
- 搜尋引擎資料輸入時的編碼方式,例如說:<InputEncoding>UTF-8</InputEncoding>
。
-
-
-
- Image
-
- URI to an icon representative of the search engine. When possible, search engines should offer a 16×16 image of type "image/x-icon" and a 64×64 image of type image/jpeg
or image/png
. The URI may also use the data:
URI scheme . You can generate a data:
URI from an icon file at The data:
URI kitchen .
-
- <Image height="16" width="16" type="image/x-icon">https://example.com/favicon.ico</Image>
- <!-- or -->
-<Image height="16" width="16">data:image/x-icon;base64,AAABAAEAEBAAA ... DAAA=</Image>
-
-
- Firefox caches the icon as a base64 data:
URI (search plug-ins are stored in the profile's "searchplugins" folder). http:
URIs are changed to data:
URIs when this is done.
-
- Note: For icons loaded remotely (i.e. from https://
URIs as opposed to data:
URIs), Firefox will reject icons larger than 10 kilobytes in size.
-
-
-
-
-
-
- Url
- 描述搜尋用的 URL。以 template
屬性指定其搜尋 URL。
- Firefox 支援以下型態的 URL:
-
- type="text/html"
,即是搜尋用的 URL。
- type="application/x-suggestions+json"
,用以取回「搜尋建議」的 URL。
-
-
-
- type="application/x-moz-keywordsearch"
specifies the URL used when a keyword search is entered in the location bar. This is supported only in Firefox.
-
-
-
-
- 這些型態的 URL 都可以使用 {searchTerms}
字串來決定要關鍵字於 URL 中的位置,其他可用的參數請參考OpenSearch 1.1 參數規格 。
-
- 在支援「搜尋建議」的模組中,搜尋的 URL 應可取回一組以 JSON 格式編寫的數據,提供這類服務的詳細方法請見讓搜尋模組支援搜尋建議 。
-
-
-
-
-
-
- Param
- 隨搜尋要求一併送出的參數,每組皆有參數名稱及其值。指定參數時可放入 {searchTerms}
字串來取得使用者輸入的搜尋關鍵字。
-
-
-
- moz:SearchForm
- 搜尋網站的網址,提供 Firefox 使用者不搜尋、直接連到搜尋網站的方法。
-
- 註: 由於此元素非 OpenSearch 標準規格而是 Firefox 獨有,故加上「moz:
」名稱空間,已確保不支援的用戶端能直接跳過此元素。
-
-
-
-自動測知搜尋模組
-
-提供搜尋模組的網站能以「自動測知」的方式,讓 Firefox 使用者輕易安裝搜尋模組,增加使用率。
-
-只要在網頁的 <head>
區段內加上下一行就可以支援自動測知功能:
-
-<link rel="search"
- type="application/opensearchdescription+xml"
- title="searchTitle "
- href="pluginURL ">
-
-
-如上所示地修改上面的粗體字 :
-
-
- searchTitle
- 這是搜尋引擎的名稱,例如「Search MDC」或「雅虎搜尋」等。這個名稱應該與引擎名稱一樣。
-
-
-
- pluginURL
- 瀏覽器可以下載的搜尋引擎 XML 檔案位置。
-
-
-如果網站擁有多種搜尋模組,也可以讓它們全部支援自動測知。例如:
-
-<link rel="search" type="application/opensearchdescription+xml"
- title="MySite: By Author" href="http://example.com/mysiteauthor.xml">
-
-<link rel="search" type="application/opensearchdescription+xml"
- title="MySite: By Title" href="http://example.com/mysitetitle.xml">
-
-
-這樣,網站就能提供以作者或以標題,作為搜尋獨立實體的模組。
-
-讓 OpenSearch 套件自動更新
-
-只要在 Url
元素添加額外的
- application/opensearchdescription+xml
type 屬性,OpenSearch 套件就可以自動更新。rel
屬性需要是 self
、要自動更新的 template 則需要是屬於 OpenSearch 文件的 URL。
-
-例如說:
-
-<Url type="application/opensearchdescription+xml"
- rel="self"
- template="http://example.com/mysearchdescription.xml" />
-
-
-
-
-除錯技巧
-
-如果搜尋套件 XML 發生錯誤,you could run into errors when adding a discovered plugin。如果錯誤訊息沒有用,以下技巧能幫忙找出問題。
-
-
- 供應伺服器 OpenSearch 套件服務的伺服器必須使用 Content-Type: application/opensearchdescription+xml
。
- 確認搜尋套件 XML 的格式正確。你可以直接用 Firefox 載入該檔案。template URL 的 & 符號需要像 &
這樣跳脫,標籤也要用正斜線或 end tag 關閉。
- xmlns
屬性很重要,少了它就會出現「Firefox could not download the search plugin」的錯誤訊息。
- 你必須 包含 text/html
URL:搜尋套件只包含 Atom 或 RSS URL 類型(雖然它有效,但 Firefox 不支援)都可能發生「could not download the search plugin」錯誤。
- 遠端擷取的小圖標(favicon)不能大於 10KB(請參見 {{ Bug(361923) }})。
-
-
-In addition, the search plugin service provides a logging mechanism that may be of use to plugin developers. Use about:config
to set the pref 'browser.search.log
' to true
. Logging information will appear in Firefox's Error Console (Tools 〉 Error Console) when search plugins are added.
-
-參考
-
-
diff --git a/files/zh-tw/web/opensearch/index.md b/files/zh-tw/web/opensearch/index.md
new file mode 100644
index 00000000000000..6c764be337c357
--- /dev/null
+++ b/files/zh-tw/web/opensearch/index.md
@@ -0,0 +1,140 @@
+---
+title: 製作 OpenSearch 搜尋模組
+slug: Web/OpenSearch
+tags:
+ - 待翻譯
+ - 搜尋模組
+translation_of: Web/OpenSearch
+---
+{{AddonSidebar}}
+
+[OpenSearch 描述語法](http://www.opensearch.org/Specifications/OpenSearch/1.1#OpenSearch_description_document)敘述了搜尋引擎,以便網站用戶透過瀏覽器或其他用戶端程式使用之。OpenSearch 支援最新版的 Firefox、Internet Explorer、Safari、Chrome.
+
+Firefox 還支援搜尋建議與 `` 元素……等 OpenSearch 標準內尚未包含的功能。這篇文章會聚焦在如何撰寫可支援 Firefox 特殊功能、且和 OpenSearch 格式相容的搜尋套件。
+
+OpenSearch 描述檔能由網站[自動提示安裝](#.E8.87.AA.E5.8B.95.E6.B8.AC.E7.9F.A5.E6.90.9C.E5.B0.8B.E6.A8.A1.E7.B5.84),或是藉[從網頁安裝搜尋模組](/zh-tw/%e5%be%9e%e7%b6%b2%e9%a0%81%e5%ae%89%e8%a3%9d%e6%90%9c%e5%b0%8b%e6%a8%a1%e7%b5%84)中描述的方式安裝。
+
+## OpenSearch 描述檔
+
+這個描述搜尋引擎的 XML 檔其實很簡單,參考下面的基本樣板,以斜體標示的部分則依需求修改即可。
+
+```xml
+
+ SNK
+ Search engine full name and summary
+ UTF-8
+ data:image/x-icon;base64,AAABAAEAEBAAA ...
+
+
+ ...
+
+
+
+ http://example.com/search
+
+```
+
+- ShortName
+ - : 搜尋引擎簡稱。**Restrictions:** The value must contain 16 or fewer characters of plain text. The value must not contain HTML or other markup.
+- Description
+ - : 搜尋引擎的簡要描述。**Restrictions:** The value must contain 1024 or fewer characters of plain text. The value must not contain HTML or other markup.
+- InputEncoding
+ - : 搜尋引擎資料輸入時的編碼方式,例如說:`UTF-8 `。
+- Image
+ - : URI to an icon representative of the search engine. When possible, search engines should offer a 16×16 image of type "image/x-icon" and a 64×64 image of type `image/jpeg` or `image/png`. The URI may also use the [`data:` URI scheme](/zh-TW/docs/Web/HTTP/data_URIs). You can generate a `data:` URI from an icon file at [The `data:` URI kitchen](http://software.hixie.ch/utilities/cgi/data/data).
+
+ ```xml
+ https://example.com/favicon.ico
+
+ data:image/x-icon;base64,AAABAAEAEBAAA ... DAAA=
+ ```
+
+ Firefox caches the icon as a [base64](https://en.wikipedia.org/wiki/Base64) `data:` URI (search plug-ins are stored in the profile's "searchplugins" folder). `http:` URIs are changed to `data:` URIs when this is done.
+
+ > **備註:** For icons loaded remotely (i.e. from `https://` URIs as opposed to `data:` URIs), Firefox will reject icons larger than 10 kilobytes in size.
+
+ ![Search suggestions from Google displayed in Firefox's search box](searchsuggestionsample.png)
+- **Url**
+ - : 描述搜尋用的 URL。以 `template` 屬性指定其搜尋 URL。Firefox 支援以下型態的 URL:
+
+ - `type="text/html"`,即是搜尋用的 URL。
+ - `type="application/x-suggestions+json"`,用以取回「搜尋建議」的 URL。
+ - `type="application/x-moz-keywordsearch"` specifies the URL used when a keyword search is entered in the location bar. This is supported only in Firefox.
+
+ 這些型態的 URL 都可以使用 `{searchTerms}` 字串來決定要關鍵字於 URL 中的位置,其他可用的參數請參考 [OpenSearch 1.1 參數規格](https://github.com/dewitt/opensearch/blob/master/opensearch-1-1-draft-6.md#opensearch-11-parameters)。
+
+ 在支援「搜尋建議」的模組中,搜尋的 URL 應可取回一組以 JSON 格式編寫的數據,提供這類服務的詳細方法請見[讓搜尋模組支援搜尋建議](/zh-tw/%e8%ae%93%e6%90%9c%e5%b0%8b%e6%a8%a1%e7%b5%84%e6%94%af%e6%8f%b4%e6%90%9c%e5%b0%8b%e5%bb%ba%e8%ad%b0)。
+- Param
+ - : 隨搜尋要求一併送出的參數,每組皆有參數名稱及其值。指定參數時可放入 `{searchTerms}` 字串來取得使用者輸入的搜尋關鍵字。
+- moz:SearchForm
+ - : 搜尋網站的網址,提供 Firefox 使用者不搜尋、直接連到搜尋網站的方法。
+
+ > **備註:** 由於此元素非 OpenSearch 標準規格而是 Firefox 獨有,故加上「`moz:`」名稱空間,已確保不支援的用戶端能直接跳過此元素。
+
+## 自動測知搜尋模組
+
+提供搜尋模組的網站能以「自動測知」的方式,讓 Firefox 使用者輕易安裝搜尋模組,增加使用率。
+
+只要在網頁的 `` 區段內加上下一行就可以支援自動測知功能:
+
+```html
+
+```
+
+如上所示地修改上面的**粗體字** :
+
+- **searchTitle**
+ - : 這是搜尋引擎的名稱,例如「Search MDC」或「雅虎搜尋」等。這個名稱應該與引擎名稱一樣。
+- **pluginURL**
+ - : 瀏覽器可以下載的搜尋引擎 XML 檔案位置。
+
+如果網站擁有多種搜尋模組,也可以讓它們全部支援自動測知。例如:
+
+```html
+
+
+
+```
+
+這樣,網站就能提供以作者或以標題,作為搜尋獨立實體的模組。
+
+## 讓 OpenSearch 套件自動更新
+
+只要在 `Url` 元素添加額外的
+`application/opensearchdescription+xml` type 屬性,OpenSearch 套件就可以自動更新。`rel` 屬性需要是 `self`、要自動更新的 template 則需要是屬於 OpenSearch 文件的 URL。
+
+例如說:
+
+```xml
+
+```
+
+> **備註:** 目前的[addons.mozilla.org](http://addons.mozilla.org)(AMO)不支援自動更新 OpenSearch 套件。如果要把搜尋套件放到 AMO,請不要用上自動更新的功能。
+
+## 除錯技巧
+
+如果搜尋套件 XML 發生錯誤,you could run into errors when adding a discovered plugin。如果錯誤訊息沒有用,以下技巧能幫忙找出問題。
+
+- 供應伺服器 OpenSearch 套件服務的伺服器必須使用 `Content-Type: application/opensearchdescription+xml`。
+- 確認搜尋套件 XML 的格式正確。你可以直接用 Firefox 載入該檔案。template URL 的 & 符號需要像 `&` 這樣跳脫,標籤也要用正斜線或 end tag 關閉。
+- `xmlns` 屬性很重要,少了它就會出現「Firefox could not download the search plugin」的錯誤訊息。
+- 你**必須**包含 `text/html` URL:搜尋套件只包含 Atom 或 [RSS](/zh-TW/RSS) URL 類型(雖然它有效,但 Firefox 不支援)都可能發生「could not download the search plugin」錯誤。
+- 遠端擷取的小圖標(favicon)不能大於 10KB(請參見 {{ Bug(361923) }})。
+
+In addition, the search plugin service provides a logging mechanism that may be of use to plugin developers. Use `about:config` to set the pref '`browser.search.log`' to `true`. Logging information will appear in Firefox's [Error Console](/zh-TW/Error_Console) (Tools 〉 Error Console) when search plugins are added.
+
+## 參考
+
+- [OpenSearch Documentation](http://opensearch.org/), [OpenSearch Documentation about the Url and Param element](http://www.opensearch.org/Specifications/OpenSearch/Extensions/Parameter/1.0)
+- imdb.com has a [working osd.xml](http://i.media-imdb.com/images/SFccbe1e4d909ef8b8077201c3c5aac349/imdbsearch.xml)
+- [`data:` URI scheme](http://en.wikipedia.org/wiki/Data:_URI_scheme)
+- [OpenSearch Plugin Generator](http://www.7is7.com/software/firefox/opensearch.html)
+- [Ready2Search](http://ready.to/search/en) - create OpenSearch plugins. [Customized Search through Ready2Search](http://ready.to/search/make/en_make_plugin.htm)
diff --git a/files/zh-tw/web/performance/index.html b/files/zh-tw/web/performance/index.html
deleted file mode 100644
index 5c7a2eb3af6392..00000000000000
--- a/files/zh-tw/web/performance/index.html
+++ /dev/null
@@ -1,482 +0,0 @@
----
-title: 網路性能
-slug: Web/Performance
-tags:
- - API
- - HTML
- - Mobile Performance
- - Performance
-translation_of: Web/Performance
-original_slug: Web/性能
----
-Web性能是負載時間和運行時的客觀度量和用戶體驗。Web性能是指站點加載、交互和回應所需的時間,以及用戶交互過程中內容的流暢程度——滾動是否流暢?按鈕可點擊嗎?彈出窗口加載和顯示的速度是否很快?它們的動畫是否流暢?Web性能包括加載時間、每秒幀數和交互時間等客觀度量,以及加載內容所需時間的主觀體驗。
-
-一個站點的回應時間越長,就會有越多的用戶放棄這個站點。重要的是最小化加載和回應時間,並添加額外的特性來隱藏延遲,使體驗盡可能快地可用並具有交互性,同時非同步地加載體驗的較長尾部分。
-
-
-
-
-
-
-
-有一些工具、api和最佳實踐可以幫助我們度量和改進web性能。我們將在本節介紹它們:
-
-在這一節中
-
-{{LandingPageListSubpages}}
-
-
-
-
選定的教程
-
-
MDN網路性能學習領域包含現代的、最新的教程,涵蓋性能要點:
-
-
-
-
-
-
-
-
什麼是網路性能
-
-
-
-
本文首先介紹了性能實際上是什麼—包括在考慮性能時需要考慮的工具、指標、api、網路和人員組,以及如何將性能作為web開發工作流的一部分。
-
-
-
-
網路性能基本知識
-
-
-
-
除了HTML、CSS、JavaScript和媒體檔的前端組件外,還有一些特性可以使應用程式變慢,也有一些特性可以使應用程式主觀上和客觀上變得更快。與web性能相關的api、開發工具、最佳實踐和不良實踐有很多。在這裏,我們將介紹許多基本級別的特性,並提供到更深層次的鏈接,以提高每個主題的性能。
-
-
-
-
用戶如何看待性能?
-
-
-
-
比你的網站在幾毫秒內有多快更重要的是你的用戶認為你的網站有多快。頁面加載時間、空閒時間、對用戶交互的回應以及滾動和其他動畫的流暢性都會影響這些感知。在本文中,我們將討論各種加載指標、動畫和回應性指標,以及改進用戶感知的最佳實踐(如果不是實際計時本身)。
-
-
-
-
-
-
-
-
多媒體:圖像和視頻
-
-
-
-
通常,媒體優化是web性能的最低掛果。根據每個用戶代理的功能、大小和像素密度提供不同的媒體檔是可能的。額外的技巧,比如從背景圖像中刪除音軌,可以進一步提高性能。在本文中,我們將討論視頻、音頻和圖像內容對性能的影響,以及確保影響盡可能小的方法。
-
-
-
-
CSS性能特性
-
-
-
-
對於改進性能,CSS可能不是很重要的優化重點,但是有一些CSS特性對性能的影響更大。在本文中,我們將介紹一些影響性能的CSS屬性,並介紹一些處理樣式的方法,以確保不會對性能造成負面影響。
-
-
-
-
-
-
-
使用性能api
-
-
-
- 性能的API
-
-
-
- 本指南描述了如何使用高解析度時間標準中定義的性能介面。
-
-
-
- 資源時機API
-
-
-
- 資源加載和這些資源的加載計時,包括管理資源緩衝區和處理CORS
-
-
-
- 表演時間
-
-
-
- 性能時間軸標準定義了對性能介面的擴展,以支持應用程式中的客戶端延遲測量。這些介面可以一起用來幫助確定應用程式的性能瓶頸。
-
-
-
- 用戶時間API
-
-
-
- 使用用戶計時API的“標記”和“度量”條目類型來創建特定於應用程式的時間戳——這是流覽器性能時間表的一部分。
-
-
-
- 幀定時API
-
-
-
- PerformanceFrameTiming介面提供有關流覽器事件迴圈的幀計時數據。
-
-
-
- 燈塔API
-
-
-
- 信標介面將非同步和非阻塞請求調度到web伺服器。
-
-
-
- 十字路口觀察者API
-
-
-
- 學習使用交集觀察者API對元素的可見性進行計時,並在感興趣的元素變得可見時得到非同步通知。
-
-
-
-
其他文檔
-
-
-
- 開發工具性能特性
-
-
-
- 本節提供有關如何使用和理解開發人員工具(包括瀑布圖、調用樹圖和火焰圖)中的性能特性的資訊。
-
-
-
- 理解延遲
-
-
-
- 延遲是指從流覽器請求資源到流覽器返回請求的資源的第一個位元組之間所花費的時間。本文將解釋延遲是什麼、它如何影響性能、如何度量延遲以及如何減少延遲。
-
-
-
-
-
-術語表
-
-
-
- {{glossary('Beacon')}}
- {{glossary('Brotli compression')}}
- {{glossary('Client hints')}}
- {{glossary('Code splitting')}}
- {{glossary('CSSOM')}}
- {{glossary('Domain sharding')}}
- {{glossary('Effective connection type')}}
- {{glossary('First contentful paint')}}
- {{glossary('First CPU idle')}}
- {{glossary('First input delay')}}
- {{glossary('First interactive')}}
- {{glossary('First meaningful paint')}}
- {{glossary('First paint')}}
- {{glossary('HTTP')}}
- {{glossary('HTTP_2', 'HTTP/2')}}
- {{glossary('Jank')}}
- {{glossary('Latency')}}
- {{glossary('Lazy load')}}
- {{glossary('Long task')}}
- {{glossary('Lossless compression')}}
- {{glossary('Lossy compression')}}
- {{glossary('Main thread')}}
- {{glossary('Minification')}}
- {{glossary('Network throttling')}}
- {{glossary('Packet')}}
- {{glossary('Page load time')}}
- {{glossary('Page prediction')}}
- {{glossary('Parse')}}
- {{glossary('Perceived performance')}}
- {{glossary('Prefetch')}}
- {{glossary('Prerender')}}
- {{glossary('QUIC')}}
- {{glossary('RAIL')}}
- {{glossary('Real User Monitoring')}}
- {{glossary('Resource Timing')}}
- {{glossary('Round Trip Time (RTT)')}}
- {{glossary('Server Timing')}}
- {{glossary('Speculative parsing')}}
- {{glossary('Speed index')}}
- {{glossary('SSL')}}
- {{glossary('Synthetic monitoring')}}
- {{glossary('TCP handshake')}}
- {{glossary('TCP slow start')}}
- {{glossary('Time to first byte')}}
- {{glossary('Time to interactive')}}
- {{glossary('TLS')}}
- {{glossary('TCP', 'Transmission Control Protocol (TCP)')}}
- {{glossary('Tree shaking')}}
- {{glossary('Web performance')}}
-
-
-
-檔有待書寫
-
-
-
- JavaScript性能最佳實踐
-
-
-
- 如果使用得當,JavaScript可以提供互動式的、沉浸式的web體驗……或者它會嚴重影響下載時間、渲染時間、應用程式性能、電池壽命和用戶體驗。本文概述了一些JavaScript最佳實踐,這些實踐可以確保即使是複雜內容的性能也是最高的。
-
-
-
- 手機的性能
-
-
-
- 隨著移動設備上的web訪問變得如此流行,所有的移動平臺都有成熟的web流覽器,但是帶寬、CPU和電池壽命可能有限,因此考慮在這些平臺上web內容的性能非常重要。本文還討論了特定於移動設備的性能注意事項。
-
-
- 性能瓶頸
-
-
-
-
-
-
-
- 理解帶寬
-
-
-
- 帶寬是每秒可以發送的以兆(Mb)或千比特(Kb)為單位的數據量。本文解釋了帶寬在富媒體internet應用程式中的作用,如何度量它,以及如何優化應用程式以最大限度地利用可用帶寬。
-
-
-
- HTTP / 2和你
-
-
-
- 傳輸層(即HTTP)對web的功能至關重要,直到最近才以HTTP/2的形式出現重大更新。與它的前輩相比,HTTP/2提供了許多開箱即用的性能改進和優勢,但它也改變了環境。在本文中,您將瞭解HTTP/2為您做了什麼,以及如何對應用程式進行調優,使其更進一步。
-
-
-
-
-
-
-
- TLS在性能中的作用
-
-
-
- 在創建安全的用戶體驗時,tlls(我們傾向於稱之為HTTPS)是至關重要的。雖然硬體已經減少了TLS對伺服器性能的負面影響,但它仍然占了我們等待流覽器連接到伺服器所用時間的很大一部分。本文解釋了TLS握手過程,並提供了一些減少這種時間的技巧,如OCSP裝訂、HSTS預加載頭,以及資源提示在掩蓋第三方TLS延遲方面的潛在作用。
-
-
-
-
-
-
-
- 讀性能圖表
-
-
-
- 開發人員工具提供有關性能、記憶體和網路請求的資訊。瞭解如何在流覽器開發人員工具中讀取瀑布圖、調用樹、跟蹤、火焰圖和分配,將有助於您在其他性能工具中理解瀑布圖和火焰圖。
-
-
-
- 分析JavaScript包
-
-
-
- 毫無疑問,JavaScript是現代web開發的重要組成部分。雖然您應該始終努力減少應用程式中使用的JavaScript的數量,但是很難知道從哪里開始。在本指南中,我們將向您展示如何分析應用程式的腳本包,以便您瞭解自己在使用什麼,以及如何檢測應用程式是否包含包之間的重複腳本。
-
-
-
- 延遲加載
-
-
-
- 在初始頁面加載時加載所有web應用程式資產並不總是必要的。延遲加載是將頁面上的資產(如腳本、圖像等)的加載延遲到以後的某個時間點。當這些資產確實需要的時候。
-
-
- 使用import()延遲加載JavaScript
-
-
-
- 術語“延遲加載”通常指加載時不需要的資產的延遲加載技術,例如僅在圖像滾動到視圖中時才加載折疊下麵的圖像。現在有了加載JavaScript的本地特性!在本指南中,我們將討論dynamic import()語句,這是一個較新的流覽器特性,可以根據需要加載JavaScript模組。
-
-
-
- 使用資源提示控制資源交付
-
-
-
- 當涉及到資源優先順序和交付時,流覽器通常比我們更清楚,但是他們離clairyovant還很遠。本地流覽器特性使我們能夠在流覽器連接到另一個伺服器時提示它,或者在流覽器知道它需要資源之前預加載資源。如果使用得當,這可以讓快速體驗看起來更快。在本文中,我們將介紹一些本地流覽器特性,如rel=preconnect、rel=dn -prefetch、rel=prefetch和rel=preload,以及如何充分利用它們。
-
-
-
- 績效預算
-
-
-
- 市場行銷、設計和銷售需求,以及開發人員的經驗,通常是廣告膨脹、第三方腳本和其他會降低web性能的特性。為了幫助設置優先順序,最好設置一個性能預算:一組在開發階段不能超過的限制。在本文中,我們將討論如何創建和堅持性能預算。
-
-
-
- 網路性能檢查表
-
-
-
- 在開發帶有如何實現每個特性的教程鏈接的應用程式時,需要考慮的特性性能檢查表,包括服務人員、診斷性能問題、字體加載最佳實踐、客戶端提示、創建性能動畫等。
-
-
-
- 手機性能檢查表
-
-
-
- 影響移動網路用戶在手持電池操作設備上的性能考慮的簡明清單。
-
-
-
-應用程式的性能
-
-
-
- 性能的基礎
-
-
-
- 對Web應用程式性能的廣泛概述,它是什麼,流覽器如何幫助改進它,以及您可以使用什麼工具和流程來測試和進一步改進它。
-
-
-
- 優化啟動性能
-
-
-
- 在編寫新應用程式和將應用程式從其他平臺移植到Web上時,幫助您提高啟動性能的技巧和建議。
-
-
-
- 使用內置的剖析器進行剖析
-
-
-
- 瞭解如何使用Firefox的內置分析器分析應用程式性能。
-
-
-
- CSS和JavaScript動畫性能
-
-
-
- 動畫是一個愉快的用戶體驗的關鍵。本文討論了CSS和基於javascript的動畫之間的性能差異
-
- .
-
-
-
-
-See also
-
-HTML
-
-
-
-CSS
-
-
- will-change
- GPU v CPU
- Measuring layout
- Font-loading best practices
-
-
-JavaScript
-
-
-
-APIs
-
-
-
-Headers
-
-
-
-Tools
-
-
-
-Additional Metrics
-
-
- Speed Index and Perceptual Speed Index
-
-
-Best Practices
-
-
diff --git a/files/zh-tw/web/performance/index.md b/files/zh-tw/web/performance/index.md
new file mode 100644
index 00000000000000..7400bf2b266f21
--- /dev/null
+++ b/files/zh-tw/web/performance/index.md
@@ -0,0 +1,224 @@
+---
+title: 網路性能
+slug: Web/Performance
+original_slug: Web/性能
+---
+Web 性能是負載時間和運行時的客觀度量和用戶體驗。Web 性能是指站點加載、交互和回應所需的時間,以及用戶交互過程中內容的流暢程度——滾動是否流暢?按鈕可點擊嗎?彈出窗口加載和顯示的速度是否很快?它們的動畫是否流暢?Web 性能包括加載時間、每秒幀數和交互時間等客觀度量,以及加載內容所需時間的主觀體驗。
+
+一個站點的回應時間越長,就會有越多的用戶放棄這個站點。重要的是最小化加載和回應時間,並添加額外的特性來隱藏延遲,使體驗盡可能快地可用並具有交互性,同時非同步地加載體驗的較長尾部分。
+
+有一些工具、api 和最佳實踐可以幫助我們度量和改進 web 性能。我們將在本節介紹它們:
+
+## 在這一節中
+
+{{LandingPageListSubpages}}
+
+## 選定的教程
+
+MDN 網路性能學習領域包含現代的、最新的教程,涵蓋性能要點:
+
+- 什麼是網路性能
+ - : 本文首先介紹了性能實際上是什麼—包括在考慮性能時需要考慮的工具、指標、api、網路和人員組,以及如何將性能作為 web 開發工作流的一部分。
+- 網路性能基本知識
+ - : 除了 HTML、CSS、JavaScript 和媒體檔的前端組件外,還有一些特性可以使應用程式變慢,也有一些特性可以使應用程式主觀上和客觀上變得更快。與 web 性能相關的 api、開發工具、最佳實踐和不良實踐有很多。在這裏,我們將介紹許多基本級別的特性,並提供到更深層次的鏈接,以提高每個主題的性能。
+- 用戶如何看待性能?
+ - : 比你的網站在幾毫秒內有多快更重要的是你的用戶認為你的網站有多快。頁面加載時間、空閒時間、對用戶交互的回應以及滾動和其他動畫的流暢性都會影響這些感知。在本文中,我們將討論各種加載指標、動畫和回應性指標,以及改進用戶感知的最佳實踐(如果不是實際計時本身)。
+- 多媒體:圖像和視頻
+ - : 通常,媒體優化是 web 性能的最低掛果。根據每個用戶代理的功能、大小和像素密度提供不同的媒體檔是可能的。額外的技巧,比如從背景圖像中刪除音軌,可以進一步提高性能。在本文中,我們將討論視頻、音頻和圖像內容對性能的影響,以及確保影響盡可能小的方法。
+- CSS 性能特性
+ - : 對於改進性能,CSS 可能不是很重要的優化重點,但是有一些 CSS 特性對性能的影響更大。在本文中,我們將介紹一些影響性能的 CSS 屬性,並介紹一些處理樣式的方法,以確保不會對性能造成負面影響。
+
+## 使用性能 api
+
+- 性能的 API
+ - : 本指南描述了如何使用高解析度時間標準中定義的性能介面。
+- 資源時機 API
+ - : 資源加載和這些資源的加載計時,包括管理資源緩衝區和處理 CORS
+- 表演時間
+ - : 性能時間軸標準定義了對性能介面的擴展,以支持應用程式中的客戶端延遲測量。這些介面可以一起用來幫助確定應用程式的性能瓶頸。
+- 用戶時間 API
+ - : 使用用戶計時 API 的“標記”和“度量”條目類型來創建特定於應用程式的時間戳——這是流覽器性能時間表的一部分。
+- 幀定時 API
+ - : PerformanceFrameTiming 介面提供有關流覽器事件迴圈的幀計時數據。
+- 燈塔 API
+ - : 信標介面將非同步和非阻塞請求調度到 web 伺服器。
+- 十字路口觀察者 API
+ - : 學習使用交集觀察者 API 對元素的可見性進行計時,並在感興趣的元素變得可見時得到非同步通知。
+
+## 其他文檔
+
+- 開發工具性能特性
+ - : 本節提供有關如何使用和理解開發人員工具(包括瀑布圖、調用樹圖和火焰圖)中的性能特性的資訊。
+- 理解延遲
+ - : 延遲是指從流覽器請求資源到流覽器返回請求的資源的第一個位元組之間所花費的時間。本文將解釋延遲是什麼、它如何影響性能、如何度量延遲以及如何減少延遲。
+
+## 術語表
+
+- {{glossary('Beacon')}}
+- {{glossary('Brotli compression')}}
+- {{glossary('Client hints')}}
+- {{glossary('Code splitting')}}
+- {{glossary('CSSOM')}}
+- {{glossary('Domain sharding')}}
+- {{glossary('Effective connection type')}}
+- {{glossary('First contentful paint')}}
+- {{glossary('First CPU idle')}}
+- {{glossary('First input delay')}}
+- {{glossary('First interactive')}}
+- {{glossary('First meaningful paint')}}
+- {{glossary('First paint')}}
+- {{glossary('HTTP')}}
+- {{glossary('HTTP_2', 'HTTP/2')}}
+- {{glossary('Jank')}}
+- {{glossary('Latency')}}
+- {{glossary('Lazy load')}}
+- {{glossary('Long task')}}
+- {{glossary('Lossless compression')}}
+- {{glossary('Lossy compression')}}
+- {{glossary('Main thread')}}
+- {{glossary('Minification')}}
+- {{glossary('Network throttling')}}
+- {{glossary('Packet')}}
+- {{glossary('Page load time')}}
+- {{glossary('Page prediction')}}
+- {{glossary('Parse')}}
+- {{glossary('Perceived performance')}}
+- {{glossary('Prefetch')}}
+- {{glossary('Prerender')}}
+- {{glossary('QUIC')}}
+- {{glossary('RAIL')}}
+- {{glossary('Real User Monitoring')}}
+- {{glossary('Resource Timing')}}
+- {{glossary('Round Trip Time (RTT)')}}
+- {{glossary('Server Timing')}}
+- {{glossary('Speculative parsing')}}
+- {{glossary('Speed index')}}
+- {{glossary('SSL')}}
+- {{glossary('Synthetic monitoring')}}
+- {{glossary('TCP handshake')}}
+- {{glossary('TCP slow start')}}
+- {{glossary('Time to first byte')}}
+- {{glossary('Time to interactive')}}
+- {{glossary('TLS')}}
+- {{glossary('TCP', 'Transmission Control Protocol (TCP)')}}
+- {{glossary('Tree shaking')}}
+- {{glossary('Web performance')}}
+
+## 檔有待書寫
+
+- JavaScript 性能最佳實踐
+ - : 如果使用得當,JavaScript 可以提供互動式的、沉浸式的 web 體驗……或者它會嚴重影響下載時間、渲染時間、應用程式性能、電池壽命和用戶體驗。本文概述了一些 JavaScript 最佳實踐,這些實踐可以確保即使是複雜內容的性能也是最高的。
+- 手機的性能
+ - : 隨著移動設備上的 web 訪問變得如此流行,所有的移動平臺都有成熟的 web 流覽器,但是帶寬、CPU 和電池壽命可能有限,因此考慮在這些平臺上 web 內容的性能非常重要。本文還討論了特定於移動設備的性能注意事項。
+- 理解帶寬
+ - : 帶寬是每秒可以發送的以兆(Mb)或千比特(Kb)為單位的數據量。本文解釋了帶寬在富媒體 internet 應用程式中的作用,如何度量它,以及如何優化應用程式以最大限度地利用可用帶寬。
+- HTTP / 2 和你
+ - : 傳輸層(即 HTTP)對 web 的功能至關重要,直到最近才以 HTTP/2 的形式出現重大更新。與它的前輩相比,HTTP/2 提供了許多開箱即用的性能改進和優勢,但它也改變了環境。在本文中,您將瞭解 HTTP/2 為您做了什麼,以及如何對應用程式進行調優,使其更進一步。
+- TLS 在性能中的作用
+ - : 在創建安全的用戶體驗時,tlls(我們傾向於稱之為 HTTPS)是至關重要的。雖然硬體已經減少了 TLS 對伺服器性能的負面影響,但它仍然占了我們等待流覽器連接到伺服器所用時間的很大一部分。本文解釋了 TLS 握手過程,並提供了一些減少這種時間的技巧,如 OCSP 裝訂、HSTS 預加載頭,以及資源提示在掩蓋第三方 TLS 延遲方面的潛在作用。
+- 讀性能圖表
+ - : 開發人員工具提供有關性能、記憶體和網路請求的資訊。瞭解如何在流覽器開發人員工具中讀取瀑布圖、調用樹、跟蹤、火焰圖和分配,將有助於您在其他性能工具中理解瀑布圖和火焰圖。
+- 分析 JavaScript 包
+ - : 毫無疑問,JavaScript 是現代 web 開發的重要組成部分。雖然您應該始終努力減少應用程式中使用的 JavaScript 的數量,但是很難知道從哪里開始。在本指南中,我們將向您展示如何分析應用程式的腳本包,以便您瞭解自己在使用什麼,以及如何檢測應用程式是否包含包之間的重複腳本。
+- 延遲加載
+ - : 在初始頁面加載時加載所有 web 應用程式資產並不總是必要的。延遲加載是將頁面上的資產(如腳本、圖像等)的加載延遲到以後的某個時間點。當這些資產確實需要的時候。
+- 使用 import()延遲加載 JavaScript
+ - : 術語“延遲加載”通常指加載時不需要的資產的延遲加載技術,例如僅在圖像滾動到視圖中時才加載折疊下麵的圖像。現在有了加載 JavaScript 的本地特性!在本指南中,我們將討論 dynamic import()語句,這是一個較新的流覽器特性,可以根據需要加載 JavaScript 模組。
+- 使用資源提示控制資源交付
+ - : 當涉及到資源優先順序和交付時,流覽器通常比我們更清楚,但是他們離 clairyovant 還很遠。本地流覽器特性使我們能夠在流覽器連接到另一個伺服器時提示它,或者在流覽器知道它需要資源之前預加載資源。如果使用得當,這可以讓快速體驗看起來更快。在本文中,我們將介紹一些本地流覽器特性,如 rel=preconnect、rel=dn -prefetch、rel=prefetch 和 rel=preload,以及如何充分利用它們。
+- 績效預算
+ - : 市場行銷、設計和銷售需求,以及開發人員的經驗,通常是廣告膨脹、第三方腳本和其他會降低 web 性能的特性。為了幫助設置優先順序,最好設置一個性能預算:一組在開發階段不能超過的限制。在本文中,我們將討論如何創建和堅持性能預算。
+- 網路性能檢查表
+ - : 在開發帶有如何實現每個特性的教程鏈接的應用程式時,需要考慮的特性性能檢查表,包括服務人員、診斷性能問題、字體加載最佳實踐、客戶端提示、創建性能動畫等。
+- 手機性能檢查表
+ - : 影響移動網路用戶在手持電池操作設備上的性能考慮的簡明清單。
+
+### 應用程式的性能
+
+- 性能的基礎
+ - : 對 Web 應用程式性能的廣泛概述,它是什麼,流覽器如何幫助改進它,以及您可以使用什麼工具和流程來測試和進一步改進它。
+- 優化啟動性能
+ - : 在編寫新應用程式和將應用程式從其他平臺移植到 Web 上時,幫助您提高啟動性能的技巧和建議。
+- 使用內置的剖析器進行剖析
+ - : 瞭解如何使用 Firefox 的內置分析器分析應用程式性能。
+- CSS 和 JavaScript 動畫性能
+ - : 動畫是一個愉快的用戶體驗的關鍵。本文討論了 CSS 和基於 javascript 的動畫之間的性能差異
+
+## See also
+
+HTML
+
+- [The `` Element](/zh-TW/docs/Web/HTML/Element/picture)
+- [The `` Element](/zh-TW/docs/Web/HTML/Element/video)
+- [The `` Element](/zh-TW/docs/Web/HTML/Element/source)
+- [The ` srcset` attribute](/zh-TW/docs/Web/HTML/Element/img#Attributes)
+
+ - [Responsive images](/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+
+- [Preloading content with `rel="preload"`](/zh-TW/docs/Web/HTML/Preloading_content) - [(https://w3c.github.io/preload/ ](https://w3c.github.io/preload/))
+
+CSS
+
+- [will-change](/zh-TW/docs/Web/CSS/will-change)
+- GPU v CPU
+- Measuring layout
+- Font-loading best practices
+
+JavaScript
+
+- [DOMContentLoaded](/zh-TW/docs/Web/Events/DOMContentLoaded)
+- [Garbage collection](/zh-TW/docs/Glossary/Garbage_collection)
+- [requestAnimationFrame](/zh-TW/docs/Web/API/window/requestAnimationFrame)
+
+APIs
+
+- [Performance API](/zh-TW/docs/Web/API/Performance_API)
+- [Navigation Timing API](/zh-TW/docs/Web/API/Navigation_timing_API)
+- [Media Capabilities API](/zh-TW/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API)
+- [Network Information API](/zh-TW/docs/Web/API/Network_Information_API)
+- [PerformanceNavigationTiming](/zh-TW/docs/Web/API/PerformanceNavigationTiming)
+- [Battery Status API](/zh-TW/docs/Web/API/Battery_Status_API)
+- [Navigator.deviceMemory](/zh-TW/docs/Web/API/Navigator/deviceMemory)
+- [Intersection Observer](/zh-TW/docs/Web/API/Intersection_Observer_API)
+- [Using the User Timing AP](/zh-TW/docs/Web/API/User_Timing_API/Using_the_User_Timing_API)I
+- [Long Tasks API](/zh-TW/docs/Web/API/Long_Tasks_API)
+- [High Resolution Timing API](/zh-TW/docs/Web/API/DOMHighResTimeStamp) ([https://w3c.github.io/hr-time/)](https://w3c.github.io/hr-time/)
+- [Resource Timing API](/zh-TW/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API)
+- [Page Visibility](/zh-TW/docs/Web/API/Page_Visibility_API)
+- [Cooperative Scheduling of Background Tasks API](/zh-TW/docs/Web/API/Background_Tasks_API)
+
+ - [requestIdleCallback()](/zh-TW/docs/Web/API/Window/requestIdleCallback)
+
+- [Beacon API](/zh-TW/docs/Web/API/Beacon_API/Using_the_Beacon_API)
+- Resource Hints - [dns-prefetch](/zh-TW/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control), preconnect, [prefetch](/zh-TW/docs/Web/HTTP/Link_prefetching_FAQ), and prerender
+- [Fetchevent.navigationPreload](/zh-TW/docs/Web/API/FetchEvent/navigationPreload)
+- [Performance Server Timing API](/zh-TW/docs/Web/API/PerformanceServerTiming)
+
+Headers
+
+- [Content-encoding](/zh-TW/docs/Web/HTTP/Headers/Content-Encoding)
+- HTTP/2
+- [gZip](/zh-TW/docs/Glossary/GZip_compression)
+- Client Hints
+
+Tools
+
+- [Performance in Firefox Developer Tools](/zh-TW/docs/Tools/Performance)
+- Flame charts
+- The Network panel
+- Waterfall charts
+
+Additional Metrics
+
+- Speed Index and Perceptual Speed Index
+
+Best Practices
+
+- [Using Service Workers](/zh-TW/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- [Using Web Workers](/zh-TW/docs/Web/API/Web_Workers_API/Using_web_workers)
+
+ - [Web Workers API](/zh-TW/docs/Web/API/Web_Workers_API)
+
+- [PWA](/zh-TW/docs/Web/Apps/Progressive/Offline_Service_workers)
+- [Caching](/zh-TW/docs/Web/HTTP/Caching)
+- Content Delivery Networks (CDN)
diff --git a/files/zh-tw/web/progressive_web_apps/index.html b/files/zh-tw/web/progressive_web_apps/index.html
deleted file mode 100644
index 88ce434c3ae5d3..00000000000000
--- a/files/zh-tw/web/progressive_web_apps/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: 漸進式網絡應用程式
-slug: Web/Progressive_web_apps
-tags:
- - Apps
- - Modern web apps
- - NeedsTranslation
- - Progressive web apps
- - TopicStub
-translation_of: Web/Progressive_web_apps
----
-漸進式網絡應用程式(Progressive web app)使用當代 web API,並以漸進增強策略,建立跨平台 web 應用程式。 這些程式提供了能讓用戶體驗,逼近於原生程式的功能。這套文件將講述你需要知道的一切。
-
-PWA 優勢
-
-PWA 應該要可探索、可安裝、可連結、可獨立於網路、可漸進、可接合、響應式、以及安全(discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, safe)。需要有關這方面的理解,請參閱漸進式網絡應用程式的優勢 。如果需要實作細節,請參考以下章節表列的教學。
-
-PWA 核心教學
-
-以下教學將以簡單例子告訴你,在實作 PWA 時所需要的東西,並講述一切如何運行。
-
-
- 漸進式網絡應用程式簡介
- 漸進式網絡應用程式架構
- 使用 Service worker 讓 PWA 能離線工作
- 如何令 PWA 可安裝
- 如何使用 Notifications 與 Push 令 PWA 可重連線
- 漸進式載入
-
-
-
-
-
-
-
工具
-
-
- localForage :讓用戶端儲存變簡單的輕量化 JavaScript 函式庫。預設上使用 IndexedDB,必要時則改用 SQL/Web 儲存。
- ServiceWorkerWare — an Express-like microframework for easy Service Worker development.
- oghliner — not only a template but a tool for deploying Offline Web Apps to GitHub Pages.
- sw-precache — a node module to generate service worker code that will precache specific resources.
- workbox — spiritual successor to sw-precache with more advanced caching strategies and easy precaching.
- upup — a tiny script that makes sure your site is always there for your users.
- The service worker cookbook — A series of excellent service worker/push recipes, showing how to implement an offline app, but also much more.
-
-
-
-
-參見
-
-
diff --git a/files/zh-tw/web/progressive_web_apps/index.md b/files/zh-tw/web/progressive_web_apps/index.md
new file mode 100644
index 00000000000000..9f7e1b87a74725
--- /dev/null
+++ b/files/zh-tw/web/progressive_web_apps/index.md
@@ -0,0 +1,61 @@
+---
+title: 漸進式網絡應用程式
+slug: Web/Progressive_web_apps
+tags:
+ - Apps
+ - Modern web apps
+ - NeedsTranslation
+ - Progressive web apps
+ - TopicStub
+translation_of: Web/Progressive_web_apps
+---
+漸進式網絡應用程式(Progressive web app)使用當代 web API,並以漸進增強策略,建立跨平台 web 應用程式。 這些程式提供了能讓用戶體驗,逼近於原生程式的功能。這套文件將講述你需要知道的一切。
+
+## PWA 優勢
+
+PWA 應該要可探索、可安裝、可連結、可獨立於網路、可漸進、可接合、響應式、以及安全(discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, safe)。需要有關這方面的理解,請參閱[漸進式網絡應用程式的優勢](/zh-TW/docs/Web/Apps/Progressive/Advantages)。如果需要實作細節,請參考以下章節表列的教學。
+
+## PWA 核心教學
+
+以下教學將以簡單例子告訴你,在實作 PWA 時所需要的東西,並講述一切如何運行。
+
+1. [漸進式網絡應用程式簡介](/zh-TW/docs/Web/Apps/Progressive/Introduction)
+2. [漸進式網絡應用程式架構](/zh-TW/docs/Web/Apps/Progressive/App_structure)
+3. [使用 Service worker 讓 PWA 能離線工作](/zh-TW/docs/Web/Apps/Progressive/Offline_Service_workers)
+4. [如何令 PWA 可安裝](/zh-TW/docs/Web/Apps/Progressive/Installable_PWAs)
+5. [如何使用 Notifications 與 Push 令 PWA 可重連線](/zh-TW/docs/Web/Apps/Progressive/Re-engageable_Notifications_Push)
+6. [漸進式載入](/zh-TW/docs/Web/Apps/Progressive/Loading)
+
+## 技術教學
+
+- [用戶端儲存](/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage):展示如何與何時使用 web storage、IndexedDB、service worker 的長篇教學。
+- [使用 service worker](/zh-TW/docs/Web/API/Service_Worker_API/Using_Service_Workers):涵蓋 Service Worker API 的深入教學
+- [使用 IndexedDB](/zh-TW/docs/Web/API/IndexedDB_API/Using_IndexedDB):詳細解釋 IndexedDB 的基礎。
+- [使用 Web Storage API](/zh-TW/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API):讓 Web storage API 變得簡單。
+- [Instant Loading Web Apps with An Application Shell Architecture](https://developers.google.com/web/updates/2015/11/app-shell):使用 App Shell 程式模式加快 app 的載入速度。
+- [使用 Push API](/zh-TW/docs/Web/API/Push_API/Using_the_Push_API):了解 Web Push API 所需的一切。
+- [使用 Notifications API](/zh-TW/docs/Web/API/Notifications_API/Using_the_Notifications_API):web notification 簡介。
+- [構建響應式設計](/zh-TW/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks):了解當今 app 佈局的關鍵——響應式設計——的基本。
+- [行動優先](/zh-TW/docs/Web/Apps/Modern/Responsive/Mobile_first):建立響應式設計很常見,預設以行動裝置的佈局優先、接著設計更寬廣的佈局,是相當合理的。
+- [Add to home screen guide](/zh-TW/docs/Web/Apps/Progressive/Add_to_home_screen) — learn how your apps can take advantage of Add to home screen (A2HS).
+
+## 工具
+
+- [localForage](https://localforage.github.io/localForage/):讓用戶端儲存變簡單的輕量化 JavaScript 函式庫。預設上使用 IndexedDB,必要時則改用 SQL/Web 儲存。
+- [ServiceWorkerWare](https://github.com/fxos-components/serviceworkerware) — an _Express-like_ microframework for easy Service Worker development.
+- [oghliner](https://github.com/mozilla/oghliner) — not only a template but a tool for deploying Offline Web Apps to GitHub Pages.
+- [sw-precache](https://github.com/GoogleChrome/sw-precache) — a node module to generate service worker code that will precache specific resources.
+- [workbox](https://github.com/GoogleChrome/workbox) — spiritual successor to sw-precache with more advanced caching strategies and easy precaching.
+- [upup](https://www.talater.com/upup/) — a tiny script that makes sure your site is always there for your users.
+- [The service worker cookbook](https://serviceworke.rs/) — A series of excellent service worker/push recipes, showing how to implement an offline app, but also much more.
+
+## 參見
+
+- Google Developers 的 [Progressive web apps](https://developers.google.com/web/progressive-web-apps)
+- Alex Russell 寫的 [Progressive Web Apps: Escaping Tabs Without Losing Our Soul](https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh)
+- [Progressive Web Apps Check List](https://developers.google.com/web/progressive-web-apps/checklist)
+- Google 的 [The Lighthouse Tool](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk)
+- [Tools for building progressive web apps with Angular](https://github.com/angular/mobile-toolkit)
+- [React PWA Guide Kit](https://github.com/codebusking/react-pwa-guide-kit)
+- [Offline-capable Pokédex web site](https://www.pokedex.org/)
+- [Hacker News readers as Progressive Web Apps](https://hnpwa.com/)
diff --git a/files/zh-tw/web/security/insecure_passwords/index.html b/files/zh-tw/web/security/insecure_passwords/index.html
deleted file mode 100644
index b9462ee7524a82..00000000000000
--- a/files/zh-tw/web/security/insecure_passwords/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: 不安全的密碼
-slug: Web/Security/Insecure_passwords
-tags:
- - 安全性
- - 密碼
- - 網頁
- - 風險
-translation_of: Web/Security/Insecure_passwords
----
-提供 HTTP 的登入表單非常危險,因為目前有很多已知的用戶密碼擷取手法。竊聽者可以透過側錄該網路或修改傳輸頁面進行大量的惡意攻擊,並直接竊取用戶憑證或密碼。本頁將詳細說明 Firefox 用以警示用戶與開發者有關不安全的密碼及密碼竊取風險的安全機制。
-
-HTTPS 通訊協定,旨在保護用戶的資料於傳輸時不會遭到竊聽與竄改,並保護其機密性與原始完整性。負責處理用戶資料的網站應使用 HTTPS 保護其用戶不受惡意駭客攻擊。如果沒有使用 HTTPS,竊取諸如登入憑證之類的用戶資訊是小事一樁。著名的 Firesheep 附加套件曾示範過此種攻擊方式。
-
-要處理這個問題,請安裝並設定網站伺服器的 SSL/TLS 憑證。目前有許多免費與付費的憑證供應商。如果是使用雲端,雲端服務商可能提供了啟動 HTTPS 的方法。
-
-Firefox 密碼安全性指標
-
-為提醒上述風險,Firefox 實做了許多警告機制:
-
-
-
- Firefox 51 以後會在網址列的左方顯示一個紅色劃叉的鎖頭警告標示,如下圖所示。
-
-
-
-
- Firefox 52 以後會在任何不安全表單的 URL 欄位與密碼區域清楚呈現警告:
-
-
-
-
- Firefox 52 以後還會禁止在不安全表單自動填入密碼。用戶依舊可以藉由下拉列表,填入已存登錄的資訊。
-
-
- 不安全表單的警告,也能從所有 Firefox 發行的開發者主控台之安全窗格找到。詳請參見下節敘述。
-
-
-
-網頁主控台訊息
-
-本區塊敘述為了應對不安全的密碼,於 Firefox 開發者工具中顯示在網頁主控台的安全性訊息。
-
-透過 HTTP 提供登入表單
-
-即使表單是傳送到 HTTPS 網址,用戶的登入表單仍未受保護,因為攻擊者可以修改用戶接收到的頁面。例如,攻擊者可插入鍵盤側錄腳本,導致用戶輸入的資料外洩,或變更表單目的地為攻擊者控制的伺服器。網路主控台的安全面板會警告開發者及用戶,並標示這項安全性問題。
-
-
-
-
-
備註 :在 HTTP 文件中嵌入 HTTPS 登入頁面也不安全 — 攻擊者可以變更頁框超連結以指向惡意網站。
-
-
-在表單行為中使用 HTTP 網址
-
-在這種情況下,任何用戶輸入的資料都以明文傳送。對於任何側錄該網路的人,從資料送出到抵達網頁伺服器,用戶密碼都清楚可見。
-
-
-
-重複使用相同密碼
-
-網站有時會需要用戶名稱與密碼,但並不實際儲存敏感資料。例如,新聞網站可能會儲存用戶想要再次閱覽的文章,但不會儲存其它用戶資料。上述範例的網頁開發者可能較無動機保護他們的網站與用戶憑證。
-
-不幸的是,重複使用相同密碼是非常危險的 。用戶在多個網站皆使用相同密碼(如新聞網站、社群網站、電子信箱等)。因此,即使非法存取貴網站的用戶名稱與密碼並不對您構成嚴重問題,對於在不同網站(如網路銀行)使用相同名稱與密碼的用戶而言,卻會造成嚴重威脅。攻擊者愈來愈聰明,他們會從一個網站竊取用戶名稱與密碼的配對,並在更有利可圖的網站上重複嘗試。
-
-參見
-
-
-
-
-
-{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}
diff --git a/files/zh-tw/web/security/insecure_passwords/index.md b/files/zh-tw/web/security/insecure_passwords/index.md
new file mode 100644
index 00000000000000..122e31d66dec29
--- /dev/null
+++ b/files/zh-tw/web/security/insecure_passwords/index.md
@@ -0,0 +1,60 @@
+---
+title: 不安全的密碼
+slug: Web/Security/Insecure_passwords
+tags:
+ - 安全性
+ - 密碼
+ - 網頁
+ - 風險
+translation_of: Web/Security/Insecure_passwords
+---
+提供 HTTP 的登入表單非常危險,因為目前有很多已知的用戶密碼擷取手法。竊聽者可以透過側錄該網路或修改傳輸頁面進行大量的惡意攻擊,並直接竊取用戶憑證或密碼。本頁將詳細說明 Firefox 用以警示用戶與開發者有關不安全的密碼及密碼竊取風險的安全機制。
+
+[HTTPS](https://mdn.mozillademos.org/files/5951/insecure_page2_with_arrows_cropped.jpeg) 通訊協定,旨在保護用戶的資料於傳輸時不會遭到竊聽與竄改,並保護其機密性與原始完整性。負責處理用戶資料的網站應使用 HTTPS 保護其用戶不受惡意駭客攻擊。如果沒有使用 HTTPS,竊取諸如登入憑證之類的用戶資訊是小事一樁。著名的 [Firesheep](https://codebutler.github.io/firesheep/) 附加套件曾示範過此種攻擊方式。
+
+要處理這個問題,請安裝並設定網站伺服器的 SSL/TLS 憑證。目前有許多免費與付費的憑證供應商。如果是使用雲端,雲端服務商可能提供了啟動 HTTPS 的方法。
+
+## Firefox 密碼安全性指標
+
+為提醒上述風險,Firefox 實做了許多警告機制:
+
+1. Firefox 51 以後會在網址列的左方顯示一個紅色劃叉的鎖頭警告標示,如下圖所示。
+
+ ![鎖頭標示](https://support.cdn.mozilla.net/media/uploads/gallery/images/2015-11-17-12-13-18-2faa61.png)
+
+2. Firefox 52 以後會在任何不安全表單的 URL 欄位與密碼區域清楚呈現警告:
+
+ ![警告](https://support.cdn.mozilla.net/media/uploads/gallery/images/2017-04-21-23-52-53-ba340d.png)
+
+3. Firefox 52 以後還會禁止在不安全表單自動填入密碼。用戶依舊可以藉由下拉列表,填入已存登錄的資訊。
+4. 不安全表單的警告,也能從所有 Firefox 發行的開發者主控台之安全窗格找到。詳請參見下節敘述。
+
+## 網頁主控台訊息
+
+本區塊敘述為了應對不安全的密碼,於 Firefox 開發者工具中顯示在網頁主控台的安全性訊息。
+
+### 透過 HTTP 提供登入表單
+
+即使表單是傳送到 HTTPS 網址,用戶的登入表單仍未受保護,因為攻擊者可以修改用戶接收到的頁面。例如,攻擊者可插入鍵盤側錄腳本,導致用戶輸入的資料外洩,或變更表單目的地為攻擊者控制的伺服器。網路主控台的安全面板會警告開發者及用戶,並標示這項安全性問題。
+
+![不安全的登入欄位,會顯示於網頁主控台及密碼欄位中的對應警告。](https://mdn.mozillademos.org/files/14783/Insecure_Password_Console_Contextual_sm.png)
+
+> **備註:** 在 HTTP 文件中嵌入 HTTPS 登入頁面也不安全 — 攻擊者可以變更頁框超連結以指向惡意網站。
+
+### 在表單行為中使用 HTTP 網址
+
+在這種情況下,任何用戶輸入的資料都以明文傳送。對於任何側錄該網路的人,從資料送出到抵達網頁伺服器,用戶密碼都清楚可見。
+
+![不安全的登入表單行為,會顯示於網頁主控台及密碼欄位中的對應警告。](https://mdn.mozillademos.org/files/14785/Insecure_Action_Password_Console_Contextual_sm.png)
+
+## 重複使用相同密碼
+
+網站有時會需要用戶名稱與密碼,但並不實際儲存敏感資料。例如,新聞網站可能會儲存用戶想要再次閱覽的文章,但不會儲存其它用戶資料。上述範例的網頁開發者可能較無動機保護他們的網站與用戶憑證。
+
+不幸的是,[重複使用相同密碼是非常危險的](https://www.lightbluetouchpaper.org/2011/02/09/measuring-password-re-use-empirically/)。用戶在多個網站皆使用相同密碼(如新聞網站、社群網站、電子信箱等)。因此,即使非法存取貴網站的用戶名稱與密碼並不對您構成嚴重問題,對於在不同網站(如網路銀行)使用相同名稱與密碼的用戶而言,卻會造成嚴重威脅。攻擊者愈來愈聰明,他們會從一個網站竊取用戶名稱與密碼的配對,並在更有利可圖的網站上重複嘗試。
+
+## 參見
+
+- [No More Passwords over HTTP, Please!](https://blog.mozilla.org/tanvi/2016/01/28/no-more-passwords-over-http-please/) — 提供詳細資訊和常見問題的部落格文章
+
+{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}
diff --git a/files/zh-tw/web/security/mixed_content/index.html b/files/zh-tw/web/security/mixed_content/index.html
deleted file mode 100644
index 6090c9561b3c8b..00000000000000
--- a/files/zh-tw/web/security/mixed_content/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: 混合內容
-slug: Web/Security/Mixed_content
-tags:
- - HTTP
- - HTTPS
- - NeedsTranslation
- - Security
- - TopicStub
-translation_of: Web/Security/Mixed_content
----
-當使用者以 {{Glossary("HTTPS")}} 瀏覽網站時,他們與伺服器之間的連線就會以 {{Glossary("TLS")}} 加密,以防受到竊聽或中間人攻擊。一個含有 HTTP 明文內容的 HTTPS 頁面稱為混合內容(mixed content) 。這種頁面只有部份加密,沒有加密的內容,易於遭到竊聽和中間人攻擊。這會令網頁不安全。
-
-混合內容的類型
-
-混合內容的類型有兩種:被動/顯示型混合內容(mixed passive/display content) 與主動型混合內容(mixed active content) 。兩者不同處在於內容遭中間人攻擊竄改後,其最壞情況下的威脅程度。如果是被動型混合內容,威脅程度較低(可能有錯誤內容、或者用戶的 cookie 遭到竊取)。如果是主動型混合內容,威脅就可能會變成網絡釣魚、敏感資料洩露、被重定向到惡意網站……等等。
-
-被動/顯示型混合內容
-
-被動/顯示型混合內容內容是指包在 HTTPS 頁面,但無法改變其他部分的 HTTP 內容。例如,攻擊者能把放在 HTTP 的圖像,換成對用戶而言不適當的圖片或訊息。攻擊者也能監看圖片提供給哪些用戶,來推斷用戶活動的相關資訊:圖片通常只能在網站內的特定頁面提供。如果攻擊者觀察了某些圖片的 HTTP 請求,他們還能確認用戶在訪問哪個網頁。
-
-被動型混合內容清單
-
-以下列出會被視為被動型混合內容的 HTTP 請求:
-
-
- {{HTMLElement("img")}}(src
屬性)
- {{HTMLElement("audio")}}(src
屬性)
- {{HTMLElement("video")}}(src
屬性)
- {{HTMLElement("object")}} subresource(如果 <object>
發起 HTTP 請求)
-
-
-主動型混合內容
-
-主動型混合內容 是指有權訪問文件 HTTPS 頁面、物件模型的內容。這種混合內容可以改變 HTTPS 頁面行為、並暗自竊取用戶的敏感資訊。因此,主動型混合內容除了內容除了上文所述的風險外,還容易受到其他攻擊媒介的威脅。
-
-針對主動型混合內容,中間人攻擊者可以攔截 HTTP 內容的請求、並竄改回應以植入惡意 JavaScript 程式碼。惡意的主動型混合內容能竊取用戶的憑證、用戶的敏感資料、甚至透過如瀏覽器或套件的漏洞,嘗試安裝惡意軟體。
-
-混合內容涉及的風險,取決於用戶訪問的網站類型、還有該網站資訊的敏感程度。網頁可能有公諸於世的公開資料、也可能有僅限授權者閱覽的私人資料。即使網頁是公開的,也沒有用戶的敏感資料,混合內容依舊給攻擊者把用戶重定向到其他 HTTP 頁面、並從這些網站竊取 HTTP cookie 的機會。
-
-主動型混合內容示例
-
-以下列出會被視為主動型混合內容的 HTTP 請求:
-
-
- {{HTMLElement("script")}}(src
屬性)
- {{HTMLElement("link")}}(href
屬性)(包含 CSS 樣式表)
- {{HTMLElement("iframe")}}(src
屬性)
- {{domxref("XMLHttpRequest")}} 請求
- {{domxref("GlobalFetch.fetch","fetch()")}} 請求
- 所有用到 {{cssxref("url")}} 的 CSS 值({{cssxref("@font-face")}}、{{cssxref("cursor")}}、{{cssxref("background-image")}}……等等)。
- {{HTMLElement("object")}}(data
屬性)
-
-
-其他資源如 web fonts 與 workers 也可能被認定為主動型混合內容,因為在 Chromium 就是這樣 。
-
-網頁主控台的警告
-
-Firefox 網頁主控台會在網站含有混合內容時,於「網路」標籤顯示警告。以 HTTP 傳輸的混合內容資源會被標為紅色,後面會附上導往這一頁的「混合內容」標註。
-
-
-
-找到網頁主控台的警告後,可以在你的網站使用 Content Security Policy (CSP) 或網站爬蟲找到問題,,例如 HTTPS Checker 或是 Mixed Content Scan 。
-
-從 Firefox 23 以後,預設會封鎖混合內容(要封鎖混合的顯示內容也可以設定)。為了令 web 開發者便於尋找混合內容的錯誤,所有遭到封鎖的混合內容會被紀錄到網頁主控台的安全標籤,如下所示:
-
-
-
-要修正這個錯誤,就要移除所有的 HTTP 請求、並以 HTTPS 取代之。部份例子包含 JavaScript 檔案、CSS 樣式表、影像檔、影片檔或是其他多媒體文件。
-
-
-
注 :Firefox 55 以後,在本機端會允許混合內容的載入(請參見 {{bug(903966)}})。
-
-
-參見
-
-
diff --git a/files/zh-tw/web/security/mixed_content/index.md b/files/zh-tw/web/security/mixed_content/index.md
new file mode 100644
index 00000000000000..bf31a962255929
--- /dev/null
+++ b/files/zh-tw/web/security/mixed_content/index.md
@@ -0,0 +1,72 @@
+---
+title: 混合內容
+slug: Web/Security/Mixed_content
+tags:
+ - HTTP
+ - HTTPS
+ - NeedsTranslation
+ - Security
+ - TopicStub
+translation_of: Web/Security/Mixed_content
+---
+當使用者以 {{Glossary("HTTPS")}} 瀏覽網站時,他們與伺服器之間的連線就會以 {{Glossary("TLS")}} 加密,以防受到竊聽或中間人攻擊。一個含有 HTTP 明文內容的 HTTPS 頁面稱為**混合內容(mixed content)**。這種頁面只有部份加密,沒有加密的內容,易於遭到竊聽和中間人攻擊。這會令網頁不安全。
+
+## 混合內容的類型
+
+混合內容的類型有兩種:**被動/顯示型混合內容(mixed passive/display content)**與**主動型混合內容(mixed active content)**。兩者不同處在於內容遭中間人攻擊竄改後,其最壞情況下的威脅程度。如果是被動型混合內容,威脅程度較低(可能有錯誤內容、或者用戶的 cookie 遭到竊取)。如果是主動型混合內容,威脅就可能會變成網絡釣魚、敏感資料洩露、被重定向到惡意網站……等等。
+
+### 被動/顯示型混合內容
+
+被動/顯示型混合內容內容是指包在 HTTPS 頁面,但無法改變其他部分的 HTTP 內容。例如,攻擊者能把放在 HTTP 的圖像,換成對用戶而言不適當的圖片或訊息。攻擊者也能監看圖片提供給哪些用戶,來推斷用戶活動的相關資訊:圖片通常只能在網站內的特定頁面提供。如果攻擊者觀察了某些圖片的 HTTP 請求,他們還能確認用戶在訪問哪個網頁。
+
+#### 被動型混合內容清單
+
+以下列出會被視為被動型混合內容的 HTTP 請求:
+
+- {{HTMLElement("img")}}(`src` 屬性)
+- {{HTMLElement("audio")}}(`src` 屬性)
+- {{HTMLElement("video")}}(`src` 屬性)
+- {{HTMLElement("object")}} subresource(如果 `` 發起 HTTP 請求)
+
+### 主動型混合內容
+
+**主動型混合內容**是指有權訪問文件 HTTPS 頁面、物件模型的內容。這種混合內容可以改變 HTTPS 頁面行為、並暗自竊取用戶的敏感資訊。因此,主動型混合內容除了內容除了上文所述的風險外,還容易受到其他攻擊媒介的威脅。
+
+針對主動型混合內容,中間人攻擊者可以攔截 HTTP 內容的請求、並竄改回應以植入惡意 JavaScript 程式碼。惡意的主動型混合內容能竊取用戶的憑證、用戶的敏感資料、甚至透過如瀏覽器或套件的漏洞,嘗試安裝惡意軟體。
+
+混合內容涉及的風險,取決於用戶訪問的網站類型、還有該網站資訊的敏感程度。網頁可能有公諸於世的公開資料、也可能有僅限授權者閱覽的私人資料。即使網頁是公開的,也沒有用戶的敏感資料,混合內容依舊給攻擊者把用戶重定向到其他 HTTP 頁面、並從這些網站竊取 HTTP cookie 的機會。
+
+#### 主動型混合內容示例
+
+以下列出會被視為主動型混合內容的 HTTP 請求:
+
+- {{HTMLElement("script")}}(`src` 屬性)
+- {{HTMLElement("link")}}(`href` 屬性)(包含 CSS 樣式表)
+- {{HTMLElement("iframe")}}(`src` 屬性)
+- {{domxref("XMLHttpRequest")}} 請求
+- {{domxref("GlobalFetch.fetch","fetch()")}} 請求
+- 所有用到 {{cssxref("url")}} 的 CSS 值({{cssxref("@font-face")}}、{{cssxref("cursor")}}、{{cssxref("background-image")}}……等等)。
+- {{HTMLElement("object")}}(`data` 屬性)
+
+其他資源如 web fonts 與 workers 也可能被認定為主動型混合內容,[因為在 Chromium 就是這樣](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/loader/MixedContentChecker.cpp&q=MixedContentChecker::contextTypeFromContext%20f:cpp&sq=package:chromium&type=cs)。
+
+## 網頁主控台的警告
+
+Firefox 網頁主控台會在網站含有混合內容時,於「網路」標籤顯示警告。以 HTTP 傳輸的混合內容資源會被標為紅色,後面會附上導往這一頁的「混合內容」標註。
+
+[![Screen shot of the web console displaying a mixed content warning.](mixed_content_-_net_pane.png)](/files/12545/Mixed_content_-_Net_pane.png)
+
+找到網頁主控台的警告後,可以在你的網站使用 [Content Security Policy (CSP)](/zh-TW/docs/Web/HTTP/CSP) 或網站爬蟲找到問題,,例如 [HTTPS Checker](https://httpschecker.net/guides/https-checker) 或是 [Mixed Content Scan](https://github.com/bramus/mixed-content-scan)。
+
+從 Firefox 23 以後,預設會封鎖混合內容(要封鎖混合的顯示內容也可以設定)。為了令 web 開發者便於尋找混合內容的錯誤,所有遭到封鎖的混合內容會被紀錄到網頁主控台的安全標籤,如下所示:
+
+[![A screenshot of blocked mixed content errors in the Security Pane of the Web Console](mixed_content_webconsole.png)](/files/5261/blocked-mixed-content-errors.png)
+
+要修正這個錯誤,就要移除所有的 HTTP 請求、並以 HTTPS 取代之。部份例子包含 JavaScript 檔案、CSS 樣式表、影像檔、影片檔或是其他多媒體文件。
+
+> **備註:** Firefox 55 以後,在本機端會允許混合內容的載入(請參見 {{bug(903966)}})。
+
+## 參見
+
+- [Mixed Content - W3C Editor's Draft](https://w3c.github.io/webappsec/specs/mixedcontent/)
+- [如何修正含有混和內容的網站](/zh-TW/docs/Security/MixedContent/How_to_fix_website_with_mixed_content)
diff --git a/files/zh-tw/web/security/same-origin_policy/index.html b/files/zh-tw/web/security/same-origin_policy/index.html
deleted file mode 100644
index adbf2581a1f522..00000000000000
--- a/files/zh-tw/web/security/same-origin_policy/index.html
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: 同源政策 (Same-origin policy)
-slug: Web/Security/Same-origin_policy
-translation_of: Web/Security/Same-origin_policy
----
-同源政策限制了程式碼和不同網域資源間的互動。
-
-同源定義
-
-所謂同源是指兩份網頁具備相同協定、埠號 (如果有指定) 以及主機位置,下表提供了一些例子展示那些來源和http://store.company.com/dir/page.html屬於同源:
-
-
-
-
- URL
- Outcome
- Reason
-
-
- http://store.company.com/dir2/other.html
- 同源
-
-
-
- http://store.company.com/dir/inner/another.html
- 同源
-
-
-
- https://store.company.com/secure.html
- 不同源
- 協定不同
-
-
- http://store.company.com:81/dir/etc.html
- 不同源
- 埠號不同
-
-
- http://news.company.com/dir/other.html
- 不同源
- 主機位置不同
-
-
-
-
-另外請參考 file來源定義: URL 。
-
-Cookie 的來源定義和上述不一樣。
-
-變更來源
-
-網頁能夠有限地變更來源,我們可以將 {{domxref("document.domain")}} 存為目前網域後半部,然後較短的網域就會作為之後來源檢查,譬如我們在 http://store.company.com/dir/other.html 的文件裡執行以下程式碼:
-
-document.domain = "company.com";
-
-
-執行完後,網頁能以 http://company.com/dir/page.html 通過同源檢查。然而基於同源檢查,company.com 無法將 document.domain 存為 othercompany.com。
-
-任何變更 document.domain 行為,包括 document.domain = document.domain 都會導致埠號重置為 null,因此無法只藉由執行 document.domain = "company.com" 讓company.com:8080 和 company.com 互動,必須兩邊都重新設定好讓埠號都一致重置為 null。
-
-
-
Note: 為了讓子網域可以安全的存取其母網域,我們需要一起改變子、母網域的document.domain 為相同值,即使只是將母網域設回原始值也是必要,否則將會導致許可權錯誤 (Permission Error)。
-
-
-跨來源網路存取
-
-同源政策控制了兩個不同網域來源互動,例如當使用{{domxref("XMLHttpRequest")}}。這些互動可分為以下三類:
-
-
- 跨來源寫(Cross-origin writes)通常被允許,例如有連結、重新導向以及表單送出。少數某些HTTP請求需要先導請求 。
- 跨來源嵌入(Cross-origin embedding)通常被允許,例子請參照下方。
- 跨來源讀取(Cross-origin read) 通常不被允許,不過通常可以藉由嵌入來繞道讀取,例如嵌入影像寬高讀取、嵌入程式碼或嵌入資源 。
-
-
-下面是一些能跨來源嵌入的資源:
-
-
- <script src=”…”></script>內的Javascript,但語法錯誤訊息只限於同源程式碼腳本。
- CSS的<link rel="stylesheet" href="...">,由於CSS寬鬆語法規則,跨來源CSS要求正確的Content-Type標頭。限制在瀏覽器間各有差異: IE , Firefox , Chrome , Safari (請至CVE-2010-0051)以及Opera .
- {{htmlelement("img")}}的影像;支援格式有PNG, JPEG, GIF, BMP, SVG等等
- {{htmlelement("video")}}和{{htmlelement("audio")}}媒體檔案
- <object>
, <embed>
和<applet>
的外掛
- @font-face
的字型;有些瀏覽器允許跨來源字型,有些則不。
- <frame>
以及<iframe>
中的內容;如果一個網站想要避免跨來源載入互動,可以藉由X-Frame-Options
標頭避免。
-
-
-如何允許跨來源存取
-
-使用CORS 允許跨來源存取
-
-如何阻擋跨來源存取
-
-
- 藉由檢查請求中包含的無法猜測的特殊記號(token)可以避免跨來源寫入,還有跨來源讀取知道此記號的網頁,這個記號即為跨站偽造(Cross-Site Request Forgery, CSRF) 記號。
- 確保資源無法被嵌入來防止跨來源讀取。
- 為了防止跨來源嵌入,請確保資源不被解讀為上述可嵌入格式之一;瀏覽器通常不會理會Content-Type,比如說有一個指向HTML文件的<script>標籤,瀏覽器還是會嘗試解析該HTML文件為Javascript;當你的資源不是網站進入點,可以使用CSRF記號。
-
-
-跨來源程式腳本存取
-
-Javascript API例如iframe.contentWindow
, {{domxref("window.parent")}}, {{domxref("window.open")}}以及{{domxref("window.opener")}},允許文件之間直接互相參照,當兩份文件的來源不同,參照存取Window 和Location 物件將受到限制;一些瀏覽器比規範准許存取更多屬性 。文件間的溝通也可以改用{{domxref("window.postMessage")}}來進行。
-
-延伸閱讀
-
-
-
-
-
-
-
- Author(s): Jesse Ruderman
-
-
diff --git a/files/zh-tw/web/security/same-origin_policy/index.md b/files/zh-tw/web/security/same-origin_policy/index.md
new file mode 100644
index 00000000000000..fe049c4795bbb0
--- /dev/null
+++ b/files/zh-tw/web/security/same-origin_policy/index.md
@@ -0,0 +1,73 @@
+---
+title: 同源政策 (Same-origin policy)
+slug: Web/Security/Same-origin_policy
+translation_of: Web/Security/Same-origin_policy
+---
+同源政策限制了程式碼和不同網域資源間的互動。
+
+## 同源定義
+
+所謂同源是指兩份網頁具備相同協定、埠號 (如果有指定) 以及主機位置,下表提供了一些例子展示那些來源和 http\://store.company.com/dir/page.html 屬於同源:
+
+| URL | Outcome | Reason |
+| ------------------------------------------------- | ------- | ------------ |
+| `http://store.company.com/dir2/other.html` | 同源 | |
+| `http://store.company.com/dir/inner/another.html` | 同源 | |
+| `https://store.company.com/secure.html` | 不同源 | 協定不同 |
+| `http://store.company.com:81/dir/etc.html` | 不同源 | 埠號不同 |
+| `http://news.company.com/dir/other.html` | 不同源 | 主機位置不同 |
+
+另外請參考 [file 來源定義: URL](/zh-TW/docs/Same-origin_policy_for_file:_URIs)。
+
+Cookie 的來源定義和上述不一樣。
+
+## 變更來源
+
+網頁能夠有限地變更來源,我們可以將 {{domxref("document.domain")}} 存為目前網域後半部,然後較短的網域就會作為之後來源檢查,譬如我們在 http\://store.company.com/dir/other.html 的文件裡執行以下程式碼:
+
+```plain
+document.domain = "company.com";
+```
+
+執行完後,網頁能以 http\://company.com/dir/page.html 通過同源檢查。然而基於同源檢查,company.com 無法將 document.domain 存為 othercompany.com。
+
+任何變更 document.domain 行為,包括 document.domain = document.domain 都會導致埠號重置為 null,因此無法只藉由執行 document.domain = "company.com" 讓 company.com:8080 和 company.com 互動,必須兩邊都重新設定好讓埠號都一致重置為 null。
+
+> **備註:** 為了讓子網域可以安全的存取其母網域,我們需要一起改變子、母網域的 document.domain 為相同值,即使只是將母網域設回原始值也是必要,否則將會導致許可權錯誤 (Permission Error)。
+
+## 跨來源網路存取
+
+同源政策控制了兩個不同網域來源互動,例如當使用{{domxref("XMLHttpRequest")}}。這些互動可分為以下三類:
+
+- 跨來源寫(Cross-origin writes)通常被允許,例如有連結、重新導向以及表單送出。少數某些 HTTP 請求需要[先導請求](/zh-TW/docs/HTTP/Access_control_CORS#.E5.85.88.E5.B0.8E.E8.AB.8B.E6.B1.82)。
+- 跨來源嵌入(Cross-origin embedding)通常被允許,例子請參照下方。
+- 跨來源讀取(Cross-origin read) 通常不被允許,不過通常可以藉由嵌入來繞道讀取,例如嵌入影像寬高讀取、嵌入程式碼或[嵌入資源](https://grepular.com/Abusing_HTTP_Status_Codes_to_Expose_Private_Information)。
+
+下面是一些能跨來源嵌入的資源:
+
+- \內的 Javascript,但語法錯誤訊息只限於同源程式碼腳本。
+- CSS 的\ ,由於 CSS 寬鬆語法規則,跨來源 CSS 要求正確的 Content-Type 標頭。限制在瀏覽器間各有差異: [IE](http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx), [Firefox](http://www.mozilla.org/security/announce/2010/mfsa2010-46.html), [Chrome](http://code.google.com/p/chromium/issues/detail?id=9877), [Safari](http://support.apple.com/kb/HT4070) (請至 CVE-2010-0051)以及[Opera](http://www.opera.com/support/kb/view/943/).
+- {{htmlelement("img")}}的影像;支援格式有 PNG, JPEG, GIF, BMP, SVG 等等
+- {{htmlelement("video")}}和{{htmlelement("audio")}}媒體檔案
+- [``](/zh-TW/docs/HTML/Element/object), [``](/zh-TW/docs/HTML/Element/embed)和[``](/zh-TW/docs/HTML/Element/applet)的外掛
+- [`@font-face`](/zh-TW/docs/CSS/@font-face) 的字型;有些瀏覽器允許跨來源字型,有些則不。
+- [` `](/zh-TW/docs/HTML/Element/frame)以及[`