前端知识集合

1.HTTP状态码

当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。
HTTP状态码的英文为HTTP Status Code。
下面是常见的HTTP状态码：

200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误

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

HTTP状态码分类

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

2.什么是浏览器缓存

Web缓存是指一个Web资源（如html页面，图片，js，数据等）存在于Web服务器和客户端（浏览器）之间的副本。缓存会根据进来的请求保存输出内容的副本；当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，如果网页没有更新，就不会再次下载网页，而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新，浏览器才会再次下载网页。浏览器和网站服务器是根据缓存机制进行缓存的。
JS 缓存的问题一直都是我们又爱又恨的东西。也是我们比较头痛的问题，一方面为了提高网站响应速度,减少服务器的负担,和节省带宽，将需要将静态资源缓存在客户端，但是另一方面，当js 文件有改动的时候，如何快速的将客户端缓存的js文件都失效，这是非常头痛的问题。以至于每次客户反馈问题的时候，我们第一个解决办法都是清理浏览器缓存。

那么如何解决呢。

直接禁止全部的静态文件缓存
在html 头部加上如下代码：

这样所有的js 文件都不会被缓存。这显然是不可取的。

2.加版本号，在每个js的后面，都加上js 的版本号，

当某个js文件有变动时，则修改该js文件的版本号。这样就能解决js 没有更新时，能够缓存js文件，有变动的时，也能更新到最新的js的问题。
但是每次js 有变动时，所有引用到改js的地方都得改一遍，这太麻烦了吧。

有办法：

1.创建公共js文件，将所有需要控制的js文件加入到JSHash 里面

  //// js files map 本文件可独立运行,无需依赖于其他文件
 var strSite = window.location.protocol + "//" + window.location.host + "/"; //// 网站主机头
  var JSHash = { 
     test: { url: strSite + "test.js",type:"javascript", version: "v0001" },
  }
 function loadJS(keys) {
    if (keys) {
       for (var i = 0; i < keys.length; i++) {
           var jsnode = JSHash[keys[i]];
           if(jsnode.type="javascript")  {
              document.writeln("");
      }else {
      document.writeln("");
     }
   }
 }
 }

在相关页面引用js 的方改为：loadJS(["test"]);
这样每一次更新的时候，只需要调整相关JS的版本号即可。

禁止浏览器缓存可以使用随机数,方法：在js文件后加上数学随机数;

Math.random()
比如：源代码为

修改之后变成：

3.前端优化---回流（reflow）与重绘（repaint

回流（reflow）：指的是网络浏览器为了重新渲染部分或全部的文档而重新计算文档中元素的位置和几何结构的过程。

页面上节点是以树的形式展现的，我们通过js将页面上的一个节点删除，此时为了不让剩下的节点脱节，将断点结合起来重新形成一棵树。而这个重新结合过程就是回流。就是由于某些修改，要将元素回过头来重新“流”一遍。

重绘（repaints）：是一个元素外观的改变所触发的浏览器行为，例如改变vidibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

重绘不会带来重新布局，并不一定伴随回流。回流是更明显的一种改变，渲染树需要重新计算;回流的危害在于重新对DOM树进行渲染，那么，脱离文档流之后，进行的任何操作，都不会造成回流了！如果没有对页面进行优化，减少大量回流，那么页面因为回流所花费的时间，导致用户体验感大打折扣；只要修改DOM或修改了元素的形状或大小，就会触发Reflow，单纯修改元素的颜色只需Repaint一下（调用操作系统Native GUI的API绘制）。
注：回流必将引起重绘，而重绘不一定会引起回流。

减少回流的几点建议：

减少不必要的DOM深度。因为无论你改变DOM节点树上任何一个层级都会影响节点树的每个层级——从根结点一直到修改的子节点。不必要的节点深度将导致执行回流时花费更多的时间。
精简css，去除没有用处的css
如果你想让复杂的表现发生改变，例如动画效果，那么请在这个流动线之外实现它。使用position-absolute或position-fixed来实现它，也即是让其脱离文档流，不影响父级；现代浏览器也可以使用CSS3 transition实现动画效果，比改变像素值来的高性能。
避免不必要的复杂的css选择符，尤其是使用子选择器，或消耗更多的CPU去做选择器匹配。
5.页面的元素适当定高，例如如果div内容可能有高度差异的动态内容载入；页面刷新载入的时候，应避免页面元素的晃动、位移等，这些都是额外的重绘，会让你的CPU和风扇兴奋的
6.图片设定不响应重绘的尺寸，如果你的不设定尺寸、同时外部容器没有定死高宽，则图片在首次载入时候，占据空间会从0到完全出现，左右上下都可能位移，发生大规模的重绘。可以参见新浪微博载入时候页面高度随着图片显示不断变高的问题，这些都让浏览器重绘了，一是体验可能不好，二是烧CPU的。

4.ajax请求过程

Ajax 是一种异步请求数据的一种技术，对于改善用户的体验和程序的性能很有帮助。
Ajax的使用
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.

 var xmlHttp = new XMLHttpRequest();

    xmlHttp.open('GET','demo.php','true');

    xmlHttp.send()

    xmlHttp.onreadystatechange = function(){
          if(xmlHttp.readyState === 4 & xmlHttp.status === 200){
      }
  }

(1)open 的参数要牢记，很多面试官爱问这样的细节
method：请求的类型；GET 或 POST
url：文件在服务器上的位置，相对位置或绝对位置
async：true（异步）或 false（同步）
为什么使用 Async=true ？
我们的实例在 open() 的第三个参数中使用了 "true", 该参数规定请求是否异步处理。True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。

5.CSS3新特性

CSS3实现圆角（border-radius），阴影（box-shadow），边框图片border-image
对文字加特效（text-shadow、），强制文本换行（word-wrap），线性渐变（linear-gradient）

3.旋转,缩放,定位,倾斜：transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);

增加了更多的CSS选择器、多背景、rgba()；
在CSS3中唯一引入的伪元素是 ::selection ；
媒体查询(@media)，多栏布局（flex）

css3详细参考：https://segmentfault.com/a/1190000010780991?utm_source=tag-newest