Web 前端小白知识点

人生的路上少不了尝试，人人都是打工人。

1. H5 有哪些新特性？

绘画 canvas（随时随地绘制 2D 图形）、svg（描述 XML 中的 2D 图形）元素语义化标签 header、ment、content、footer…新增的 input 类型和属性音频<audio>,视频<video>H5 地理定位 H5 拖放 H5 Web Storage 存储 H5 应用程序缓存 H5 中的 Web workersH5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新 WebSocket 在单个 TCP 连接上进行全双工通讯的协议

2. 如何实现浏览器内多个标签之间的通信？

localStorge、cookies

3. 如何提升网站性能？

前端：减少 http 请求、减少 Cookie 传输、使用浏览器缓存、启用文件压缩、CDN 加速、反向代理。

4.Js 中关于数组的操作有哪些？

1、创建数组：var、new2、字符串关于数组的方法：2.1、把字符串分割成数组（split）3、数组本身的方法

3.1、判断是否为数组（isArray）3.2、查找元素（indexOf）3.3、将数组转换成字符串（join、toString）3.4、合并数组（concat）3.5、分割数组（slice）3.6、删除添加元素（splice）3.7、删除添加一个元素（pop、push、shift、unshift）3.8、数组排序 （reverse、sort）3.9、数组迭代器方法（forEach、every、some、reduce、reduceRight、map、filter）（1）、不生成新数组的迭代器方法（forEach、every、some、reduce、reduceRight）：（2）、生成新数组的迭代器方法（map、filter）：4、数组中的其他方法 4.1、arr.find() 查找某个符合条件的元素

5. Js 的 typeof 返回哪些数据类型？

Undefined、string、boolean、number、symbol(ES6)、Object、Function

6. 数据类型的转换？

强制转换：Number(p)、parseFloat()、parseInt(p)、string(p)、Boolean()隐式转换：+、= 1+’’=’1’ null+1=1 undefined+1=NaN

7. Get 和 Post 请求的方式和区别?

GET 把参数包含在 URL 中，POST 通过 request body 传递参数 GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包。对于 GET 方式的请求，浏览器会把 http header 和 data 一并发送出去，服务器响应 200（返回数据）；而对于 POST，浏览器先发送 header，服务器响应 100 continue，浏览器再发送 data，服务器响应 200 ok（返回数据）。

8. 闭包是什么？有什么特性？对页面有什么影响？

什么是闭包:　　指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函 数），因而这些变量也是该表达式的一部分。>通俗的讲就是函数 a 的内部函数 b，被函数 a 外部的一个变量引用的时候，就创建了一个闭包。<br>闭包的特性：　　①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外 界提供访问接>口；　　②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调 用之后，闭包结构依然保>存在；对页面的影响：使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等。

9. onload 和 ready 的区别？

10. Null 和 undefined 的区别？

null 表示没有对象，即该处不应该有值 undefined 表示缺少值，即此处应该有值，但没有定义

11. Js 中如何检测一个变量是 String 类型？

小写：typeof(x) === "string' 大写：x.constructor === String

12. 网页布局有哪几种，分别有什么区别？

• 左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。

• 上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。

• 综合框架型：上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。

• 封面型：这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

• Flash 型：其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的 Flash，与封面型不同的是，由于 Flash 强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。

13. 有哪几种 web 安全问题，试着说明一下。

XSS 漏洞：恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，进而添加一些代码，嵌入到 web 页面中去，使别的用户访问都会执行相应的嵌入代码。<br>CSRF 攻击：跨站点请求伪造<br>SQL 注入：SQL 命令插入到 Web 表单递交或输入域名或页面请求的查询字符串，实现无帐号登录，甚至篡改数据库

14. Web 端有哪些缓存？其区别是什么？

http 缓存：强缓存主要是采用响应头中的 Cache-Control 和 Expires 两个字段进行控制的浏览器缓存：Cookie、LocalStorage、SessionStorage、Service Worker

15. Vue 的生命周期是什么？其作用是什么？

一、创建 1、beforeCreate：这个阶段实例已经初始化，只是数据观察与事件机制尚未形成，不能获取 DOM 节点（没有 data，没有 el），使用场景：因为此时 data 和 methods 都拿不到，所以通常在实例以外使用 2、created：实例已经创建，仍然不能获取 DOM 节点（有 data，没有 el）使用场景：模板渲染成 html 前调用，此时可以获取 data 和 methods，可以初始化某些属性值，然后再渲染成视图，异步操作可以放在这里<br>二、载入 1、beforeMount：是个过渡阶段，此时依然获取不到具体的 DOM 节点，但是 vue 挂载的根节点已经创建（有 data，有 el）2、mounted：数据和 DOM 都已经被渲染出来了使用场景：模板渲染成 html 后调用，通常是初始化页面完成后再对数据和 DOM 做一些操作，需要操作 DOM 的方法可以放在这里<br>三、更新 1、beforeUpdate：检测到数据更新时，但在 DOM 更新前执行 2、updated：更新结束后执行使用场景：需要对数据更新做统一处理的；如果需要区分不同的数据更新操作可以使用 $nextTick<br>四、销毁 1、beforeDestroy：当要销毁 vue 实例时，在销毁前执行 2、destroyed：销毁 vue 实例时执行

16. Vue 组件间如何传递参数？

父传子：子组件通过 props 接受 子传父：this.emint() 平级之间：vuex

17. Vuex 是什么？怎么使用？那种场景使用？

场景：单页应用中，组件之间的共享状态和方法

• stateVuex 使用单一状态树,即每个应用将仅仅包含一个 store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接>修改里面的数据。

• mutationsmutations 定义的方法动态修改 Vuex 的 store 中的状态或数据。

• getters 类似 vue 的计算属性，主要用来过滤一些数据。

• actionactions 可以理解为通过将 mutations 里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通>过 store.dispath 来分发 action。

• modules 项目特别复杂的时候，可以让每一个模块拥有自己的 state、mutation、action、getters,使得结构非常清晰，方便管理。

18. $route和$router的区别是？

$route为当前 router 跳转对象里面可以获取 name、path、query、params 等$router为 VueRouter 实例，想要导航到不同 URL，则使用$router.push方法

19. 列举常用的vue指令?
    

V-bind v-on v-model v-if 和 v-eles v-for v-show

20. Vue 中页面之间跳转传参方式？

Router-link :to 直接跳转，参数放在？后面用this.$route.query.index获取，参数放在/后面，用this.$route.params.index获取 This.$router.push({name: ‘name’, params: { key: value }, query: { key: value } })方式跳转。

21. 简述微信小程序的几种文件类型？

Js、wxss、wxml、json

22. 小程序中有哪些参数传值的方法？

1.navigator 跳转时：<navigator url='../index/index?id=1&name=aaa'></navigator>

onLoad: function (options) {
  //页面初始化 options为页面跳转所带来的参数
    var id = options.id    //获取值
},

2.全局变量：globalData: {id:null}

//赋值：
var app = getApp()  
app.globalData.id = 2
//取值： 
var id = app.globalData.id3
//列表index下标取值：
<button bindtap='clickMe' data-id='1'>点击</button>
//取值：
clickMe:function(e){
  var id = e.currentTarget.dataset.idconsole.log(id);
}

javascript 知识点：一篇文章带你进入JavaScript--JavaScript总结

Linux 知识点：深入浅出--Linux基础命令知识(总结,配图文解释)