总结下web开发中基础性的常识
Posted zhixi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了总结下web开发中基础性的常识相关的知识，希望对你有一定的参考价值。
一，html/5
1，浏览器渲染过程
主流浏览器渲染过程叫法有区别，但是主要流程还是相同的。
Gecko 将视觉格式化元素组成的树称为“框架树”。每个元素都是一个框架。WebKit 使用的术语是“呈现树”，它由“呈现对象”组成。对于元素的放置，WebKit 使用的术语是“布局”，而 Gecko 称之为“重排”。对于连接 DOM 节点和可视化信息从而创建呈现树的过程，WebKit 使用的术语是“附加”。
所以可以分析出基本过程：
-
HTML解析出DOM Tree
-
CSS解析出Style Rules
-
将二者关联生成Render Tree
-
Layout 根据Render Tree计算每个节点的信息
-
Painting 根据计算好的信息绘制整个页面
2，什么是websocket？
WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）
首先HTTP有 1.1 和 1.0 之说，也就是所谓的 keep-alive ，把多个HTTP请求合并为一个，但是 Websocket 其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已，也就是说它是HTTP协议上的一种补充，有交集，但是并不是全部。
另外Html5是指的一系列新的API，或者说新规范，新技术。Http协议本身只有1.0和1.1，而且跟Html本身没有直接关系。。通俗来说，你可以用HTTP协议传输非Html数据，就是这样，再简单来说，层级不一样。
WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。
特点:
事件驱动
异步
使用ws或者wss协议的客户端socket
能够实现真正意义上的推送功能
缺点：
少部分浏览器不支持，浏览器支持的程度与方式有区别。
3，websocket如何实现数据通信？
websocket允许通过javascript建立与远程服务器的连接，从而实现客户端与服务器间双向的通信。在websocket中有两个方法：
1、send() 向远程服务器发送数据
2、close() 关闭该websocket链接
websocket同时还定义了几个监听函数
1、onopen 当网络连接建立时触发该事件
2、onerror 当网络发生错误时触发该事件
3、onclose 当websocket被关闭时触发该事件
4、onmessage 当websocket接收到服务器发来的消息的时触发的事件，也是通信中最重要的一个监听事件。msg.data
websocket还定义了一个readyState属性，这个属性可以返回websocket所处的状态：
1、CONNECTING(0) websocket正尝试与服务器建立连接
2、OPEN(1) websocket与服务器已经建立连接
3、CLOSING(2) websocket正在关闭与服务器的连接
4、CLOSED(3) websocket已经关闭了与服务器的连接
websocket的url开头是ws，如果需要ssl加密可以使用wss，当我们调用websocket的构造方法构建一个websocket对象（new WebSocket(url)）的之后，就可以进行即时通信了。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>WebSocket 客户端</title>
</head>
<body>
<div>
<input type="button" id="btnConnection" value="连接" />
<input type="button" id="btnClose" value="关闭" />
<input type="button" id="btnSend" value="发送" />
</div>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var socket;
if(typeof(WebSocket) == "undefined") {
alert("您的浏览器不支持WebSocket");
return;
}
$("#btnConnection").click(function() {
//实现化WebSocket对象，指定要连接的服务器地址与端口
socket = new WebSocket("ws://192.168.1.2:8888");
//打开事件
socket.onopen = function() {
alert("Socket 已打开");
//socket.send("这是来自客户端的消息" + location.href + new Date());
};
//获得消息事件
socket.onmessage = function(msg) {
alert(msg.data);
};
//关闭事件
socket.onclose = function() {
alert("Socket已关闭");
};
//发生了错误事件
socket.onerror = function() {
alert("发生了错误");
}
});
//发送消息
$("#btnSend").click(function() {
socket.send("这是来自客户端的消息" + location.href + new Date());
});
//关闭
$("#btnClose").click(function() {
socket.close();
});
</script>
</body>
</html>
4，html5有哪些新特性？如何区分 HTML 和 HTML5？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
(1)绘画 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后自动删除;
(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
(6)表单控件，calendar、date、time、email、url、search;
区别：<!DOCTYPE html>
二，CSS/3
1，隐藏一个元素常用有哪几种方法？
3种，display: none;overflow: hidden;opacity: 0;
2,你有哪些性能优化的方法？
把CSS样式表置于顶部
把JS脚本置于页面底部
避免使用 CSS 表达式（Expression）
使用外部 JavaScript 和 CSS
削减 JavaScript 和 CSS
用 <link> 代替 @import
剔除重复脚本
减少DOM访问
优化图像（背景图片，用css定位，图片全部保存在一张PNG8格式上）
favicon.ico要小而且可缓存
3，CSS3有哪些新特性？
CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），
对文字加特效（text-shadow），线性渐变（gradient），变换（transform）
Transform： rotate(9deg) //旋转
scale(0.85,0.90) //缩放
translate(0px,-30px) //定位
skew(-9deg,0deg) //倾斜
三，javascript
1，数组去重
这个方法很多，仅列出一个JS的兼容性最好的算法其他有ES5/6等新方法也不错，
// 思路：获取没重复的最右一值放入新数组 /* * 推荐的方法 * * 方法的实现代码相当酷炫， * 实现思路：获取没重复的最右一值放入新数组。 * （检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断）*/ function uniq(array){ var temp = []; var index = []; var l = array.length; for(var i = 0; i < l; i++) { for(var j = i + 1; j < l; j++){ if (array[i] === array[j]){ i++; j = i; } } temp.push(array[i]); index.push(i); } console.log(index); return temp; } var aa = [1,2,2,3,5,3,6,5]; console.log(uniq(aa));
2，对象元素排序
function objKeySort(obj) {//排序的函数 var newkey = Object.keys(obj).sort(); //先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组 var newObj = {};//创建一个新的对象，用于存放排好序的键值对 for (var i = 0; i < newkey.length; i++) {//遍历newkey数组 newObj[newkey[i]] = obj[newkey[i]];//向新创建的对象中按照排好的顺序依次增加键值对 } return newObj;//返回排好序的新对象 }
3，二分查找法
二分法查找，也称折半查找，是一种在有序数组中查找特定元素的搜索算法。查找过程可以分为以下步骤：
（1）首先，从有序数组的中间的元素开始搜索，如果该元素正好是目标元素（即要查找的元素），则搜索过程结束，否则进行下一步。
（2）如果目标元素大于或者小于中间元素，则在数组大于或小于中间元素的那一半区域查找，然后重复第一步的操作。
（3）如果某一步数组为空，则表示找不到目标元素。
// 非递归算法 function binary_search(arr, key) { var low = 0, high = arr.length - 1; while(low <= high){ var mid = parseInt((high + low) / 2); if(key == arr[mid]){ return mid; }else if(key > arr[mid]){ low = mid + 1; }else if(key < arr[mid]){ high = mid -1; }else{ return -1; } } }; var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86]; var result = binary_search(arr,10); alert(result); // 9 返回目标元素的索引值 // 递归算法 function binary_search(arr,low, high, key) { if (low > high){ return -1; } var mid = parseInt((high + low) / 2); if(arr[mid] == key){ return mid; }else if (arr[mid] > key){ high = mid - 1; return binary_search(arr, low, high, key); }else if (arr[mid] < key){ low = mid + 1; return binary_search(arr, low, high, key); } }; var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86]; var result = binary_search(arr, 0, 13, 10); alert(result); // 9 返回目标元素的索引值
4，什么是闭包
闭包就是跨作用域访问变量！闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量。这是优点也是缺点，
不必要的闭包只会徒增内存消耗！另外使用闭包也要注意变量的值是否符合你的要求，因为他就像一个静态私有变量一样。
四，jquery
1，ajax请求的时候get 和post方式的区别
Get 一般用于获取信息 使用URL传递参数 对所发送的信息数量也有限制，一般在2000字符
Post 一般用于修改服务器资源（新建，或者 修改） 对所发送的信息数量无限制
2，如何阻止事件冒泡和默认事件？
阻止事件冒泡：event.stopPropagation();
阻止默认事件：event.preventDefault();
以上两个都可以用return false代替
3，HTTP与HTTPS有什么区别？
HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。
HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。
HTTP协议传输的数据都是未加密的，也就是明文的，因此使用HTTP协议传输隐私信息非常不安全，为了保证这些隐私数据能加密传输，于是网景公司设计了SSL（Secure Sockets Layer）协议用于对HTTP协议传输的数据进行加密，从而就诞生了HTTPS。
简单来说，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。
HTTPS和HTTP的区别主要如下：
①、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
②、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
③、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
④、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
五，vue
1，vue是如何实现父子组件之间的通信
（一）父组件往子组件传值props
①定义父组件，父组件传递 number这个数值给子组件，如果传递的参数很多，推荐使用json数组{}的形式
②定义子组件，子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型，如果不符合会报错。
③假如接收的参数 是动态的，比如 input输入的内容 v-model的形式
④父子组件传值，数据是异步请求，有可能数据渲染时报错 原因：异步请求时，数据还没有获取到但是此时已经渲染节点了 解决方案：可以在 父组件需要传递数据的节点加上 v-if = false，异步请求获取数据后，v-if = true
（二）、子组件往父组件传值，通过emit事件
（三）、不同组件之间传值，通过eventBus（小项目少页面用eventBus，大项目多页面使用 vuex）
2，如何实现动态路由
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果
在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id
3，vue中如何解决跨域问题
使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）
例如请求的url:“http://www.apssdus.cn/bj222.json”
①、打开config/index.js,在proxyTable中添写如下代码：
proxyTable: { ‘/api‘: { //使用"/api"来代替"http://f.apiplus.c" target: ‘http://www.apssdus.cn‘, //源地址 changeOrigin: true, //改变源 pathRewrite: { ‘^/api‘: ‘http://www.apssdus.cn‘ //路径重写 } } }
②、使用axios请求数据时直接使用“/api”：
getData () { axios.get(‘/api/bj222.json‘, function (res) { console.log(res) })
通过这中方法去解决跨域，打包部署时还按这种方法会出问题。解决方法如下：
let serverUrl = ‘/api/‘ //本地调试时 // let serverUrl = ‘http://www.apssdus.cn/‘ //打包部署上线时 export default { dataUrl: serverUrl + ‘bj222.json‘ }
4,详细说下你对vue生命周期的理解
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
5,什么是vuex？vuex有哪几种属性
vuex可以理解为一种状态管理的开发模式或者框架，data中的属性需要共享给其他vue组件使用。状态为state集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。
vuex有五种属性，分别是 State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
以上是关于总结下web开发中基础性的常识的主要内容，如果未能解决你的问题，请参考以下文章