HTML前端面试题整理’

对WEB标准以及W3C的理解与认识

• 标签闭合、
• 标签小写、
• 不乱嵌套、
• 提高搜索机器人搜索几率、
• 使用外 链css和js脚本、
• 结构行为表现的分离、
• 文件下载与页面速度更快、
• 内容能被更多的用户所访问、
• 内容能被更广泛的设备所访问、
• 更少的代码和组件， 容易维 护、
• 改版方便， 提高网站易用性。

列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个

1）对象：

1. window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性
2. document对象，文档对象；
3. location对象，浏览器当前URL信息；
4. navigator对象，浏览器本身信息；
5. screen对象，客户端屏幕信息；
6. history对象，浏览器访问历史信息；

2）方法：

1. Alert()
2. confirm()
3. prompt()
4. open()
5. close()

你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

• IE: trident内核
• Firefox：gecko内核
• Safari:webkit内核
• Opera:以前是presto内核，Opera现已改用Google Chrome的Blink
• Chrome:Blink(基于webkit，Google与Opera Software共同开发)

Doctype的作用？严格模式与混杂模式的区别？

用于告知浏览器该以何种模式来渲染文档（重点：告诉浏览器按照何种规范解析页面）。

严格模式下：页面排版及JS解析是以该浏览器支持的最高标准来执行；
混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容。

前端页面有哪三层构成，分别是什么?作用是什么?

• 结构层 Html
• 表示层 CSS
• 行为层 JS

div+css的布局较table布局有什么优点？

• 改版的时候更方便 只要改css文件。
• 页面加载速度更快、结构化清晰、页面显示简洁。
• 表现与结构相分离。
• 易于优化（seo）搜索引擎更友好，排名更容易靠前。

img的alt与title有何异同？ strong与em的异同？

• alt ：属性用来指定替换文字。
• title(tool tip): 该属性为设置该属性的元素提供建议性的信息。
• strong: 粗体强调标签，强调，表示内容的重要性 。
• em: 斜体强调标签，更强烈强调，表示内容的强调点。

描述一下渐进增强和优雅降级之间的不同吗?

渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

• 优雅降级是从复杂的现状开始，并试图减少用户体验的供给。
• 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
• 降级（功能衰减）意味着往回看。
• 渐进增强则意味着朝前看，同时保证其根基处于安全地带。

为什么利用多个域名来存储网站资源会更有效？

• CDN缓存更方便
• 突破浏览器并发限制
• 节约cookie带宽
• 节约主域名的连接数，优化页面响应速度
• 防止不必要的安全问题

请谈一下你对网页标准和标准制定机构重要性的理解。

网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

请描述一下cookies，sessionStorage和localStorage的区别？

sessionStorage：用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，因此它不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage：用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别：
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

简述一下src与href的区别。

src：用于替换当前元素。
href：用于在当前文档和引用资源之间确立联系。

知道的网页制作会用到的图片格式有哪些？

png-8，png-24，jpeg，gif，svg，Webp。
Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

dns缓存，cdn缓存，浏览器缓存，服务器缓存。

一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

1. 图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
2. 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
3. 如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
4. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
5. 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

你如何理解HTML结构的语义化？

当页面样式加载失败的时候能够让页面呈现出清晰的结构，有利于seo优化，利于被搜索引擎收录，便于项目的开发及维护，使html代码更具有可读性，便于其他设备解析。

有哪些方式可以对一个DOM设置它的CSS样式？

• 外部样式表，引入一个外部css文件
• 内部样式表，将css代码放在 标签内部 内联样式，
• 将css样式直接定义在 HTML元素内部

IE的双边距BUG：

块级元素float后设置横向margin，ie6显示的margin比设置的较大。
解决：加入_display：inline

HTML与XHTML——二者有什么区别？

1. 所有的标记都必须要有一个相应的结束标记
2. 所有标签的元素和属性的名字都必须使用小写
3. 所有的 XML 标记都必须合理嵌套
4. 所有的属性必须用引号 “” 括起来
5. 把所有 < 和 & 特殊符号用编码表示
6. 给所有属性赋一个值
7. 不要在注释内容中使用 “–”
8. 图片必须有说明文字

html常见兼容性问题？

1. 双边距BUG float引起的 使用display
2. 3像素问题 使用float引起的 使用dislpay:inline -3px
3. 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4. Ie z-index问题 给父级添加position:relative
5. Png 透明 使用js代码 改
6. Min-height 最小高度 ！Important 解决’
7. select 在ie6下遮盖 使用iframe嵌套
8. 为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
9. IE5-8不支持opacity，解决办法：

.opacity {
    opacity: 0.4
    filter: alpha(opacity=60); /* for IE5-7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}

怎样添加、移除、移动、复制、创建和查找节点

1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？

• 如果说放在body的封闭之前，将会阻塞其他资源的加载
• 如果放在body封闭之后，不会影响body内元素的加载

iframe的优缺点？

优点：

1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
2. Security sandbox
3. 并行加载脚本

缺点：

1. iframe会阻塞主页面的Onload事件
2. 即时内容为空，加载也需要时间
3. 没有语意

documen.write和 innerHTML 的区别？

• document.write 只能重绘整个页面
• innerHTML 可以重绘页面的一部分

如何在HTML中添加事件，几种方法？

1、标签之中直接添加 onclick="fun()";
2、JS添加 Eobj.onclick = method;
3、现代事件 IE9以前： obj.attachEvent('onclick', method)；
      标准浏览器: obj.addEventListener('click', method, false);

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

（1）查找浏览器缓存
（2）DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
（3）进行HTTP协议会话
（4）客户端发送报头(请求报头)
（5）服务器回馈报头(响应报头)
（6）html文档开始下载
（7）文档树建立，根据标记请求所需指定MIME类型的文件
（8）文件显示

有哪些性能优化的方法？

（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
怎么解决命名冲突。

线程与进程的区别

一个程序至少有一个进程,一个进程至少有一个线程.
线程的划分尺度小于进程，使得多线程程序的并发性高。
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别