![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端常见问题
gloria_chenjing
我的人生,可以平凡,但不可以平庸
展开
-
浏览器事件
转自:https://segmentfault.com/a/1190000003482372如果对事件大概了解,可能知道有事件冒泡这回事,但是冒泡、捕获、传播这些机制可能还没有深入的研究实践一下,我抽时间整理了一下相关的知识。本文主要对事件机制一些细节进行讨论,过于基础的事件绑定知识方法没有介绍。特别少的篇幅关注浏览器兼容问题,毕竟原理了解了,兼容性问题可以自己想办法解转载 2018-01-04 11:09:58 · 174 阅读 · 0 评论 -
webpack 及 模块化总结
webpack安装安装 node & npm(因为webpack是基于node开发的)通过 npm / yarn 的方式来安装 webpack 安装方式: 全局安装 npm install -g webpack-g : global 全局 会装在npm默认目录好处:只需要安装一次,本机中任何项目都可以直接使用缺点:如果本机项目中所依赖的webpack版本不一致会有一些问题。官方推荐安装 本...转载 2018-05-31 21:26:27 · 786 阅读 · 0 评论 -
webpack简单原理及用法
什么是 Webpackwebpack 是一个打包工具,为什么需要打包?因为有的人的脚本开发语言可能是 CoffeeScript 或者是 TypeScript,样式开发工具可能是 Less 或者 Sass,这都需要工具把它们“编译”成浏览器能识别 Javascript 和 CSS。webpack就是干这个的。现在你可能会问为什么我要用它?Grunt和Gulp不是也能做相同的事情吗?我也是这么认为的。...转载 2018-06-01 10:51:14 · 407 阅读 · 0 评论 -
html元素显示优先级
链接:https://www.nowcoder.com/questionTerminal/6d4da50b5c90416b8d8ab2286d7a739c来源:牛客网在html中,帧元素(frameset)的优先级最高,表单元素比非表单元素的优先级要高。 表单元素包括:文本输入框,密码输入框,单选框,复选框,文本输入域,列表框等等; 非表单元素包括:连接(a),div,table,span...转载 2018-07-11 09:24:18 · 2416 阅读 · 0 评论 -
vue框架与后台之间的http交互
1. 引入vue.js, vue-resource.js;2.这就可以开始交互了。注意:一定要运行在服务器里面,否则输出的是php代码,而非返回值。有三种交互方式:get、post、jsonpget:会将请求的参数附在最后post:不会显示在url中get、post用来请求某个php文件的参数。jsonp:JSONP(JSON with Padding)是JSON的一种...转载 2018-07-23 15:19:07 · 2022 阅读 · 0 评论 -
主流浏览器内核以及私有前缀
根据不同的内核,一些私有属性的css前缀不一样 Gecko内核 css前缀为"-moz-" 火狐浏览器WebKit内核 css前缀为"-webkit-" Comodo Drangon(科摩多龙),苹果,搜狗高速浏览器3,快快浏览器,枫树浏览器,云游浏览器,360极速浏览器,世界之窗极速版,SRWare Iron,猎豹浏览器,RockMelt,QQ浏览器Presto内核 cs...转载 2018-07-12 09:47:36 · 1045 阅读 · 0 评论 -
五大主流浏览器内核总结
1、IE浏览器内核:Trident内核,也是俗称的IE内核;2、Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;3、Firefox浏览器内核:Gecko内核,俗称Firefox内核;4、Safari浏览器内核:Webkit内核;5、Opera浏览器内核:最初是自己的Presto内核,后来加入谷歌大军,从Webkit又到了Blink...转载 2018-07-12 09:48:44 · 1770 阅读 · 0 评论 -
css中可继承的样式属性总结
链接:https://www.nowcoder.com/questionTerminal/0c76b5ff84fd4814b4ba4d45af3185b6?source=relative来源:牛客网 肯定有很多人不知道什么是继承,继承就是指子节点默认使用父节点的样式属性。不可继承的属性太多了不要背,记住可以继承的属性有哪些就行了。可以继承的属性很少,只有颜色,文字,字体间距行高对齐方式...转载 2018-07-18 09:27:37 · 4931 阅读 · 0 评论 -
CSS清除浮动
什么是CSS清除浮动?在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。引用W3C的例子,news容器没有包围浮动的元素。...转载 2018-07-24 09:58:10 · 147 阅读 · 0 评论 -
h5中新增减的特性
链接:https://www.nowcoder.com/questionTerminal/c654595667574ee58a66681c57c19da1来源:牛客网 准了HTML5中常用的新特性:canvas元素:用于定义图形(图表等),只是图形容器,必须使用脚本来绘制图形。audio:用于音频播放。video:用于视频播放。article:规定独立的自包含内容。...转载 2018-07-18 20:15:12 · 200 阅读 · 0 评论 -
vue 将页面中表格数据导出excel (github可直接下载所需文件)
1、安装三个依赖包 npm install -S file-saver npm install -S xlsx npm install -D script-loader2、在项目中创建一个文件夹(比如vendor,一般是在src目录下创建) 把Blob.js和 Export2Excel.js这两个文件夹放到新建的文件夹内 Blob.js在GitHub上...转载 2018-07-24 19:54:08 · 3138 阅读 · 0 评论 -
牛客 为 Array 对象添加一个去除重复项的方法
关键是indexOf的用法:indexOf是判断resArr数组中的值和当前的值有没有相同的,如果有相等的会返回那个位置,没有相同的返回-1,这里返回-1的意思是没有相同的,也就是resArr数组里还没有当前的数。再之后再遇到有相同的就不会返回-1了,也就不会继续执行if里面的了。 Array.prototype.uniq = function () { var re...原创 2018-07-19 09:57:15 · 714 阅读 · 1 评论 -
webpack开发配置(webpack.base.js/webpack.dev.js/webpack.prod.js)
https://blog.csdn.net/kingov/article/details/77278550转载 2019-01-31 15:14:46 · 986 阅读 · 0 评论 -
跨域
https://segmentfault.com/a/1190000011007043转载 2019-01-31 16:45:44 · 188 阅读 · 0 评论 -
6 JS的模块化 ES6模块化及webpack打包
转自:https://blog.csdn.net/u014168594/article/details/77198729js的模块化进程现在前端技术日新月异,对于同一个问题痛点,各个时段有各自的解决方案,这就带来了很大差异。今天我就打算梳理js模块化的历史进程,讲一讲这些方案要做什么,怎么做。js模块化进程的起因现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和...转载 2018-05-31 21:02:52 · 6479 阅读 · 0 评论 -
什么是开发环境 测试环境 生产环境
转自:https://blog.csdn.net/qq_36538012/article/details/78552074读一些官方文档的时候,总会遇到以下几个关键的名词,一开始我不太懂,绕来绕去,让我对文档阅读产生了误会,于是查找了一些资料。百度解释如下:开发环境:开发环境是程序猿们专门用于开发的服务器,配置可以比较随意, 为了开发调试方便,一般打开全部错误报告。测试环境:一般是克隆一份生产环境...转载 2018-05-31 20:59:37 · 1827 阅读 · 0 评论 -
5 前端请求跨域理解详解
转自:http://web.jobbole.com/92405/什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域:1231.) 资源跳转: A链接、重定向、表单提交2.) 资源嵌入:<link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@fo...转载 2018-05-30 15:02:53 · 209 阅读 · 0 评论 -
用jquery实现图片轮播
转自:http://blog.csdn.net/liuxuekai/article/details/51925589先为ppt和按钮设定变量,再取图片的宽度设置变量,设定计时器变量并为其设置为null,设置图片索引值变量并设定初值为0( 第一张图)。为按钮绑定事件,点击播放编写:按钮点击,运行函数,函数取当前元素(按钮)的索引值,再把按钮的索引值赋值给图片的索引值,再利用animate转载 2018-01-09 20:09:39 · 275 阅读 · 0 评论 -
position属性:absolute与relative的区别
转自:https://www.douban.com/group/topic/64141776/?type=rec如果用 position来布局页面,父级元素的position 属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的padding 的属性影响,当然你也可以用 position,不过到时候计算的时候不要忘记 padding 的值。” 任...转载 2018-03-06 22:10:01 · 368 阅读 · 0 评论 -
js创建自定义对象的几方式-js高级程序设计
转自:js高级程序设计1、工厂模式弊端:没有解决对象的识别问题,即怎么知道一个对象的类型。 2、构造函数模式 与工厂模式相比: 1、没有显式的创建对象 2、直接将属性和方法赋给了this对象 3、没有return语句 要创建person的实例,必须使用new操作符,以这种方式调用构造函数实际上会经历4个步骤: 1、创建一个新对象 2、将构造函数的作用域赋给新对象 3、执行构造函数中的代码 4、返回...转载 2018-05-13 20:49:42 · 140 阅读 · 0 评论 -
js继承的几种方法-js高级程序设计
转自:js高级程序设计原型链原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的指针。如果:我们让原型对象A等于另一个类型B的实例,那么原型对象A就会有一个指针指向B的原型对象,相应的B的原型对象中保存着指向其构造函数的指针。假如B的原型对象又是另一个类型的实例,那么上述的关系依...转载 2018-05-13 20:51:24 · 502 阅读 · 0 评论 -
Ajax技术原理与实战
摘要:AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。解决传统的网页(不使用 AJAX)如果需要更新内容,必须重...转载 2018-05-13 21:00:34 · 214 阅读 · 1 评论 -
1 浏览器渲染过程
浏览器主要组件结构(浏览器主要组件)渲染引擎——webkit和GeckoFirefox使用Geoko——Mozilla自主研发的渲染引擎。Safari和Chrome都使用webkit。Webkit是一款开源渲染引擎,它本来是为linux平台研发的,后来由Apple移植到Mac及Windows上。本文我主要以webkit渲染引擎来讲解,尽管webkit和Gecko使用的术语稍有不同,他们的主要流程基...转载 2018-05-21 21:53:51 · 169 阅读 · 0 评论 -
2 在浏览器输入一个url后 会发生什么事情
一、初始准备(服务器端)1.服务器启动监听服务,准备迎接来自客户机的请求。服务器启动操作系统—启动http服务进程(apache or nginx or ..)--服务进程开始定位到服务器上的www文件夹,一般是位于/var/www。2.服务器启动一些附属的模块。例如php,或者,使用fastcgi方式连接到php的fpm管理进程。3.向操作系统申请一个tcp连接4.绑定在80端口5.调用了acc...转载 2018-05-21 21:58:13 · 381 阅读 · 0 评论 -
3 浏览器缓存机制
先看上图,如果对图中的(a)(b)(c)(d)四个过程的处理方式都很清楚了,那么请不用再看本文了。两个概念强缓存用户发送的请求,直接从客户端缓存中获取,不发送请求到服务器,不与服务器发生交互行为。协商缓存用户发送的请求,发送到服务器后,由服务器判定是否从缓存中获取资源。两者共同点:客户端获得的数据最后都是从客户端缓存中获得。两者的区别:从名字就可以看出,强缓存不与服务器交互,而协商缓存则需要与服务...转载 2018-05-22 08:41:31 · 360 阅读 · 0 评论 -
4 总结前端性能优化
网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等。而前端呢?其实应该是属于功能的表现。并且影响用户访问体验的绝大部分来自前端页面。 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的。除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,...转载 2018-05-22 10:55:21 · 165 阅读 · 0 评论 -
慕课网 前端JS面试技巧 笔记
前言关于面试前端水平的三个层次基层工程师-基础知识高级工程师-项目经验架构师- 解决方案几个面试题题目很多,做具有代表的题目,举一反三js 中使用 typeof 能得到哪些类型 (==js 变量类型==)何时使用 === 何时使用 == ? (==强制类型转换==)window.onload 和 DOMContentLoaded 的区别 (==浏览器渲染过程==)用 js 连续创建 10 个 ...转载 2018-06-02 16:51:45 · 2886 阅读 · 0 评论 -
JS 中的JSON详解
我们先来看一个JS中常见的JS对象序列化成JSON字符串的问题,请问,以下JS对象通过JSON.stringify后的字符串是怎样的?先不要急着复制粘贴到控制台,先自己打开一个代码编辑器或者纸,写写看,写完再去仔细对比你的控制台输出,如果有误记得看完全文并评论,哈哈。var friend={ firstName: 'Good', 'lastName': 'Man', '...转载 2018-06-03 15:56:36 · 2776 阅读 · 0 评论 -
前端笔记
王福朋 http://www.cnblogs.com/wangfupeng1988/p/3994065.html转载 2018-06-03 17:19:06 · 277 阅读 · 0 评论 -
4.1 前端性能优化--图片懒加载(lazyload image)
话说前头:上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求。除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视频,flash等)也是一种优化前端性能的方式。使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求。懒加载介绍:通俗介绍:懒加载怎么个懒法,就是你不想看就不...转载 2018-05-22 21:48:33 · 370 阅读 · 0 评论 -
vue生命周期钩子 created mounted
https://segmentfault.com/a/1190000014705819转载 2019-02-01 20:23:05 · 1614 阅读 · 0 评论