WEB前端面试题

一时失言乱红尘 2022-03-26 08:07 435阅读 0赞

## Web前端常见面试题及答案 ##

#### 1、盒子模型 ####

> **盒子模型包括四部分：内容（content）、填充（padding）、边框（border）、边界（margin）  
> 盒子模型可以分为两种：IE盒子模型和W3C标准盒子模型  
> 区别：两者对于width的计算方式不同，前者width=border+padding+内容宽度，后者width=内容宽度。**

#### 2、position包含几种属性？absolute和relative的区别？ ####

> **static：默认状态、没有定位、正常流  
> inherit：从父元素集成position属性的值  
> fixed：生成绝对定位的元素（相对于浏览器窗口进行定位）  
> absolute：生成绝对定位的元素（相位与static定位以外的第一个父元素定位）  
> relative：生成相对定位的元素（相对于其正常位置定位）**

> **absolute和relative区别：父元素的padding对relative的子元素布局有影响，absolute的子元素不受影响**

#### 3、前端性能优化 ####

> **减少HTTP请求、使用内容发布网络、压缩组件、使用Expire头、JS放底部、CSS放顶部、避免CSS表达式等。**

#### 4、 web前端优化详解 ####

###### 优化是指减少网站的响应时间，加载速度等 ######

##### 规则一：减少HTTP请求 #####

> 减少了HTTP请求，不管用户是在第一次访问还是后续浏览，响应时间都会有显著的减少。主要使用的方法有：图片地图，CSS Sprites，内联图片和脚本，样式表的合并。  
> 其实简单要说就是把能包在一起的东西全部都包在一起就好了。  
> 1、图片地图，就是把页面上用到的多个图片合并成一张图片，利用map控制显示的位置，接着在这张图片上关联多个URL，加载的时候就只要发送一次HTTP请求获取这张图片就行了。  
> 2、CSS Sprites合并图片，减少HTTP请求  
> 3、内联图片。浏览器不会缓存这种图像。dataurl节省了HTTP请求,但是如果这个图像在网页多个地方显示会加大网页的内容，延长下载时间。还有一点IE8以下都不支持这种图像,所以一般不用。  
> 4、合并脚本和样式表，尽量减少js和css的请求数量

##### 规则二：使用内容发布网络 #####

> 内容发布网络（content delivery network）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。就是可以使用cdn，租用或者自建都可以，不仅可以缩短响应时间，还可以缓和Web流量峰值压力，而且还有提供其他服务，自行百度吧。  
> CDN发布的内容主要是静态内容，如图片、脚本、样式表和Flash。主要是静态内容更容易存储且具有较少的依赖性。

##### 规则三：添加Expires头 #####

> 这个规则主要是针对缓存的，使用缓存来减少加载组件的数量，不是针对首次访问的优化，但是对于多次浏览的响应时间的优化还是巨大的。通过使用一个长久的Expires头，可以使需要缓存的组件被缓存，这会在后续的页面浏览中避免不必要的HTTP请求。
> 
>     Expires: Mon, 15 Apr 2024 20:20:20 GMT
> 
> 这是一个有效期非常长久的Expires头，它告诉浏览器该响应的有效期持续到2024年4月15日为止。如果为页面中的一个图片返回了这个头，浏览器在后续的页面浏览中会使用缓存的图片。  
> Expires存在限制，要求服务器和客户端的时间严格同步，过期日期需要检查，并提供新日期，所以还有另外一种选择，cache-control使用max-age指令指定用户被缓存多久，达到的效果也是一样的。

##### 规则四：压缩组件 #####

##### 规则五：将样式表放在顶部 #####

##### 规则六：将脚本放在底部 #####

> 在下载脚本时浏览器会阻塞并行下载，如果放在上面的话有可能要等到页面加载完成才能看到界面的整体效果，这对用户体验是很差的。

##### 规则七：避免CSS表达式。 #####

> 表达式的问题在于对其进行的求值，它们不只在页面呈现和大小改变时求值，当页面滚动、甚至用户鼠标在页面上移过时都要被求值。所以对页面的性能影响是很大的。  
> CSS3提供了calc()函数，可以用来实现css的一些求值运算。

##### 规则八：使用外部的JS和CSS #####

> 因为外部的JS和CSS是可以被缓存的，而如果是内联的话就要每次都要加载。

##### 规则九：减少DNS查找 #####

> 方法：通过使用Keep-Alive和较少的域名来减少DNS查找

##### 规则十、精简JS，相当于压缩，且会除去注释及空格 #####

##### 规则十一、避免重定向。重定向会延迟整个HTML文档的传输 #####

##### 规则十二、移除重复脚本 #####

##### 规则十三、配置或移除Etag #####

##### 规则十四、使用Ajax可缓存。确保ajax请求遵守性能指导，尤其应具有长久的expires头 #####

#### 5、JSONP是什么？它是如何实现跨域的？为什么它可以实现跨域？ ####

> **JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。**

> **由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求（因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供 Web 页面的域上加载的），然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。**

> **跨域的4种方式：  
> ① 通过动态添加script标签，然后指定callback函数，可以获取到传过来的json数据，这时候要自己写一个callback函数来处理数据；  
> ② 使用jquery封装好的getJson方法，传入不同域的url?callback=?,好处是不需要手动的插入script标签以及定义回掉函数。jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。  
> ③ 通过设置window.domain来处理跨域，但是只适用于不同子域的框架间的交互。所以使用的时候可以用一个隐藏的iframe来做一个代理，让这个iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面。  
> ④ window.name是可以跨域的。window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右甚至更大的一个容量，具体取决于不同的浏览器，但一般是够用了。所以可以转化成字符串的数据都可以使用window.name来传递，比如json数据。**

#### 6、浏览器兼容问题 ####

> **css兼容性问题：①不同浏览器的标签默认的外补丁和内补丁不同，解决方案：用通配符\*来设置各个标签的内外补丁是0（即设置margin和padding为0）；②div的垂直居中问题 vertical-align：middle；文字居中：将行距增加到和整个div一样，高line-height=行高；③margin加倍问题：设置为float的div在ie下的margin会加倍。解决方案：为这个div设置样式：display:inline;**

> **js兼容性问题：①在标准的事件绑定中绑定事件的方法函数为addEventListener，而IE使用的是attachEvent；②事件处理中event属性的获取不同。标准浏览器是作为参数带入，然后通过e.target获取目标元素；而IE是通过window.event方式获得，通过e.srcElement获取目标元素；**

#### 7、JS和JAVA的作用域有什么区别 ####

> java是块级作用域，js是函数作用域，没有块级作用域。

#### 8、闭包问题 ####

> 闭包：函数能被外部调用到，则该作用连上的所有变量都会被保存下来。

> 作用：①可以读取函数内部的变量；②相当于划出了一块私有作用域，避免数据污染；③让变量始终保存在内存中

> 使用全局变量被认为是不好的习惯，而且容易造成错误并且维护成本较高，所以js可以采用闭包的方式读取函数的内部变量。但是如果大量使用闭包就会造成过多的变量始终保存在内存中，会造成内存泄漏。

function f1(){ 
      var n=999;
      function f2(){ 
        alert(n);
      }
      return f2;
    }
    var result=f1();
    result(); // 999

#### 10、js中this的工作原理 ####

> **①全局范围内：指向全局对象；**

> **②函数调用：指向全局对象**

> **③方法调用：this指向函数对象**

> **④调用构造函数：this指向新创建的对象**

> **⑤显示的设置this：使用call或者apply方法时，this指向第一个参数**

function foo(a, b, c) { }
    var bar = { };
    foo.apply(bar, [1, 2, 3]); // 数组将会被扩展，如下所示
    foo.call(bar, 1, 2, 3); // 传递到foo的参数是：a = 1, b = 2, c = 3

#### 11、模块化编程 ####

> **① AMD（异步模块定义） requirejs**

defined(id,deps,factory)
    require([dependency],function(){ })

> **异步加载，浏览器不会失去响应  
> 它指定的回调函数，只有前面的模块都加载完成后，才会运行，解决了依赖性问题**

> ②CMD（通用模块定义） seajs  
> 模块定义方式和模块加载时机处理不同

defined(id,deps,factory)
    function(require,exports,module)
    module.exports = ______;

> **③区别：AMD依赖前置，在定义模块的时候就要声明其依赖的模块；CMD就近依赖，只有在用到哪个模块的时候再去require；**

#### 12、JS继承与原型问题 ####

> **Js所有的函数都有一个prototype属性，这个属性引用了一个对象，即原型对象，也简称原型。每一个对象都有原型，在浏览器中它体现在一个隐藏的proto属性上。  
> 当一个对象需要调用某个方法时，它回去最近的原型上查找该方法，如果没有找到，它会再次往下继续查找。这样逐级查找，一直找到了要找的方法。 这些查找的原型构成了该对象的原型链条。原型最后指向的是null。我们说的原型继承，就是将父对像的方法给子类的原型。子类的构造函数中不拥有这些方法和属性。**

#### 13、少用float？ ####

> **① 使用float可能会造成兼容性问题，比如在ie6以下，float元素margin加倍问题；  
> ② 使用float之后会影响左右元素，有可能造成错位问题（float之后都要clear）**

> **解决：可用display、position转化  
> ① 无序链接（ul、li），设定li标签属性：display:inline  
> ② div左右结构，比如在右侧要放一个more（更多）来显示更多信息的时候用到了float:right，可以用定位来做。给包裹more的div设定position：relative，然后more这个标签right：0即可。结构更为清晰一点。**

#### 14、一个页面从URL到加载显示完成，都发生了什么？ ####

> **① 通过DNS将该地址解析成IP地址；  
> ② 发起网络连接，进行http协议会话：客户端发送报头（请求报头），服务端回馈报头（响应报头）  
> ③返回一个页面（根据页面上的外链的URL重新发送请求获取）  
> ④接收文件完毕，对加载到的资源进行语法解析，以及相应的内部数据结构（网页渲染）**

#### 15、队列、堆、栈的区别？ ####

> **队列是先进先出：就像一条路，有一个入口和一个出口，先进去的就可以先出去。而栈就像一个箱子，后放的在上边，所以后进先出。堆是在程序运行时，而不是在程序编译时，申请某个大小的内存空间。即动态分配内存，对其访问和对一般内存的访问没有区别。**

> **栈(Stack)是操作系统在建立某个进程时或者线程为这个线程建立的存储区域。在编程中，例如C/C++中，所有的局部变量都是从栈中分配内存空间，实际上也不是什么分配，只是从栈顶向上用就行，在退出函数的时候，只是修改栈指针就可以把栈中的内容销毁，所以速度最快。**
> 
> 堆（Heap)是应用程序在运行的时候请求操作系统分配给自己内存，一般是申请/给予的过程。由于从操作系统管理的内存分配所以在分配和销毁时都要占用时间，所以用堆的效率低的多！但是堆的好处是可以做的很大，C/C++对分配的Heap是不初始化的。  
> 在Java中除了简单类型（int,char等）都是在堆中分配内存，这也是程序慢的一个主要原因。但是跟C/C++不同，Java中分配Heap内存是自动初始化的。在Java中所有的对象（包括int的wrapper Integer）都是在堆中分配的，但是这个对象的引用却是在Stack中分配。也就是说在建立一个对象时从两个地方都分配内存，在Heap中分配的内存实际建立这个对象，而在Stack中分配的内存只是一个指向这个堆对象的指针（引用）而已。

#### 16、如何居中div？如何居中一个浮动元素？ ####

> 给div设置一个宽度，然后添加margin:0 auto;

> 如何居中一个浮动元素

div{ 
      width:500px;
      height:500px;
      magin:-150px 0 0 -250px;
      position:relative;
      left:50%;
      top:50%;
    }

#### 17、什么是线程？进程和线程的关系是什么？ ####

> **线程可定义为进程内的一个执行单位，或者定义为进程内的一个可调度实体。 在具有多线程机制的操作系统中，处理机调度的基本单位不是进程而是线程。一个进程可以有多个线程，而且至少有一个可执行线程。  
> 打个比喻:进程好比工厂(计算机)里的车间，一个工厂里有多个车间(进程)在运转,每个车间里有一个或多个工人（线程）在协同工作，这些工人就可以理解为线程。**

##### 关系 #####

> **1.线程是进程的一个组成部分.  
> 2.进程的多个线程都在进程地址空间活动.  
> 3.系统资源是分配给进程的，线程需要资源时，系统从进程的资源里分配给线程.  
> 4.处理机调度的基本单位是线程.**

#### 18、CSS3中的transform属性和transition属性？ ####

> **transform：  
> 功能：使元素变形的属性，其配合rotate（旋转角度）、scale（缩放倍数）、skew（扭曲元素）等参数一起使用  
> 语法：  
> transform:rotate(旋转角度)；//正数为顺时针、负数为逆时针；  
> transform:rotate(30deg);//顺时针旋转30度  
> transform:rotate(-20deg);//逆时针旋转20度  
> transform:scale(缩放倍数)；  
> transform:scale(1.20);//放大1.2倍**

> **transition： 功能：设置元素由样式一变为样式二所需要的一些变化效果 语法：transition: property duration timing-function delay;**

<table> 
 <thead> 
  <tr> 
   <th align="center">值</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">transition-property</td> 
   <td align="center">规定设置过渡效果的 CSS 属性的名称。</td> 
  </tr> 
  <tr> 
   <td align="center">transition-duration</td> 
   <td align="center">规定完成过渡效果需要多少秒或毫秒。</td> 
  </tr> 
  <tr> 
   <td align="center">transition-timing-function</td> 
   <td align="center">规定速度效果的速度曲线。</td> 
  </tr> 
  <tr> 
   <td align="center">transition-delay</td> 
   <td align="center">定义过渡效果何时开始。</td> 
  </tr> 
 </tbody> 
</table>

> 注：使用这两个属性时应考虑到浏览器的兼容性，所以要针对不同的浏览器都添加一次样式，如下：

-webkit-transform:rotate(0deg) scale(1.20); 
    -moz-transform:rotate(0deg) scale(1.20); 
    transform:rotate(0deg) scale(1.20);

#### 19、什么是MVVM框架？ ####

> **MVVM是Model-View-ViewModel的简写。  
> MVVM 是 Web 前端一种非常流行的开发模式，利用 MVVM 可以使我们的代码更专注于处理业务逻辑而不是去关心 DOM 操作。目前著名的 MVVM 框架有 vue, avalon, angular 等，这些框架各有千秋，但是实现的思想大致上是相同的：数据绑定 + 视图刷新。跟MVC一样，主要目的是分离视图（View）和模型（Model）。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。  
> 在MVVM中，数据是核心，由于VIewModel与View之间的双向绑定，操作了ViewModel中的数据（当然只能是监控属性），就会同步到DOM，我们透过DOM事件监控用户对DOM的改动，也会同步到ViewModel。**

> **MVVM框架的优点：**  
> 1、方便测试  
> 在MVC下，Controller基本是无法测试的，里面混杂了个各种逻辑，而且分散在不同的地方。有了MVVM我们就可以测试里面的viewModel，来验证我们的处理结果对不对。  
> 2、便于代码的移植  
> 可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。比如iOS里面有iPhone版本和iPad版本，除了交互展示不一样外，业务逻辑的model是一致的。这样，我们就可以以很小的代价去开发另一个app。  
> 3、独立开发  
> 开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。

#### 20、利用@media screen实现网页布局的自适应。 ####

> 判断媒体类型，执行不同的css样式属性  
> 重要属性：min-width：设置最小分辨率大小；max-width：设置最大分辨率大小。

①方式一：通过css

///1280分辨率以上（大于1200px）
    @media screen and (min-width:1200px){  
      #content{  width: 1100px; }
      #mian,.div1{ width: 730px;}
      #secondary{ width:310px;}
    }
    //1100分辨率（大于960px，小于1199px）
    @media screen and (min-width: 960px) and (max-width: 1199px) {  
      #content{  width: 960px; }
      #main,.div1{ width: 650px;}
      #secondary{ width:250px}
    }

②方式二：通过link引入不同的css文件

//意思是当屏幕的宽度大于600小于800时，应用styleB.css
    <link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

> **优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值。**

#### 21、使用原生js实现ajax ####

> 创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器，则需要创建 ActiveXObject，具体方法如下：

var xmlHttpRequest;
    function createXmlHttpRequest(){ 
      if(window.XMLHttpRequest)//非IE
        xmlHttpRequest = new XMLHttpRequest();
      else if(window.ActiveObject)//IE6+
        xmlHttpRequest = new ActiveObject("Msxml2.XMLHTTP");
      else//IE6-
        xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
    }

open(method,url);//分别为提交的方法（GET或者POST）和提交的url
    send(content);
    onreadystatechange(){ 
      if(xmlHttpRequest.readyState == 4){ 
        if(xmlHttpRequest.state == 200){ 
          //请求成功
        }  
      }else{ 
        //请求失败
      }
    }

#### 22、前端安全方面有没有了解？XSS和CSRF如何攻防？ ####

> **XSS(Cross Site Scripting)是跨站脚本攻击，为了区分CSS，所以缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。  
> 在网页的一些公共区域（例如，建议提交表单或消息公共板的输入表单）输入一些文本，这些文本被其它用户看到，但这些文本不仅仅是他们要输入的文本，同时还包括一些可以在客户端执行的脚本。如：**

"/> <script>alert(document.cookie);</script><!--

在文本框中输入以上代码，然后点击提交，就会把用户的cookie弹出来。

> **XSS漏洞修复**

1.将重要的cookies标记为HTTP ONLY。  
2.只允许用户输入我们期望的数据。如年龄框只能输入数字。  
3.对数据进行HTTP Encode处理。  
4.过滤或者移除特殊的HTML标签。  
5.过滤JS事件的标签。

> **CSRF（Cross-site request forgery）是跨站请求伪造。XSS利用站点内的信任用户，而CSRF则通过伪装来自受信任用户的请求来利用受信任的网站。其实就是攻击者盗用了你的身份，以你的名义发送恶意请求。**  
> **CSRF攻击的思想  
> 用户浏览并登陆信任网站A；通过验证，在用户处产生X的cookie；用户在没有登出X的时候，浏览危险网站B；B要求访问第三方网站A，发出一个请求；根据这个请求，浏览器使用刚才产生的cookie直接访问A。**

> **CSRF的防御**

1.在表单里增加Hash值，以认证这确实是用户发送的请求，然后在服务器端进行Hash值验证。  
2.验证码：每次的用户提交都需要用户在表单中填写一个图片上的随机字符串。

#### 23、说说你对HTML5认识?（是什么,为什么） ####

> **HTML5指的是包括 HTML 、 CSS 和 JavaScript 在内的一套技术组合。 HTML5 是 HTML 最新版本， 2014 年 10 月由万维网联盟（ W3C ）完成标准制定。**

> **HTML4陈旧不能满足日益发展的互联网需要，特别是移动互联网。为了增强浏览器功能 Flash 被广泛使用，但安全与稳定堪忧，不适合在移动端使用（耗电、触摸、不开放）。  
> HTML5增强了浏览器的原生功能，符合 HTML5 规范的浏览器功能将更加强大，减少了 Web 应用对插件的依赖，让用户体验更好，让开发更加方便，另外 W3C 从推出 HTML4.0 到 5.0 之间共经历了 17 年， HTML 的变化很小，这并不符合一个好产品的演进规则。**

#### 24、什么是WebGL,它有什么优点? ####

> **WebGL（全写 Web Graphics Library ）是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加OpenGL ES 2.0 的一个 JavaScript 绑定， WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。显然， WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等等。**

> **WebGL完美地解决了现有的 Web 交互式三维动画的两个问题：  
> 第一，它通过HTML脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器插件支持 ;  
> 第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。  
> 通俗说WebGL中 canvas 绘图中的 3D 版本。因为原生的 WebGL 很复杂，我们经常会使用一些三方的库，如 three.js 等，这些库多数用于HTML5 游戏开发**

#### 25、说说你对SVG理解? ####

> **SVG可缩放矢量图形（ Scalable Vector Graphics ）是基于可扩展标记语言（ XML ），用于描述二维矢量图形的一种图形格式。 SVG 是W3C(‘World Wide Web ConSortium’ 即 ’ 国际互联网标准组织 ') 在 2000 年 8 月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。 SVG 严格遵从 XML 语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。 SVG 于 2003 年 1 月14 日成为 W3C 推荐标准**

> **特点：  
> (1)任意放缩  
> 用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。  
> (2)文本独立  
> SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。  
> (3)较小文件  
> 总体来讲，SVG文件比那些 GIF 和 JPEG 格式的文件要小很多，因而下载也很快。  
> (4)超强显示效果  
> SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。  
> (5)超级颜色控制  
> SVG图像提供一个 1600 万种颜色的调色板，支持 ICC 颜色描述文件标准、 RGB 、线 X 填充、渐变和蒙版。  
> (6)交互 X 和智能化。 SVG 面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式 Flash 竞争的问题，另一个问题就是 SVG 的本地运行环境下的厂家支持程度。**

#### 26、如何对网站的文件和资源进行优化? ####

> **文件合并**  
> 减少调用其他页面、文件的数量。一般我们为了让页面生动活泼会大量使用background来加载背景图，而每个 background的图像都会产生1次HTTP请求，要改善这个状况，可以采用css的1个有用的background-position属 性来加载背景图，我们将需要频繁加载的多个图片合成为1个单独的图片，需要加载时可以采用：background:url(…) no-repeat x-offset y-offset;的形式加载即可将这部分图片加载的HTTP请求缩减为1个。  
> 每个http请求都会产生一次从你的浏览器到服务器端网络往返过程，并且导致推迟到达服务器端和返回浏览器端的时间，我们称之为延迟。

> **文件最小化/文件压缩**  
> 即将需要传输的内容压缩后传输到客户端再解压，这样在网络上传输的 数据量就会大幅减小。通常在服务器上的Apache、Nginx可以直接开启这个设置，也可以从代码角度直接设置传输文件头，增加gzip的设置，也可以 从 负载均衡设备直接设置。不过需要留意的是，这个设置会略微增加服务器的负担。建议服务器性能不是很好的网站，要慎重考虑。  
> js和css文件在百度上搜一个压缩网站就能压缩，但是在实际开发的项目中，使用gulp、webpack等工具可以打包出合并压缩后的文件，小图片可以在打包时转换成base64方式引入，大图片可以被压缩，html文件也是可以被压缩的

> **使用 CDN 托管**  
> CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

> **缓存的使用**  
> Ajax调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的<script src=”xxx.js?\{VERHASH\}”，\{VERHASH\}就是特征参数，这个参数不变化就使用缓存文件，如果发生变化则重新下载新文件或更新信息。  
> css文件放置在head，js放置在文档尾  
> 在服务器端配置control-cache last-modify-date  
> 在服务器配置Entity-Tag if-none-match

> **用更少的时间下载更多的文件，提高网站加载速度，提高用户体验，可以使用以下方法：**  
> 1.css sprites----将小图片合并为一张大图片，使用background-position等css属性取得图片位置  
> 2.将资源放在多个域名下-----打开控制台，可以看到很多网站都是这么做的~  
> 3.图片延迟加载-----很多电商网站、新闻网站，尤其是用到瀑布流展示图片的时候，很多都这么做了，这个技术已经很普遍~

##### 书写代码的时候要注意优化： #####

1.css

> 将可以合并的样式合并起来，比如margin-top、margin-bottom等。  
> 给img图片设置宽高，因为浏览器渲染元素的时候没有找到这两个参数，需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。

2.js

> 少改变DOM元素，少触发reflow，可以复用的代码提出来写成公共的等等……

3.img

> 优化图片，不失真的情况下尽量减少图片大小，使用iconfont等

#### 27、 关于浏览器内核(渲染引擎) ####

> **先说一下浏览器的结构：**  
> ①、用户界面（UI） - 包括菜单栏、工具栏、地址栏、后退/前进按钮、书签目录等，也就是能看到的除了显示页面的主窗口之外的部分；  
> ②、浏览器引擎（Rendering engine） - 也被称为浏览器内核、渲染引擎，主要负责取得页面内容、整理信息（应用CSS）、计算页面的显示方式，然后会输出到显示器或者打印机；  
> ③、JS解释器 - 也可以称为JS内核，主要负责处理javascript脚本程序，一般都会附带在浏览器之中，例如chrome的V8引擎；  
> ④、网络部分 - 主要用于网络调用，例如：HTTP请求，其接口与平台无关，并为所有的平台提供底层实现；  
> ⑤、UI后端 - 用于绘制基本的窗口部件，比如组合框和窗口等。  
> ⑥、数据存储 - 保存类似于cookie、storage等数据部分，HTML5新增了web database技术，一种完整的轻量级客户端存储技术。  
> 注：IE只为每个浏览器窗口启用单独的进程，而chrome浏览器却为每个tab页面单独启用进程，也就是每个tab都有独立的渲染引擎实例。

> 现在的主要浏览器： IE、Firefox、Safari、Chrome、Opera。 它们的浏览器内核（渲染引擎）： IE–Trident、  
> FF(Mozilla)–Gecko、 Safari–Webkit、 Chrome–Blink（WebKit的分支）、  
> Opera–原为Presto，现为Blink。  
> 因此在开发中，兼容IE、FF、Opera（Presto引擎是逐步放弃的）、Chrome和Safari中的一种即可，Safari、Chrome的引擎是相似的。

#### 28、浏览器加载文件(repaint/reflow) ####

> **文件加载顺序**  
> 浏览器加载页面上引用的CSS、JS文件、图片时，是按顺序从上到下加载的，每个浏览器可以同时下载文件的个数不同，因此经常有网站将静态文件放在不同的域名下，这样可以加快网站打开的速度。

> reflow 在加载JS文件时，浏览器会阻止页面的渲染，因此将js放在页面底部比较好。  
> 因为如果JS文件中有修改DOM的地方，浏览器会倒回去把已经渲染过的元素重新渲染一遍，这个回退的过程叫reflow。

> CSS文件虽然不影响js文件的加载，但是却影响js文件的执行，即使js文件内只有一行代码，也会造成阻塞。因为可能会有var width =  
> $(’\#id’).width()这样的语句，这意味着，js代码执行前，浏览器必须保证css文件已下载和解析完成。  
> 办法：当js文件不需要依赖css文件时，可以将js文件放在头部css的前面。

> 常见的能引起reflow的行为：  
> 1.改变窗囗大小  
> 2.改变文字大小  
> 3.添加/删除样式表  
> 4.脚本操作DOM  
> 5.设置style属性  
> 等等……  
> reflow是不可避免的，只能尽量减小，常用的方法有：  
> 1.尽量不用行内样式style属性，操作元素样式的时候用添加去掉class类的方式  
> 2.给元素加动画的时候，可以把该元素的定位设置成absolute或者fixed，这样不会影响其他元素

> repaint  
> 另外，有个和reflow相似的术语，叫做repaint（重绘），在元素改变样式的时候触发，这个比reflow造成的影响要小，所以能触发repaint解决的时候就不要触发reflow……

#### 29、为什么利用多个域名来请求网络资源会更有效？ ####

> 动静分离需求，使用不同的服务器处理请求。处理动态内容的只处理动态内容，不处理别的，提高效率。CDN缓存更方便 突破浏览器并发限制：相关问题：  
> 浏览器同一时间可以从一个域名下载多少资源？（即： 浏览器并发请求数）  
> 也就是说：同一时间针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻止。不同浏览器这个限制的数目不一样。 Cookieless,  
> 节省带宽，尤其是上行带宽 一般比下行要慢。 用户的每次访问，都会带上自己的cookie ，挺大的。假如twitter  
> 的图片放在主站域名下，那么用户每次访问图片时，request header 里就会带有自己的cookie ，header 里的cookie  
> 还不能压缩，而图片是不需要知道用户的cookie 的，所以这部分带宽就白白浪费了。  
> 节约主域名的连接数，从而提高客户端网络带宽的利用率，优化页面响应。因为老的浏览器（IE6是典型），针对同一个域名只允许同时保持两个HTTP连接。将图片等资源请求分配到其他域名上，避免了大图片之类的并不一定重要的内容阻塞住主域名上其他后续资源的连接（比如ajax请求）。  
> 避免不必要的安全问题( 上传js窃取主站cookie之类的)

#### 30、进程和线程的区别 ####

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

#### 31、前端开发的优化问题 ####

> 前端开发的优化问题：  
> (1) 减少http请求次数：css spirit,data uri  
> (2) JS，CSS源码压缩  
> (3) 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数  
> (4) 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能  
> (5) 用setTimeout来避免页面失去响应  
> (6) 用hash-table来优化查找  
> (7) 当需要设置的样式很多时设置className而不是直接操作style  
> (8) 少用全局变量  
> (9) 缓存DOM节点查找的结果  
> (10) 避免使用CSS Expression  
> (11) 图片预载  
> (12) 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢
> 
> 如何控制网页在网络传输过程中的数据量  
> （1）启用GZIP压缩  
> （2）保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性

#### 31、 Flash、Ajax各自的优缺点，在使用中如何取舍? ####

> Ajax的优势  
> 　　(1) 可搜索型  
> 　　(2) 开放性  
> 　　(3) 费用  
> 　　(4) 易用性  
> 　　(5) 易于开发  
> Flash的优势  
> 　　(1) 多媒体处理  
> 　　(2) 兼容性  
> 　　(3) 矢量图形 比SVG，Canvas优势大很多  
> 　　(4) 客户端资源调度，比如麦克风，摄像头

#### 32、GET和POST的区别，何时使用POST？ ####

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符

POST：一般用于修改服务器上的资源，对所发送的信息没有限制。

GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，

也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

#### 33、HTTP状态码 ####

100  Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
    
    200  OK   正常返回信息
    
    201  Created 请求成功并且服务器创建了新的资源
    
    202  Accepted 服务器已接受请求，但尚未处理
    
    301  Moved Permanently  请求的网页已永久移动到新位置。
    
    302 Found  临时性重定向。
    
    303 SeeOther  临时性重定向，且总是使用 GET 请求新的 URI。
    
    304  Not Modified 自从上次请求后，请求的网页未修改过。
    
    400 BadRequest  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
    
    401 Unauthorized  请求未授权。
    
    403Forbidden  禁止访问。
    
    
    
    404 NotFound  找不到如何与 URI 相匹配的资源。
    
    500 InternalServer Error  最常见的服务器端错误。
    
    503 ServiceUnavailable 服务器端暂时无法处理请求（可能是过载或维护）

#### 34、说说你对Promise的理解 ####

依照 Promise/A+ 的定义，Promise 有四种状态：  
pending: 初始状态, 非fulfilled 或 rejected.  
fulfilled: 成功的操作.  
rejected: 失败的操作.  
settled: Promise已被fulfilled或rejected，且不是pending  
另外， fulfilled 与 rejected 一起合称 settled。  
Promise 对象用来进行延迟(deferred) 和异步(asynchronous ) 计算。  
Promise 的构造函数

Promise 实例拥有 then 方法（具有 then 方法的对象，通常被称为 thenable）。它的使用方法如下：

promise.then(onFulfilled, onRejected)

接收两个函数作为参数，一个在 fulfilled 的时候被调用，一个在 rejected 的时候被调用，接收参数就是 future，onFulfilled对应 resolve, onRejected 对应 reject。

#### 35、说说你对AMD和Commonjs的理解 ####

CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数。

AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

#### 36、git fetch和git pull的区别 ####

git pull：相当于是从远程获取最新版本并merge到本地

git fetch：相当于是从远程获取最新版本到本地，不会自动merge

#### 37、说说网络分层里七层模型是哪七层 ####

§ 应用层：应用层、表示层、会话层（从上往下）（HTTP、FTP、SMTP、DNS）

§ 传输层（TCP和UDP）

§ 网络层（IP）

§ 物理和数据链路层（以太网）  
每一层的作用如下：

物理层：通过媒介传输比特,确定机械及电气规范（比特Bit）

数据链路层：将比特组装成帧和点到点的传递（帧Frame）

网络层：负责数据包从源到宿的传递和网际互连（包PackeT）

传输层：提供端到端的可靠报文传递和错误恢复（段Segment）

会话层：建立、管理和终止会话（会话协议数据单元SPDU）

表示层：对数据进行翻译、加密和压缩（表示协议数据单元PPDU）

应用层：允许访问OSI环境的手段（应用协议数据单元APDU）

> 各种协议  
> ICMP协议： 因特网控制报文协议。它是TCP/IP协议族的一个子协议，用于在IP主机、路由器之间传递控制消息。 TFTP协议：  
> 是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议，提供不复杂、开销不大的文件传输服务。 HTTP协议：  
> 超文本传输协议，是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。 DHCP协议：  
> 动态主机配置协议，是一种让系统得以连接到网络上，并获取所需要的配置参数手段。

#### 38、什么样的前端代码是好的 ####

高复用低耦合，这样文件小，好维护，而且好扩展。

#### 39、说说mongoDB和MySQL的区别 ####

> MySQL是传统的关系型数据库，MongoDB则是非关系型数据库  
> mongodb以BSON结构（二进制）进行存储，对海量数据存储有着很明显的优势。  
> 对比传统关系型数据库,NoSQL有着非常显著的性能和扩展性优势，与关系型数据库相比，MongoDB的优点有：  
> ①弱一致性（最终一致），更能保证用户的访问速度：  
> ②文档结构的存储方式，能够更便捷的获取数据。

#### 40、讲讲304缓存的原理 ####

服务器首先产生ETag，服务器可在稍后使用它来判断页面是否已经被修改。本质上，客户端通过将该记号传回服务器要求服务器验证其（客户端）缓存。

304是HTTP状态码，服务器用来标识这个文件没修改，不返回内容，浏览器在接收到个状态码后，会使用浏览器已缓存的文件

客户端请求一个页面（A）。 服务器返回页面A，并在给A加上一个ETag。 客户端展现该页面，并将页面连同ETag一起缓存。 客户再次请求页面A，并将上次请求时服务器返回的ETag一起传递给服务器。 服务器检查该ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304（未修改——Not Modified）和一个空的响应体。