Web前端
关注
分享
扫一扫
智学无忧-老曹
老曹的教学风格以深入浅出，通俗易懂，以现场敲代码演示案例而著称。智学无忧是由老曹全心打造的IT职业教育机构，智学无忧做全国最有态度、最有责任、最有良心的IT教育。开设了Java大数据开发、Web前端高级开发课程，课程的内容是老曹根据自己十多年的经验编写而成，含金量非常高。通过系统学习课程后，具有同行业的两年以上的工作经验，很多同学学完后进入华为、中国平安、腾讯这样的大公司工作，薪资在10K以上是非常轻松的事。来智学无忧是你人生正确的选择，智学无忧，助你前程无忧！
展开
-
响应式开发从原理到实战案例（四）：媒体查询语法介绍
什么是媒体查询是H5的新特性，为了移动端的使用而新增的特性，使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。它就是为响应式而来的！语法格式media_query>：[only| not]? media_type> [and]* | expression>[and expression>]*expression>：'('media_feature>[:]原创 2016-11-09 18:37:39 · 2207 阅读 · 0 评论 -
Web前端面试指导(二十三)：怎样创建、添加、移除、移动、和查找节点?
创建元素 1.createDocumentFragment()创建一个虚拟节点对象,对于频繁操作DOM时推荐使用，减少对页面重绘频率从而提高页面响应的速度。例证 示例1 使用DOM频繁创建、添加节点console.time("纯DOM操作");for (var i = 0; i < 10000; i++) { vardiv = document.create原创 2016-10-03 22:32:54 · 3546 阅读 · 3 评论 -
Web前端面试指导(三十)：JavaScript有几种类型的值？你能画一下他们的内存图吗？
题目点评数据类型是所有程序都会涉及到的，是计算机语言比较基础知识，这种问题被问到的可能性其实并不大，这样的题目只要花点时间把它记下来就好了，难易程度一般。 两大类：栈：原始数据类型（Undefined，Null，Boolean，Number、String）堆：引用数据类型（对象、数组和函数）区别：两种类型的区别是：存储位置不同；原始数据类型直接存储在栈(stack)原创 2016-10-07 14:37:07 · 15028 阅读 · 0 评论 -
Web前端面试指导(三十一)：谈谈你对this的理解
题目点评主要考察你对面向对象编程的理解，特别是对象的指向问题，如果连对象的指向都搞不清楚，很难说明你是一个优秀的前端开发人员，所以回答this的知识点是体现你的身价的时候到来了！如果能够回答好这个问题，那么在面试上你是增值的。个人建议，可以先回答this在不同的场合指向的是什么，在来回答什么时候用到this，这样回答的逻辑会比较好。this的指向this表示当前对象，this的指向是根原创 2016-10-07 17:28:08 · 18856 阅读 · 0 评论 -
Web前端面试指导(三十二)：同步和异步有什么区别？
题目点评这种问题也不是很复杂，建议在回答的时候最好结合自己的实际项目开发以及自己的理解来回答，这样的效果会比较好，面试上提的问题本来目的就是想考察你是否熟悉，是否有用到过，如果你是结合你的项目来回答问题的，很显然向面试官传递了一个信息就是你是有开发经验的。同步的概念同步，我的理解是一种线性执行的方式，执行的流程不能跨越。一般用于流程性比较强的程序，我们做的用户登录功能也是同步处理的，必原创 2016-10-07 22:11:13 · 9711 阅读 · 0 评论 -
Web前端面试指导(七)：入职后的建议
7.1 离职证明大家自己从百度下离职证明，自己填，淘宝买印章7.2 关于合同签合同的时候，看公司要求，有些是3年，有些是5年，不要怕，签了就是了，真到想走的时候，提前说一声，随时可以走，不存在什么违约赔偿。注意：你的合同和薪资都是属于保密的，不能让公司其他同事知道。7.3 编码规范 代码做好注释，命名要规范，代码结构要有层次7.原创 2016-09-21 15:09:02 · 5624 阅读 · 0 评论 -
快速了解微信小程序的使用，一个根据小程序的框架开发的todos app
源码下载地址： ＱＱ群 Web前端高级工程师 386039008 微信官方已经开放微信小程序的官方文档和开发者工具。前两天都是在看相关的新闻来了解小程序该如何开发，这两天官方的文档出来之后，赶紧翻看了几眼，重点了解了一下文档中框架与组件这两个部分，然后根据简易教程，做了一个常规的todo app。这个app基于微信小程序的平台，实现了todo app的常规功能，同转载 2016-09-29 10:41:58 · 2197 阅读 · 0 评论 -
浏览器工作原理（十）：CSS2可视模型（CSS2 visual module）
画布The Canvas 根据CSS2规范，术语canvas用来描述格式化的结构所渲染的空间——浏览器绘制内容的地方。画布对每个维度空间都是无限大的，但浏览器基于viewport的大小选择了一个初始宽度。 根据http://www.w3.org/TR/CSS2/zindex.html的定义，画布如果是包含在其他画布内则是透明的，否则浏览器会指定一个颜色。 CSS盒模型 CS原创 2016-10-19 23:11:48 · 1080 阅读 · 0 评论 -
浏览器工作原理（九）：动态变化和渲染引擎的线程
动态变化 浏览器总是试着以最小的动作响应一个变化，所以一个元素颜色的变化将只导致该元素的重绘，元素位置的变化将大致元素的布局和重绘，添加一个Dom节点，也会大致这个元素的布局和重绘。一些主要的变化，比如增加html元素的字号，将会导致缓存失效，从而引起整数的布局和重绘。渲染引擎的线程 渲染引擎是单线程的，除了网络操作以外，几乎所有的事情都在单一的线程中处理，在Firefox原创 2016-10-19 23:02:04 · 1574 阅读 · 0 评论 -
Web前端面试指导(二十九)：Ajax 是什么? 如何创建一个Ajax？
题目点评Ajax 是在工作中是必用的技术，在面试中十有八九会问的，答题的思路最好先回答原生态Ajax使用的步骤，最后告诉面试官，我们在工作中是使用Jquery来实现Ajax请求和处理的。在回答的时候尽量详尽，包括方法的参数的个数，顺序和作用，以免被面试官抓住不放。不给面试官提问的机会，那你的回答就牛逼了！Ajax是什么我理解Ajax 是一种异步请求数据的一种技术，对于改善用户的体验和程原创 2016-10-06 21:41:04 · 6626 阅读 · 1 评论 -
响应式开发从原理到实战案例（十四）：响应式改版完整案例-图片处理
首先来看，图片在屏幕放大和缩小是能够很好的适应的效果图缩小后图片的解决方案第一种：使用百分比缺点：放大后，图片会失真第二种：使用em原理分析em是一种数量单位，与父元素的font-size形成一种比例关系，这种关系可以由开发者来控制例如： 父元素font-size：100px 子元素原创 2016-11-09 20:43:52 · 840 阅读 · 0 评论 -
响应式开发从原理到实战案例（十三）：响应式改版完整案例-页脚
响应式前响应式后实现的关键过程第一步：整体布局媒体查询样式 ~~~~~~~~~~~~~~~~~下一节《响应式改版完整案例-图片处理》~~~~~~~~~~~~~~~~~原创 2016-11-09 20:35:49 · 909 阅读 · 0 评论 -
响应式开发从原理到实战案例（五）：使用媒体查询改进响应式页面
前面使用JS来实现响应式的页面，有了媒体查询可以这样改进了在link标签上使用媒体查询，不需要编写那么JS代码：在link标签上用media属性指定媒体查询的内容，条件符合的则引入样式文件。不需要写JS代码。 但也存在问题，能不能不使用两个样式文件，从性能上讲，发生两次请求没有发生一次请求好！合并两个样式文件的内容了？当然可以，在样式文件里使用@media媒体查询/*媒体查原创 2016-11-09 18:56:18 · 1346 阅读 · 0 评论 -
响应式开发从原理到实战案例（六）：bootstrap框架介绍
Bootstrap是Twitter推出的一个用于前端开发的开源工具包，Bootstrap推崇“移动优先”（Mobile First）的设计理念，支持动态调整网页布局、创建响应式网站。截止2016年11月，最新版本是 V3.3.7。下载地址V 2.3.2 http://getbootstrap.com/2.3.2/assets/bootstrap.zip原创 2016-11-09 19:10:47 · 1337 阅读 · 0 评论 -
响应式开发从原理到实战案例（七）：使用bootstrap V2.3.2实现响应式页面
实现的主要步骤：1、去掉之前的样式文件，应用bootstrap的样式文件。index.css样式文件可以不用了，全部采用bootstrap框架的样式2、在body结束前，先后引入jquery和bootstrap.js在body之前引入js文件，防止页面内容呈现缓慢先引入jquery文件，bootstrap框架以来jquer原创 2016-11-09 19:33:38 · 1734 阅读 · 0 评论 -
响应式开发从原理到实战案例（八）：使用bootstrap V3.3.7实现响应式页面
与V2.3.2的变化从V 3.x版本开始，丢弃了bootstrap-responsive.css文件，而是整合到bootstrap.css文件了。页面的布局和样式的名称也有些变化了具体实现的步骤1、引入相关的文件引入一个css文件 bootstrap.css使用meta设置移动设备自适应进入相关的脚本文件根据bootstrap原创 2016-11-09 20:00:18 · 1771 阅读 · 0 评论 -
响应式开发从原理到实战案例（九）：响应式改版完整案例-静态页面制作
页面效果图页面不支持响应式，布局采用了H5语义化标签。建议 如果布局不是很熟练的建议自己布局一下这个网页 如果布局很熟练的网页，可以忽略这个步骤 ~~~~~~~~~~~~~~~~~下一节《支持响应式-头部列表》~~~~~~~~~~~~~~~~~原创 2016-11-09 20:11:01 · 1225 阅读 · 0 评论 -
响应式开发从原理到实战案例（十）：响应式改版完整案例-头部列表
效果图响应式后实现的关键过程第一步：ul媒体查询样式使用媒体查询屏幕低于760px后width：80%;marging:0 auto; //水平居中显示第二步：li标签媒体查询样式display:block;//显示块级元素margin-bottom:10px;//元素垂直间隔10px的原创 2016-11-09 20:17:31 · 1259 阅读 · 1 评论 -
响应式开发从原理到实战案例（十一）：响应式改版完整案例-头部菜单
效果图响应式后实现的关键过程第一步：菜单按钮媒体查询样式第二步:外层布局媒体查询样式padding: 0 20px;//左填充 20pxtext-align: left;//文本左对齐第三步：列表媒体查询样式第四步：编写显示与隐藏的脚本按钮点击事件，对菜单项进行显示和隐藏切换操作原创 2016-11-09 20:25:58 · 1052 阅读 · 0 评论 -
响应式开发从原理到实战案例（十二）：响应式改版完整案例-文章列表
响应式前响应式后实现的关键过程第一步：整体布局媒体查询样式底部填充40px第二步:文章模块媒体查询样式 宽度填充100%第三步:侧边栏媒体查询样式padding-left: 0px; 取消左填充的空间width: 100%;//宽度填满整个父容器 ~~~~~~~~~~~~~~~~~下一节《响应原创 2016-11-09 20:31:12 · 1013 阅读 · 0 评论 -
浏览器工作原理（八）：绘制（Painting）
绘制阶段，遍历渲染树并调用渲染对象的paint方法将它们的内容显示在屏幕上，绘制使用UI基础组件，这在UI的章节有更多的介绍。 全局和增量 和布局一样，绘制也可以是全局的——绘制完整的树——或增量的。在增量的绘制过程中，一些渲染对象以不影响整棵树的方式改变，改变的渲染对象使其在屏幕上的矩形区域失效，这将导致操作系统将其看作dirty区域，并产生一个paint事件，操作系统很巧妙的处理这原创 2016-10-19 22:59:42 · 1898 阅读 · 0 评论 -
浏览器工作原理（七）：布局（Layout）
当渲染对象被创建并添加到树中，它们并没有位置和大小，计算这些值的过程称为layout或reflow。 Html使用基于流的布局模型，意味着大部分时间，可以以单一的途径进行几何计算。流中靠后的元素并不会影响前面元素的几何特性，所以布局可以在文档中从右向左、自上而下的进行。也存在一些例外，比如html tables。 坐标系统相对于根frame，使用top和left坐标。 布局是一个原创 2016-10-19 22:55:27 · 2798 阅读 · 0 评论 -
浏览器工作原理（六）：渲染树构建
当Dom树构建完成时，浏览器开始构建另一棵树——渲染树。渲染树由元素显示序列中的可见元素组成，它是文档的可视化表示，构建这棵树是为了以正确的顺序绘制文档内容。Firefox将渲染树中的元素称为frames，WebKit则用renderer或渲染对象来描述这些元素。一个渲染对象知道怎么布局及绘制自己及它的children。RenderObject是Webkit的渲染对象基类，它的定义如下原创 2016-10-19 22:00:23 · 5607 阅读 · 0 评论 -
自定义插件-让IE9以下的浏览器支持H5属性placeholder
自从有了H5让我们喜也让我们忧，新特性用起来很炫、很酷提高了不少工作效率，但有不得不考虑该死的IE浏览器（从此微软的形象一落千丈）。在H5总我们会使用placeholder属性来实现文本水印提示信息。出来的效果感觉很酷但是让人尴尬的事情来了，IE不支持怎么办了？老曹写了一个插件供大家学习和出考，也欢迎大家提供问题，不断地完善该插件！，插件的文件是《p原创 2016-11-16 23:07:13 · 3770 阅读 · 1 评论 -
Web前端面试指导(完结)
首先感谢网友对我的关注，对智学无忧的关注！历经个多月，终于将web前端面试指导的课程全部更新完毕！希望对学习前端和面试前端的同学有帮助。智学无忧祝大家前程无忧！面试真题学习地址1. Web前端面试指导(五十二)：面试真题-深圳华强电子**有限公司 2. Web前端面试指导(五十三)：面试真题-深圳民**网络科技有限公司3. Web前端面试指导(五原创 2016-11-02 19:45:10 · 5236 阅读 · 1 评论 -
关于HTML+CSS设计思想【不定期更新】
1.border-radius 可以用在行级元素上吗？大家可以试试，答案是可以的。比如用在标签上2.下面的这种设计你会怎么做了？不同的人有不同的设计思路 非激活状态 激活状态原创 2016-11-23 12:27:02 · 1716 阅读 · 0 评论 -
Web前端面试指导(二十八)：什么是闭包，为什么要用它？
题目点评闭包这个概念也是JavaScript中比较抽象的概念，也是JavaScript中的一个难点，要求对理论知识理解的比较透彻，概念性的东西一两句就讲完了，所以这道题目可以死记硬背，如果实在不能理解的话。解题思路闭包是什么你可以这样回答：我个人理解，闭包是就是函数中的函数，里面的函数可以访问外面函数的变量，外面的变量的是这个内部函数的一部分。辅助理解 func原创 2016-10-06 18:00:08 · 18876 阅读 · 7 评论 -
Web前端面试题-实现今年倒计时功能
在网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示”XX年还剩XX天XX时XX分XX秒” 倒计时 最终的效果如下实现代码如下：参考答案如下： //年还剩 var txt= document.getElementById("原创 2017-03-04 15:07:51 · 4082 阅读 · 1 评论 -
深圳xiezuo软件面试题
一、单项选择题（20题，每题3分）1、我们想要将表格的文字放在靠上居中的位置，应该怎么办？（C）A）align=”middle” align=”top” B）align=”center” align=”top”C）valign=”middle” align=”top” D）valign=”top” align=”center” 2、原创 2017-03-05 21:47:00 · 2475 阅读 · 0 评论 -
在JavaScript中值类型和引用类型的区别
值类型和引用类型是学习一门语法非常很重要的知识，对以后内存优化提供很大的帮助。原创 2017-05-07 12:22:33 · 4475 阅读 · 2 评论 -
JavaScript转义
下面这段代码那里错了？ document.write(" alert('') "); 错误原因：字符串的会被解释为与外面的标签匹配，所以需要对 转义\/ document.write(" alert('') ");原创 2017-05-07 16:49:02 · 1297 阅读 · 0 评论 -
Web前端面试指导(五十)：CSS样式书写有哪些规范？
一、CSS书写顺序1.位置属性(position, top, right,z-index, display, float等)2.大小(width, height, padding,margin)3.文字系列(font, line-height,letter-spacing, color- text-align等)4.背景(background, border等)5.其他原创 2016-11-01 22:52:31 · 2712 阅读 · 0 评论 -
Web前端面试指导(五十一)：javascript的编写规范有哪些？
全局命名空间污染与 IIFE总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression)，用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改（i.e. 第三方库，window 引用，被覆盖的未定义的关键字等等）。不推荐 var x = 10,原创 2016-11-01 23:22:09 · 2802 阅读 · 0 评论 -
Web前端面试指导(四十九)：web前端项目的结构是怎样的？文件有哪些命名规范？
项目结构规范页面文件：以项目名命名，例如：shopjs文件：命名为jscss文件：命名为css图片文件：命名为images数据文件：命名为data文件存储规范：按项目模块分类存储，例如：用户信息管理页面文件存放：shop/userinfo/userlist.htmljs文件：js/userinfo/userlist.jscss样式：css/useri原创 2016-11-01 22:48:04 · 2737 阅读 · 0 评论 -
浏览器工作原理（五）：CSS解析（CSS parsing）
还记得简介中提到的解析的概念吗，不同于html，css属于上下文无关文法，可以用前面所描述的解析器来解析。Css规范定义了css的词法及语法文法。看一些例子：每个符号都由正则表达式定义了词法文法（词汇表）：comment///*[^*]*/*+([^/*][^*]*/*+)*//num[0-9]+|[0-9]*"."[0-9]+nonascii[/200-/377]nmstart原创 2016-10-19 18:42:15 · 6797 阅读 · 0 评论 -
浏览器工作原理（四）：HTML解析器 HTML Parser
HTML解析器的工作是将html标识解析为解析树。HTML文法定义（The HTML grammar definition）W3C组织制定规范定义了HTML的词汇表和语法。非上下文无关文法（Not a context free grammar）正如在解析简介中提到的，上下文无关文法的语法可以用类似BNF的格式来定义。不幸的是，所有的传统解析方式都不适原创 2016-10-19 17:18:22 · 13405 阅读 · 2 评论 -
浏览器工作原理（三）：关于解析的一些基本概念（理论性很强）
解析（Parsing－general）既然解析是渲染引擎中一个非常重要的过程，我们将稍微深入的研究它。首先简要介绍一下解析。解析一个文档即将其转换为具有一定意义的结构——编码可以理解和使用的东西。你想啊！HTML是一个纯文本的东西，计算机要怎么理解了？所以需要解析文档文档内容了嘛！所以HTML代码要遵守W3C的规范嘛！没有规则的东西是解析不了的，你说是不是！解析的结果通常是表达文档结构的节点树原创 2016-10-19 16:31:04 · 2893 阅读 · 0 评论 -
浏览器工作原理（二）：渲染引擎的详细介绍
渲染引擎是干什么的渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用PDF阅读器插件（所以想做浏览器插件的同学必须知道浏览器的工作原理），可以显示PDF格式，将由专门一章讲解插件及扩展，这里只讨论渲染引擎最主要的用途——显示应用了CSS之后的html及图片。渲染引原创 2016-10-19 15:20:57 · 7353 阅读 · 0 评论 -
浏览器工作原理（一）：浏览器的整体工作流程介绍
掌握原理的必要性在浏览器上输入一个网址后，一个漂亮的页面就呈现在我们眼前，中间发生了什么了？对于一个普通用户来讲，也许不用思考这个问题，但要作为一个名前端开发人员或是想开发插件的同学来讲，掌握浏览器的工作原理是非常有必要的！浏览器主要功能今天讨论五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。浏览器的功能和目的都是一样的，但在解析的过程中会有些差别。那么原创 2016-10-19 14:51:27 · 4791 阅读 · 0 评论 -
Web前端面试指导(四十八)：谈谈浏览器的兼容性
题目点评这个问题是非常抽象的，越是抽象的问题越能表现出我们的表达能力，而面试官就喜欢根据你的回答来追问，不断地打断你的思路，这个时候不要慌，一定要坚信自己。回答思路我们在开发的时候会明确项目要兼容哪些浏览器的最低版本，我之前的项目要求兼容IE8.0以上的版本，Chrome 48以上，FireFox 44以上。有了这些最基本的要求，在开发中就是要考虑到CSS样式和原创 2016-10-30 22:29:12 · 28089 阅读 · 2 评论