1, 浏览器页面由哪三层构成, 分别是什么, 作用是什么?
构成: 结构层, 表示层, 行为层
作用: HTML 实现页面结构, CSS 完成页面的表现与风格, JavaScript 实现一些客户端的功能与业务.
2, 行内元素有哪些? 块级元素有哪些? 空 (void) 元素有那些?
行内元素: a,b,span,img,input,strong,select,label,em,button,textarea
块级元素: div,ul,li,dl,dt,dd,p,h1-h6,blockquote
空元素: 即系没有内容的 HTML 元素, 例如: br,meta,hr,link,input,img
3, 简述一下 src 与 href 的区别
href 是指向网络资源所在位置, 建立和当前元素 (锚点) 或当前文档 (链接) 之间的链接, 用于超链接.
src 是指向外部资源的位置, 指向的内容将会嵌入到文档中当前标签所在位置; 在请求 src 资源时会将其指向的资源下载并应用到文档内, 例如 JS 脚本, img 图片和 frame 等元素.
当浏览器解析到该元素时, 会暂停其他资源的下载和处理, 直到将该资源加载, 编译, 执行完毕, 图片和框架等元素也如此, 类似于将所指向资源嵌入当前标签内. 这也是为什么将 JS 脚本放在底部而不是头部.
4,px 和 em 的区别
相同点: px 和 em 都是长度单位;
异同点: px 的值是固定的, 指定是多少就是多少, 计算比较容易. em 得值不是固定的, 并且 em 会继承父级元素的字体大小.
浏览器的默认字体高都是 16px. 所以未经调整的浏览器都符合: 1em=16px. 那么 12px=0.75em, 10px=0.625em.
5, 简述同步和异步的区别
同步是阻塞模式, 异步是非阻塞模式.
同步就是指一个进程在执行某个请求的时候, 若该请求需要一段时间才能返回信息, 那么这个进程将会一直等待下去, 直到收到返回信息才继续执行下去;
异步是指进程不需要一直等下去, 而是继续执行下面的操作, 不管其他进程的状态. 当有消息返回时系统会通知进程进行处理, 这样可以提高执行的效率.
6, 什么叫优雅降级和渐进增强
渐进增强 progressive enhancement:
针对低版本浏览器进行构建页面, 保证最基本的功能, 然后再针对高级浏览器进行效果, 交互等改进和追加功能达到更好的用户体验.
优雅降级 graceful degradation:
一开始就构建完整的功能, 然后再针对低版本浏览器进行兼容.
区别:
a. 优雅降级是从复杂的现状开始, 并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的, 能够起作用的版本开始, 并不断扩充, 以适应未来环境的需要
c. 降级 (功能衰减) 意味着往回看; 而渐进增强则意味着朝前看, 同时保证其根基处于安全地带
7,HTML5 的优点与缺点
优点: a, 网格标准统一, HTML5 本身是由 W3C 推荐出来的
b, 多设备, 跨平台
c, 即时更新
d, 提高可用性和改进用户的友好体验
e, 有几个新的标签, 这有助于开发人员定义重要的内容
f, 可以给站点带来更多的多媒体元素(视频和音频)
g, 可以很好的替代 Flash 和 Silverlight;
h, 涉及到网站的抓取和索引的时候, 对于 SEO 很友好
i, 被大量应用于移动应用程序和游戏
缺点: a, 安全: 像之前 Firefox4 的 web socket 和透明代理的实现存在严重的安全问题, 同时 Web storage,Web socket 这样的功能很容易被黑客利用, 来盗取用户的信息和资料
b, 完善性: 许多特性各浏览器的支持程度也不一样
c, 技术门槛: HTML5 简化开发者工作的同时代表了有许多新的属性和 API 需要开发者学习, 像 Web worker,Web socket,Web storage 等新特性, 后台甚至浏览器原理的知识, 机遇的同时也是巨大的挑战
d, 性能: 某些平台上的引擎问题导致 HTML5 性能低下
e, 浏览器兼容性: 最大缺点, IE9 以下浏览器几乎全军覆没
8,Doctype 作用? 严格模式与混杂模式如何区分? 它们有何意义?
1)声明位于文档中的最前面, 处于标签之前. 告知浏览器的解析器, 用什么文档类型规范来解析这个文档.
2)严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行
3)在混杂模式中, 页面以宽松的向后兼容的方式显示
4)DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现.
9,sessionStorage ,localStorage 和 cookie 之间的区别
共同点: 用于浏览器端存储的缓存数据
不同点: cookies 会发送到服务器端, 其余两个不会.
1)Cookie: 每个域名存储量比较小(各浏览器不同, 大致 4K); 所有域名的存储量有限制; 有个数限制; 会随请求发送到服务器;
2)LocalStorage: 永久存储; 单个域名存储量比较大(推荐 5MB, 各浏览器不同); 总体数量无限制;
3)sessionStorage: 只在 session 内有效 (在同源的同窗口(或 tab) 中, 即使刷新页面或进入同源另一页面, 数据仍然存在); 存储量更大(推荐没有限制, 但实际上各浏览器也不同)
10,iframe 有哪些缺点
iframe 会阻塞主页面的 Onload 事件
搜索引擎的检索程序无法解读这种页面, 不利于 SEO
iframe 和主页面共享连接池, 而浏览器对相同域的连接有限制, 所以会影响页面的并行加载.
使用 iframe 之前需要考虑这两个缺点, 如果需要使用 iframe, 最好是通过 JavaScript
(动态给 iframe 添加 src 属性值, 这样可以绕开以上两个问题)
11, 如何实现浏览器内多个标签页之间的通信?
WebSocket,SharedWorker; 也可以调用 localstorage,cookies 等本地存储方式; localstorage 另一个浏览上下文里被添加, 修改或删除时, 它都会触发一个事件, 我们通过监听事件, 控制它的值来进行页面信息通信; 注意 quirks:Safari 在无痕模式下设置 localstorage 值时会抛出 QuotaExceededError 的异常.
12, 表单提交中 Get 和 Post 方式的区别
1)get 是从服务器上获取数据, post 是向服务器传送数据
2)get 是把参数数据队列加到提交表单的 ACTION 属性所指的 URL 中, 值和表单内各个字段一一对应, 在 URL 中可以看到. post 是通过 HTTP post 机制, 将表单内各个字段与其内容放置在 HTML HEADER 内一起传送到 ACTION 属性所指的 URL 地址, 用户看不到这个过程.
3)对于 get 方式, 服务器端用 Request.QueryString 获取变量的值, 对于 post 方式, 服务器端用 Request.Form 获取提交的数据
4)get 传送的数据量较小, 不能大于 2KB.post 传送的数据量较大, 一般被默认为不受限制. 但理论上, IIS4 中最大量为 80KB,IIS5 中为 100KB.
5)get 安全性低, post 安全性较高.
13,Web Storage 与 Cookie 相比存在的优势
(1), 存储空间更大: IE8 下每个独立的存储空间为 10M, 其他浏览器实现略有不同, 但都比 Cookie 要大很多.
(2), 存储内容不会发送到服务器: 当设置了 Cookie 后, Cookie 的内容会随着请求一并发送的服务器, 这对于本地存储的数据是一种带宽浪费. 而 Web Storage 中的数据则仅仅是存在本地, 不会与服务器发生任何交互.
(3), 更多丰富易用的接口: Web Storage 提供了一套更为丰富的接口, 如 setItem,getItem,removeItem,clear 等, 使得数据操作更为简便. cookie 需要自己封装.
(4), 独立的存储空间: 每个域 (包括子域) 有独立的存储空间, 各个存储空间是完全独立的, 因此不会造成数据混乱.
来源: http://www.bubuko.com/infodetail-2870335.html