前端
关注
分享
扫一扫
文章平均质量分 73
哦_是渔渔呀
这个作者很懒，什么都没留下…
展开
-
GraphQL
初识什么是？特点请求你所要的数据不多不少 获取多个资源只用一个请求 描述所有可能的类型系统、使用场景？1.我们需要什么数据需要什么格式，后端就按照什么格式给我们返回什么样的数据结构，我们要哪些字段，后端就只给我们返回我们需要的这些字段， 其他的都不返回，前端就和后端解耦了---》在前端直接写查询， 后端只管给前端返回前端查询的这些数据；2.使用GraphQL前端自己写查询，这个页面需要哪些需哪数据，后端就返回给哪些数据， 这是考虑到后端所有的接口都在同一个域下面比...原创 2020-08-10 15:20:02 · 278 阅读 · 0 评论 -
React基础
设计模式：Flux架构：单向数据流 衍生状态管理框架 Redux Mobx受控组件与非受控组件 组件数据状态管理原则（dry--不要做重复的数据状态保存） 能计算得到的状态不要单独存储 组件尽量无状态，所需数据通过props获取JSX语法糖 生命周期及其使用场景 constructor 初始化内部状态 可以直接修改stategetDerivedStateFromProps state需要从props初始...原创 2020-06-18 16:48:22 · 434 阅读 · 0 评论 -
taro初试遇到的坑
样式问题1.样式在H5页面生效 在小程序不生效原因： 自定义组件对应的样式文件，只对该组件内的节点生效解决方案： 1、组件可以指定它所在节点的默认样式，使用:host选择器。只需要在样式文件中输入该选择器/* 该自定义组件的默认样式 */ :host { color: red; font-weight: bold; font-size: 30PX; }2.externalClasses 定义若干个外部样式类MyPage.js e...原创 2020-06-11 10:54:13 · 656 阅读 · 0 评论 -
hash路由VSbrowser路由
hash路由长什么样？：http://[domain]/#/xxx/xxx实现原理： hash值的变化会触发浏览器的window.onhashchange事件，浏览器不会去请求后端url哈希路由就是路由上面有个#，以前是用来做锚点的，很多人可能会想知道这个hash路由和锚点到底有啥区别？锚点实际上是通过#后面的东西来跳到对应相同id的元素。而哈希路由是监听这个哈希路由改变的事件，渲染相对应的页面元素。那么问题来了，2者是同时起效还是有一个不起作用还是根本就冲突？查看has..原创 2020-06-10 18:37:49 · 964 阅读 · 0 评论 -
小程序分包
离线包机制微信小程序采用的是类似离线包加载方案，用户第一次打开时会先下载好所有代码，然后再加载页面；当用户再次进入时，会直接使用已下载的代码，省去了代码下载的过程，打开速度更快。存在问题： 第一次打开小程序时白屏时间很长，因为要先下载好所有的代码，代码越多，白屏时间越长 代码有部分更新时，没办法进行增量更新，每次发版用户都需要重新下载全部代码 分包加载小程序的分包加载机制实际上是离线包和M页的一种结合机制，即把代码划分成主包+N个分包，官方定义：在小程序启动时，默认会下原创 2020-06-10 17:37:26 · 1459 阅读 · 0 评论 -
VScode 的使用---前端
通用插件HTML SnippetsHTMLHinthtml代码检测HTML CSS Support让 html 标签上写class 智能提示当前项目所支持的样式Debugger for Chrome让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试jQuery Code Snippetsjquery 重度患者必...原创 2018-11-21 15:35:30 · 2000 阅读 · 0 评论 -
常见的兼容性问题
Chrome&Safari:-webkit- Firefox:-moz- IE:-ms- Opera:-o-1.渐变属性各浏览器的新版本都支持渐变属性。对于不支持的低版本浏览器，可以通过增加浏览器前缀的方式，让浏览器支持渐变。比如：background:-moz-linear-gradient();2.IE8 以下版本不支持H5新标签 &...原创 2018-09-29 22:42:57 · 209 阅读 · 0 评论 -
详谈iframe
定义和用法iframe 元素会创建一个内联框架。被用来在当前 HTML 文档中嵌入另一个文档。(即行内框架）。<iframe src="http://www.runoob.com" name="xxx" height="xxx" width="xxx" ></iframe>iframe自适应高度的方法，其实就是设置iframe的高度，使其等于内嵌网页的高度，原创 2018-09-28 22:47:05 · 367 阅读 · 0 评论 -
clientwidth innerWidth offsetWidth
clientWidth 在任何窗口系统中都是指用户内容能放置的空间clientWidth 是每个 document 一个，一个窗口中可以放置多个 document，比如你用 frame 或 iframe 就可以放置多个 document，这相当于图形界面编程中的 MDI （多文档窗口应用，比如 Word, Excel 就可以同时打开多个文档）。 window.innerWidth能获取...原创 2018-09-28 16:32:51 · 1377 阅读 · 0 评论 -
如何使一个div的宽和高占整个屏幕
css方法一：<div style="position:absolute; left:0; top:0; width:100%;height:100%; background:#000;">方法二：<div style="position:absolute; left:0; top:0; right:0; bottom:0; background:#000;"&...原创 2018-09-28 12:27:49 · 4948 阅读 · 0 评论 -
VSCode使用总结
一、设置首选项下载安装完成后，打开编辑器，首先要设置主题、字体大小等。1. 设置主题文件→首选项→颜色主题2. 设置字体大小文件→首选项→设置，打开了一个setting.json文件，将左边的设置复制到右边进行覆盖生效，所有编辑器的设置都在这里修改。 二、Emmet插件最新版集成了Emmet 2.0，在文件→首选项→设置可以开启或者关闭功能 三、快捷键所有快捷键...原创 2018-10-12 10:11:54 · 1834 阅读 · 0 评论 -
输入一个URL到页面呈现----发生的过程
总体来说分为以下几个过程: DNS解析 TCP连接 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 连接结束 一、什么是URL？URL(Uniform Resource Locator) 叫作统一资源定位符，能够对因特网的资源进行定位。 http://119.75.217.109:80/index.htm...原创 2018-09-21 22:27:10 · 365 阅读 · 0 评论 -
优化
js: 浏览器虽然是多线程，但JavaScript具有阻塞特性，无论外链还是内嵌脚本，在浏览器执行解释js脚本的时候，浏览器是不会去做别的事a、将<script>内嵌和外链，在可以的情况下，放在<body>底部。（注：对于css，浏览器是并行下载）b、在页面onload后，加载jsc、html5 <script>标签的defer属性，在页面加载完...原创 2018-09-25 21:03:27 · 130 阅读 · 0 评论 -
异步
异步 JS的异步是通过回调函数实现的，即通过任务队列，在主线程执行完当前的任务栈（所有的同步操作），主线程空闲后轮询任务队列，并将任务队列中的任务（回调函数）取出来执行。"回调函数"（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。 虽然JS是单线程的但是浏览器的内核是多线程的，在浏览器的内核中不同...原创 2018-09-25 22:24:23 · 228 阅读 · 0 评论 -
H5的离线缓存技术
离线存储可以将站点的一些文件存储在本地，它是浏览器自己的一种机制，将需要的文件缓存下来在没有网络的时候可以访问到缓存的对应的站点页面，包括html，js，css，img等等文件 在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。这跟HTTP的缓存使用策略是不同的。 资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高...原创 2018-09-25 22:40:29 · 9737 阅读 · 0 评论 -
encodeURI() encodeURIComponent()
URI: Uniform Resource Identifiers,通用资源标识符Global对象的encodeURI()和encodeURIComponent()方法可以对URI进行编码，以便发送给浏览器。有效的URI中不能包含某些字符，例如空格。而这URI编码方法就可以对URI进行编码，它们用特殊的UTF-8编码替换所有无效的字 符，从而让浏览器能够接受和理解。编码encode...原创 2018-09-26 20:29:40 · 273 阅读 · 0 评论 -
cookie与session
常用的会话跟踪技术Cookie与Session。会话跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。一.cookieCookie实际上是一小段的文本信息。客户端向服务器发起请求，若服务器需要记录该用户状态，Cookie的处理：服务器使用response向客户端发送cooki...原创 2018-09-17 12:23:33 · 164 阅读 · 0 评论 -
如何实现浏览器内多个标签页之间的通信
调用localstorge、cookies等本地存储方式。方法一：localstorge在一个标签页里被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里监听storage事件，即可得到localstorge存储的值，实现不同标签页之间的通信。标签页1：<input id="name"><input type="button" id="bt...原创 2018-09-26 21:57:01 · 615 阅读 · 0 评论 -
web worker
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。检测浏览器是否支持 Web Workerif(typeof(Worker)!=="undefined"){ // 支持Web worker ! // 代码.....}else{ //不支持 Web Worker }完整的 Web Worker 实例代码...原创 2018-09-26 22:09:44 · 190 阅读 · 0 评论 -
SSE服务器发送事件(Server-Sent Events)
兼容性：IE不兼容 Server-Sent 事件 - 单向消息传递Server-Sent 事件指的是网页自动获取来自服务器的更新。以前也可能做到，前提是网页需要询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。服务器端代码实例把 "Content-Type" 报头设置为 "text/...原创 2018-09-26 22:23:16 · 1024 阅读 · 0 评论 -
H5 WebSocket
WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间...原创 2018-09-26 22:38:24 · 1180 阅读 · 0 评论 -
进程、线程 事件轮询 web worker
进程:Process/Tsak 操作系统（OS）为正在运行的程序分配的CPU资源的最小单位。拥有独立的地址空间。 用网页打开.html程序便运行到内存线程:Thead:CPU执行的最小单位；同一个进程下的所有线程，共享进程的地址空间 进程内部执行代码基本单位 线程之间是没有层级关系的，他们之间协同完成工作。在整个进程完成工作之后，其中的线程会被销毁，释放...原创 2018-09-21 22:07:07 · 1296 阅读 · 0 评论 -
对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核...原创 2018-09-25 20:12:33 · 903 阅读 · 0 评论