前端开发

原文: 前端开发调试线上代码的两款工具 用过 Charles 和 Fiddler 这两款，记录如下。 一、Charles Charles 界面简单直观，易于上手，数据请求控制容易，修改也简单，抓取数据的开始暂停也方便。全平台支持 win，mac，linux。 1. 安装前提 Charles 需要有 Java 环境，请提前下载安装 JDK。 JDK 已经 8 了。 根据自己的系统选择对应的JDK。我的是 win7，双击安装，一直下一步就哦了。在命令行窗口输入以下命令，出现截图所示就表示 JDK 安装成功了 2. 下载 Charles Charles 可以去官网 下载 ，如果不追求最新版本，这里也有 破解版 的。安装也是一直下一步就行了。启动界面如下 3. 调试线上代码 现在就可以启动 Charles 来调试了，大概步骤 启动 Charles 打开浏览器（如Firefox），访问调试的地址（比如这里是trip.jd.com） 选择需要调试的文件，前端多数时候是 JS/CSS，下载到本地 把线上的该文件url 映射到 本地下载的文件 这样就任意修改本地文件来查看结果了。 下面以调试 trip.jd.com 测试，修改该页面里引入的 search.js 启动 Charles，浏览器打开 trip.jd.com，可以看到 Charles 已经可以捕捉到该页面的众多请求了 下载 search

信息技术的迅速发展，使IT技术者们赶上了一个百年难遇的好机会，尤其是国家出台了“互联网+”的政策后，更是催生了IT行业的就业空间，使其呈现爆发性增长。 如今，微信逐渐成为了大家主要的交流工具，随着各种小程序游戏风靡朋友圈之后，其从业人员Web前端开发工程师的薪资可谓是一路高涨。细心观察下大家不难发现，就目前来看，Web前端作为移动互联网时代的前沿技术，不仅在电脑端，而且在手机端也得到了广泛的应用。据预测，Web前端开发在未来5—10年，将会成为移动互联网领域的主宰者。 当然，很多外行人对于“Web前端开发”的了解还只是皮毛，今天小编就为大家详细解释一下Web前端到底是什么。 1、什么是Web前端？ 早期互联网时代，电脑端的网站页面主要以静态为主，相对来说也没那么复杂。而现在随着网络信息逐渐丰富，网页发生了很大的变化，企业更加注重用户交互，各种产品层出不穷，好产品想要长久发展，用户体验就变得尤为重要，特别是移动端产品。 Web前端技术主要包括HTML5、CSS3、Less、Sass、响应式布局、移动端开发、以及Ps设计等，更高级的前端开发人员还需要掌握JavaScript 语言、Mysql、Mongodb数据库开发、vue.js、webpack、elementui等前端框架技术。 2、Web前端开发可以从事哪些工作？ 学完Web前端开发后，可以从事网站前端工程师、网页制作工程师

1.　　请减少HTTP请求　　 　　 基本原理： 　　在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。 　　一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。 　　 而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。 　　网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。所以， 请减少HTTP请求。 　　 解决办法： 　　合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行 优化 。 2.　　请正确理解 Repaint 和 Reflow　　 　　注：Repaint 和 Reflow 也就是重绘和重排，请允许我在这卖弄下我有限认识的那么几个英语单词...囧 　　 基本原理： 　　R epaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility

懒得再扯乱七八糟的了，通用篇里面的东西，如果你只是一个初级玩家，会与不会没啥毛病。 毕竟一个内蒙的测试大哥曾教过我，先把饭吃稳，再去考虑实现自己的人生梦想。 先把这些基础知识学会了，能干活了，能帮助别人解决一些问题了，我们再去想那些有的没的，不然你可能试用期都过不了哟（不要问我怎么知道的……） 大家如果投过一些前端简历就会知道，html/css/js 出现的频率贼吉儿高。 html 是一个标记语言，只有标记，内容（数据？）。这玩意和word文档差别不大的…… 但是想想如果你每次看的网页都是一篇篇word文档，你肯定疯了。 所以还有css。用选择器去控制页面元素的样式。 js是让页面动起来，对吧。 html,css,js,相互耦合，又相互独立。 凭借我一年半的开发经验 html 数据展示 css 数据渲染 js 控制页面浏览器的一些行为 其中我的感觉html,css自成闭环， 反观js 起着一个枢纽的作用，控制着html,css以及运算，client端的计算能力远逊于server端的能力，所以数量级高的运算 你敢让前端算你肯定会被钉在团队的耻辱柱上的（别问我怎么知道的……） 大道理咱都懂，怎么学，怎么入手呢…… 关于html 我去查查历史 都发展了这么多年了，现在都2019了，市场上的标准也早都统一了，随便找个菜鸟教程，mdn从头到尾过一遍，注重他的思想，不要过多在意他的内容

jQuery在移动端 移动端dom操作库首推zepto，他实现了jQuery的大多数接口，被移动端成功扶正；弃用jQuery的主要原因是尺寸上的考虑 而jQuery经过几次发展，终于宣布不再理睬IE8，但是最新的版本尺寸依旧超过80K，而我移动端核心框架加起来还没一个DOM库大，很难不放弃他 究其原因，积重难返，要兼容老接口，又要照顾老用户，一些代码确实删不掉。 angularJS的更新 而与jQuery对应的是angularJS，框架的版本号改变却变成了框架的改变，2.X与1.X完全是两个东西，从模板到业务代码改变很大，不向下兼容，对此，我只能说：干得漂亮！同时也惹来骂声一片，程序员学习需要成本，一次学完了还得再学一次，而之前的业务代码要升级还得修改，这个确实很疼。 angularJS没有兼容老的写法，倒不是他不愿意兼容，是因为底层的机制发生变化，或者一些颠覆性的吸引，所以就改了，这个带来的好处可能是：框架性能提升50%，也可能是模板同时被服务器端解析，一套代码解决SEO问题。或者其它神马。权衡利弊，所以他就干了，不破不立，先破后立。 这里也引出了一个不可避免的问题：前端框架应该如何升级，如何迭代；全站样式应该怎样更新？ 框架升级与样式升级对于一个大型站点来说都是一件令人头疼的事情，这两个问题刚好最近刚好就把我坑了进去 前端框架的升级 我们框架由1.X发展到了2.X，2

http://www.cnblogs.com/wuac/p/6406843.html 一、开发环境搭建 1、前端框架一般都依赖nodejs,我们首先要安装node.js。请参考http://www.cnblogs.com/wuac/p/6381819.html。 2、由于许多npm的源都是在国外的地址，安装起来特别慢，所以我们这里利用淘宝的镜像服务器。 安装命令为：npm install -g cnpm --registry=https://registry.npm.taobao.org 之后回车等待命令 3、接着安装全局的vue-cli脚手架,用于帮助搭建所需的Vue的开发模板框架 命令为：cnpm install -g vue-cli，回车，等待安装 安装完后，可以输入vue -V，然后回车，如果出现vue的客户端版本信息，则说明安装成功了。 4、用 npm 安装 Webpack： cnpm install webpack -g 此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。 4、在一个目录下新建一个vuepro文件夹，cd到该目录下，然后输入命令：vue init webpack vue-test (项目默认的名称) 此时，观察vuepro的文件夹下又多了一个vue-test文件夹，这个就是vue的模版项目。 5、启动调试

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 每当有小白在前端这个圈子的外围试探，想要进入这个"门槛低收入高"的工种时，老江湖们就会用各种前端框架以及框架配套的技术栈和开发理念把小白们吓个半死，最不济也要用JS里一堆奇门遁甲式的编程妖术恐吓一番，以让新手心存敬畏。相反忽略了作为前端而言，最核心最重要，真正关系生存的HTML和CSS的重要性。 这个原因可能跟HTML和CSS本身的特性有关，因为它们严格意义上说不能叫“编程语言”，连基本的if、else、for都没有，所以作为前端哪怕是以“码农”做自嘲，都没有其他语言工种来得有底气，只有JS看前来最像一门“真正的编程语言”，尽管这门语言也是连它的生父都吐槽它，更是长期被“古典程序员”们当作玩具脚本。而集JS使用的大成者，就是各种前端框架。为了证明我们是”真正的程序员“，是写JS的，不知不觉就忽略了HTML+CSS。另外，我也发现一般互联网公司而言，对HTML+CSS完成的页面质量要求也是越来越低了，自己先后跳槽的3个公司，一家比一家名气大，一家比一家工资高，但是就纯粹的html页面而言，无论是页面对设计稿的还原度，还是兼容要求，适配要求，页面体积要求都是越来越低了，相反对JS的使用确实比重越来越大，这样今天的前端的HTML+CSS水平确实可能不如初期，确实更简单，变得不那么重要了。但是即便如此

文章目录 理论题 前端页面有哪三层构成，分别是什么？作用是什么？ JavaScript 的组成 对BFC规范的理解 线程与进程的区别 什么叫优雅降级和渐进增强？ 请解释一下 JavaScript 的同源策略 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。 闭包是什么，有什么特性，对页面有什么影响？ 网站重构的理解 检测浏览器版本版本有哪些方式 区分什么是“客户区坐标”、“页面坐标”、“屏幕坐标”？ 描述浏览器的渲染过程，DOM 树和渲染树的区别 如何进一步检测引用数据类型 documen.write和 innerHTML 的区别？ 在JavaScript中使用innerHTML的缺点是什么？ 把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？ DOM操作——怎样添加、移除、移动、复制、创建和查找节点。 split() join() 的区别 数组方法pop() push() unshift() shift() JavaScript有几种类型的值？ Javascript如何实现继承？ javascript创建对象的几种方式？ Javascript作用域链? 谈谈This对象的理解。 说明this几种不同的使用场景 什么是window对象? 什么是document对象?

随着时间的推移，网页设计越来越具有创新性。web前端开发将成为2020年技术领域最热门的学科之一。以前，前端空间的开发人员只要了解一些HTML，CSS，也许还有jQuery来创建交互式网站，就足够了。但是今天，他们面临着广泛且不断变化的开发技能生态系统；最近几年，我们使用JavaScript为主要的Web应用程序提供了强大的新库和框架，例如ReactJS，VueJS和angularJS。这3个可以说是现在非常火热的了。 比PC端单一的网页不同，在移动端的技术可以应用到WEB-APP,小程序，Hybrid-App等等。web前端开发的新技术新框架学习可以应用到什么地方 Web-App 　　也就是我们常见的浏览器（以及内置浏览器，比如微信）打开的大型移动端网页。比如我们常见的电商网站，功能性网站，管理网站，在布局和功能上都有APP的效果。做好Web-App开发，最基本的很多人肯定会说响应式布局，但是前端开发是又5种布局法的，除了出名的响应式，还有在移动端最重要的弹性布局法，也就是很多人头疼的rem布局。除了布局方法之外，在H5新特性和触屏事件和设备兼容性问题也是需要信手拈来。 小程序 　　这个也不用多说，现在可以说是非常火的，各大平台都有在做自己的小程序，各种砍价，抢票，电商，游戏都有运用。这个以微信小程序为例，主要是微信团队基于前端基础来做的封装语法，主要的还是ES语法

前言： 作为一个想从事前端工作，目前还是零基础的菜鸟，我想通过合理学习，让自己成为能有比较全局观念（前端-后端分离，工程化等），又在前端又能熟练掌握并灵活使用技术的前端工程师。下面是我自己看了一些知乎，豆瓣，博客总结出来一些比较好、经典的JavaScript书籍（好书太多，我也是挑了基本看上去比较适合我的），与大家分享。（这也是我接下来要看书单，因为本人现在还没看完，看完了我再分享一下阅读心得，怎么去把这些“厚书”快速读完） 目标： 1、熟练掌握JavaScript技术（当然不仅是看书，还是得边看书边Coding，切勿“只看不做”） 书籍阅读： 1、JavaScript高级程序设计（Professional JavaScript for Web Developers） 　　JS红宝书，虽说高级，里面却是基础中的基础，但是很厚，建议还是老老实实读下去。也有不少读者觉得这个入门前端的话太过于枯燥（鉴于我之前在W3C School网站看完了Web的JS,CSS,HTML知识看再JS书籍的，所以我是想通过红宝书强化记忆），不少读者推荐《你不知道的JavaScript（上卷）》入门JS，比较轻松有趣。 2、ES6标准入门 　　JS红宝书可以了解到很多基本概念，其中第六章中，因为 ES6 增加了 class 的概念等，改进很多，第六章可以接着看这个本书的ES6全部。ES6标准比较新