为了方便资源管理和提升工作效率，常用的js和css文件的加载应该放在一个统一文件里面完成，也方便后续的资源维护。所以我用js写了以下方法，存放在“sourceController.js”文件内。 /** * Created by MingChen on 2016/11/3. */ function sourceController() { this.root = ""; this.callfunc = null; // 回调函数 this.css = []; thi
博客中常常会需要用到代码展示，在《用Github搭建个人博客》中也介绍了几个可以用于代码展示的站点，不过由于是跨站的服务，可能会由于种种原因访问慢甚至打不开，于是就想找找有没本地实现的方法。自己写一个？No。
对于任何一个网站来说，优化页面的访问速度是必须的，个人来说，只要加载页面十秒以上或长时间处于空白或加载状态，我会立刻关掉此页面的。你又能容忍几秒呢？
博客上有一个用mediaelement-and-player.js弄的播放器，插件默认的是每个页面都加载一次mediaelement-and-player.min.js和mediaelementplayer.min.css，两个文件都十分的庞大，加起来接近100k，虽然gzip之后只剩下20多k但是也是十分地不爽，所以我便寻思着有没有什么办法能有播放器的时候就加载它，没有播放器的时候就不加载。
使用requestAnimationFrame代替setTimeout和setInterval：
萌新要学习Selenium了，安装是个坑。还要下载相关配件，可以参考python 安装selenium环境（https://my.oschina.net/hyp3/blog/204347） 1、使用Firefox实例 from selenium import webdriver import time firefox = webdriver.Firefox() #初始化Firefox浏览器 url = 'https://www.zhihu.com' firefox.get(url) #调用get方法抓
Conclusion: don't install laravel/ui v2.4.1 Conclusion: remove laravel/framework v6.18.40 laravel/ui版本也是和laravel版本对应的，2.4不能给6.18安装
即library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如animate,hide,show,比如获取元素等/
用WordPress搭建的外贸网站通常都会安装几十个不同功能的插件，然后访问网站就会感觉速度比较慢，我们可以使用Asset CleanUp这款优化插件来帮忙让网站速度变得快一点。
Layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。
高级也就是相对于基础的优化。从以下角度进行优化： 提升开发体验； 提升打包构建速度 减少代码体积 优化代码运行性能
jsdelivr是一个免费的CDN服务，可以利用它配合github来为页面静态资源提供加速，有效提升资源加载速度。
最近做的项目大量用到了 webview ，用网页来布局。 Android 的 webview 是基于 webkit 内核，不过他的运行效果和 firefox 上一模一样，所以写的时候都是先用 firefox 测试，测试 OK 了再放到程序里面看效果，基本上不会有什么问题。其实 android 的 webview 跟 iphone 的 webview 差不多， iphone 上的 webview 比 android 上的强大多了。
1、为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，也为了更好阅读、修改和提高对CSS的加载速度，CSS的编写应该遵循一定的编写规范。目前网上已经流行一些比较好的规范，大多由网友总结；大公司的CSS规范也值得我们去参考。但由于无法获取到大公司的内部资料，只能参考部分网上一些比较好的资料来制作一套自己的规范。
在 ES6 之前，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。
我们知道，前端工程师入门容易，通过学习基本的HTML和CSS就能在浏览器上看到实际的效果，可是要写好的HTML，就不是那么容易了。这里将和大家分享HTML规范，希望大家读完之后都能够有所收获。本文将主要以下面三个部分展开：
———————————————— 此处代码参考原文链接：https://blog.csdn.net/qq_41998083/article/details/109726402
同样的，首先是下载好 require.js --> http://requirejs.org/docs/download.html#requirejs
阅读统计和访客统计使用的都是不蒜子，因为使用的是NexT主题，只需要添加一下配置就可以了。
缺点是：此方案不适合mobile应用；IE7以下不支持；如果一张图片在多个页面被用到，无法利用浏览器缓存。 为了解决无法缓存问题，可以将data:image应用到CSS样式中，比如：
毕竟对于前端来说，优化是躲不开的主题。在看200（cache）和304区别的时候，翻到了雅虎这边归纳出来的准则，虽然是十多年前的东西了吧，但是还是具有参考价值的，因此在原文基础上我进行了一些归纳翻译。
在博客魔改过程中，不可避免的会引入大量的第三方脚本（js），而基于页面读取js的加载顺序，每当浏览器在加载html的过程中遇到<script>js代码片段</script>这样的标签时，浏览器会暂停继续构建html，而是优先执行当前的js脚本，等执行完毕后再继续加载后面的html。
比如网址 http://segmentfault.com/html/...，必须遵守以下的语法规则：
HTTP/2 诞生于 8 年前 Google 一封 SPDY 协议白皮书。5 年前，RFC7540 和 RFC7541 的发布正式确立了 HTTP/2。5 年过去了，支持 HTTP/2 的浏览器的市场占有率达到了 96.88%，HTTP/3 已经从 QUIC 中诞生，然而回过头来看看国内各大网站，HTTP/2 仍然没有发挥它应该有的作用。不过，HTTP/2 究竟能做什么呢？
本文将分享一些前端性能优化的常用手段，包括减少请求次数、减小资源大小、各种缓存、预处理和长连接机制，以及代码方面的性能优化等方面。
Pjax是一种很多网站( facebook, twitter)都支持的浏览方式， 当你点击一个站内链接的时候， 不是做页面跳转， 而是只是站内页面刷新。设置后的这些网站的ajax刷新是支持浏览器历史的， 刷新页面的同时， 浏览器地址栏位上面的地址也是会更改， 用浏览器的回退功能也能够回退到上一个页面。Pjax是可以增加访客打分的好功能。
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法，但是有时候又要用，所以放上我的引入设置，供大家参考。
最近因公司需要对网站的优化处理学习了一番，现在借本系列博文与大家分享一下自己的学习成果，有纰漏处请大家多多指正。 首先推荐一篇十分全面的网页优化文章 好了，要正式开始了！ 一、合并文件请求（以css文件为例说明，js文件一样处理） 我们常会将网页上的css存放在css文件中，然后引入到网页中，那么加载网页时浏览器会针对每一个文件的引用生成请求。请求的建立会耗费一定的带宽资源和时间并占用一定的服务器资源，如果请求数目过多，网页的加载速度会变慢。有一种方法是将多个css文件合并成一个文件，这样
所谓图片异步加载，意思是不用一次把图片全部加载完，你可以叫它延迟加载，缓冲加载都行。看看你有没有这JavaScript
直接来一张大图你怕不怕？哈哈 咱们先看看谷歌浏览器network中waterfall各字段的含义哈。简单看下就成，用到了再查不耽误的。
assetModuleFilename: ‘images/[contenthash].png’ [contenthash]可自动根据hash来生成文件名
assetModuleFilename: 'images/contenthash.png'
返回非页面的数据，必须在方法或者类上加 @ResponseBody，同时 我们返回的类型 springmvc会自动解析成对应的格式，不需要我们进行手动指定
本文作者：IMWeb zixinfeng 原文出处：IMWeb社区 未经同意，禁止转载 webpack4 基础 npm init --yes yarn add webpack webpack-dev-server webpack-cli mkdir src && touch index.mjs package.json scripts: {"webpack": "webpack --mode=production"} npm run webpack 查看dist目录下面自动会存在main.js
这几天，都遇到过有人问过相似的问题，就是用vue和webpack搭建目录的时候，怎么把单页面应用的配置改成多文件应用，或者是怎么把多文件应用的配置改成单文件应用。这个情况，我之前有处理过，公司的同事教过我，我就针对这个情况写下此篇文章。各位如果觉得我哪里写得不够好，写错了，欢迎指出，大家一起进步。
同样的问题，可以拿来招聘P5也可以是P7，只是深度不同。所以我重新整理了一遍整个流程，本文较长，建议先收藏。
此动态加载css方法 loadCss，剥离自Sea.js，并做了进一步的优化（优化代码后续会进行分析）。
简单来说，file-loader 就是将文件（由于一般是图片文件为主，所以下面通常使用图片两字作为替代，方便理解。其他的包括字体文件等），在进行一些处理后（主要是处理文件名和路径），移动打包后的目录中。
前言: gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。相比于grunt的频繁 IO 操作，gulp的流操作，能更快地更便捷地完成构建工作。此处仅记录初步折腾中所遇点滴以及待解决的点。 Gulp折腾之初探 折腾之战略上的藐视 回过头看Gulp的折腾历程，使用还是非常简易的。初步入门资料可参考这里。所以战略上一定要藐视”她”;当然战术上要
到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。用户要求越来越高，网站功能越来越好，效果越来越炫酷，这就要求我们产品质量越来越高，web前端开发而言是一个挑战，是一个难题，也是一个机遇。如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨：移动web开发问题和优化小结。这个只是我自己在开发的时候知道的坑，如果大家有遇到什么别的坑，欢迎补充，或者觉得我哪里写错了，欢迎指点！
相信建站的朋友都十分关心网站速度问题了，玖柒的小窝一直在强调极速优化这次词语，同时在之前的很多文章中我也简单的介绍了子比主题的关于速度优化的一些原理。理论上来讲使用子比主题搭配一个不是太差的服务器，那么就已经很快了，如果你想让你的网站变得更快，那么看了这篇文章，我相信完全够了。
[ISAPI_Rewrite] RewriteEngine on RewriteCond %{HTTP:Host} ^phpfs.com$ RewriteRule (.*) http://www.phpfs.com/$1 [NC,R=301] RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule !\.(js|jpg|ico|gif|jpeg|bmp|png|css|
简单来说互联网是由一个个站点和网络设备组成的大网，我们通过浏览器访问站点，站点把HTML、JS、CSS代码返回给浏览器，这些代码经过浏览器解析、渲染，将丰富多彩的网页呈现我们眼前；
修改[Blogroot]\themes\butterfly\layout\includes\loading\loading.pug
此时页面可以正常访问js资源，csp不对动态插入的 chrome-extension 进行拦截限制
Vue.js是一个渐进式、基于MVVM设计模式的纯前端JavaScript框架。它可以与其他技术混用，适用于以数据操作为主的项目，无需依赖后端技术。下面是关于Vue.js的一些重要知识点整理：
在写爬虫的时候，关于JavaScript的解析问题，我在网上找到的一个解决方案是使用ghost.py这个模块，他是一个基于webkit封装的一个客户端，可以用来解析动态页面。它的使用非常简单，它从2.x版本开始，变化就有点大了，在这我主要是针对他的1.0版本。 首先在GitHub上克隆它，然后在对应的文件中执行python setup.py install命令，这样就可以安装了，注意在这不要直接使用pip，使用pip会默认安装2.x版本。 安装完成后，可以编写如下代码来加载一个网页:
之前网站第一次访问，与pjax加载后js图标不显示的问题一直困扰我，昨天无意间把谷歌广告（GoogleAdsense）下面这段单元广告js删掉之后惊奇的发现网站正常了，于是就开整了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
