|
[email protected] |
1.?doctype（文档类型）的作用是什么？
位于html标签最前面，告诉浏览器以那种html和xhtml规范。分为标准模式和怪异模式、基于框架的HTML模式。
假如浏览器不以doctype标准模式编写DTD，页面除了无法通过代码检验之外，还无法在浏览器中正确显示。
a.如果需要干净的标记，免于表现层的混乱，用XHTML Strict DTD类型。
b.Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果用户使用了不支持层叠样式表（CSS）的浏览器以至于你不得不使用 HTML 的呈现特性时，用Transitional DTD 类型。
c.Frameset DTD 被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD
2.?浏览器标准模式 (standards mode) 、几乎标准模式（almost standards mode）和怪异模式 (quirks mode) 之间的区别是什么？
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一目的，他们创建了两种呈现模式，标准和混杂模式。
在标准模式中，浏览器会根据规范呈现页面；在混杂模式中。页面会以一种相对宽松的向后兼容方式显示。
混杂模式常用于模拟老式浏览器的行为，以防止老站点无法工作。
他们最大的不同是对盒模型的解析。
如：
在strict mode中 ：width是内容宽度 ，也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;
在quirks mode中 ：width则是元素的实际宽度 ，内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)
使用 document.compatMode来判断浏览器的解析方式。
3.?HTML 和 XHTML 有什么区别？
- XHTML 元素必须被正确地嵌套。
- XHTML 元素必须被关闭。
- 标签名必须用小写字母。
- XHTML 文档必须拥有根元素。
4.?如果页面使用 ‘application/xhtml+xml’ 会有什么问题吗？使用 XHTML 的局限有哪些？
xhtml要求严格：放弃了一些语义不好的标签，必须有head、body，每个dom必须要闭合。一些老的浏览器并不兼容。
问题：
为contentType属性值，IE不支持application/xhtml+xml类型，支持text/html
5.?如果网页内容需要支持多语言，你会怎么做？在设计和开发多语言网站时，有哪些问题你必须要考虑？
- 制图时，应该讲图形的图像层与文本层分离，这样在重新绘制改图形时只需对文本进行翻译。
- 设置控件属性应考虑到各种语言版本的文本显示，尽可能为翻译预留足够的空间。同时也应该保持不同语言界面的统一性，避免过多的差异。
- 编码注意代码复用，将多个模块的共用信息存放在共通的文件中便于全局管理。
使用统一的UTF-8编码
页面请求的过程可描述如下:
- 用户在终端选择自己所偏好的语言,并通过浏览器向服务器发送页面请求。
- 模板界面接收到语言选项后,从资源文件中读取相应区域的资源。
- 在响应用户的页面请求时,系统将根据检索到的语言选项,动态的加载相关区域的JS文件和CSS文件,为不同区域初始化不同的样式。
- 数据库接口接收到语言选项后,将其作为一个SQL参数传入数据库,检索相应区域的数据。
- 模板界面将接收到的各种信息,组织成Html代码,再发送给浏览器,显示给终端用户。
该架构的核心是模板界面,它主要负责将接收到的各类信息组织成Html代码。
6.?data-属性的作用是什么？
data-是HTML5为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取。
7.?如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？
1）Web Storage API 2）基于位置服务LBS 3）无插件播放音频视频 4）调用相机和GPU图像处理单元等硬件设备 5）拖拽和Form API
8.?请描述一下 cookies，sessionStorage 和 localStorage 的区别？
共同点：都是保存在浏览器端，且同源的。 区别：
- cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。 而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
- cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
- 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。 sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
- 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
- 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage 在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的。
Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。 sessionStorage、localStorage、cookie都是在浏览器端存储的数据。
其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。
Web Storage带来的好处：
- 减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
- 快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。
- 临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。
服务端存储
服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据。
- 服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端。
- 服务器端也可以保存用户的临时会话数据。服务器端的session机制，如jsp的 session 对象，数据保存在服务器上。 实现上，服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。 服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。浏览器端一般只用来存储小数据，而服务器可以存储大数据或小数据。服务器存储数据安全一些，浏览器只适合存储一般数据。
9.?请解释 <script>、<script async> 和 <script defer> 的区别。
defer使得browsers延迟脚本的执行，直到文档的载入和解析完成，并可以操作（在onload事件触发前）。
async使得browsers可以尽快地执行脚本，而不用在下载脚本时阻塞文档解析（异步）。在不支持async的browsers中，通过动态创建<script>元素并把它插入文档中，来实现脚本的异步载入和执行。
若两个属性同在，会忽略defer而遵从async
10.?为什么通常推荐将 CSS <link> 放置在 <head></head> 之间，而将 JS <script> 放置在 </body> 闭标签之前？你知道有哪些例外吗？
FOUC 无样式内容闪烁
script阻塞并行下载;
例外：需要顺序执行的代码
11.?什么是渐进式渲染 (progressive rendering)？
页面可以庞大，不过，只要你在短时间内(最好少于 1 秒)呈现给用户一些内容，他们仍然觉得载入很快。
12.?你用过哪些不同的 HTML 模板语言？
Django的模板语言、PHP的smarty模板语言
13.?请描述一下 GET 和 POST 的区别?
- get是从服务器上获取数据，post是向服务器传送数据。
- get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程
- get形式的url对搜索引擎更加友好，可以提高搜索引擎排名。Post使用的url有时候会阻止爬虫和搜索引擎的访问。其他网站和用户可以链接到get形式的url，无论用户的访问，还是搜索引擎的收录而相应提高了页面排名，能够直接或间接提高网站浏览。
- 同时，get形式的url这种表示法是可以缓存的，显著提升了客户端和服务端的性能。
- 而不安全操作，如确定订购、下订单、达成协议和删除页面等，应该通过post执行，避免没有显式用户请求和同一的情况下发生意外的操作。例如搜索引擎删除整个页面，只因为抓取了一个链接。很多不希望用户浏览器遵循页面链接的各种完整，这些情况下，应该要求用户登录并且足够的权限才能执行某些危险操作。
若符合下列任一情况，则用POST方法：
- 请求的结果有持续性的副作用，例如，数据库内添加新的数据行。
- 若使用GET方法，则表单上收集的数据可能让URL过长。
- 要传送的数据不是采用7位的ASCII编码。
若符合下列任一情况，则用GET方法：
- 请求是为了查找资源，HTML表单数据仅用来帮助搜索。
- 请求结果无持续性的副作用。
- 收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。
14.?同步和异步的区别?
同步：脚本会停留并等待服务器发送回复然后再继续。提交请求->等待服务器处理->处理完毕返回，这个期间客户端浏览器不能干任何事。
异步：脚本允许页面继续其进程并处理可能的回复。请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕
若要在使用ajax请求后处理发送请求返回的结果，最好使用同步请求。
来源： https://www.madoko.net/preview/preview.html