前端面试题目汇总摘录（不持续更新）

Posted 2021-01-13 lbh2018

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端面试题目汇总摘录（不持续更新）相关的知识，希望对你有一定的参考价值。

温故而知新，保持空杯心态

html 和 CSS

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

浏览器名称	内核
IE	trident
Firefox（火狐）	gecko
Safari	webkit
Opera	以前是 presto ，现在已改用 Google Chrome 的 Blink 内核
Chrome（谷歌）	Blink（基于 webkit，Google 与 Opera Software 共同开发）

每个 HTML 文件里开头都有个重要的东西， Doctype,知道这个是干什么的吗？

<! DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前，此标签可以告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照哪种规范解析页面）

Quirks 模式是什么？它和 Standards 模式有什么区别？

从 IE6 开始，引入了 Standards 模式，标准模式中，浏览器尝试符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。

在IE6 之前 CSS 还不够成熟，所以 IE5 等之前的浏览器对 CSS 的支持很差，IE6 将对 CSS 提供更好的支持，然后这时问题就来了，因为有很多页面是基于旧的的布局方式写的，如果 IE6 支持 CSS 则将这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制？

在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，提供更强大的功能，尤其是新功能不兼容旧功能的时候。遇到这种问题时的一个常见的做法就是增加参数和分支，即当某个参数为真，我们就使用新的功能，如果这个参数不为真的时候，就使用旧的功能，这样就可以不破坏原来的程序，又能提供新的功能。IE6 也是类似这样做，它将 DTD 当成了这个参数，因为当前的页面大家都不会去写 DTD ，所以 IE6 就假定如果写了 DTD 就意味着这个页面将采用对 CSS 支持更好的布局，而如果没有，就采用兼容之前的布局方式，这就是 Quirks 模式（怪癖模式，诡异模式，怪异模式）

实例：

<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd" >
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

第一种：表明该页面是遵守了 HTML5 规范的，浏览器会选择 Standards Mode ，这种 doctype 是最推荐的一种。

第二种：浏览器同样会选择 Standards Mode ,虽然第一种 doctype 有一些区别，但几乎可以认为是一样的

第三种：浏览器会选择 Almost Standards Mode ，需要注意的是乳沟今后需要把这个页面重新改写成 HTML5 规范，那么 table 标签中的分割图片问题可能会被错乱。

当 doctype 缺失（不注明、写错）时候，浏览器会选择 Quirks Mode,这是非常不推荐的方式，我们应该尽量避免 Quirks Mode

区别：

总体会有布局、样式解析和脚本执行三个方面的区别。

早期的 IE 浏览器（IE 6 以前）将盒子的 padding 和 border 算到了盒子的尺寸中，这一模型被称为 IE 盒模型。在 IE 盒模型中
1. box width = content width + padding left + padding right + border left + border right
  
  box width = content width + padding left + padding right + border left + border right
而在 W3C 标准的盒模型中，box 的大小就是 content 的大小
1. box width = content width，box height = content height
这一区别将导致页面绘制时所有的块级元素都出现很大的差别，所以两种不同的文档模式下的页面也区别很大。
设置行内元素的高宽，在 Standards 模式下，给 <span> 等行内元素设置 width 和 height 都不会生效，而在 quirks 模式下，会生效。
设置百分比的高度，在 Standards 模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置了一个百分比的高度是无效用的。
margin:0 auto 设置水平居中，使用 margin:0 auto 在 standards 模式下可以使元素水平居中，但在 quirks 模式下却会失效。
在Quirks Mode下，为body设置一个margin是无效的。
默认情况下，IE有一个垂直滚动条，尽管当没有东西可以滚动的时候，它是非活动状（迟钝状态），在Quirks Mode下，你可以通过设置body { overflow: auto;}删除它（当不需它的时候），但是在标准模式下，你仍然需要增加html { overflow: auto;}
默认的浮动图片的水平margin是3像素（而不是0）。
字体属性不会从body或其他封闭元素继承到table中。特别是font-size。字体，颜色，行高也都有可能。

（还有很多，答出什么不重要，关键是看他答出的这些是不是自己经验遇到的，还是说都是
看文章看的，甚至完全不知道。）

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

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

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

alt （alt text）：为不能显示图像、窗体或 applets 的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang 属性指定。（在 IE 浏览器下会在没有 title 时把 alt 当成 tool tip 显示）

title （tool tip）: 该属性为设置该属性的元素提供建议性的消息

strong：粗体强调标签，强调，表示内容的重要性

em：斜体强调标签，更强烈强调，表示内容的强调点

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

渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

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

“优雅降级”观点

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器前的一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨（poor,but passable）” 的浏览体验，可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其他的差异将被直接忽略。

“渐进增强”观点

“渐进增强”观点则认为应关注于内容本身

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有点寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到了内容。这使得“渐进增强“成为了一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其”分级式浏览器支持“策略的原因所在

可以利用多个域名来存储网站资源会更有效？

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

对网页标准和标准制定机构重要性的理解

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

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

sessionStorage （session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因为 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage 和 cookie 的区别

Web Storage 的概念和 cookie 相似，区别是它是为了更大容量存储设计的。Cookie 的大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。

除此之外，Web Storage 拥有 setItem,getItem,removeItem，clean 等方法，不像 cookie 需要前端开发者自己封装 setCookie,getCookie，但是 Cookie 也不是不可以或缺的：Cookie 的作用是与服务器进行交互，作为 HTTP 规范的一部分存在，而 Web Storage 仅仅是为了在本地“存储”数据而生。

前端设置用户设置，获取，清空 Cookie

// 写 cookies 
function setCookie(){
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "=" + encodeURIComponent(value) + "；expires=" + exp.toGMTString();
}

// 读取 cookies
function getCookie(name){
    var arr,reg = new RegExp("(^|)" + name + "+([^;]*)(;|$)");
    if(arr.document.cookie.match(reg)
        return decodeURIComponent(arr[2]);
    else
        return null;
}

//删除 cookies
function delCookie(name){
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    if(!cval = null){
       document.cookie = name + "=" + cval + ";expires" + exp.toGMTString();
     }
}

简述一下 src 与 href 的区别

src 用于替换当前元素， href 用于在当前文档和应用资源之间建立联系。

src 是 srouce 的缩写，指向外部资源的位置，指向的内容和将会嵌入到文档中当前标签所在位置，在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和frame 等元素。

<script src = "js.js"></script>

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也是如此，类似于将所指向资源嵌入当前标签内，这也是为什么将js脚本放在底部而不是头部。

href 是 Hypertext Reference 的缩写，指向网络资源所在的位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果在文档中添加

<link href = "common.css" rel="stylesheet"/>

那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link 方式来加载 css,也不是使用 @import 方式

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

png-8,png-24,jpeg,gif,svg

希望听到的是 Webp(是否有关注新鲜技术)，WebP,谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有 JPEG 的 2/3 ，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。在质量相同的情况下，WebP格式图像的体积要比 JPEG 格式图像小 40%

支持情况：谷歌浏览器已经支持webp格式，Opera在版本号Opera11.10后也增加了支持，然而火狐和ie暂时还不支持webp格式，可以采用flash插件来显示webp，当然这样会耗费一些性能。

美中不足的是，WebP格式图像的编码时间“比JPEG格式图像长8倍”。

详细可以点击都说 WebP 厉害，究竟厉害在哪里？

知道什么是微格式(microformat)？谈谈理解，在前端构建中应该考虑微格式吗？

微格式（Microformats）是一种让机器可读的语义化 XHTML 词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣）

微格式在实际应用中的意义和作用

在捉取Web内容时，能够更为准确地识别内容块的语义；
对内容进行操作，包括提供访问、校对，还可以将其转化成其他的相关格式，提供给外部程序和Web服务使用

实例：

// 以前写链接到首页的代码
<a href = "http://laibh.top">赖同学</a>
// 现在为a标签加上rel属性,标记a包括rel=”homepage”属性，该属性显示链接的目标页面是该网站的首页。通过为已有的链接元素添加语义化属性，就为这个链接添加了具体的结构和意义。
<a href = "http://laibh.top" rel = "homepage">赖同学</a>

hCard 微格式

hCard是一种微格式，用来发布个人，公司，组织，地点等详细的联系信息。它可以使分析器（比如其他网站，Firefox的Operator插件）获得详细的信息，并通过别的网站或者地图工具进行显示，或者载入到地址簿等其他程序。

实例：

<div>
    <div>赖同学</div>
    <div>某某公司</div>
    <div>电话：xxx-xxx-xxx</div>
    <a href = "http://laibh.top">赖同学的网站<a>
</div>
        
// 加入微格式后       
<div class = "vcard">
    <div class = "fn">赖同学</div>
    <div class = "org">某某公司</div>
    <div class = "tel">电话：xxx-xxx-xxx</div>
    <a class = "url" href = "http://laibh.top">赖同学的网站<a>
</div>

这里，正式名称（class=”fn”），组织（class=”org”），电话号码（class=”tel”）和url（class=”url”）分别用相应的class标示；同时，所有内容都包含在class="vcard"里。

目前看来，这似乎是一件费力不讨好的事情，因为 hCard 等微格式尚未得到浏览器和终端设备的良好支持。但是一旦这些不足得到了改善，hCard 就会为我们的数字生活带来很大的便利。

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

dns缓存：短时间内多次访问某个网站，在限定时间内，不用多次访问DNS服务器。

cdn缓存：内容分发网络

浏览器缓存：浏览器在用户磁盘上，对最新请求过的文档进行了存储。

服务器缓存：将需要频繁访问的Web页面和对象保存在离用户更近的系统中，当再次访问这些对象的时候加快了速度。

另外，关于更新发布CSS和JS文件的缓存问题

上文大概解决的思路：js文件的内容修改了,可以加个t参数表明一下日期,用这个日期来作为版本号，看到日期也能知道是哪天发布的，没有修改js文件就不用修改日期。

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

图片懒加载，在页面上的未可视区域添加一个滚动事件，判断图片位置与浏览器顶端的距离与页面距离，如果前者小于后者，优先加载

如果为幻灯片、相册等，可以使用图片预加载技术，将当期的展示图片的前一张和后一张优先加载。

如果图片为css图片。可以使用 CSSsprite,SVGsprite,Iconfont,Base64等技术。

如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

如果图片展示区域小于图片的真实大小，则因在服务端根据业务需要先进行图片压缩，图片压缩后大小与展示一致。

如果去理解 HTML 结构的语义化

为了去掉或样式丢失的时候能让页面呈现清晰的结构
屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.
PDA/手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对css支持较弱）
搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重，有利于SEO，和搜索引擎建立良好沟通
便于团队开发和维护。遵循W3C标准的团队，可以减少很多差异化的东西，方便开发维护，提高效率，甚至实现模块化开发。

以前端角度出发做好SEO 需要考虑什么？

了解搜索引擎如何抓取网页和如何索引网页

需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SEO robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。

Meta标签语义化

主要包括主题（Title）,网站描述（Description）和关键词（Keywords），还有一些其他隐藏文字比如作者（AuThor）,目录（Category）,编码语种（Language）等

如何选择关键词并在网页中放置关键词

搜索就得用关键词，关键词分析和选择是SEO的最重要的工作之一，首先要给网站确定主关键词（一般是5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

了解主要的搜索引擎

虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing 等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如 AOL 网页搜索用的是 Google 的搜索技术，MSN 用的是 Bing 的技术。

主要的互联网目录

Open Directory 自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收的，除了主页外还抓取大量的内容页面。

按点击付费的搜索引擎

搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有 Overture 和百度，当然也包括 Google 的广告项目 Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。

搜索引擎登录

网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如 Yahoo 要 299 美元），但是好消息是（至少到目前为止）最大的搜索引擎 Google 目前还是免费，而且它主宰着 60％以上的搜索市场。

链接交换和链接广泛度（Link Popularity）

网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来 Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。