html5 · PHP笔记

## **X-UA-Compatible** 为防止失效，X-UA-Compatible最好紧跟在head之后，之前不要有任何不标准的标签。 ~~~ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> ~~~ **详解：** 使用以下代码强制 IE 使用 Chrome Frame 渲染 ~~~ <meta http-equiv="X-UA-Compatible" content="chrome=1"> ~~~ Edge 模式告诉 IE 以最高级模式渲染文档，就是什么版本 IE 就用什么版本的标准模式渲染。 ~~~ <meta http-equiv="X-UA-Compatible" content="IE=edge"> ~~~ App 可以分成三大类。 > * 原生应用（native application，简称 native App） > * Web 应用（web application，简称 Web App） > * 混合应用（hybrid application，简称 hybrid App） **H5 这个词，可以理解成就是混合 App 模型，只不过它特指混合 App 的前端部分。** 因为混合 App 的前端就是 HTML5 网页，所以简称 H5。这个词是国内独有的，基本上都是前端程序员在用，国外不用这个词，就直接叫混合 App。 ## **原生应用** 原生 App 使用与手机操作系统相同的语言。iOS 的原生 App 使用 Objective-C 语言或 Swift 语言，安卓使用 Java 语言或 Kotlin 语言。由于跟底层系统的语言和技术模型一致，所以原生 App 的性能和用户体验都很好优点：原生 App 的优点主要是两个：（1）较好的性能和体验；（2）可以使用系统的所有硬件和软件 API，比如 GPS、摄像头、麦克风、加速计、通知推送等等，能充分发挥系统的潜力。缺点：原生 App 的缺点主要是成本，每个手机平台都要建立一个独立的开发团队，大公司一般都有 iOS 和安卓两个开发团队。如果出现第三个平台（以前的 Windows Phone，也许将来的华为鸿蒙 OS），就要组建第三个团队，成本就更高。第二个缺点是，原生 App 使用底层操作系统的语言，都是很重的编译型语言，开发和调试成本相对较高，时间周期长。第三个缺点是，原生 App 必须下载安装才能使用，只要升级版本，就必须重新下载安装。用户往往不愿意更新版本，厂商被迫不得不长期支持很久以前的旧版本。 ## **Web 应用** **Web App 是使用网页做的应用程序，必须在浏览器中使用。**比如，你在浏览器中收发邮件，就是在使用 Web App。 Web App 主要使用网页技术，即 HTML、JavaScript 和 CSS。2008年，w3c 组织发布了 HTML 第5版，简称 HTML 5，该版本大大增强了网页的功能，使得网页可以当作应用程序使用，而不仅仅是展示文字和图片，这就是 Web App 的由来 ### 优点和缺点 Web App 的优点是：（1）不需要下载安装，打开浏览器就能使用，而且总是使用最新版本；（2）对于开发者来说，Web App 写起来比较快，调试容易，不需要应用商店的批准就能发布。 Web App 的主要缺点有两个。首先，浏览器提供的 API（即 Web API）很有限（目前只有相机、GPS、电池等少数几个），大部分系统硬件都不能通过网页访问，也无法直接读取硬盘文件，所以 Web App 无法充分利用平台的硬件。第二个缺点是，网页通过浏览器渲染，性能不如原生 App，不适合做性能要求较高的页面为了推广 Web App，谷歌公司的 Chrome 浏览器团队做了很多努力。他们认为，Web App 足以满足大多数 App 的需求，但是三大缺陷阻碍它的推广。 > 1. 不能从手机的首屏直接进入。 > 2. 缺乏手机状态栏和锁屏时的通知推送能力。 > 3. 不支持脱机访问（即断网也能使用）为了解决这些问题，Chrome 团队开发了新技术"渐进式 Web App"（Progressive Web App，缩写 PWA）。它可以把网站缓存在手机里面，供离线时使用，还能在手机首屏生成图标，直接点击进入，并且有通知推送能力，也不带有浏览器的地址栏和状态栏，跟原生 App 的使用体验非常接近。但是，PWA 需要浏览器访问一次网站，才能在首屏生成图标，并且目前 iOS 系统的支持还不够理想，所以还只是一项探索性质的技术，迄今为止缺乏足够的成功案例 ## **混合应用** **混合 App （hybrid App）顾名思义就是原生 App 与 Web App 的结合。它的壳是原生 App，但是里面放的是网页。**可以理解成，混合 App 里面隐藏了一个浏览器，用户看到的实际上是这个隐藏浏览器渲染出来的网页。混合 App 的原生外壳称为"容器"，内部隐藏的浏览器，通常使用系统提供的网页渲染控件（即 WebView 控件），也可以自己内置一个浏览器内核。结构上，混合 App 从上到下分成三层：HTML5 网页层、网页引擎层（本质上是一个隔离的浏览器实例）、容器层。混合 App 里面的网页不同于普通网页，可以调用底层系统所有的 API。奥秘就在于外层容器提供了 API Bridge，充当底层 API 的中介，允许内部的网页调用底层。所谓 API Bridge 就是容器在底层接口和网页之间，建立一座桥梁，让双方通信。容器一旦接到网页的请求，就根据请求去调用底层系统的 API，然后再返回结果给网页。API Bridge 往往以 JavaScript 语言提供，方便网页调用，这时又称为 JSbridge。不同容器的 API Bridge 是不一样的。为某个容器写的网页，不能放在另一个容器使用，也无法在浏览器使用，除非网页脚本做了兼容处理。容器提供的 API Bridge 必须跟着平台更新。比如，iOS 发了新版本，有了新的硬件 API，容器也必须跟着推出新版的 API Bridge。如果容器没有跟上，开发者为了使用新的硬件，就只能想办法自己来写缺失的 API Bridge ### 优点混合 App 同时具有原生 App 和 Web App的优点，又可以避免它们的一些缺点。具体来说，可以总结为三点。（1）跨平台 Web 技术是跨平台的，开发者只写一次页面，就能支持多个平台。也就是说，混合 App 只需要一个团队就够了，开发成本较低。（2）灵活性混合 App 的灵活性大，很容易集成多种功能。一方面，混合 App 很容易加载外部的 H5 页面，实现 App 的插件结构；另一方面，Web 页面可以方便地调用外部的 Web 服务。（3）开发方便 Web 页面的调试和构建，远比原生控件简单省时。页面的更新也容易，只要在服务器上发布新版本，触发容器内更新就可以了。另外，Web 开发人员也比较容易招聘，传统的前端程序员可以承担开发任务。 ### 4.4 缺点混合 App 的主要缺点是，由于存在网页引擎的中间层，所以性能比较欠缺，不仅不如原生 App，而且由于 WebView 不是全功能浏览器，可能比 Web App 都要慢一些。另一个缺点是，由于页面跨平台，就无法使用只有特定平台提供的功能，导致体验不如纯的原生 App。举例来说，早期的时候，安卓有物理的后退按钮，iPhone 没有，页面设计不得不考虑这一点 ## **移动端web开发，web app开发区别：** 1. 移动web开发（pc端的页面用手机浏览器打开）这部分跟web前端开发差别不大，使用的技术都是html+css+js。区别为手机浏览器是webkit的天下，pc端是IE的天下。手机网页可以理解成pc网页的缩小版加一些触摸特性。因为是在浏览器中进行的网页开发，所有最终代码具有跨系统平台的特性 2. web app开发（web应用程序）特指的是用html5技术开发，之所以叫web app是因为他比较接近客户端应用程序的用户体验，可以和系统深度融合，调用一些只有客户端才能调用的功能（比如在移动设备上利用html5开发出的网页可以访问电话、摄像头等本地功能）. # [H5 手机 App 开发入门：技术篇](http://www.ruanyifeng.com/blog/2019/12/mobile-app-technology-stack.html)