重点掌握: 语义化,动画,重绘和回流
# 1. 请你谈谈你对web标准以及w3c的理解与认识
答:
- 标签闭合、标签小写、不乱嵌套、
- 提高搜索机器人搜索几率、
- 使用外链css和js脚本、
- 结构行为表现的分离、
- 文件下载与页面速度更快、
- 内容能被更多的用户所访问、内容能被更广泛的设备所访问、
- 更少的代码和组件,容易维护、改版方便、
- 不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
# 2. web语义化
为了让浏览器更好的读懂你的代码 尽量使用语义化的标签,是程序代码简介明了,易于进行web操作和SEO, 方便团队协作开发。
# 3. WEB 应用从服务器主动推送 Data 到客户端有那些方式?
- h5的websoket/通过flash
- XHR长时间连接
- XHR Multipart Streaming
- 不可见Iframe
- script标签的长时间连接(可跨域)
# 4. 主流浏览器和内核?
- IE: trident 内核
- Firefox:gecko 内核
- Safari:webkit 内核
- Opera: 以前是 presto 内核,Opera 现已改用 Google Chrome 的 Blink 内核
- Chrome: Blink(基于 webkit,Google 与 Opera Software 共同开发)
# 5. Doctype作用?
声明位于文档中的最前面高速浏览器用什么规范去解析页面,HTML规范或者XHTML规范。
# 6. Quirks 模式是什么? 它和 Standards 模式有什么区别?
从IE6起,怪异模式的出现是为了更好的兼容CSS。
- 布局上,盒模型在怪异模式下,宽高包含padding和border
- 标准模式下,span设置宽高不生效;父元素未设置百分百高度,子元素百分比高度无效
- 使用margin:0 auto在standards模式下可以使元素水平 居中,但在 quirks 模式下却会失效。
# 7. img 的 alt 与 title 有何异同
- a: alt(alt text): 为不能显示图像、窗体或applets的用户代理(UA),alt属性用来指 定替换文字。替换文字的语言由 lang 属性指定。
- title(tool tip): 该属性为设置该属性的元素提供建议性的信息。
- 在 IE 浏览器下会在没有 title 时把 alt 当成 tool tip显示
# 8. 渐进增强和优雅降级?
渐进增强: 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级: 一开始就构建完整的功能,然后再针对低版本浏览器 进行兼容。
区别: 优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个 非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰 减)意味着往回看; 而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
# 9. cookies,storage 的区别
- Storage容量存更大,Cookie的大小是受限的
- 每次你请求一个新的页面的时候 Cookie 都会被发送过去,这样无形中浪费 了带宽
- cookie 还需要指定作用域,不可以跨域调用。
- Web Storage拥有setItem, getItem, removeItem, clear等方法,不像cookie 需要前端开发者自己封装 setCookie,getCookie。
- Cookie 的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为 了在本地“存储”数据而生。
# 10. link,@import 的区别
- 浏览器根据link会识别该文档为 css 文件,就会并行下载资源并且不会停止对当前文档的处理
- @import有兼容问题
# 11. 图片格式
- png-8
- png-24
- jpeg/jpg
- gif
- svg
- wepb:加快图片加载速度的图片格式。 图片压缩体积大约只有 JPEG 的 2/3,并能节省大量的服务器带宽资源和数据空间。
# 12. 一次js请求在什么地方有缓存处理
- dns
- cdn
- 浏览器
- 服务器
# 13. 图片如何优化速度?
- 图片懒加载:在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端 的距离与页面的距离,如果前者小于后者,优先加载;如果为幻灯片、相册等,可以使用图片预加载技术,将当前展示图片的前一张和后一张优先 下载。
- css图片:使用 CSSsprite,SVGsprite,Iconfont、Base64 等技术。使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图, 以提高用户体验。
- 图片展示区域小于图片的真实大小:在服务器端根据业务需要先行进行图片压缩, 图片压缩后大小与展示一致
# 14. 提高SEO?
- Meta 标签优化:title、description、Keywords;还有一些其它 的隐藏文字比如 Author(作者),Category(目录),Language等
- 选取关键词并在网页中放置关键词:要给网站确定主关键 词(一般在 5 个上下),然后针对这些关键词进行优化
- 提交链接,加快收集速度
- 链接交换和链接广泛度