面试题

作者: 嘤嘤嘤998 | 来源:发表于2019-02-09 10:49 被阅读0次

面试材料
高阶面试题
this的指向的面试题
面试所涉及的问题
Android超实用最全面试大纲（三）
Android最全面试大纲（三）
2022年web前端面试题
ios面试题
Android超实用最全面试大纲（四）
Android最全面试大纲（四）

Doctype作用
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

标准模式（严格模式）与兼容模式（混杂模式）的区别
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

HTML5 为什么只需要写 <!DOCTYPE HTML>
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）

行内元素有哪些？块级元素有哪些？空(void)元素有那些？
CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值

行内元素有：<a> <span> <img> <input> <select> <label> <strong>（强调的语气）
块级元素有：<div> <ul> <ol> <li> <dl> <dt> <dd> <h1> <h2> <h3> <h4>…<p> <table> <form>
常见的空元素： br hr <img> <input> <link> <meta>
鲜为人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

页面重构怎么操作？
编写 CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。

渐进增强 vs 优雅降级
由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能

渐进增强（Progressive Enhancement）：
一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：
一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

.transition { /*渐进增强写法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}
.transition { /*优雅降级写法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

推荐渐进增强的写法。因为前缀CSS3的某些属性在浏览器中的实现效果有可能与正常的CSS3实现效果不太一样，所以最终还是得以正常CSS3为准。

同源策略
源（origin）就是协议、域名和端口号。
若地址里面的协议、域名和端口号均相同则属于同源。
以下是相对于 http://www.a.com/test/index.html 的同源检测
• http://www.a.com/dir/page.html ----成功
• http://www.child.a.com/test/index.html ----失败，域名不同
• https://www.a.com/test/index.html ----失败，协议不同
• http://www.a.com:8080/test/index.html ----失败，端口号不同

WEB应用从服务器主动推送Data到客户端有那些方式？
html5 websoket
WebSocket通过Flash
XHR长时间连接
XHR Multipart Streaming
不可见的Iframe
<script>标签的长时间连接(可跨域)

== vs ===
==用于一般比较，===用于严格比较，==在比较的时候会自动转换数据类型，===严格比较，不转换数据类型，只要类型不匹配就返回flase。
举例说明：
"1" == true类型不同，"=="将先做类型转换，把true转换为1，即为 "1" == 1；此时，类型仍不同，继续进行类型转换，把"1"转换为1，即为 1 == 1。

如果比较："1" === true 左侧为字符型，右侧为bool布尔型或int数值型，左右两侧类型不同，结果为false；
如果比较： 1 === 1 左侧为int数值型，右侧为int数值型，左右两侧类型相同，数值大小也相同，结果为true；
如果比较： 1 === 2 左侧为int数值型，右侧为int数值型，左右两侧类型相同，但数值大小不同，结果为false。

NaN===NaN //返回false
NaN==NaN //返回false，NaN和所有值包括自己都不相等。
null===null //true
undefined===undefined //true
null==undefined //true

document load 和document ready的区别

load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数
问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
$(document).ready()是当DOM文档树加载完成后执行一个函数（不包含图片，css等）所以会比load较快执行
在原生的jS中不包括ready()这个方法，只有load方法就是onload事件

new操作符具体干了什么
(1) 创建一个新的空对象；
(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）；
(3) 新对象增加构造函数的基本方法和属性（执行构造函数中的代码）（新对象的proto指向构造函数的prototype）；
(4) 返回新对象。

如何判断一个对象是否属于某个类？
使用instanceof

      if(a instanceof Person){
           alert('yes');
      }

JS模块化

立即执行函数写法 (js的常用封装方法)
使用"立即执行函数"（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的。

//立即执行函数写法。
var module1 = (function(){
    var _count = 0;
    var m1 = function(){
        //...
    };
    var m2 = function(){
        //...
    };
    return {
        m1 : m1,
        m2 : m2
    };
})();

对象写法
会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。

//对象写法
var calculator = {
  add: function(a, b) {
    return parseFloat(a) + parseFloat(b);
  },
  subtract: function(a, b) {},
  multiply: function(a, b) {},
  divide: function(a, b) {}
};

使用div+css布局较table的优势
1、符合W3C标准的，网页由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。
2、布局更加灵活多样，能够通过样式选择来实现界面设计方面的更多要求。
3、布局改版方便，不需要过多地变动页面内容，通常只要更换相应的css样式就可以将网页变成另外一种风格展现出来。
4、布局可以让一些重要的链接和文字信息等优先让搜索引擎抓取，内容更便于搜索seo。
5、增加网页打开速度，增强用户体验。

为什么用多个域名存储网站资源更有效？
1、CDN缓存更方便
2、突破浏览器并发限制
3、节约cookie带宽
4、节约主域名的连接数，优化页面响应速度
5、防止不必要的安全问题

简要说明一下做好SEO需要考虑哪些方面？
1.TDK
2.图片+alt
3.友情链接
4.站点地图

css选择器的权重
标签的权重为1，class的权重为10，id的权重为100

如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

宽高都200px的div在浏览器窗口居中（水平垂直都居中）

 position:fixed;width:200px;height:200px;left:50%;top:50%; 
 margin-left:-100px;margin-top:-100px;

现在有一个数组[1,4,5,8,100],请写一个方法，每秒输出数组的第一个元素，知道整个数组输出完毕

    var arr = [1,4,5,8,100];
    function output(){
        setTimeout(function(){
            console.log(arr.splice(0,1)[0]);
            if(arr.length>0){
                output();
            }
        },1000);
    }
    output();

原型
原型的作用是为函数对象声明通用的变量或者函数，构造函数的实例都会从原型上继承属性和方法。
每个对象中都有proto属性，这个属性指向的就是它基于的原型对象。
原型链：

        var Person = function(name){
            this.name = name
        };
        Person.prototype.getName = function(){
            return this.name;
        }
        var lcy = new Person(Tom);
        lcy.getName();      //Tom

JS在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做proto的内置属性，用于指向创建它的函数对象的原型对象prototype。以上面的例子为例：

console.log(Tom.__proto__ === Person.prototype)     //true

//同样，person.prototype对象也有__proto__属性，它指向创建它的函数对象（Object）的prototype
console.log(Person.prototype.__proto__ === Object.prototype)    //true

//继续，Object.prototype对象也有__proto__属性，但它比较特殊，为null
console.log(Object.prototype.__proto__)   //null

//我们把这个有__proto__串起来的直到Object.prototype.__proto__为null的链叫做原型链

我们调用一个对象的属性或者方法的时候，会存在一个优先级的问题。
优先级为：构造函数内定义的属性>构造函数的原型上定义的属性>沿着proto指定的原型（原型链）一直往上找，直到找到null为止。任何一步一旦找到就立马停止，不会继续往下找。

    person1.__proto__ == Person.prototype;
    person1.constructor == Person;
    Person.prototype.constructor == Person;

IE6的双倍边距BUG指的是什么？怎么解决？
双边距：当块级元素有浮动样式的时候，给元素添加margin-left和margin-right样式，在ie6下就会出现双倍边距。
解决方案：给当前元素添加样式，使当前元素不为块，如：display:inline;display:list-item

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：

对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）
1）标签字母要小写
2）标签要闭合
3）标签不允许随意嵌套
对于css和js来说
1）尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
2）样式尽量少用行间样式表，使结构与表现分离，
标签的id和class等属性命名要做到见文知义，
标签越少，加载越快，用户体验提高，代码维护简单，便于改版
3）不需要变动页面内容，就可以操作页面样式和数据，提高网站易用性。

WEB标准（结构、表现、行为分离）有哪些优点呢?
页面响应快：HTML文档体积变小，响应时间短
易于维护：只需更改CSS文件，就可以改变整站的样式
设备兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式
可访问性：语义化的HTML（结构和表现相分离的HTML）编写的网页文件，更容易被屏幕阅读器识别
搜索引擎：语义化的HTML能更容易被搜索引擎解析，提升排名

XHTML 与 HTML 之间的差异

最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
更多的 XHTML 语法规则：
属性名称必须小写
属性值必须加引号
属性不能简写
用 Id 属性代替 name 属性
XHTML DTD 定义了强制使用的 HTML 元素
简单一句话就是：XHTML只要网页中出现一处错误，则浏览器停止解析，而HTML语言不会出现这种情况。

async vs defer

async属性的脚本都在它下载结束之后立刻执行（下载时不阻塞页面渲染），但执行顺序不能控制，先下载完的先执行
defer属性的脚本都是在html解析完毕之后，按照原本的顺序执行

link和@import的区别是?

从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
权重区别
link引入的样式权重大于@import引入的样式。

有继承性的属性：

字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
元素可见性：visibility，opacity
表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
列表属性：list-style-type、list-style-image、list-style-position、list-style

无继承的属性

display
文本属性：vertical-align, text-decoration, text-shadow, white-space, unicode-bidi
盒子模型的属性:宽度、高度、内外边距、边框等
背景属性：背景图片、颜色、位置等
定位属性：浮动、清除浮动、定位position等

继承中比较特殊的几点
1, a 标签的字体颜色不能被继承
2, h1-h6标签字体的大下也是不能被继承的
因为它们都有一个默认值

alt vs title
alt是在图片无法加载的时候才会显示其值
而title是在图片正常加载鼠标划上去显示的值，虽然alt也有后者的功能，但是只是在低版本的ie浏览器才支持，高版本及标准浏览器不支持这个功能了。

IE和标准下有哪些兼容性的写法？

Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

ajax请求的时候get 和post方式的区别？
一个在url后面一个放在虚拟载体里面
有大小限制
安全问题
应用不同一个是论坛等只需要请求的，一个是类似修改密码的

对Node的优点和缺点提出了自己的看法？

（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，
因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。
（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

documen.write和 innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分

HTTP状态码
HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。HTTP状态码共分为5种类型：

1** 信息，服务器收到请求，需要请求者继续执行操作
2** 成功，操作被成功接收并处理
3** 重定向，需要进一步的操作以完成请求
4** 客户端错误，请求包含语法错误或无法完成请求
5** 服务器错误，服务器在处理请求的过程中发生了错误

常见：

200 OK 请求成功。一般用于GET与POST请求
301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
400 Bad Request 客户端请求的语法错误，服务器无法理解
404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
500 Internal Server Error 服务器内部错误，无法完成请求