*注:本文章是在工作过程中所接触的知识点的整理,涉及的东西比价杂乱,如有错误之处,欢迎纠错与指导
一, 页面的锚链接
1,定义:锚点,锚点链接。常常用于那些内容庞大繁琐的网页,通过点击命名锚点,不仅让我们能指向文档,还能指向页面里的特定段落,更能当作”精准链接”的便利工具,让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时,标记锚点是最佳的方法
锚点多用于 点击到达本页面的某个位置
超链接用于 点击到达某个页面或打开/下载某个文件
2,用法:
给锚点文本标签添加id
<div>
<a href="#test"></a>
</div>
<p>练习</p>
<p>练习</p>
<p>练习</p>
<p>练习</p>
<p>练习</p>
<p id="test">练习</p>
<p>练习</p>
给a标签的文本添加锚点,单击链接可跳到name为test的a标签处[使用name属性只能针对a标签来定位,而对div等其他标签就不能起到定位作用。]
<div>
<a href="#test"></a>
</div>
<p>练习</p>
<p>练习</p>
<p>练习</p>
<p>练习</p>
<p>练习</p>
<a name="test" href=“#”>练习</a>
<p>练习</p>
二, WebSocket
三, 热更新
热更新就是当你在开发环境修改代码后,不用刷新整个页面即可看到修改后的效果。
vue的项目,不管html,css,js都可以无刷更新。因为vue使用的是虚拟dom,可以在node端渲染出虚拟dom,再通过websocket发送到浏览器端进行比对渲染
具体原理和实现看其他文章,写的很详细
前端开发热更新原理解读
如何在前端项目中实现热更新
四, requestAnimationFrame
官方文档
requestAnimationFrame 方法你真的用对了吗?
五, 数据埋点
六, Vue访问地址带#相关
vue项目会带#是因为使用的vue的hash模式。vue默认为hash模式
1,去掉:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history' //把Router的mode修改为history模式就可以
})
2,hash模式和history模式
VUE通常开发为单页面应用(SPA)
那么既然是单页面应用,当用户要点击其他组件访问页面内的其他模块时,系统怎么样也要获取一个参数,然后根据这个参数返回不同的模块给用户使用,这时候就会有一个问题,这个传递的参数只放在后台处理的话是可以正常运作的,但如果用户使用了浏览器的 前进、后退、跳转 这三个功能呢,因为是单页面应用,访问地址是不变的,所以浏览器的 前进、后退、跳转 无法使用,那么要怎么办呢,只能是从访问地址动手脚了。
HASH模式:
HASH模式就是从访问地址动手脚,在访问地址的后面增加#并且带上需要的参数,这样后台就能对不同的参数显示不同的模块,而且 #以及后面的参数是不会被包含在HTTP请求中,因此对服务器的请求是没有影响的,更改参数也不会刷新页面。
history模式:
history模式也是从访问地址动手脚,但是不再使用#,而是想普通的访问地址那样使用/,但如果这样请求的话,服务器是需要另外配置才行,要不然容易出现404错误,具体怎么配置请自行百度。
参考文章hash和history的区别