前端开发 | 易学教程

学Web前端开发靠谱吗？学完后可以做什么？

阅读更多关于学Web前端开发靠谱吗？学完后可以做什么？

学Web前端开发靠谱吗？相信很多想学习Web前端开发从事前端开发的人都会问这样的问题。之所以有的人学习了Web前端找不到工作，一个原因是没有学到专业知识，另一方面是没有项目经验。对于零基础的人，为了让他们在学习期间学到真实有用的技术，千锋小编分享web前端需要学习的内容为： 1、前端页面重构。主要内容为PC端网站布局、HTML5+CSS3基础、WebApp页面布局。学习目标是完成PC端网站布局，WebApp页面布局，还要可以通过HTML5+CSS3的2D、3D等属性实现一些精美的动画效果。 2、JavaScript、PC端全栈项目开发。主要内容为原生JavaScript、面向对象进阶与ES5/ES6应用、JavaScript工具库自主研发、JQuery经典交互特效开发、HTTP协议、Ajax进阶与后端开发、前端工程化与模块化应用以及AngularJS等。学习目标是可以通过原生JavaScript开发交互功能，实现网站上的交互效果，以及模块化应用等，实现完整的前端工程。 3、Web前端框架、混合开发(Hybrid，RN)、大数据可视化。主要内容为Node.js后端开发、Vue.js前端框架、React前端框架、混合开发(Hybrid，RN)、Angular前端框架、大数据可视化等。学习目标是可以独立完成相应的项目，如微信场景，应用Vue.js/Ionic/React

常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

阅读更多关于常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

前两篇文章讨论了 Gulp 的安装部署及基本概念，借助于 Gulp 强大的插件生态可以完成很多常见的和不常见的任务。本文主要汇总常用的 Gulp 插件及其基本使用，需要读者对 Gulp 有一个基本的了解。如果你对 Gulp 还不是很了解，可以通过下面两篇文章快速了解 Gulp 。由于几乎所有的插件都有非常友好的使用文档，所以本文不讨论涉及插件使用的东西，仅是一个汇总、排名不分先后。相关连接导航在windows下安装gulp —— 基于 Gulp 的前端集成解决方案（一）执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案（二）常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）插件安装 gulp 插件基于 nodejs ，安装一个Gulp 插件和安装普通 Nodejs 包的方法是一样的。只需 $npm --save-dev install 插件名就可以完成安装。 1、gulp-sass 预编译 sass 文件为 css 文件，SASS 不多说，如果项目中有使用 sass ，那么这个插件应该是必备的。前面的一篇文章中，已经对该插件有所使用了，可配置编译后输出风格、是否输出sourcemap 等常用选项。类似的项目还有 gulp-scss /

前端面试题（亲身面试经验）

阅读更多关于前端面试题（亲身面试经验）

　　最近面试了一些公司，趁着疫情期间，总结一波。大家可以看看会有用的。 webpack 1、webpack中entry和output的作用 webpack中的entry标记入口文件，它可以是一个字符串（单入口）或者一个数组（多入口），output用来标记输出，主要有两个属性 path和 filename。其次就是publicPath 和chunkFileName 2、webpack中loader和plugin的作用 loader 用于加载某些资源文件。因为webpack 本身只能打包commonjs规范的js文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。这就需要对应的loader将资源转化，加载进来。loader是用于加载的，它作用于一个个文件上。 plugin 用于扩展webpack的功能。它直接作用于 webpack，扩展了它的功能。当然loader也是变相的扩展了 webpack ，但是它只专注于转化文件。而plugin的功能更加的丰富，而不仅局限于资源的加载。 3、webpack中可以有哪些优化 1、优化Loader的文件搜索范围，指定include、exclude 2、把Babel编译过的文件缓存起来 loader: 'babel-loader?cacheDirectory=ture' 3、懒加载、按需加载

前端随笔

阅读更多关于前端随笔

把之前存的一堆自己觉得记录的知识点全部记录一下，有兴趣可以看看，共勉。 $ ( function ( ) { todo ( '71899703 200 6 91 425 4 67407 7 96488 6 4 2 7 31064 9 7920 1 34608557 27 72 18 81' ) . then ( f2 ) } ) ; function todo ( e ) { // var dfd = $.Deferred(); // setTimeout(function () { // // f1的任务代码 // dfd.resolve(); // }, 500); // return dfd.promise; // console.log(e.length) // var e = input; var x = e . length ; var y ; // 输出集合 var list = [ ] ; // 排序用集合 var templist = [ ] ; for ( var i = 0 ; i < x ; i ++ ) { y = e . split ( " " ) [ i ] ; if ( ! y ) { break ; } list [ i ] = y ; var sum = 0 ; for ( var n = 0 ; n < y . length ; n ++ )

漫谈前端优化

阅读更多关于漫谈前端优化

　　近几年，移动端站点和app、手游井喷式的发展，大大出乎了当初从业者的预料，2010年前后中国还处于3G网时代，各种3G宣传铺天盖地，如果你稍稍回忆一下，那个时候中国几乎没有像样的移动站点；大约在12年左右，也就是iphone4s诞生的时代，在中国高级智能设备开始被普遍使用，4G的覆盖范围也越来越大，各种app、移动站点、Html5活动页面也逐渐火爆起来；随着行业的发展，对从业者及技术支持的要求也越来越高；对于前端，前端资源和页面优化是常见要求，对比移动端，移动端对前端优化的要求更高，可以说要达到极致，虽然现在基本都有使用WIFI了，但一些地方还是要靠4G甚至3G、2G，极致的优化能争取更多的pv和更多的可能，如果你去观察一些大厂的项目和一些比较有名的站点，也会发现他们的优化是做的非常专业非常好的；而我今天跟大家聊的就是关于前端优化的内容；　　话不多说，来看看有哪些选项；　　 1. 引用资源部分优化：　　· 合并引用的css、javascript，并使用压缩模式，这个很好理解吧；　　 · 合并页面引用的小图标，也就是合成一张图片，引用背景图片定位，俗称雪碧图；　　 · 使用按需加载，scroll加载的处理方式；　　· 服务器GZIP处理资源，这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时

淘宝首页前端开发分析

阅读更多关于淘宝首页前端开发分析

doctype & charset： <!DOCTYPE HTML> ...... <meta charset="gbk"> 页面使用了HTML5 dtd以及HTML5 charset，页面编码使用“gbk” //从ASCII、GB2312到GBK，这些编码方法是向下兼容的，即同一个字符在这些方案中总是有相同的编码，后面的标准支持更多的字符。在这些编码中，英文和中文可以统一地处理。区分中文编码的方法是高字节的最高位不为0。按照程序员的称呼，GB2312、GBK都属于双字节字符集 (DBCS); //UTF-8是Unicode的实现方式之一; //GBK、GB2312等与UTF8之间都必须通过Unicode编码才能相互转换; 相关阅读： gbk, gb2312,big5,unicode,utf-8,utf-16之间的关系 ============================================================= IE9下Pin的开发: 效果： <meta name="application-name" content="淘宝网 - 淘！我喜欢" /> <meta name="msapplication-tooltip" content="淘宝网 - 淘！我喜欢" /> <meta name="msapplication-task" content=

前端监控都有哪几类

阅读更多关于前端监控都有哪几类

前端监控一般分为三种，分别为页面埋点、性能监控以及异常监控。我们将来学习这些监控相关的内容，但是基本不会涉及到代码，只是让大家了解下前端监控该用什么方式实现。毕竟大部分公司都只是使用到了第三方的监控工具，而不是选择自己造轮子。页面埋点页面埋点应该是大家最常写的监控了，一般起码会监控以下几个数据： PV / UV 停留时长流量来源用户交互对于这几类统计，一般的实现思路大致可以分为两种，分别为手写埋点和无埋点的方式。相信第一种方式也是大家最常用的方式，可以自主选择需要监控的数据然后在相应的地方写入代码。这种方式的灵活性很大，但是唯一的缺点就是工作量较大，每个需要监控的地方都得插入代码。另一种无埋点的方式基本不需要开发者手写埋点了，而是统计所有的事件并且定时上报。这种方式虽然没有前一种方式繁琐了，但是因为统计的是所有事件，所以还需要后期过滤出需要的数据。性能监控性能监控可以很好的帮助开发者了解在各种真实环境下，页面的性能情况是如何的。对于性能监控来说，我们可以直接使用浏览器自带的 Performance API 来实现这个功能。对于性能监控来说，其实我们只需要调用 performance.getEntriesByType(‘navigation’) 这行代码就行了。对，你没看错，一行代码我们就可以获得页面中各种详细的性能相关信息。

各种AJAX方法的使用比较

阅读更多关于各种AJAX方法的使用比较

各种AJAX方法的使用比较阅读目录开始第一代技术：生成客户端代理脚本调用服务端新技术的改进方向第二代技术：jQuery直接调用WebService 第三代技术：更简单的数据格式第四代技术：直接提交表单多submit按钮的提交（用jQuery.form实现）批量输入控件的提交（用jQuery.form实现）提交复杂表单（用jQuery.form实现）各种AJAX开发方法的对比与总结相关链接 AJAX技术经过这么多年的发展，出现了一些框架或类库用于简化开发工作，不同的框架类库的使用方法也各不相同。现在，再回头看看这些技术，看看这些框架类库，我们能感受到技术在不断地发展，AJAX开发越来越容易了。本文收集了在ASP.NET平台上，一些具体代表性的AJAX开发方法，我将用实际的示例代码来演示如何使用它们，让您感受AJAX的进化历程，同时也希望将一些优秀的AJAX开发方法介绍给您。为了方便地介绍这些AJAX开发方法，我将它们划分为四代技术。注意：按代划分AJAX技术纯属我个人的观点，只为了更好了区分它们。此外，一些不借助任何框架类库的原始AJAX开发方法，本文将不讨论它们。回到顶部第一代技术：生成客户端代理脚本调用服务端这类技术展示了第一代的AJAX框架的主要设计思想：在服务端为客户端生成代理脚本，然后由这些代理脚本调用服务端

大火的前端时代，使用前端技术能实现什么？

阅读更多关于大火的前端时代，使用前端技术能实现什么？

什么是前后端分离，要区分前端和后端，需要有个明确的界限。一般，用户可以直接看到的东西，都是属于前端的范畴，除了前端之外都属于后端了。在传统的像ASP，JSP和PHP等开发模式中，前端是处在一个混沌的状态中，可以说是没有独立的“人格”可言。前端负责切图和编写静态页面模板，后端将数据渲染到前端提供的页面模板中，最后将页面渲染到浏览器展示。这个过程中，前端只提供页面模板或者写一些JavaScript脚本，有的甚至JS脚本都是后端来写，前端的作用只局限于切图和样式模板文件，这种角色就是传说中的“切图仔”。这也是为什么行业内都觉得前端是一个很简单的工作，只要花个一周，学下HTML、CSS和PS的简单技巧就可以胜任的工作。现在看来，那时候的前端就是一个打酱油的，发展前景很有限。那时候的JavaScript脚本也比较简单，一个jQuery就可以横扫天下，所以对于精通语言类代码的后端程序员来说，可以很快的上手JavaScript，对前端来说，发展空间就更小了。前后端分离，不只是简单的代码的分离。首先是要架构上分离解耦，逐渐摆脱前后端在架构上的依赖，前后端各司其职，分开部署在不同的服务器上，通过RESTful接口传递数据。减轻后端服务器的压力，后端服务器不再负责页面渲染，只负责输入数据，吞吐量提升了好几倍。其次是逻辑分离，不分离的时候，对于业务代码的界限很不明确

优化网站性能的14条军规快速提高网站访问速度

阅读更多关于优化网站性能的14条军规快速提高网站访问速度

优化网站性能的14条军规快速提高网站访问速度相信互联网已经越来越成为人们生活中不可或缺的一部分。ajax，flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实现的功能。比如Google几乎已经把最基本的office应用都搬到了互联网上。当然便利的同时毫无疑问的也使页面的速度越来越慢。自己是做前端开发的，在性能方面，根据yahoo的调查，后台只占5%，而前端高达95%之多，其中有88%的东西是可以优化网站性能的。以上是一张web2.0页面的生命周期图。工程师很形象地讲它分成了“怀孕，出生，毕业，结婚”四个阶段。如果在我们点击网页链接的时候能够意识到这个过程而不是简单的请求-响应的话，我们便可以挖掘出很多细节上可以提升性能的东西。今天听了淘宝小马哥的一个对yahoo开发团队对web性能研究的一个讲座，感觉收获很大，想在blog上做个分享。优化网站性能的14条军规快速提高网站访问速度，更多内容如下：相信很多人都听过优化网站性能的14条规则。 1. 尽可能的减少 HTTP 的请求数 [content] 2. 使用 CDN（Content Delivery Network） [server] 3. 添加 Expires 头(或者 Cache-control ) [server] 4. Gzip 组件 [server] 5. 将 CSS 样式放在页面的上方

订阅前端开发