web
文章平均质量分 88
yinxiangzhongqing
活到老,学到老!
展开
-
项目性能优化
你有对 Vue 项目进行哪些优化?如果没有对 Vue 项目没有进行过优化总结的同学,可以参考本文作者的另一篇文章《 Vue 项目性能优化 — 实践指南 》,文章主要介绍从 3 个大方面,22 个小方面详细讲解如何进行 Vue 项目的优化。(1)代码层面的优化v-if 和 v-show 区分使用场景 computed 和 watch 区分使用场景 v-for 遍历必须为 item 添...原创 2020-03-17 17:07:03 · 122 阅读 · 0 评论 -
通用前端组件
往期面试官系列(1): 如何实现深克隆 面试官系列(2): Event Bus的实现 面试官系列(3): 前端路由的实现 面试官系列(4): 基于Proxy 数据劫持的双向绑定优势所在 面试官系列(5): 你为什么使用前端框架前言设计前端组件是最能考验开发者基本功的测试之一,因为调用Material design、Antd、iView 等现成组件库的 API 每个人都可以做到,但...转载 2020-03-17 17:15:25 · 1405 阅读 · 0 评论 -
【JS】深拷贝与浅拷贝的区别,实现深拷贝的几种方法
如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝。我们来举个浅拷贝例子:let a=[0,1,2,3,4], b=a;console.log(a===b);...转载 2020-03-17 10:18:10 · 122 阅读 · 0 评论 -
如何用for...of循环对象?
首先了解一下for..of..: 它是es6新增的一个遍历方法,但只限于迭代器(iterator), 所以普通的对象用for..of遍历是会报错的。下面来说明一下如何用for..of..遍历普通对象类数组对象如果对象是一个类数组对象,那好办,用Array.from转成数组即可。var obj = { 0:'one', 1:'two', length: 2...转载 2020-03-15 22:24:01 · 1086 阅读 · 0 评论 -
为什么要用SVG?SVG与iconfont、图片多维度对比
一、SVG是什么?SVG是一种可缩放矢量图形(英语:Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的图形格式。SVG由W3C制定,是一个开放标准。简单的理解,它是图形的另一种格式例如它和常见的图片格式.png、.jpg、.gif等是一类。二、svg和其他格式图片对比它和传统图片格式有什么不同?1. 兼容现有图片能力...转载 2020-03-15 20:44:32 · 1647 阅读 · 0 评论 -
前端图片优化的方案
使用base64编码代替图片 合并图片sprite 图片延迟加载 使用css、svg、canvas或iconfont代替图片 加载对应尺寸图片 预加载 更好的图片格式我们拿淘宝网来做案例分析:1.使用base64编码代替图片场景:将图片转换为base64编码字符串inline到页面或css中,适用于图片大小小于2KB,页面上引用图片总数不多的情况。Paste_Imag...转载 2020-03-15 20:38:41 · 210 阅读 · 0 评论 -
浏览器相关知识总结
一、浏览器是如何渲染UI的?浏览器获取HTML文件,然后对文件进行自上而下解析,形成DOM Tree,触发DomContendLoaded事件。 与此同时,进行CSS解析,生成Style Rules 接着将DOM Tree与Style Rules合成为 Render Tree 接着进入布局(Layout)阶段,也就是为每个节点分配一个应出现在屏幕上的确切坐标 随后调用GPU进行绘制(P...原创 2020-03-15 17:03:20 · 524 阅读 · 0 评论 -
js在数组中查找某一个值是否存在
一、jQuery方法1、$.inArray()方法具体操作如下:var array = ['a','ab','abc'];$.inArray('abc',array);下标从0开始,若结果为-1则表示此数组中不存在这个值。当需要在前端为数组去重的时候,可以使用该方法来判断。二、js方法1.indexOf() -> ES5:返回索引,大于0则存在,-1不存在c...原创 2020-02-19 17:09:59 · 5263 阅读 · 0 评论 -
如何高效利用github提升自己
作为开源代码库以及版本控制系统,Github拥有超过900万开发者用户,是开发者打开程序开源大门的一扇窗口,也是开发者快速提升自己的一个重要途径。本文将从两个方面介绍github的使用方式。和逛微博、朋友圈、空间一样逛github你在空闲时间逛微博、朋友圈、空间,人家没事的时候逛GitHub ,看看最近有哪些流行的项目,久而久之,这差距就越来越大。那么我们如何像逛微博、朋友圈、空间一样逛githu...转载 2018-03-08 11:01:47 · 265 阅读 · 0 评论 -
从输入URL到浏览器显示页面都发生了什么
从输入URL到浏览器显示页面发生了什么 当在浏览器地址栏输入网址,如:www.baidu.com后浏览器是怎么把最终的页面呈现出来的呢?这个过程可以大致分为两个部分:网络通信和页面渲染。一、网络通信 互联网内各网络设备间的通信都遵循TCP/IP协议,利用TCP/IP协议族进行网络通信时,会通过分层顺序与对方进行通信。分层由高到低分别为:应用层、传输层、网络转载 2017-01-17 19:24:57 · 698 阅读 · 0 评论 -
前端优化之前端工程化
重复优化的思考这段时间对项目做了一次整体的优化,全站有了20%左右的提升(本来载入速度已经1.2S左右了,优化度很低),算一算已经做了四轮的全站性能优化了,回顾几次的优化手段,基本上几个字就能说清楚:12传输层面:减少请求数,降低请求量执行层面:减少重绘&回流传输层面的从来都是优转载 2017-01-17 16:57:23 · 368 阅读 · 0 评论 -
使用 jQuery.i18n.properties 实现 Web 前端的国际化
jQuery.i18n.properties 简介在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化。国际化英文单词为:Internationalization,又称 i18n,“i”为单词的第一个字母,“18”为“i”和“n”之间单词的个数,而“n”代表这个单词的最后一个字母。在计算机领域,国际化是指设计能够适应各种区域和语言环境的软件的过程。转载 2017-01-17 13:24:42 · 1195 阅读 · 0 评论 -
IE6常见BUG兼容解决方法
开发前端的同学一定都知道,IE6是兼容BUG最多的浏览器,它不支持PNG alpha通道暂且不论。其文档的解析理解规范也引起了诸多恼人的BUG,有时甚至让人感到绝望。本文主要讲解一些比较容易遇到的IE6BUG,以及解决的办法。一、IE6双倍边距bug当页面上的元素使用float浮动时,不管是向左还是向右浮动;只要该元素带有margin像素都会使该值乘以2,例如“margin-left:10原创 2016-10-13 10:20:22 · 424 阅读 · 0 评论 -
常见浏览器兼容性问题及解决方案
所谓浏览器兼容性问题,是指不同浏览器对同一段代码有不同的解析,导致页面产生的效果不一样。大多数情况下良好的用户体验需求应该是不同浏览器显示的页面都是相同的,因此,对于web开发来说,浏览器兼容性问题是一件令人头痛的事情,因此我们在编码之前应该先了解不同浏览器之前都有什么区别,然后在编码过程中针对浏览器的兼容问题作出相应的对策,规避经常出现兼容性问题的代码。在众多浏览器中IE6是最令人讨厌的了,原创 2016-10-13 10:24:34 · 541 阅读 · 0 评论 -
WEB前端技术栈
1. 前言 本文把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html、css、js)的认识——做web前端需要的比这三大块要多得多。 在看内容之前,先看一下这个知识框架的预览图。图太大不好展示,看不清除,可在此下载清晰版:http://pan.baidu.com/s/1hqIUvUc (内有整个知识体转载 2016-10-13 10:27:52 · 1058 阅读 · 1 评论 -
CDN加速服务,CDN公共库汇总
CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用。将JS库存放在服务器单机上相比,CDN公共库更加稳定、高速。 jQuery插件库为您提供百度、微软等提供的CDN节点地址,这些CDN公共库为您的应用程序提供稳定、可靠、高速的服务,包含全球所有最流行的开源JavaScript库。本文汇总重用CDN。jQuery MigratejQuery官网CDN地址jQue转载 2016-10-26 10:03:59 · 1181 阅读 · 0 评论 -
WebStorm+Node.js开发环境的配置
1 下载地址: webstorm:http://www.jetbrains.com/webstorm node.js:https://nodejs.org/download/2 安装node.js 按照提示一步步安装即可,不用多说,安装完成后检测PATH环境变量是否配置了Node.js,点击开始=》运行=》输入"cmd" => 输入命令"path转载 2016-10-20 09:13:41 · 2131 阅读 · 0 评论 -
webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器
目录(?)[+]---工欲善其事 必先利其器各工具介绍webstorm是JetBrains公司发布的一个web开发IDE,支持代码提示、补全、定位、与Git集成等等各种功能,已经跟传统强类型语言的开发环境感觉无多大差异。node是一个服务端的 JavaScript运行环境JetBrains IDE Support俗称JB插件(⊙o⊙),是一个转载 2016-10-20 09:20:37 · 1737 阅读 · 1 评论 -
Google调试的几个小技巧
1、 右键选择“审查元素”(快捷键Ctrl + Shift + I),此时进入初始界面,一般用到的是element和source这两项,element用来显示页面的所有HTML元素及他们的层级关系,source用来显示页面生成的所调用的js代码。如下图所示:2、如果想要查看界面上某个元素在什么位置(哪个div或li等)或查看点击他是调用哪个函数或执行什么操作,则需要先点击一下审查元素原创 2016-12-06 14:18:44 · 1871 阅读 · 0 评论 -
JavaScript基于面向对象之继承机制
一、面相对象继承机制 这个实例使用UML很好的解释了继承机制。 说明继承机制最简单的方式是,利用一个经典的例子就是几何形状。实际上,几何形状只有两种,即椭圆形(是圆形的)和多边形(具有一定数量的边)。圆是椭圆的一种,它只有一个焦点。三角形、矩形和五边形都是多边形的一种,具有不同数量的边。正方形是矩形的一种,所有的边等长。这就构成了一种完美的继承关系,很好的解释了面向对象原创 2017-02-07 20:10:20 · 299 阅读 · 0 评论 -
浏览器渲染页面原理
当了解web访问原理后,与前端工程师或页面重构师工作更为关系密切的应该是浏览器,WEB 页面运行在各种各样的浏览器当中,浏览器载入、渲染页面的速度直接影响着用户体验, 特别是浏览器渲染页面的原理,页面渲染就是浏览器将 HTML 代码根据 CSS 定义的规则显示在浏览器窗口中的这个过程,理解了原理就更会容易理解前端优化的一些准则。 主要过程转载 2017-01-17 10:14:57 · 840 阅读 · 0 评论 -
从登录框看前端
我们会骂 12306 的网站界面挫,效果差,速度慢,回头看看自己写的代码,是不是也一样的狗血!在前端,很多看似简单的东西,内藏无数玄机。本文将以一个小小的登陆框为入口,谈一谈如何完善自己的程序。在很多人眼里,前端就是 DIV+CSS+JQuery,甚至还有些人停留在 table 布局的迷雾当中(这些人应该跟 IE6 一样,随着历史渐渐被尘封)。但,前端绝不是你所看到的那样。举个例子转载 2016-10-13 10:01:15 · 662 阅读 · 0 评论