导航

• 博客园
• 首页
• 新随笔
• 新文章
• 联系
• 订阅
• 管理

08 2022 档案

• 前端性能优化(二)---空间角度：降低资源占用
  摘要：一、为什么要进行性能优化 对于一个产品来说，用户的体验是最重要的。当页面加载时间过长，交互操作不流畅时，会给用户带来很糟糕的体验，会导致用户流失。 二、前端常见的性能优化手段 对于前端来说，性能优化可以从两个大方面来解决。本篇详述第一种：减少耗时。 2.1.时间角度优化：减少耗时(用户的等待时长) 阅读全文
  posted @ 2022-08-30 17:37 pwindy 阅读(371) 评论(0) 推荐(0)
• 前端性能优化(一)---时间角度优化：减少耗时
  摘要：一、为什么要进行性能优化 对于一个产品来说，用户的体验是最重要的。当页面加载时间过长，交互操作不流畅时，会给用户带来很糟糕的体验，会导致用户流失。 二、前端常见的性能优化手段 对于前端来说，性能优化可以从两个大方面来解决。本篇详述第一种：减少耗时。 2.1.时间角度优化：减少耗时(用户的等待时长) 阅读全文
  posted @ 2022-08-30 17:35 pwindy 阅读(508) 评论(0) 推荐(0)
• vue路由拦截
  摘要：router.beforeEach()一般用来做一些进入页面的限制。比如是否是登录状态，若没有登录，就不能进入某些页面，只有登录成功后，才有权限查看某些页面，简单地说，就是通过vue的路由来实现页面的拦截和页面的跳转，来符合产品设计的某些规则。 下面以登录页面的权限，为例： 思路：【 如果（即将进入 阅读全文
  posted @ 2022-08-23 15:14 pwindy 阅读(168) 评论(0) 推荐(0)
• vue项目目录结构划分
  摘要：1.dist 编译之后的项目文件 2.src 开发目录 3.src/assets 静态资源 src/assets/less 公共less src/assets/img 图片资源 4.src/components 组件 5.src/pages 各个页面，根据路由划分的 6.src/utils 工具库 阅读全文
  posted @ 2022-08-23 14:54 pwindy 阅读(120) 评论(0) 推荐(0)
• Vue—babel.config.js配置文件详解
  摘要：1.概述 Babel 相当于一个中介，一边是用户，另一边是浏览器。这几年，JavaScript 发生了很大的变化，许多新特性在很多浏览器里都不支持。 Babel 的主要作用就是规避这些问题，可以确保 JavaScript 代码兼容所有的浏览器，比如 IE 11。 Babel是一个JS编译器，主要作用 阅读全文
  posted @ 2022-08-22 15:00 pwindy 阅读(703) 评论(0) 推荐(0)
• 常见的前端构建工具Webpack
  摘要：1.Gulp/Grunt 一种能够优化前端工作流程的工具，比如自动刷新页面、combo、压缩CSS/JavaScript、编译Less/Sass等。 2.Webpack/Rollup 现在的代码构建工具(比如Vue CLI、Create React App等)底部实现都依赖Webpack。 一个Ja 阅读全文
  posted @ 2022-08-17 17:26 pwindy 阅读(360) 评论(0) 推荐(0)
• 前端常见code码统一报错提示
  摘要：200：服务器成功返回请求数据 201：新建或修改数据成功 202：一个请求已经进入后台排队(异步任务) 204：删除数据成功 客户端错误状态码 400：发出的请求有错误，服务器没有进行新建或修改数据的操作 401：用户没有权限(令牌、用户名、密码错误) 403：用户得到授权，但是访问是被禁止的 4 阅读全文
  posted @ 2022-08-17 15:59 pwindy 阅读(750) 评论(0) 推荐(0)
• 客户端与服务端双向通信方式
  摘要： 阅读全文
  posted @ 2022-08-11 17:42 pwindy 阅读(61) 评论(0) 推荐(0)
• HTTP缓存行为(强制缓存+协商缓存)
  摘要：HTTP的缓存行为分为：强制缓存和协商缓存。 1.Last-Modified和if-modified-since last-modified是响应头上的属性，if-modifyed-since是请求头的数据。该属性值需要cache-control配合使用。当再次向服务器发送请求该资源时，会携带if- 阅读全文
  posted @ 2022-08-11 16:29 pwindy 阅读(152) 评论(0) 推荐(0)
• Object.keys()的详解和用法
  摘要：一、语法 Object.keys(obj)参数：要返回其枚举自身属性的对象返回值：一个表示给定对象的所有可枚举属性的字符串数组 在实际开发中，我们有时需要知道对象的所有属性;ES5 引入了Object.keys方法，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键名。 阅读全文
  posted @ 2022-08-11 11:51 pwindy 阅读(1150) 评论(0) 推荐(0)
• Ajax请求之XMLHttpRequest
  摘要：一.ajax请求封装 // 处理一个HTTP请求的方法 var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象 request.onreadystatechange = function (){ //状态发生变化时，函数被回调 if(req 阅读全文
  posted @ 2022-08-11 10:14 pwindy 阅读(161) 评论(0) 推荐(0)
• 在浏览器里面输入url，按下回车键，会发生什么？
  摘要：浏览器的处理过程如下： 1.DNS域名解析(此处涉及DNS的寻址过程)，找到网页的存放服务器。 2.浏览器与服务器建立TCP连接。 3.浏览器发起HTTP请求。 4.服务器响应HTTP请求，返回该页面的HTML内容。 5.浏览器解析HTML代码，并请求HTML代码中的资源。(如JavaScript、 阅读全文
  posted @ 2022-08-10 15:54 pwindy 阅读(137) 评论(0) 推荐(0)
• Promise、setTimeout、async/await等api的执行顺序
  摘要：console.log("script start"); setTimeout(()=>{ console.log("setTimeout"); }, 1000) Promise.resolve() .then( function(){ console.log("promise1"); } ).th 阅读全文
  posted @ 2022-08-10 14:56 pwindy 阅读(39) 评论(0) 推荐(0)
• js中call()方法的用法
  摘要：call： 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 1.定义 调用一个对象的一个方法，以另一个对象替换当前对象。 2.说明 call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisOb 阅读全文
  posted @ 2022-08-08 11:43 pwindy 阅读(3108) 评论(0) 推荐(0)
• JavaScript基于原型实现继承
  摘要：首先来了解几个常见的名称(以下解释依据本文实力代码场景) Object：对象(对象的值可以为任意类型，array，object，function......) prototype：原型对象 constructor：构造函数 __proto__：指向Person.prototype的原型对象 一、函数 阅读全文
  posted @ 2022-08-05 14:39 pwindy 阅读(97) 评论(0) 推荐(0)
• 清除浮动方法
  摘要：父级办法(子级浮动) 撑开父元素的高度 给父级设置高度(拓展性不好)，缺点：一般布局是不先设置高度，是内容撑开高度。 给父级加display: inline-block, 缺点：会解析空格。 给父元素加上overflow: hidden;(此时高度为auto)，缺点：要配合宽度。 使父元素也成为浮动 阅读全文
  posted @ 2022-08-04 15:45 pwindy 阅读(40) 评论(0) 推荐(0)
• DOM相关知识点
  摘要：一.虚拟DOM的设计思路 用JavaScript对象模拟DOM树，得到一棵虚拟DOM树。 当页面数据变更时，生成新的虚拟DOM树，比较新旧两棵DOM树的差异。 把差异应用到真正的DOM树上。 二.事件委托 事件捕获阶段 目标阶段 事件冒泡阶段(将子元素事件委托给父级元素来进行处理) 可以大量减少浏览 阅读全文
  posted @ 2022-08-04 10:56 pwindy 阅读(24) 评论(0) 推荐(0)
• 浏览器缓存机制详解
  摘要：一、为什么需要缓存 在前端开发中，我们主要追求的是性能和用户体验。对于一个网站查看性能最简单的方式就是打开网站的速度。而一个好的缓存策略可以大大提升网站的性能。使得已经下载后的资源被重复利用。减少客户端和服务器之间的请求次数，减少带宽，减少网络负荷。 二、什么是缓存 对于web缓存，主要是针对一些w 阅读全文
  posted @ 2022-08-03 15:48 pwindy 阅读(408) 评论(0) 推荐(0)