一，HTML/5

1，浏览器渲染过程

主流浏览器渲染过程叫法有区别，但是主要流程还是相同的。
Gecko 将视觉格式化元素组成的树称为“框架树”。每个元素都是一个框架。WebKit 使用的术语是“呈现树”，它由“呈现对象”组成。对于元素的放置，WebKit 使用的术语是“布局”，而 Gecko 称之为“重排”。对于连接 DOM 节点和可视化信息从而创建呈现树的过程，WebKit 使用的术语是“附加”。

所以可以分析出基本过程：

  1. HTML解析出DOM Tree

  2. CSS解析出Style Rules

  3. 将二者关联生成Render Tree

  4. Layout 根据Render Tree计算每个节点的信息

  5. 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)）的之后，就可以进行即时通信了。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta name="viewport" content="width=device-width" />
  6.         <title>WebSocket 客户端</title>
  7.     </head>
  8.  
  9.     <body>
  10.         <div>
  11.             <input type="button" id="btnConnection" value="连接" />
  12.             <input type="button" id="btnClose" value="关闭" />
  13.             <input type="button" id="btnSend" value="发送" />
  14.         </div>
  15.         <script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
  16.         <script type="text/javascript">
  17.             var socket;
  18.             if(typeof(WebSocket) == "undefined") {
  19.                 alert("您的浏览器不支持WebSocket");
  20.                 return;
  21.             }
  22.  
  23.             $("#btnConnection").click(function() {
  24.                 //实现化WebSocket对象，指定要连接的服务器地址与端口
  25.                 socket = new WebSocket("ws://192.168.1.2:8888");
  26.                 //打开事件
  27.                 socket.onopen = function() {
  28.                     alert("Socket 已打开");
  29.                     //socket.send("这是来自客户端的消息" + location.href + new Date());
  30.                 };
  31.                 //获得消息事件
  32.                 socket.onmessage = function(msg) {
  33.                     alert(msg.data);
  34.                 };
  35.                 //关闭事件
  36.                 socket.onclose = function() {
  37.                     alert("Socket已关闭");
  38.                 };
  39.                 //发生了错误事件
  40.                 socket.onerror = function() {
  41.                     alert("发生了错误");
  42.                 }
  43.             });
  44.  
  45.             //发送消息
  46.             $("#btnSend").click(function() {
  47.                 socket.send("这是来自客户端的消息" + location.href + new Date());
  48.             });
  49.  
  50.             //关闭
  51.             $("#btnClose").click(function() {
  52.                 socket.close();
  53.             });
  54.         </script>
  55.     </body>
  56.  
  57. </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等新方法也不错，

  1. // 思路：获取没重复的最右一值放入新数组
  2. /*
  3. * 推荐的方法
  4. *
  5. * 方法的实现代码相当酷炫，
  6. * 实现思路：获取没重复的最右一值放入新数组。
  7. * （检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断）*/
  8. function uniq(array){
  9.     var temp = [];
  10.     var index = [];
  11.     var l = array.length;
  12.     for(var i = 0; i < l; i++) {
  13.         for(var j = i + 1; j < l; j++){
  14.             if (array[i] === array[j]){
  15.                 i++;
  16.                 j = i;
  17.             }
  18.         }
  19.         temp.push(array[i]);
  20.         index.push(i);
  21.     }
  22.     console.log(index);
  23.     return temp;
  24. }
  25.  
  26. var aa = [1,2,2,3,5,3,6,5];
  27. console.log(uniq(aa));

2，对象元素排序

  1. function objKeySort(obj) {//排序的函数
  2.   var newkey = Object.keys(obj).sort();
  3.   //先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
  4.   var newObj = {};//创建一个新的对象，用于存放排好序的键值对
  5.   for (var i = 0; i < newkey.length; i++) {//遍历newkey数组
  6.     newObj[newkey[i]] = obj[newkey[i]];//向新创建的对象中按照排好的顺序依次增加键值对
  7.   }
  8.   return newObj;//返回排好序的新对象
  9. }

3，二分查找法

二分法查找，也称折半查找，是一种在有序数组中查找特定元素的搜索算法。查找过程可以分为以下步骤：
（1）首先，从有序数组的中间的元素开始搜索，如果该元素正好是目标元素（即要查找的元素），则搜索过程结束，否则进行下一步。
（2）如果目标元素大于或者小于中间元素，则在数组大于或小于中间元素的那一半区域查找，然后重复第一步的操作。
（3）如果某一步数组为空，则表示找不到目标元素。

  1.  // 非递归算法
  2.         function binary_search(arr, key) {
  3.             var low = 0,
  4.                 high = arr.length - 1;
  5.             while(low <= high){
  6.                 var mid = parseInt((high + low) / 2);
  7.                 if(key == arr[mid]){
  8.                     return  mid;
  9.                 }else if(key > arr[mid]){
  10.                     low = mid + 1;
  11.                 }else if(key < arr[mid]){
  12.                     high = mid -1;
  13.                 }else{
  14.                     return -1;
  15.                 }
  16.             }
  17.         };
  18.         var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
  19.         var result = binary_search(arr,10);
  20.         alert(result); // 9 返回目标元素的索引值       
  21.  
  22.     // 递归算法
  23.         function binary_search(arr,low, high, key) {
  24.             if (low > high){
  25.                 return -1;
  26.             }
  27.             var mid = parseInt((high + low) / 2);
  28.             if(arr[mid] == key){
  29.                 return mid;
  30.             }else if (arr[mid] > key){
  31.                 high = mid - 1;
  32.                 return binary_search(arr, low, high, key);
  33.             }else if (arr[mid] < key){
  34.                 low = mid + 1;
  35.                 return binary_search(arr, low, high, key);
  36.             }
  37.         };
  38.         var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
  39.         var result = binary_search(arr, 0, 13, 10);
  40.         alert(result); // 9 返回目标元素的索引值

4，什么是闭包

闭包就是跨作用域访问变量！闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量。这是优点也是缺点，

不必要的闭包只会徒增内存消耗！另外使用闭包也要注意变量的值是否符合你的要求，因为他就像一个静态私有变量一样。

5，使用“jquery”替换"hello word!"中的word。

6，写出[aaabbbccde]后“a3b3c2d1e1”

7，预加载和懒加载原理，如何实现js预加载

8，在js中什么是重构DOM

四，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中添写如下代码：

  1. proxyTable: {
  2.   '/api': {  //使用"/api"来代替"http://f.apiplus.c"
  3.     target: 'http://www.apssdus.cn', //源地址
  4.     changeOrigin: true, //改变源
  5.     pathRewrite: {
  6.       '^/api': 'http://www.apssdus.cn' //路径重写   } } }

②、使用axios请求数据时直接使用“/api”：

  1. getData () {
  2.  axios.get('/api/bj222.json', function (res) {
  3.    console.log(res)
  4.  })

通过这中方法去解决跨域，打包部署时还按这种方法会出问题。解决方法如下：

  1. let serverUrl = '/api/'  //本地调试时
  2. // let serverUrl = 'http://www.apssdus.cn/'  //打包部署上线时
  3. export default {
  4.   dataUrl: serverUrl + 'bj222.json'
  5. }

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

6，vue中v-model的实现原理

7，axios实现原理

8，vue router的实现原理

9，vuex的实现原理

总结下web开发中基础性的常识的更多相关文章

  1. Web开发中的相对路径和绝对路径

    在学习HTML的时候一定会遇到引入文件和链接跳转页面,比如:JS文件.CSS文件.Image图片.我们就会考虑是相对路径和绝对路径的问题.下面PHP程序员雷雪松就详细讲解下Web开发中的相对路径和绝对 ...

  2. 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

    提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...

  3. WEB开发中的字符集和编码

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  4. Web开发中管理ipad屏幕的方向变化

    Web开发中,我们会遇到在手机垂直或水平视角时展示不同状态的情况.下面我来总结一下检测移动设备方向变化的一些方法. 1 使用javascript 直接看代码: <script type=&quo ...

  5. Redis在WEB开发中的应用与实践

    Redis在WEB开发中的应用与实践 一.Redis概述: Redis是一个功能强大.性能高效的开源数据结构服务器,Redis最典型的应用是NoSQL.但事实上Redis除了作为NoSQL数据库使用之 ...

  6. 移动Web 开发中的一些前端知识收集汇总

    在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下. 要说移动Web 开发与传统的PC 端开发,感觉也没什么 ...

  7. web开发中目录路径问题的解决

    web开发当中,目录路径的书写是再常用不过了,一般情况下不会出什么问题,但是有些时候出现了问题却一直感到奇怪,所以这里记录一下,彻底解决web开发中路径的问题,开发分为前端和服务端,那么就从这两个方面 ...

  8. Web开发中设置快捷键来增强用户体验

    从事对日外包一年多以来,发现日本的无论是WinForm项目还是Web项目都注重快捷键的使用,日本人操作的时候都喜欢用键盘而不是用鼠标去点,用他们的话来说"键盘永远比鼠标来的快",所 ...

  9. WEB开发中常用的正则表达式

    在计算机科学中,正则表达式用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串.在WEB开发中,正则表达式通常用来检测.查找替换某些符合规则的字符串,如检测用户输入E-mai格式是否正确,采集符 ...

随机推荐

  1. 拓展jQuery的serialize()，将form表单转化为json对象

    jQuery 的 serialize() 方法经常会报 Uncaught TypeError: JSON.serializeObject is not a function 的错误, 原装的方法真的一 ...

  2. STM32CUBEMX入门学习笔记2：关于STM32芯片使用内部flash

    找到正点原子的官网,下载他的HAL库:http://www.openedv.com/thread-109778-1-1.html 找到此例程,并打开其工程文件. 找到此文件,复制到自己工程里 复制到自 ...

  3. graph-Kruskal-algorithm

    并查集是一种树型的数据结构,用于处理一些不相交集合(Disjoint Sets)的合并及查询问题.主要操作:1. 初始化:每个点所在集合初始化为其自身.2. 查找:查找元素所在的集合,即根节点.3. ...

  4. HDU 4812 D Tree 树分治

    题意: 给出一棵树,每个节点上有个权值.要找到一对字典序最小的点对\((u, v)(u < v)\),使得路径\(u \to v\)上所有节点权值的乘积模\(10^6 + 3\)的值为\(k\) ...

  5. Python动态属性和特性（二）

    内置的property经常用作装饰器,但它其实是一个类.在Python中,函数和类通常可以互换,因为二者都是可调用对象,而且没有实例化的new运算符,所以调用构造方法和调用工厂函数没有区别,只要能返回 ...

  6. day03_04 文件后缀及系统环境变量

    进入cmd,如果想直接切换盘符的话,操作如下 dir命令---查看目录下的文件及文件夹 cd命令---想进入某个目录,就是是双击文件夹进入目录的命令,按table键有神奇效果哦 cd ..命令---类 ...

  7. Django创建

    Pycharm里面Django模块安装及项目创建和启动: Pycharm里面Django模块安装(也可以指定安装源): 创建Django项目: 注意切换到合适的目录进行安装 diango-admin ...

  8. Java学习ing

    ConcurrentHashMap从JDK1.5开始随java.util.concurrent包一起引入JDK中,主要为了解决HashMap线程不安全和Hashtable效率不高的问题. Concur ...

  9. NOJ——1627Alex’s Game(II)（尺取）

    [1627] Alex’s Game(II) 时间限制: 2000 ms 内存限制: 65535 K 问题描述 Alex likes to play with one and zero as you ...

  10. Codeforces834D - The Bakery

    Portal Description 给出一个\(n(n\leq35000)\)个数的数列\(\{a_i\}\)和\(m(m\leq50)\).将原数列划分成\(m\)个连续的部分,每个部分的权值等于 ...