打包压缩js与css 由于webpack本身集成了UglifyJS插件（webpack.optimize.UglifyJsPlugin）来完成对JS与CSS的压缩混淆，无需引用额外的插件, 其命令webpack -p即表示调用UglifyJS来压缩代码，还有不少webpack插件如html-webpack-plugin也会默认使用UglifyJS。 uglify-js的发行版本只支持ES5，如果你要压缩ES6+代码请使用兼容开发分支。 UglifyJS可用的选项有： parse 解释 compr
这本书是很久之前买的，今天回顾了一下，顺便记录一下笔记。 本书的副标题是“前端工程师技能精髓”可见这本书的牛逼之处。这本书也很薄，只有147页，但是每一章都是精髓。由于这本书每章提出了一个性能优化的方法，我们也就按照每张的具体内容给出吧。
开发中会遇到领导指着一个网页说，这个不错，咱们页面也按这个布局和风格做吧。直接用html+css+js生写还是挺费工的。最快的方法是直接照抄网页。本文例子不需要其它工具，只用浏览器的“另存页面为”和“查看页面源代码”两个功能来照抄网页，结果证明，不考虑js功能，仅看网页外观，是完全可以做出一模一样的网页的。 以下面网页为例，布局简单，但是要自己从头开始写，肯定要调试很久。
版权声明：本文为CSDN博主「极客江南」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
写这篇博客的缘故是因为看到cnblogs上的live2d模型可以自动欢迎，但是自己又不会魔改Hexo的live2d，就想到了以弹窗的方式来欢迎。
web前端工程师是近几年才发展出来的新式作业，也是现在火爆且高薪的作业。 大需求的市场环境下，出现了越来越多的人群转行做web前端工程师，如规划师、后台程序员、网虫、大学其他专业、策划、编辑等等。 要学习web前端开发，需求把握哪些常识呢？ 小编在这儿为各位总结了转行必学的6大技术。 📷 想学习web前端的可以来这里学习交流：web前端，前两位60，中四位 4134，后三位854 1、html 这个是最简略的，也是最根底的。要熟练把握div、form table、ul li 、p、span、font这些标签
一个前端新人，该怎么样才能成长为前端牛人？这个问题有很多答案。什么努力学，多看书，找牛人带，进前端大厂...，等等。说的都对，但也都没什么大用处。这些道理大家都明白，但很多人依然过不了前端新人这一关。 都说前端门槛低，大概是感觉前端看起来只要会一些html和css就可以了。但进来之后才发现，它确实没有明确的门槛，但前进的每一步都是一道门槛。 表面上许多人都爱说什么行胜于言，但事实上许多人在执行层面却是反的，都是言胜于行。话说了n遍，也没见动手写代码；书买回来落了一层灰，也没见翻开几页；网上到处是前端教程，但
1、浏览器事件模型（捕获阶段、冒泡阶段） 2、Vue中的 computed和 watcher的区别（刚好是我没看到的〒▽〒） 3、使用过 webpack吗（没用过，面试官建议我去看看） 4、小程序中遇到过最大的问题（原生组件遮挡的问题） 5、cookie和 localStorage的区别（没有了解） 6、算法：一个 1-100的数组，从中间拿掉一个，怎么确定拿了哪一个数 7、em和 rem的区别，还有 vh是什么 8、说说 position（static、absolute、relative、fixed）。具体参考我的这篇文章：前端：CSS定位position 9、JavaScript的类型（基本类型和引用类型） 10、合并两个数组的方法（concat），拼接字符串数组的方法（join） 11、CSS选择器权重（优先级）计算。前端：CSS选择器优先级计算 12、js文件加载 defer（页面渲染完成才会执行）和 async（获取js时不阻塞，获取完成后立即执行并阻塞）的区别。 13、img标签的 src、alt的用处（我的天，我把这两个听成一个单词了） 14、不适用 localStorage是怎么在不同页面传递数据的 15、怎么做不同屏幕的适配（CSS3媒体查询）
很多人说“我准备做一名前端开发工程师了，web前端”， 我不管你是专业的科班出身，还是出于兴趣，或者为了找工作什么的选择这个方向。 尽管都是写代码，开发前端页面，与用户接触的界面。但是真的需要明白，把主要写html与css的与写js的分开，如果你能根据设计师的效果图，用html标签与css完美的布局出来，或者你还会设计，设计的还很完美，你真的是一门称职的ui设计师或者网页设计师。就算是只做好这个工作，就不是一件容易的事情，因为要考虑的事情任然很多。比如界面交互的友好性，美观度，用户体验，还有写的页面需要考虑
推荐理由：曾经有一个前端大神说过，如果你想成为前端架构师，首先你得忘记自己是个前端。
最近查看了几位同事的代码，发现很多CSS书写习惯都是清一色的类名而没有相应的选择器，层层嵌套的标签都包含至少一个类名。有些同学会问，很多文章都说「选择器」有性能问题，为什么还需要使用「选择器」呢？
采用原生JS及CSS 3.0实现一个金字塔的效果，这个特效在实际工作中用处不大，纯属娱乐。
我们在写Web页面的时候，须要引入非常多的JavaScript脚本文件和CSS样式文件，尤其是在站点需求量非常大的时候，脚本的需求量也随之变大，这样一来，站点的性能就会大打折扣。因此就出现了动态载入的概念。即在须要的时候才去载入相应的脚本和样式。以下我们就来看看怎样实现动态载入。
1、CSS和JS在网页中的放置顺序是怎样的？ （1）CSS 对于谷歌浏览器和Safari放在head里或body里都一样。因为它是在全部的样式表完全加载下来之后才开始渲染页面，将内容呈现在页面上。 对于Firefox，head标签中的<link rel="stylesheet">行为与Chrome/Safari中完全一致，这些link标签全部加载完成之前，页面上不显示内容。而body标签中的<link rel="stylesheet">则不阻塞任何内容显示，会出现FOUC无样式内容闪烁。 对于IE/Edge
在最早之前，我做过纯静态的项目引入vue当作模板引擎，就是那种没有任何打包压缩的项目，就是单纯的引入css、js、html的项目。现在应该是很少有这样的项目了，很少不代表没有，起码我现在在撸jq的项目（现在jq贼溜）。
如果有人问我，有什么能够快速提高一个人的编程水平，那么我一定会说刻意练习。（不禁想起，《卖油翁》中的名言，唯手熟尔。）
内容优化 (1)减少HTTP请求数:这条策略是最重要最有效的，因为一个完整的请求要经过DNS寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据这样一个消耗时间成本和资源成本的复杂的过程。常见方法：合并多个CSS文件和js文件，利用CSS Sprites整合图像，Inline Images(使用 data：URL scheme在实际的页面嵌入图像数据 )，合理设置HTTP缓存等。 (2)减少DNS查找 (3)避免重定向 (4)使用Ajax缓存 (5)延迟加载组件,预加载组件 (6)减少DOM元素数量:
先上截图， 这是他向我提问的截图，我回复他说今晚的公众号文章来回复他。 为什么要单独写一篇文章呢？因为他这个问题在我个人看来，不是几句话能说清楚的。 先审题，分析一下他的描述， 1，他零基础，自学四
近期终于有时间和精力专注于公司技术基础建设了，于是一开始，将公司的Saas系统改造成了微前端模式，解决了历史遗留的一部分问题
2013年9月26日 花了一上午的时间，熟悉了LiveWriter的用法，学会了怎么配置语法高亮，总结下来。
如今，越来越多的JavaScript代码被使用在页面上，我们添加很多的内容在浏览器里。如何去很好的组织这些代码，成为了一个必须要解决的难题。
该项目名字暂定为：ACG-D 意义：ACG顾名思义，当然是二次元啦，-D我不清楚，随便写的（总之就是做一个图库，但是这个图库是公开的）
web前端是应用服务器处理之前的部分，前端主要包括：HTML,CSS,javascript,image等各种资源，针对不同的资源有不同的优化方式。
写代码的时候，你爱听歌吗？我以前爱听，后来不爱听了。爱听歌的那段时候，我基本上是在切页面，那个时候做页面就是Html 和 css，写的熟练的很，做起来都不用走脑子，就是眼睛和手就把活干了，脑子在忙其它的事情。但后来我不爱在写代码的时候听歌了。因为我开始写js，感觉听歌会分神，我开始需要安静，这样能让我静下心来仔细思考眼下的工作。 现在实体经济不太ok，许多人就把目光盯在了it互联网，这其中的焦点工种就是程序员，其中就包括入门相对简单的web前端开发。但再简单，它也是程序员的一个分枝呀，虽然肯下功夫学应该能学
概述： 在接触JS的过程中，随着理解的深入会逐渐的理解一些比较深奥的理论或者知识，那么今天我们来介绍一下比较难理解的prototype和constructor。 初步理解： 在说prototype和constructor之前我们先得看几个例子。 function name(obj){ alert(obj)//"uw3c" } name("uw3c") 这是个普通的自调用的例子，大家都能理解，那么看下一个例子： function name(obj){ alert(obj)//"uw3c" }
经过我们团队的调研，我们选择了无界作为微前端的技术栈。目前的使用效果非常好，不仅性能表现出色，而且使用体验也不错。
问题一：请说出vue-cli工程中每个文件夹和文件的用处 vue-cli目录结构： vue-cli目录解析： build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
1.webpack 是一个现代JavaScript 应用程序的静态打包器，它能够把各种资源，例如JS,样式，图片 等都作为模块来使用处理,将许多松散的模块按照依赖和规则打包成符合生产部署的前端资源， 还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载。 2.安装 前提条件，请确保安装了Node.js的最新版。 进入相应的文件夹 首先执行 进入相应的文件夹 npm init 初始化 然后可以全局安装 npm install webpack --save-dev
文 | HustWolf 小程序的视图层，分为 WXML、WXSS 和基础组件。今天，我们就来详细解析 WXML 和 WXSS。 WXML WXML（WeiXin Markup Language）是为小程序 MINA 框架设计的语言，它结合基础组件、事件系统，可以构建出页面的结构。 说的通俗一点，WXML 有点类似 HTML，相当于一个最后的收尾的设计师。它可以告诉你，这个地方要有个图片，然后这个图片的地址是什么；然后告诉你这儿有个按钮，这个按钮控制什么的开关。 这么一说，我还觉得做小程序就像盖房子，有人负
不管是1.4.2还是jQuery以后的版本，都是用js封装的功能库，方便开发者使用。下面是就jQuery的具体作用：bai
说到 HTTP 的 103 状态码，你可能很早就听说过了，但是你不一定真的理解了它。
标题是data-,但是这里主要讲伪元素，看明白就知道了 1、jQuery Selectors 获取伪元素的属性值 虽然JS里没有可以直接操作伪元素的选择符，然而获取其CSS属性的方法还是有的。 window.getComputedStyle 利用window.getComputedStyle方法选择到伪元素，然后利用getPropertyValue方法获取对应的属性的值。 根据MDN的文档， window.getComputedStyle(element[, pseudoElt]); 此方法包含两个参数，一
1、vue.js：vue-cli工程的核心，主要特点是 双向数据绑定 和 组件系统。 2、vue-router：vue官方推荐使用的路由框架。 3、vuex：专为 Vue.js 应用项目开发的状态管理器，主要用于维护vue组件间共用的一些 变量 和 方法。 4、axios（ 或者 fetch 、ajax ）：用于发起 GET 、或 POST 等 http请求，基于 Promise 设计。 5、vux等：一个专为vue设计的移动端UI组件库。 6、创建一个emit.js文件，用于vue事件机制的管理。 7、webpack：模块加载和vue-cli工程打包器。
①自己开发 前端（HTML+css+js/vue）+后端（Django+Flask）+数据库（MySQL+Redis）+Linux知识——从代码、本地测试、上线到运维。
文件的hash指纹通常作为前端静态资源实现增量更新的方案之一，Webpack是目前最流行的开源编译工具之一，其强大的功能也带来很多坑（当然，大部分麻烦其实都可以在官方文档中找到答案）。 比如，在Webpack编译输出文件的配置过程中，如果需要为文件加入hash指纹，Webpack提供了两个配置项可供使用：hash和chunkhash。那么两者有何区别呢？其各自典型的应用场景又是什么？本文结合笔者工作中遇到的问题，简单记录一下以上问题的解决方案。 1. hash与chunkhash 首先我们先看一下官方文档对
· 原理是通过在主应用引入每个子应用的入口文件(main.js)，进行解析，并指定渲染的容器
目前主流框架react、vue、argular等（还有很多），国内大多数在Vue/React中，argular也有，但似乎用的不多。Vue3.x针对性能，渲染机制等也是一个不错的选择，不过抉择根据你的实际情况来定，我此次选择的是react，原因有很多，就不一一赘述了。
作者：damyxu，腾讯 PCG 前端开发工程师 iframe是一个天然的微前端方案，但受限于跨域的严格限制而无法很好的应用，本文介绍一种基于 iframe 的全新微前端方案，继承iframe的优点，补足 iframe 的缺点，让 iframe 焕发新生。 背景 前端开发中我们对iframe已经非常熟悉了，那么iframe的作用是什么？可以归纳如下： 在一个web应用中可以独立的运行另一个web应用 这个概念已经和微前端不谋而合，相对于目前配置复杂、高适配成本的微前端方案来说，采用iframe方案具有
Python的用处太多，前端、后端、数据、ML\AI、自动化等等等等。很多小白不知道学习方向导致学的东西太杂，技能范围很广但是没有高度，自己玩可以工作就完蛋。这就是跳进坑里出不来。 Python尽管无所不能，但从大方向上看也是有几大分支存在——比如我们之前提到的几个方向。 在不同方向上，有不同的技能需求。选择自己最爱的方向学，才能早日跳坑。所以我整理了各个方向的需求，给各位一个参考。 今天会主要着眼于：Python前端。 第一阶段：Python入门 Python是我们的技能基础。 数据类型 流程控制 常
CSS 必须通过一个相对复杂的管道，就像 HTML 和 JavaScript一样，浏览器必须从服务器下载文件，然后进行解析并将其应用于DOM。由于优化程度极高，这个过程通常非常快——对于不基于框架的小型 web 项目，CSS通常只占总资源消耗的一小部分。
浏览器会下载HTML解析页面生成DOM树，遇到CSS标签就开始解析CSS，这个过程不会阻塞，但是如果遇到了JS脚本，此时假如CSSOM还没有构建完，需要等待CSSOM构建完，再去执行JS脚本，然后再执行DOM解析，此时会阻塞。
什么是LESS？ less是一种动态样式语言，属于css预处理语言的一种，类似于css的语法，为css赋予了动态语言的特性，如变量、继承，运算，函数等，更方便css的编写和维护 编译工具 Koala编译 国人开发的less/sass编译工具、 下载地址： http://koala-app.com/index-zh.html 常用： 输出方式compress(进行压缩) Node.js库 浏览器端使用KOALA配置及使用 新建后缀为.less文件：index.less 头部写上：@charset “utf-8
前面我们转了博卡君通宵吐血赶稿的微信小程序开发教程，当时只更新了两章，现在接着发布第三章：微信小程序项目结构以及配置，第四章：微信小程序首页面开发，以下是微信小程序教程 找到创建的 demo 文件夹，
遇到很多新手，都会问，如果要学习web前端开发，需要学习什么？难不难？多久能入门？怎么能快速建一个网站？工资能拿到多少？还有些让我推荐一些培训机构什么的要去学习。我建议是自学，实在是觉得自己没有这个能力，确实是需要一个老师的话，那你还是自己做主找个老师吧！为什么要自学呢，现在的老师水平都可以说是参差不平，运气好，你遇到个好老师，把毕生的经验和技巧都教给了你，运气不好，遇到个照本宣科的老师，那你的知识也会仅仅局限于教材！也许还有更糟糕的是，学到的书本知识两年前就已经开始有了大的变化，你并不知道关于更多的web设计这方面的知识。如果在这样的情况下，都还不如那些闭关自学的学生。
当我们的项目越来越大，webpack的配置项越来越多时，构建速度会越来越慢，所以我们需要通过一些配置来提高webpack的构建速度。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
