面试基础

Html

什么是DOCTYPE

DOCTYPE Document Type 的简写,在页面中,用来指定页面所用的HTML或者XHTML的版本。 想要制作符合标注的页面,DOCTYPE声明是必不可少的组成部分。只有确定一个正确的DOCTYPE,XHTML 或者HTML里的标识和CSS才能正常生效。 以XHTML 1.0为例: XHTML 1.0中有3种DTD(文档类型定义) 声明可以选择:过渡的(Transitional)严格的(Strict)框架的(Frameset)

标准模式、准标准模式和混杂模式的区别?

不同文档模式主要影响CSS内容呈现,尤其是浏览器对于盒模型的解析,某些情况下也会影响到 JS的解析执行。 目前文档模式有四种

  1. 混杂模式(quirks mode) 让IE的行为与(包含非标准特性的)IE5相同

  2. 标准模式(standards mode)让IE的行为更接近标准行为

  3. 准标准模式(almost standards mode) 这种模式下的浏览器特性有很多都是符合标准的,不标准的地方主要体现在 处理图片间隙的时候(在表格中使用图片时问题最明显)。

  4. 超级标准模式: IE8引入的一种新的文档模式,超级文档模式可以让 IE以其所有版本中最符合标准的方式来解释网页内容。

总的来看,混杂模式让IE像IE5,标准模式使用IE7的呈现引擎,而超级标准模式则是IE8的默认文档模式。 ** 触发混杂模式: 如果在文档开始处没有发现文档类型声明,则所有浏览器都会默认开启混杂模式。 但采用混杂模式不是什么值得推荐的做法,因为不同浏览器在这种模式下的行为差异非常大, 如果不使用某些hack技术,跨浏览器的行为根本就没有一致性可言。 触发标准模式:

触发混杂模式:
如果在文档开始处没有发现文档类型声明,则所有浏览器都会默认开启混杂模式。但采用混杂模式不是什么值得推荐的做法,因为不同浏览器在这种模式下的行为差异非常大,如果不使用某些hack技术,跨浏览器的行为根本就没有一致性可言。
§ 触发标准模式:
§ <!-- HTML 4.01 严格型 -->
§ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
§ 
§ <!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
§ 触发准标准模式:
§ <!-- HTML 4.01 过渡型 -->
§ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
§ 
§ <!-- HTML 4.01 框架集型 -->
§ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
§ 
§ <!-- XHTML 1.0 过渡型 -->
§ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
§ 
§ <!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
§ IE8中关闭超级标准模式:
§ <meta http-equiv="X-UA-Compatible" content="IE=7" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

HTML和 XHTML之间有什么区别?

  • XHTML 指的是可扩展超文本标记语言
  • XHTML 与 HTML 4.01 几乎是相同的
  • XHTML 是更严格更纯净的 HTML 版本
  • XHTML 是以 XML 应用的方式定义的 HTML
  • XHTML 是 2001 年 1 月发布的 W3C 推荐标准
  • XHTML 得到所有主流浏览器的支持
  • XHTML 元素是以 XML 格式编写的 HTML 元素。 XHTML是严格版本的HTML,例如它要求标签必须小写,标签必须被正确关闭, 标签顺序必须正确排列,对于属性都必须使用双引号等。

页面类型为application/xhtml+xml会有什么问题?

答:application/xhtml+xmlXHTML系列文档的类型,会导致一些老的浏览器不支持。

data- 属性的好处是什么?

data-属性是自定义数据属性,在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放;

  • 使用attribute方法可以存取 data-* 自定义属性的值;
  • dataset属性存取data-*自定义属性的值;
  • data-属性选择器是很有用的一个选择器,可以根据自定义的 data- 属性选择相关的元素

谈谈cookie, sessionStorage 和localStorage之间的区别.

  • localStorage 持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
  • sessionStorage 不是一种持久化的本地存储,仅仅是会话级别的存储
  • cookie Web Storage的概念和cookie相似,区别是它是为了更大容量 存储设计的。 HTTP协议是无状态的协议。一旦数据交换完毕,客户端与服务器端的连接就会关 闭,再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话, Cookie就是这样的一种机制。它可以弥补HTTP协议无状态的不足。在Session出现之前 ,基本上所有的网站都采用Cookie来跟踪会话。Cookie实际上是一小段的文本信息。客 户端请求服务器,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁 发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,浏览 器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie,以此来辨认用户状态 。服务器还可以根据需要修改Cookie的内容。 Cookie的大小是受限的,并且每次你请求 一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要 指定作用域,不可以跨域调用。Cookie在客户端是由浏览器来管理的,浏览器能够保证 Google只会操作Google的Cookie而不会操作Baidu的Cookie,从而保证用户的隐私安 全。 除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法, 不像cookie需要前端开发者自己封装setCookie,getCookie。 但是 Cookie也是不可 以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而 Web Storage仅仅是为了在本地“存储”数据而生

script, script async 和 script defer之间的区别?

  • defer使得browsers延迟脚本的执行,直到文档的载入和解析完成,并可以操 作(在onload事件触发前),加上 defer 等于在页面完全在入后再执行,相 当于 window.onload ,但应用上比 window.onload 更灵活!
  • async 属性规定一旦脚本可用,则会异步执行。所以async使得browsers可以尽快地执行脚本,而 不用在下载脚本时阻塞文档解析(异步)。在不支持async的browsers中,通过动态创 建script元素并把它插入文档中,来实现脚本的异步载入和执行。 若两个属性同在,会忽略defer而遵从async。

为什么css样式的位置一般在head中而js的样式则是在body中?那有没有其他例外情况?

因为这和需要的加载顺序有关,CSS放在头部会先被加载,因为css样式表规定了网页总体 样式,而js一般是在其他内容加载完成之后起作用的,所以一般加载在尾部。head 内的 JavaScript 需要执行结束才开始渲染 body,如果有多个外连接脚本放在head中,那 么,当加载脚本时会阻塞页面的渲染,也就是常说的空白。而 CSS 应当写在 head 中,以 避免页面元素由于样式缺失造成瞬间的白页或者给用户闪烁感。 例外是:

  1. 个别特殊JS,比如用于调试的基础脚本(部署时未必有)、性能日志之类,必须放在尽量最前的位置。
  2. 一些需要在body之前加载的js文件,html5-shim脚本必须在body之前加载。
  3. 渐进式渲染中也需 要先加载js。

html5中有哪些新的标签

首先HTML5的特点是更加简洁以及更加语义化,html5中新 增的标签有如:nav,header,footer,artical,section,aside,canvas, details,mark,audio,video。

iframe有那些优缺点

只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改。

缺点:阻塞页面onload事件

搜索引擎无法检索这种页面,不利于SEO

会影响页面的并行加载

解决方案:使用JS动态给iframe的src加载页面内容

CSS

CSS 中类 (classes) 和 ID 的区别。

  1. 书写上的差别:class名用“.”号开头来定义,id名用“#”号开头来定义;
  2. 调用上的区别:在同一个html网页页面中class是可以被多次调用的(在不同的地方)。 而id名作为标签的身份则是唯一的,id在页面中只能出现一次。 在js脚本中经常会用到id来修改一个标签的属性
  3. id作为元素的标签,用于区分不同结构和内容,而class作为一个样式, 它可以应用到任何结构和内容上。
  4. 在布局思路上,一般坚持这样的原则:id是先确定页面的结构和内容,然后再为 它定义样式:而class相反,它先定义好一类样式,然后再页面中根据 需要把类样式应用到不同的元素和内容上面。
  5. 在实际应用时,class更多 的被应用到文字版块以及页面修饰等方面,而id更多地被用来实现宏伟布局和设计 包含块,或包含框的样式。

请问 “resetting” 和 “normalizing” CSS 之间的区别?你会如何选择,为什么?

  • Normalize 相对「平和」,注重通用的方案,重置掉该重置的样式,保留有用的 user agent 样式, 同时进行一些 bug 的修复,这点是 reset 所缺乏的。
  • Reset 相对「暴力」,不管你有没有用,统统重置成一样的效果,且影响的范围很大, 讲求跨浏览器的一致性。
  • Normalize.css是一种CSS reset的替代方案。它们的区别有:
  1. Normalize.css 保护了有价值的 默认值,Reset通过为几乎所有的元素施加默认样式,强行使得元素有相同的 视觉效果。相比之下,Normalize.css保持了许多默认的浏览器样式。这就意味着 你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同 的默认值时,Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
  2. Normalize.css 修复了浏览器的bug,它修复了常见的桌面端和移动端浏 览器的bug。这往往超出了Reset所能做到的范畴。关于这一点,Normalize.css修复 的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG 的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
  3. Normalize.css 不会让你的调试工具变的杂乱
  4. Normalize.css 是模块化的
  5. Normalize.css 拥有详细的文档 选择Normalize.css ,主要是 reset.css为几乎所有的元素施加默认样式,所 以需要对所有公共的排版元素重新设置样式,这是一件很麻烦的工作。

请解释浮动 (Floats) 及其工作原理。

float属性定义了元素是否浮动及在哪个方向浮动,在CSS中任何元素都可以浮动,且浮动元素会生成一个块级框,而不论它本身是何种元素。并且盒子的宽度不在伸展,而是根据盒子里面的内容的宽度来确定。浮动属性会使得浮动的元素脱离文档流,所以文档的普通流中的块框会表现的像浮动框不存在一样。

block,inline和inline-block的概念以及区别

首先这是display中的三个属性值,不是元素指类型,元素类型在HTML5之前分为两种分 别是块级元素( block-level elements)和内连元素( inline elements)。

但是当display的属性值被设置为block时,元素会以块级元素( block-level elements)显示, 而设置为inline时会以内连元素( inline elements)显示。 display:block block元 素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满 其父元素宽度。 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独 占一行。 block元素可以设置margin和padding属性。

display:inline inline元素不会独 占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素 的内容而变化。 inline元素设置width,height属性无效。 inline元素的margin和padding 属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边 距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产 生边距效果

display:inline-block 简单来说就是将对象呈现为inline对象,但是对象的内 容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素) inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。即对 inline-block元素可以设置宽度和高度,同时inline-block元素又可以在同行进行排列。 备注:属性为inline-block元素之间的空格或者换行在浏览器上会是一个空白的间隙。 且IE6和7是不支持这个属性的,需要通过*display:inline;*zoom:1做hack处理。

请解释 CSS sprites,以及你要如何在页面或网站中实现它。

通常被意译为“CSS图像拼合”或“CSS贴图定位”。 CSS Sprites就是把网页中一些背景图片整合到一张图片文件中, 再利用CSS的“background-image”,“background- repeat”,“background-position” 的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。 优点:当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片。这是一个了不起的改进, 它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟, 使效果更流畅,不会停顿。 缺点:做图像拼合的时候很麻烦。

  1. @import只能加载css 最好是@import:url(index.css)
  2. 加载顺序的差别,最后加载import
  3. 老浏览器不兼容

:before和::before区别?

单冒号(:)是css2的写法

双冒号(::)用于CSS3。作用是一样的。

加分项:

配合content一起使用,不会出现在DOM中,所以不能JS控制,仅仅用于css渲染,通常用于 hover激活

8.如何让一个div上下左右居中? (1)position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);

(2)position:absolute;left:0;top:0;bottom:0;right:0; margin:auto;

(3)width:200px;height:200px;border: 1px solid red;background:#99f;position:absolute;left:50%;top:50%; margin-left:-100px;margin- top:-100px;

JS

js单线程,为什么?

js单线程,原因避免dom渲染冲突

数据类型

  • 基本类型:Undefined,Boolean,String,Number,Null,Symbol,BigInt

  • 引用类型:Object (Array,Date,RegExp,Function)

什么是模块化?

  • 模块化就是为了减少系统耦合度,提高高内聚,减少资源循环依赖,增强系统框架设计。
  • 让开发者便于维护,同时也让逻辑相同的部分可复用
  • 模块化开发:针对js、css,以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、

api暴露、按需加载与执行、安全合并等问题,css方面解决依赖管理、组件内部样式管理等问题。

谈一谈JavaScript作用域链

当执行一段JavaScript代码(全局代码或函数)时,JavaScript引擎会创建为其创建一个作用域又称为执行上下文(Execution Context),在页面加载后会首先创建一个全局的作用域,然后每执行一个函数,会建立一个对应的作用域,从而形成了一条作用域链。每个作用域都有一条对应的作用域链,链头是全局作用域,链尾是当前函数作用域。

作用域链的作用是用于解析标识符,当函数被创建时(不是执行),会将this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中,当JavaScript需要查找变量X的时候(这个过程称为变量解析),它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性,如果没有找到就顺着作用域链继续查找,直到查找到链头,也就是全局作用域链,仍未找到该变量的话,就认为这段代码的作用域链上不存在x变量,并抛出一个引用错误(ReferenceError)的异常。

如何理解JavaScript原型链

JavaScript中的每个对象都有一个prototype属性,我们称之为原型,而原型的值也是一个对象,因此它也有自己的原型,这样就串联起来了一条原型链,原型链的链头是object,它的prototype比较特殊,值为null。

原型链的作用是用于对象继承,函数A的原型属性(prototype property)是一个对象,当这个函数被用作构造函数来创建实例时,该函数的原型属性将被作为原型赋值给所有对象实例,比如我们新建一个数组,数组的方法便从数组的原型上继承而来。

当访问对象的一个属性时, 首先查找对象本身, 找到则返回; 若未找到, 则继续查找其原型对象的属性(如果还找不到实际上还会沿着原型链向上查找, 直至到根). 只要没有被覆盖的话, 对象原型的属性就能在所有的实例中找到,若整个原型链未找到则返回undefined

创建对象的四种方法

var o1 = {name:'abcd01'};
    var o2 = new Object({name:'abcdo2'});
    function M(name) {
        this.name=name;
    }
    var o3 = new M('abcdo3');
    var p={name:'abcdp'};
    var o4 = Object.create(p);
    ps:o4创建了一个原型,o4.__proto__===p
1
2
3
4
5
6
7
8
9

请解释一下 JavaScript 的同源策略。

概念:同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。它最早出自Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。

这里的同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议。

指一段脚本只能读取来自同一来源的窗口和文档的属性。

websocket

是一种协议,可以让我们建立客户端到服务器端的全双工通信,这就意味着服务器端可以主动推送数据到客户端

介绍一下你对浏览器内核的理解?

主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。

  • 渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等), 以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释 会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网 络内容的应用程序都需要内核。
  • JS引擎则:解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。

null和undefined的区别?

null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。

undefined

  1. 变量被声明了,但没有赋值时,就等于undefined。
  2. 调用函数时,应该提供的参数没有提供,该参数等于undefined。
  3. 对象没有赋值的属性,该属性的值为undefined。
  4. 函数没有返回值时,默认返回undefined。

null

  1. 作为函数的参数,表示该函数的参数不是对象。
  2. 作为对象原型链的终点。

new操作符具体干了什么呢?

(1)创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。

(2)属性和方法被加入到 this 引用的对象中。

(3)新创建的对象由 this 所引用,并且最后隐式的返回 this 。

dom事件

  1. dom0 onclick

  2. dom2 window.addEventListener('click',function(){},false)

  3. dom3 window.addEventListener('keyup',function(){},false)

dom事件类

  • 捕获(上到下)顺序 window=>document=>html(document.documentElement获得html标签)>body>...
dom.addEventListener('click',function () { //dom为上一行捕获的对象
    console.log(123);//上一行每一个对象所捕获
},true); //为true才可以捕获
1
2
3
  • 冒泡(下到上)和上面相反
    • Event对象常见应用:
event.preventDefault();

event.stopPropagation();

event.stopImmediatePropagation() ; //一个对象有多个事件,添加这句话,其他的不会在执行

event.currentTarget; //当前所绑定的事件,父级对象

event.target
1
2
3
4
5
6
7
8
9
  • 自定义事件
//var eve = new Event('custome');
    
    //var eve = new Event('custome');
    var eve = new CustomEvent('custome', {
        detail: {
            username: "davidwalsh"
        }
        });//可以增加参数
    dom.addEventListener('custome',function (e) {
        console.log(e.detail)
    });
        dom.dispatchEvent(eve);//触发自定义事件
1
2
3
4
5
6
7
8
9
10
11
12

获得元素的宽高

var dom =document.getElementById('test') ;
    console.log(dom.style)
    console.log(dom.currentStyle);//ie
    console.log(window.getComputedStyle(dom));// 非ie
    console.log(dom.getBoundingClientRect())
1
2
3
4
5

浏览器缓存

浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时,获取缓存的流程如下:

先根据这个资源的一些 http header 判断它是否命中强缓存,如果命中,则直接从本地获取缓存资源,不会发请求到服务器;

当强缓存没有命中时,客户端会发送请求到服务器,服务器通过另一些 request header验证这个资源是否命中协商缓存,称为 http再验证,如果命中,服务器将请求返回,但不返回资源,而是告诉客户端直接从缓存中获取,客户端收到返回后就会从缓存中获取资源;

强缓存和协商缓存共同之处在于,如果命中缓存,服务器都不会返回资源;

区别是,强缓存不对发送请求到服务器,但协商缓存会。

当协商缓存也没命中时,服务器就会将资源发送回客户端。

ctrl+f5 强制刷新网页时,直接从服务器加载,跳过强缓存和协商缓存;

f5 刷新网页时,跳过强缓存,但是会检查协商缓存;

==和===

if(obj.a==null){
        //相当于obj.a===null||obj.a===undefined
        //jq源码是这样写的,
        //其他地方都用===
    }
1
2
3
4
5

实现一个promise

https://github.com/Liyuk/code-repertory/blob/master/promise/promise.js

安全

  1. XSS(Cross Site Scripting)跨站请求攻击

eg:写博客偷偷插入一段《scripyt》,攻击代码,获取cookie,发送到自己的服务器

发布博客,有人查看博客内容,会吧查看着的cookie发送到攻击者的服务器

预防:前端替换关键字,例如替换<为<,后端替换,一般都为后端处理,前端js执行能力低

  1. CSRF(Cross-site request forgery)跨站请求伪造

eg:你已经登录一个购物网站,正在浏览商品,付费接口是xxx.com/pay?id=100但是没有任何验证

然后你收到一封邮件,隐藏着《img src=xxx.com/pay?id=100》,你查看邮件的时候,就已经悄悄付费购买了

依赖用户登录后去执行一个漏洞接口

预防:增加验证流程(token,referer,隐藏令牌),输入指纹。密码。短信验证码

插入脚本(js代码)获得他想到的东西

开源工具

1)是否了解开源的工具 bower、npm、yeoman、grunt、gulp,有无用过,有无写过,一个 npm 的包里的 package.JSON 具备的必要的字段都有哪些(名称、版本号,依赖)

2)fiddle、charles 有没有用过,什么时候用

3)会不会用 ps 扣图,png、jpg、gif 这些图片格式解释一下,分别什么时候用。是否了解webp

4)说一下你常用的命令行工具

5)会不会用git,说上来几个命令,说一下git和svn的区别,有没有用git解决过冲突

考察学习能力和方法

1)你每天必须登录的网站(前端技术相关)是什么?

2)前端技术方面看过哪些书,有无笔记,都有哪些收获。

3)收藏了哪些代码片段?

4)怎么理解前端技术的大趋势?自己再做哪方面的知识储备?

5)是否了解或精通其他(后端)的编程语言?

6)做过的项目有没有什么(视觉、交互)美感?什么是美?你觉得让你自己赏心悦目的网站或应用有哪些?

7)做项目有没有遇到哪些印象深刻的技术攻关,具体遇到什么问题,怎么找答案的,最后怎么解的

性能优化

页面性能

  1. 资源合并压缩

  2. 非核心代码异步加载

  3. 动态脚本加载

  4. defer,在html解析完成后才会执行,如果是多个安装顺序依次执行

  5. async,加载完成后立即执行,如果是多个,执行顺序与加载顺序无关

  6. 利用浏览器缓存

  • 强缓存
    • expires Http1.0 中的标准,表明过期时间,注意此处的时间都是指的是服务器的时间。可以看到过期时间被设定为了:Thu, 28 Sep 2017 06:38:37 GMT存在的问题:服务器时间与客户端时间的不一致,就会导致缓存跟期待效果出现偏差。
    • Cache-Control Http1.1 中的标准,可以看成是 expires 的补充。使用的是相对时间的概念。简单介绍下Cache-Control的属性设置。max-age: 设置缓存的最大的有效时间,单位为秒(s)。max-age会覆盖掉Expires
  • 协商缓存 在这个阶段,服务器一般会将Cache-control、expires 、last-modified、date、etag (hash值)等字段在response header 中返回,便于下次缓存。当然具体的场景,也是看服务器的约定规则设定。
  1. 使用CDN
  2. cdn预解析
<meta http-equiv="x-dns-prefetch-control" content="on" />   //页面中的a标签一般会自动预解析,若是https协议,默认关闭dns预解析,这里强制预解析
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
1
2

dom性能优化

  1. 缓存dom
  2. 暂存dom
  3. 事件节流
  4. 尽早操作 DOMContentLoaded

错误监控

  • 错误分类
    1. 及时运行错误:代码错误 try...catch window.onerror
    2. 资源加载错误(不会冒泡)
object.onerror         
performance.getEntries()   (获得页面所有加载的资源,根据已经加载的资源间接判断加载失败的资源)                    
Error事件捕获
1
2
3
    <script type="text/javascript">
        window.addEventListener('error', function (e) {
            console.log('捕获', e);
        }, true);//这里一定是true表示要捕获
    </script>
1
2
3
4
5
  • 跨域的js能捕获到错误吗?

    • 错误信息:script:error
    • 出错行号和出错列拿不到为0 解决:
      1. 第一步,在客户端script增加crossorign属性,
      2. 第二步,在服务端设置js响应头Access-Control-Allow-Orign:*(或者指定域名)
  • 上报错误

    1. 利用ajax通信进行上报
    2. 利用image对象上报(大多数都用这个,简单,不用借助其他的库,一行代码解决所有)
eg:(new Image()).src = 'http://baidu.com/tesjk?r=tksjk';
1

主动抛出错误: throw new Error("错误信息")鄙视:

  • js中共有几种错误类型: 6种:
  1. SyntaxError 语法错误
  2. ReferenceError 引用错误T
  3. ypeError 类型错误RangeError
  4. 范围错误
  5. 参数超范围
  6. EvalError URIErro

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

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

但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp,Apng。(是否有关注新技术,新鲜事物)

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

  • Apng:全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展, 可以实现png格式的动态图片效果。04年诞生,但一直得不到各大浏览器厂商的支持, 直到日前得到 iOS safari 8的支持,有望代替GIF成为下一代动态图标准。

打开一个网页经历了那些过程?

http://web.jobbole.com/94150/

浏览器加载白屏是什么原因?

https://github.com/Mountain-Buzhou/Interview-Book/blob/master/docs/Collection/WhiteScreen.md

千万访问量的项目,前端需要注意些什么?

https://github.com/Mountain-Buzhou/Interview-Book/blob/master/docs/Collection/DozensOfVisits.md

HTTP

特点

  • 简单快速 :客户向服务器请求服务时,只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度很快。
  • 灵活:HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记
  • 无连接: 无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。
  • 无状态:HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。

报文

请求报文:请求行,请求头,空行,请求体

响应报文:状态行,响应头,空行,响应体

请求方法

  • GET 请求指定的页面信息,并返回实体主体。
  • HEAD 类似于get请求,只不过返回的响应中没有具体的内容,用于获取报头
  • POST 向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
  • PUT 从客户端向服务器传送的数据取代指定的文档的内容。
  • DELETE 请求服务器删除指定的页面。
  • CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
  • OPTIONS 允许客户端查看服务器的性能。
  • TRACE 回显服务器收到的请求,主要用于测试或诊断。

get和post的区别

get在浏览器回退时是无害的,post会再次提交请求

get的url可以收藏,post不可以

get请求会主动缓存,post不会,除非手动设置

状态码

  • 1xx:指示信息--表示请求已接收,继续处理
  • 2xx:成功--表示请求已被成功接收、理解、接受
  • 3xx:重定向--要完成请求必须进行更进一步的操作
  • 4xx:客户端错误--请求有语法错误或请求无法实现
  • 5xx:服务器端错误--服务器未能实现合法的请求

持久连接 管线化

  • 持久连接

    什么是持久连接?对于HTTP协议而言,它是基于请求响应模型,Client向Server发请求时,先建立一条HTTP连接,Server给Client响应数据后,连接关闭。

    当Client发送下一个请求时,需要重新再建立HTTP连接,这种方式就是:一个请求响应需要占用一条HTTP连接。而持久连接就是:只需要建立一条连接,然后在这条连接上 传输多个请求和响应。

    与持久连接相关的字段

    HTTP1.0中有一个Connection首部字段,它是一个逐跳首部字段。Connection:Keep-Alive,表示希望将此条连接作为持久连接。

    HTTP1.1中,建立的HTTP请求默认是持久连接的。当Client确定不再需要向Server发送数据时,它可以关闭连接,即在发送首部中添加Connection:Closed字段。

  • 管线化

    ①管线化机制通过持久连接完成,仅HTTP/1.1支持此技术

    ②只有GET和HEAD请求可以进行管线化,而POST会有所限制

    ③初次创建连接时不应启动管线机制,因为对方服务器不一定支持HTTP/1.1版本的协议

    持久连接的时候,某个连接消息传递类似于

    持久连接的一个最大的好处是:大大减少了连接的建立以及关闭时延。

    “缺点”,请求响应是顺序执行的。只有在请求1的响应收到之后,才会发送请求2,这就是持久连接与管道化连接不同的地方。

    请求1=>响应1=>请求2=>响应2

    管线化后

    请求1=>请求2=>响应1=>响应2

    管道化连接是需要持久连接支持的。管道化连接是在持久连接的基础上,以“流水线”的方式发送请求:不需要等到请求1的响应到达Client,就可以发送请求2....

HTTP 2.0与HTTP 1.1区别

https://www.cnblogs.com/frankyou/p/6145485.html

Vue

Vue router 跳转和 location.href 有什么区别?

router 是 hash 改变 location.href 是页面跳转,刷新页面

你能实现一下双向绑定吗? vdom snabbdom

  • 数据和视图的分离,解耦(开放封闭原则)
  • 以数据驱动视图,只关心数据变化,dom操作被封装
  • MVVM:model(模型数据) view(视图模板) ViewModel(DOM listeners,Date Bingings)一种创新

三要素:响应式、模板引擎、渲染

vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫 持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。 具体步骤:

1.diff算法是linux的基础命令,是git基本工具

2.vdom使用diff算法是为了找出需要更新的节点

3.diff实现,patch(container,vnode)(初次创建),patch(vnode,newVnode)(后面进行diff算法更新)

4.核心逻辑:下面的createElement和updateChildren

其他

一年半经验,百度、有赞、阿里面试总结

https://juejin.im/post/5befeb5051882511a8527dbe

前端技术清单

https://github.com/alienzhou/frontend-tech-list

美团技术团队

https://tech.meituan.com/

更多