前端开发汇总

前端开发汇总

1.get/post的理解和他们之间的区别

http

EAD: 与 GET 相同，但只返回 HTTP 报头，不返回文档主体
PUT: 上传指定的 URI 表示
DELETE: 删除指定资源
OPTIONS: 返回服务器支持的 HTTP 方法
CONNECT: 把请求连接转换到透明的 TCP/IP 通道
POST: 向指定的资源提交要被处理的数据

POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2

GET: 从指定的资源请求数据

GET和POST的区别

GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制(2048字符),IE和Safari浏览器限制2k;Opera限制4k;Firefox，Chrome限制8k
GET 请求只应当用于取回数据

POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求

2.css禁用鼠标事件

.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

3.css禁止用户选择

body{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

4.js求平面两点之间的距离

// 数据可以以数组方式存储，也可以是对象方式
let a = {x:'6', y:10},
        b = {x: 8, y: 20};
    function distant(a,b){
        let dx = Number(a.x) - Number(b.x)
        let dy = Number(a.y) - Number(b.y)
        return Math.pow(dx*dx + dy*dy, .5)
    }

5.数组去重

// indexOf实现
var array = [1, 1, '1'];

function unique(array) {
    var res = [];
    for (var i = 0, len = array.length; i < len; i++) {
        var current = array[i];
        if (res.indexOf(current) === -1) {
            res.push(current)
        }
    }
    return res;
}

console.log(unique(array));

// 排序后去重
var array = [1, 1, '1'];

function unique(array) {
    var res = [];
    var sortedArray = array.concat().sort();
    var seen;
    for (var i = 0, len = sortedArray.length; i < len; i++) {
        // 如果是第一个元素或者相邻的元素不相同
        if (!i || seen !== sortedArray[i]) {
            res.push(sortedArray[i])
        }
        seen = sortedArray[i];
    }
    return res;
}

console.log(unique(array));

// filter实现
var array = [1, 2, 1, 1, '1'];
function unique(array) {
    var res = array.filter(function(item, index, array){
        return array.indexOf(item) === index;
    })
    return res;
}
console.log(unique(array));

// 排序去重
var array = [1, 2, 1, 1, '1'];
function unique(array) {
    return array.concat().sort().filter(function(item, index, array){
        return !index || item !== array[index - 1]
    })
}
console.log(unique(array));

// Object键值对
var array = [{value: 1}, {value: 1}, {value: 2}];

function unique(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        console.log(typeof item + JSON.stringify(item))
        return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true)
    })
}

console.log(unique(array)); // [{value: 1}, {value: 2}]

// ES6 Set实现
var unique = (a) => [...new Set(a)]

6.什么是CDN和CDN的好处

CDN:CDN是将源站内容分发至最接近用户的节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。
好处：
1、多域名加载资源
一般情况下，浏览器都会对单个域名下的并发请求数（文件加载）进行限制，通常最多有4个，那么第5个加载项将会被阻塞，直到前面的某一个文件加载完毕。
因为CDN文件是存放在不同区域（不同IP）的，所以对浏览器来说是可以同时加载页面所需的所有文件（远不止4个），从而提高页面加载速度。
2、文件可能已经被加载过并保存有缓存
一些通用的js库或者是css样式库，如jQuery，在网络中的使用是非常普遍的。当一个用户在浏览你的某一个网页的时候，很有可能他已经通过你网站使用的CDN访问过了其他的某一个网站，恰巧这个网站同样也使用了jQuery，那么此时用户浏览器已经缓存有该jQuery文件（同IP的同名文件如果有缓存，浏览器会直接使用缓存文件，不会再进行加载），所以就不会再加载一次了，从而间接的提高了网站的访问速度
3、高效率
更低的网络延时和更小的丢包率。
4、分布式的数据中心
而CDNs则会让用户从离他最近的节点去加载所需的文件，所以加载速度提升就是理所当然的了。
5、使用情况分析
CDNs提供商一般都会提供数据统计功能

7.正则表达式匹配手机号

function checkPhone(){
    if(!(/^1[345678]\d{9}$/.test(phone))){
        alert("手机号码有误，请重填");
        return false;
    }
}

8.如何提高加载速度

1.js外联文件放到body底部，css外联文件放到head内
2.http静态资源尽量用多个子域名
3.服务器端提供html和http静态资源时最好开启gzip
4.在js,css,img等资源响应的http headers里设置expires,last-modified
5.尽量减少http requests的数量
6.js/css/html/img资源压缩
7.使用css spirtes，可以减少img请求次数
8.大图使用lazyload懒加载
9.避免404，减少外联js
10.减少cookie大小可以提高获得响应的时间
11.减少dom elements的数量
12.使用异步脚本，动态创建脚本

9.页面导入样式时，link和@import对比

	(1)link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作	用；而@import是CSS提供的，只能用于加载CSS;
	(2)页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; 
	(3)import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
	(4)link支持使用js控制DOM去改变样式，而@import不支持;

10.浏览器的兼容性

• png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
• 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
• IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
  浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
  这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
  渐进识别的方式，从总体中逐渐排除局部。
  首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
  接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
  css
  .bb{
  background-color:red;/所有识别/
  background-color:#00deff\9; /IE6、7、8识别/
  +background-color:#a200ff;/IE6、7识别/
  _background-color:#1e0bd1;/IE6识别/
  }
• IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性。 解决方法:统一通过getAttribute()获取自定义属性。
• IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
• Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

11.CSS优化提高性能

关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；
如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）；
提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性;
使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；

12.字体变清晰，变细

-webkit-font-smoothing: antialiased;

13.overflow:scroll平滑滚动

-webkit-overflow-scrolling: touch;

14.将浮点数点左边的数每三位添加一个逗号，12000000.11转化12,000,000.11

function commafy(num){
  	return num && num
  		.toString()
  		.replace(/(\d)(?=(\d{3})+\.)/g, function($1, $2){
  			return $2 + ',';
  		});
  }

15.JS作用域链

全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。 当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找， 直至全局函数，这种组织形式就是作用域链。

16.Ajax 浏览器缓存

1、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")
2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")
3、在URL后面加上一个随机数： "fresh=" + Math.random();
4、在URL后面加上时间戳："nowtime=" + new Date().getTime();
5、如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录

17.解决跨域

jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

18.浏览器如何渲染UI

1.浏览器获取HTML文件，然后对文件进行解析，形成DOM Tree
2.与此同时，进行CSS解析，生成Style Rules
3.接着将DOM Tree与Style Rules合成为 Render Tree
4.接着进入布局（Layout）阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标
5.随后调用GPU进行绘制（Paint），遍历Render Tree的节点，并将元素呈现出来