1. 描述下渐进增强和优雅降级的区别
渐进增强: 一开始就基于低版本的浏览器进行页面的构建,完成基本的功能,然后再针对高级浏览器进行性能,交互,以及效果上的优化; 渐进增强也可以说是 向上兼容;
优雅降级: 一开始就构建站点的完整的功能,然后针对浏览器测试和修复。举个例子,我们在高级浏览器上使用css3的属性,但是在低版本的浏览器上存在兼容的问题,这个就需要我们针对不同的浏览器进行hack; 优雅降级同样也可以说是向下兼容;
2. Doctype的作用?严格模式和混杂模式的区分,如何触发这两种模式
Doctype声明那个位于文档的最前面,在html标签的前面,告知浏览器,用什么文档类型来解析这个文档
Doctype不存在或者格式不正确会导致文档以混杂模式呈现
3. 写出几个html5的标签
article aside audio canvas datalist command details embed figcaption footer header hgroup keygen mark nav section time video summery meter output progress source
4. 语义化的理解
- html语义化就是让页面的内容结构化,便于浏览器,搜索引擎解析
- 没有样式css的时候也会以一定的文档的格式显示,容易阅读
- 搜索引擎的爬虫根据标记来确定上下文和关键字的权重,利于网站的SEO
- 便于开发人员的阅读理解和维护
- 我们在js中同样要遵守语义化,在对变量和函数进行命名的时候同样应该按照一定的含义进行
5. 谈谈对html5的理解
- 良好的移动性,以移动设备为主
- 响应式设计,以适应自动变化的屏幕尺寸
- 支持离线缓存技术
- 新增许多新标签
- 地理定位
- 新增websocket/webwork技术
6. 如何对网站的文件和资源进行优化
- 文件合并(减少http请求)
- 文件压缩(减少文件的体积)
- 使用cdn托管资源
- 使用缓存
- 图片使用精灵图(减少请求的次数)
7. 什么是盒模型
- 在我们的元素中,一个元素占有空间的大小由几个部分组成,其中包括的内容(content)填充(padding)边框(border)以及边界(margin)这个是我们正常的盒模型
- 通常我们在做移动端的项目的时候,会用另外的一种盒子模型,IE盒模型,也叫怪异盒模型,怪异盒模型和我们正常的盒模型的计算的方式是有区别的,下面是两种盒模型的计算的方式
- 在标准模式下,一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
- 在怪异模式下,一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)
8. 行内元素块级元素空元素有哪些?
- 常见的行内元素: a、b、span、img、input、strong、select、label、em、button、textarea
- 常见的块级元素: div、ul、li、dl、dt、dd、p、h1-h6、blockquote
- 空元素(没有内容的元素): br、meta、hr、link、input、img
9. css实现垂直水平居中的方式
//html 结构
<div class="wrapper">
<div class="content"></div>
</div>
//css的部分
//第一种
.wrapper {
position: relative;
}
.content {
position: absolute;
width: 50%;
height: 50%;
overflow: auto; //防止内容越界溢出
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
//第二种(添加一个类名)
.is-Negative {
position: absolute;
width: 100px;
height: 200px;
padding: 10px;
top: 50%; left: 50%;
margin-left: -60px; //(width + padding)/2
margin-top: -110px; //(height + padding)/2
}
//使用弹性盒的方式
//因为使用的是css3的属性所以存在兼容的问题,一般应用于移动端
.wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 500px;
height: 300px;
}
.content {
width: 200px;
height: 200px;
}
10. 简述下src和href的区别
- href:是指向网络资源的位置,建立和当前的元素(锚点)或者当前文档之间的链接,一般用于超链接
- src: 指向外部文件的位置,指向的内容会嵌入到当前的文档的当前的位置,但是这个引用的话会阻塞浏览器的运行,所以一般我们js文件之类的会放在文档的最底部;
11. 简述同步异步的区别
同步是阻塞模式,而异步是非阻塞模式
- 同步: 指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回我们需要的信息,那么这个进程会持续进行等待,知道获取需要的信息
- 异步: 与同步不同,进程不会持续等待,而是进行下面的操作,,不管其他进程的状态,当收到返回的消息的时候才会进行处理,我们现在使用的请求数据的方式一般就是异步的;
12. px、em、rem的区别
- px: 我们最常用的一个长度的单位,一个px指的就是一个像素
- em: 现在在所有的浏览器默认的字体的大小都是16px,而此时我们的em默认的大小就是16px,但是em这个单位是相对于它的父元素来说的,如果他的父元素的大小事10px,此时的1em就为10px
- rem: 相比于em的针对父元素进行计算,rem是相对于文档的html或者body进行计算的,同样的rem也是存在默认的值的,在不设置html或者body的font-size的属性的时候,默认的rem的大小是16px
13. 各大主流浏览器的内核
- IE浏览器内核:Trident内核,也是俗称的IE内核;
- Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核
- Firefox浏览器内核:Gecko内核,俗称Firefox内核
- Safari浏览器内核:Webkit内核;
- Opera浏览器内核:最初是自己的Presto内核,后来加入谷歌大军,从Webkit又到了Blink内核;
- 360浏览器、猎豹浏览器内核:IE+Chrome双内核;
- 搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高速模式);
- 百度浏览器、世界之窗内核:IE内核;
- 2345浏览器内核:好像以前是IE内核,现在也是IE+Chrome双内核了
- UC浏览器内核:这个众口不一,UC说是他们自己研发的U3内核,但好像还是基于Webkit和Trident,还有说是基于火狐内核。
14. sessionStorage 、localStorage 和 cookie 之间的异同
共同点:都是保存在浏览器端,且同源的。
- cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递;cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。
- 而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
- 作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
- 数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
15. Ajax的优缺点及工作原理
定义: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面
优点:
- 无刷新更新数据(Ajax最大的优点就是能在不刷新整个页面的情况下维持与服务器通信)
- 异步与服务器通信(使用异步的方式与服务器通信,不打断用户的操作)
- 前端与后端负载均衡(将一些后端的工作移到前端,减少服务器与带宽的负担)
- 基于规范被广泛支持(不需要下载浏览器插件或者小程序,但需要客户允许JavaScript在浏览器上执行。)
- 界面与应用分离(Ajax使得界面与应用分离,也就是数据与呈现分离)
缺点:
- Ajax干掉了Back与History功能,即对浏览器机制的破坏(在动态更新页面的情况下,用户无法回到前一页的页面状态,因为浏览器仅能记忆历史纪录中的静态页面)
- 安全问题(AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁,Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。)
- 对搜索引擎支持较弱
- 破坏程序的异常处理机制
- 违背URL与资源定位的初衷
- 不能很好地支持移动设备
- 客户端肥大,太多客户段代码造成开发上的成本
Ajax的原理:
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成,通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面