将素材目录下的index.html页面，拆分成三个文件，分别是：index.css，index.js，index.html
Prism是一款非常好用的前端代码高亮插件，很多开发者搭建的文章、博客分享网站中都使用到了prism.js来做代码高亮，但是在官网的下载网站选完了主题和插件后却犯了难：如果选择语言包，如果全选那么体积将近600kb如果选少了害怕以后不够用，还要来补。其次，基本上只有语言包支持Node.js环境，插件基本都是基于DOM实现没有对Node.js环境进行兼容。于是有了一个想法:通过API接口将语言包动态返回，根据前端传来的参数，主题+语言包+插件拼接后返回给前端的script和link标签。
系列文章传送门： 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webpack.dev.conf.js 4、build/utils.js 5、build/vue-loader.conf.js 6、build/build.js 7、build/dev-server.js 8、build/check-versions.js 9、../config/index.js 下面是build/utils.js中相关代码和配置的说明 项
在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。
刚才简单介绍了一下node读取同级页面的html文件,没有类似于Apache的服务,让访问变得复杂,因为这样正是成就了node的优点!优良的路由处理,通过路由访问不同内容!
写完后，部署上线。然而我们要考虑充分利用浏览器缓存，我们的目标是资源文件直接读取浏览器缓存，于是给它设置 Cache-Control/Expires 和 Last-Modified/ETag。Cache-Control/Expires的作用是在缓存时间内，正常进入页面，浏览器不会发出请求，直接读取浏览器缓存资源。如果用户点击“刷新”按钮或缓存时间消失，浏览器会发送请求，并根据Last-Modified/ETag判断内容是否有更新，如果内容没更新，服务器返回304。
在搜索引擎中搜索关键字 .htaccess 缓存，你可以搜索到很多关于设置网站文件缓存的教程，通过设置可以将css、js等不太经常更新的文件缓存在浏览器端，这样访客每次访问你的网站的时候，浏览器就可以从缓存中获取css、js等静态文件，而不必从你的服务器再次下载读取，这样在一定程度上加快了网站的打开速度，又可以节约一下你的服务器流量。
laravel中的前端代码都是形如xxx.blade.php。可以使用前端的工具来对blade,css,js进行压缩吗？当然，gulp可以做到。 gulp是什么？ 看完你就明白，这是个自动化构建工具的核心就是gulpfile.js。 用于laravel的gulp怎么写？ 把一切*.html换成*.blade.php就行了。 有什么坑要注意？ 异步执行，前后依赖关系必须写明。比如： gulp.task('rev' , ['concatCss', 'concatJs'],function() { return
之前写过几篇 Vite 的文章，对 Vite 的概念也有一定的理解了，但理解归理解，仍然觉得很虚，也不知怎么的，这几个概念突然就变成一个这么强大的工具。。。
https://github.com/ChenShenhai/koa2-note/blob/master/demo/static-server/open in new window
浏览器（软件）能够运行JavaScript代码，浏览器就是JavaScript代码的运行环境
一个功能就是一个模块，多个模块可以组成完整应用，抽离一个模块不会影响其他功能的运行。
YUI Compressor Maven插件可以压缩/合并js或css文件，经常用在Maven项目中，但最近发现在wabapp中执行了 mvn install 命令进行发布之后，终端中显示插件已经执行了压缩的动作，但在输出文件夹或者war包中js和css文件都还是未压缩的原始文件。
代码： const fs = require('fs') const path = require('path') // 匹配style标签的正则 \s匹配所有空格；\S匹配所有非空格；*代表无限次 const regStyle = /<style>[\s\S]*<\/style>/ // 匹配script标签的正则 const regScript = /<script>[\s\S]*<\/script>/ // 读取文件 fs.readFile(path.join(__dirname, './009-
gulp 是一个构建工具，基于Node.js的平台运行，使用的是commonJs的模块化语法。 我们使用gulp需要用到的包 一个TASK任务，对应一个包，对应一个处理逻辑、 gulp.series对应的是同步任务，从左到右，依次执行任务。时间长 gulp.parallel对应的是异步任务，效率高，时间短。 gulp.src 表明文件从哪里读取 gulp.dest 表明文件输出到哪 const gulp = require('gulp'); //gulp的包 const eslint = req
【说明:】markdown-loader、html- loader是为了让vue能够解析md格式的文件，读取出来，然后使用marked将读取出来的数据转换成html格式渲染到页面上。使用marked是为了使用更方便。
在Web应用开发中，特别是前端开发中，经常会碰到的一个问题是时间选择问题，幸好Bootstrap已经为我们提供了时间选择控件datetimepicker，但在datetimepicker的实际开发使用中仍然会有一些小问题，例如根据国家来进行显示时间的时区变换。作者也是碰了好多坑之后才把这个控件的用法弄清楚了，记录一下以便给后来者提供参考。
解析URL需要用到Node.js提供的url模块，它使用起来非常简单，通过parse()将一个字符串解析为一个Url对象：
用python 读取一个大于10G 的文件，自己电脑只有8G内存，一运行就报内存溢出：MemoryError python 如何用open函数读取大文件呢？
作为一门web框架，Django需要一种便利的方法来动态地生成html。常见的做法是使用模板，模板中包含了HTML静态内容和动态标签。
指令：fis3 release –w –d ./project(project自己建的文件)
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
打开gitbash，切换到js文件当前的文件夹，然后输入node index.js（index.js是我的js文件名，反正你们取什么名就输入啥名）
大多数前端开发者对于loader可能都清楚它存在两个执行阶段normal和pitch阶段，但是大多数同学对于pitch loader的理解仅仅停留在：
Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。
几年前，如果有人提到用 JavaScript 编写 HTML 作为构建大型网站的一种方式，很多开发者会当这作不可理喻的想法，但是现在，使用 React、Vue 和 Angular 框架为组件开发的应用正在慢慢替代传统的 Web 开发。
目前做代码压缩合并的工具有很多，诸如gulp，webpack，grunt等等，可以说这些项目构建工具的功能非常之强大：图片压缩、图片转base64、css和js的压缩以及合并，文件的md5重命名 ……。本人之前也是在项目中没具体使用过，闲来无事，查查资料，自己写了一个用gulp工具的小demo，有很多不足之处，欢迎指点。 第一步：安装node和npm 不用说，要用gulp，得先安装node和npm（安装完node后，自带有npm） Node官网下载地址：https://nodejs.org/en/downl
发布 JavaScript 的时候，无论从代码保护还是提高性能角度，都应该对代码进行压缩，去除重叠的空白分隔符，混淆变量。雅虎交互（YUI）提供了非常强大的压缩工具，对 .js 文件和 .css 文件都有效。这里所说明的情况，是用 Ant 直接启动压缩任务。
利用localStorage储存js文件，只有在第一次访问该页面的时候加载js文件，以后在访问的时候加载本地localStorage执行
webpack 作为目前主流的前端构建工具，我们几乎每天都需要与它打交道。个人认为一个好的开源产品壮大的原因应该包括核心开发者的稳定输出以及对应生态的繁荣。对于生态来说， webpack 是一个足够开放的类库，提供了可插拔的方式去自定义一些配置，包括配置 loader 和 plugin ，本篇我们主要讨论loader。
在查看网页源码的时候经常会发现带有类似 ?v=13566 或者 ?version=15678 的 CSS 和 JS 文件。如下所示： <script src="w3h5.js?version=1568
1、什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以
本次魔改需修改源文件，望各位下手前先备份
ssr把原来在客户端做的渲染工作摆到了服务端。在减少了客户端性能压力的同时，增加了服务端的工作量。那作为一个前端开发者，如何去优化服务端的性能呢？
1、CSS和JS在网页中的放置顺序是怎样的？ （1）CSS 对于谷歌浏览器和Safari放在head里或body里都一样。因为它是在全部的样式表完全加载下来之后才开始渲染页面，将内容呈现在页面上。 对于Firefox，head标签中的<link rel="stylesheet">行为与Chrome/Safari中完全一致，这些link标签全部加载完成之前，页面上不显示内容。而body标签中的<link rel="stylesheet">则不阻塞任何内容显示，会出现FOUC无样式内容闪烁。 对于IE/Edge
实际项目中，会遇到这样的问题：没有使用任何服务器端框架的前端代码，即包含html网页文件，也包含js和css的代码，如何将这些现有的项目做最少的修改而引入到Django框架中呢？Django官网上给出了解决方法，使用static目录来存放css和js代码（虽然js是动态代码，但Django将其与css等同为静态代码，因为在后端看来，前端代码是静态的），然后在html文件里面，将原先的href引用改为通过static目录来引用。可以看这里，但里面讲的不是很清楚，我在查了一些资料后才搞定这个问题，所以这里写个总结来总结总结。
快速、可靠、安全的依赖管理工具。和 npm 类似, 都是包管理工具, 可以用于下载包, 就是比npm快
用JS操作DOM，是比较慢的。为什么呢？首先，补充一下浏览器相关的知识。下图为浏览器结构：
浏览器内核 相信大部分的前端同学都是基于谷歌浏览器进行编码，IE的应该是极少数了吧，微软早在几年前就已经表示希望用户不要使用IE游览器尤其是旧版本的，仅仅作为兼容工具使用，因为考虑到一些旧项目需要使用，所以保留在系统内。做过IE兼容性的同学们都知道IE是多么让人头疼 🤦♂️，现在我们经常使用的主流内核大概这几种： Chrome浏览器内核：我们都叫chrome内核，以前是Webkit内核，现在是Blink内核 Firefox浏览器内核：Gecko内核，俗称Firefox内核 Safari浏览器内核：Web
面试官：你认为前端工作中最重要的是什么？ 答：用户体验！ 面试官：如何可以提升用户体验？ 答：从提升项目性能开始！ 面试官：如何才能提升项目性能呢？ 答：对项目进行优化! 面试官：如何对项目进行优化？ 答：主要从项目加载时以及运行时两方面进行优化。 面试官：如何进行加载时的优化？ 答：主要从以下几方面入手： CSS 写头部，JavaScript 写底部：所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染。如果这些 CSS 和 JS 需要加载和解析很久的话，那么页面就会空白了，所以 JS 文件要
打包工具的角色 所谓打包工具在web开发中主要解决的问题是： （1）文件依赖管理。毕竟现在都是模块化开发，打包工具首先就是要梳理文件之间的依赖关系。 （2）资源加载管理。web本质就是html、js和
本地服务可以提高开发效率. webpack不需要每次都打包, 就可以看到修改后的效果. 本地服务器基于node.js搭建, 内部使用二十express框架. 可以实现让浏览器自动刷新的功能.
使用的是vue的transition标签，当里面内容改变的时候，会通过name指定的样式进行过度。(列表使用的标签是transition-group)
前端的性能优化是一个很宽泛的概念，最终目的都是为了提升用户体验，改善页面性能。面试的时候经常会遇到问谈谈性能优化的手段，这个我分几大部分来概述，具体细节需要自己再针对性的去搜索，只是提供一个索引（太多了写不过来+主要是懒得写）。这里PC端和移动端分开说了，业务场景不同，需要考虑各自的优化手段
Computed 在 Vue 中常用，是一种计算属性，里面的值是响应式的，但你知道 getComputedStyle 这个 CSS 属性吗？Computed + Style ，没错，样式也能做到响应式。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
