面试问题

前端

跨域问题

　　同源：两个文档需知足：协议相同，域名相同，端口相同。

　　跨域通讯 ：js进行DOM操做、通讯时若是目标与当前窗口不知足同源条件，浏览器为了安全会阻止跨域操做。

　　跨域通讯一般有如下方法：

若是请求json数据，使用<script>进行jsonp请求
内部服务器代理请求跨域url，而后返回数据

 

call 和 apply 方法是作什么的？有什么区别？

　　call, apply 方法是改变函数体内部 this 的指向。好比[].slice.call(对象,参数)

　　区别：接收 参数 的方式不一样。call是把参数按顺序传进去，而 apply 则是把参数放进一个数组中，把数组传进去。

 

箭头函数的 this

　　箭头函数 不是function关键字定义的函数; 箭头函数中的 this 在函数被定义的时候就已经 绑定 好了，而 不是 取决于谁调用这个函数，this就指向谁。箭头函数的this取决于最近的一个非箭头父级函数的this指向。

var obj = {
  a: 10,
  b: () => {
    console.log(this.a); //undefined
    console.log(this); //window
  },
  c: function() {
    console.log(this.a); //10
    console.log(this); //obj{...}
  }
}
obj.b(); 
obj.c();

 

css 盒子模型

　　盒子的组成： margin + border + padding + content

 

 什么是闭包， 应用场景？

　　将函数或方法做为值传递，都会引发闭包。如C#中的Lambda表达式。

　　因为JavaScript的垃圾回收机制，普通函数执行完以后，变量就会被直接回收。可是，闭包的方式可让变量一直存在，不被回收。

function add () {
  var count = 0;
  function demo() {
    count ++;
    console.log(count);
  }
  return demo;
}
var counter = add();
counter();
counter();

 

什么是 IIFE， 应用场景？

　　IIFE：当即执行函数
　　IIFE中定义的任何变量和函数，都会在执行结束时被销毁。适合作初始化工做。

(function() {
  var a = 123;
  var b = 234;
  console.log(a+b);
})()

 

如何实现继承

　　设置原型链实现继承一
　　缺点: 父类实例属性为引用类型时，不恰当地修改会致使全部子类被修改。

// Person.prototype --原型
function Person() {};
Person.prototype.name = 'sun';
var ppp  = new Person();

　　Object.create() 方式实现类继承
　　这个方法会返回一个的 一个新对象， 带着指定的原型对象和属性

function Father() {
  this.name = 'sun';
  this.age = 18;
}
// 父类方法
Father.prototype.getName = function () {
  return this.name;
}
function Child() {
  Father.call(this); // call father constructor
}
// 子类继承父类
Child.prototype = Object.create(Father.prototype);
Child.prototype.constructor = Child;

 

输入url到渲染的过程

在浏览器地址栏输入URL
浏览器查看缓存，若是请求资源在缓存中而且新鲜，跳转到转码步骤：
若是资源未缓存，发起新请求； 若是已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，不然与服务器进行验证。检验新鲜一般有两个HTTP头进行控制Expires和Cache-Control：
HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
HTTP1.1增长了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
浏览器解析URL获取协议，主机，端口，path
浏览器组装一个HTTP（GET）请求报文
浏览器获取主机ip地址，过程以下：
浏览器缓存
本机缓存
hosts文件
路由器缓存
ISP DNS缓存
DNS递归查询（可能存在负载均衡致使每次IP不同）
打开一个socket与目标IP地址，端口创建TCP连接，三次握手以下：
客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口
服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
客户端发送ACK=Y+1， Seq=Z
TCP连接创建后发送HTTP请求
服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
服务器检查HTTP请求头是否包含缓存验证信息若是验证缓存新鲜，返回304等对应状态码
处理程序读取完整请求并准备HTTP响应，可能须要查询数据库等操做
服务器将响应报文经过TCP链接发送回浏览器
浏览器接收HTTP响应，而后根据状况选择关闭TCP链接或者保留重用，关闭TCP链接的四次握手以下：
主动方发送Fin=1， Ack=Z， Seq= X报文
被动方发送ACK=X+1， Seq=Z报文
被动方发送Fin=1， ACK=X， Seq=Y报文
主动方发送ACK=Y， Seq=X报文
浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些状况处理与2XX不一样
若是资源可缓存，进行缓存
对响应进行解码（例如gzip压缩）
根据资源类型决定如何处理（假设资源为HTML文档）
解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操做没有严格的前后顺序，如下分别解释
构建DOM树：
Tokenizing：根据HTML规范将字符流解析为标记
Lexing：词法分析将标记转换为对象并定义属性和规则
DOM construction：根据HTML标记关系将对象组成DOM树
解析过程当中遇到图片、样式表、js文件，启动下载
构建CSSOM树：
Tokenizing：字符流转换为标记流
Node：根据标记建立节点
CSSOM：节点建立CSSOM树
根据DOM树和CSSOM树构建渲染树
js解析
显示页面（HTML解析过程当中会逐步显示页面）

 

sessionStorage,localStorage,cookie区别

　　都会在浏览器端保存，有大小限制，同源限制
　　cookie会在请求时发送到服务器，做为会话标识，服务器可修改cookie；web storage不会发送到服务器
　　cookie有path概念，子路径能够访问父路径cookie，父路径不能访问子路径cookie
　　有效期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效；localStorage长期有效，直到用户删除
　　共享：sessionStorage不能共享，localStorage在同源文档之间共享，cookie在同源且符合path规则的文档之间共享
　　localStorage的修改会促发其余文档窗口的update事件
　　浏览器不能保存超过300个cookie，单个服务器不能超过20个，每一个cookie不能超过4k。web storage大小支持能达到5M

css画三角形

div1{
  border-style: solid;
  border-width: 0px 0px 100px 100px;
  border-color: transparent transparent blue transparent;
  width: 0px;
  height: 0px;
}

 

offsetHeight，  clientHeight，scrollHeight 的区别

　　offsetWidth/ offsetHeight返回值包含 content + padding + border，效果与e.getBoundingClientRect()相同
　　clientWidth/ clientHeight 返回值只包含 content + padding，若是有滚动条，也不包含滚动条
　　scrollWidth/ scrollHeight 返回值包含 content + padding + 溢出内容的尺寸

 

前端须要注意的SEO

　　合理的title、description、keywords：搜索对着三项的权重逐个减少，title值强调重点便可，重要关键词出现不要超过2次，并且要靠前，不一样页面title要有所不一样；description把页面内容高度归纳，长度合适，不可过度堆砌关键词，不一样页面description有所不一样；keywords列举出重要关键词便可

　　语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

　　重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容必定会被抓取

　　重要内容不要用js输出：爬虫不会执行js获取内容

　　少用iframe：搜索引擎不会抓取iframe中的内容

　　非装饰性图片必须加alt

　　提升网站速度：网站速度是搜索引擎排序的一个重要指标

 

get 和 post 的区别　

　　只考虑语法来讲，这两个方式没什么区别， GET 和 POST 有不一样的语义：
　　GET方式用做获取信息； POST方式用做发送信息。
　　GET的数据在URL中对全部人都是可见的；POST的数据不会显示在URL中。
　　GET对数据长度有限制，当发送数据时，GET方法向URL添加数据，最大长度是2048个字符。 POST无限制。

 

如何优化网站的性能

content方面:

减小HTTP请求：合并文件、CSS精灵
减小DNS查询：DNS查询完成以前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询
避免重定向：多余的中间访问
使Ajax可缓存
非必须组件延迟加载
将来所需组件预加载
减小DOM元素数量
减小iframe数量

css/ js方面：

将样式表放到页面顶部
不使用CSS表达式
将件脚本放到页面底部
将css和javascript从外部引入
压缩javascript和css
减小DOM访问
合理设计事件监听器

 

什么是渐进加强

　　渐进加强是指在web设计时强调可访问性、语义化HTML标签、外部样式表和脚本。保证全部人都能访问页面的基本内容和功能同时为高级浏览器和高带宽用户提供更好的用户体验。核心原则以下:

全部浏览器都必须能访问基本内容
全部浏览器都必须能使用基本功能
全部内容都包含在语义化标签中
经过外部CSS提供加强的布局
经过非侵入式、外部javascript提供加强功能

 

 axios和ajax区别

　　 axios是经过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装同样。axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它自己具备如下特征：

1.从浏览器中建立 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了不少的操做）
5.从 node.js 建立 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据

 

vue特色

　　（1） 简洁 （2） 轻量 （3）快速 （4） 数据驱动 （5） 模块友好 （6） 组件化

 

vue动画钩子

 

webpack简介

　　Webpack 是一款强大的打包工具，在 Webpack 中一切皆模块。Webpack 从一个入口文件开始递归地分析模块的依赖关系，根据依赖关系将这些模块打包成一个或多个文件。

经常使用的 loader：

　　Webpack 能够处理任何非 js 语言，得益于社区提供的丰富的 loader，平常开发中所使用到的 loader，均可以在社区找到。这里对一些经常使用的 loader 进行简要的说明。

babel-loader 将 ES2015+ 代码转译为 ES5。
ts-loader 将 TypeScript 代码转译为 ES5。
css-loader 解析 @import 和 url()，并对引用的依赖进行解析。
style-loader 在 HTML 中注入 <style> 标签将 css 添加到 DOM 中。一般与 css-loader 结合使用。
sass-loader 加载 sass/scss 文件并编译成 css。
postcss-loader 使用 PostCSS 加载和转译 CSS文件。
html-loader 将 HTML 导出为字符串。
vue-loader 加载和转译 Vue 组件。
url-loader 和 file-loader 同样，但若是文件小于配置的限制值，能够返回 data URL。
file-loader 将文件提取到输出目录，并返回相对路径。

经常使用的插件

HtmlWebpack Plugin 自动生成入口文件，并将最新的资源注入到 HTML 中。
CommonsChunkPlugin 用以建立独立文件，经常使用来提取多个模块中的公共模块。
DefinePlugin 用以定义在编译时使用的全局常量。
DllPlugin 拆分 bundle 减小没必要要的构建。
ExtractTextWebpack Plugin 将文本从 bundle 中提取到单独的文件中。常见的场景是从 bundle 中将 css 提取到独立的 css 文件中。
HotModuleReplacementPlugin 在运行过程当中替换、添加或删除模块，而无需从新加载整个页面。
UglifyjsWebpack Plugin 对 js 进行压缩，减少文件的体积。
CopyWebpack Plugin 将单个文件或整个目录复制到构建目录。一个经常使用的场景是将项目中的静态图片不经构建直接复制到构建后的目录。

 

React父子组件如何进行通讯

 　　父组件经过属性向子组件传值，子组件若是想操做父组件的数据，须要父组件想子组件传递一个方法，子组件经过这个方法间接的操做父组件数据。

 

React中的虚拟DOM

　　虚拟DOM就是一个js对象，用它来描述一个真实的DOM，当state中数据发生变化后，经过数据+模板生成新的虚拟DOM，经过比较原始虚拟DOM和新的虚拟DOM的区别，找到须要更新的DOM元素，比较JS对象能够提示性能。