网站性能优化
文章平均质量分 90
前端岚枫
技术翻译,技术人生,前端知识,生活感悟
展开
-
浏览器渲染原理及性能优化
大家好,我是前端岚枫,两个多月没更新博客了,这段时间在忙着找工作,入职新公司,各项都有序的进行着,过去的一年算是很特殊的一年,经历7.20暴雨,8月疫情在家办公一个月,及后面的疫情,12月开始原公司长期放假,这些种种,真是一言难尽,但是进入2022年有个好的开始,1月入职新公司,年会抽奖中奖,紧接着没有被疫情留在郑州,顺利回家过年。新的一年开始,我的技术博文更新也会持续更新。今天主要跟大家分享我整理的浏览器渲染原理及性能优化:性能优化是我们工作中常遇到一些问题, 也是面试官经常提问的问题,希望下面文章对大.原创 2022-02-10 18:24:27 · 6227 阅读 · 2 评论 -
前端性能优化的重要方案:图片懒加载
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的前端性能优化的重要方案:图片懒加载,主要包括其原理,我们常用的一些插件,及编写源码实现图片懒加载功能等,图片懒加载是项目比较常见的性能优化方案,也是面试中常遇到的问题。希望下面文章对大家有所帮助。1. 什么叫懒加载?懒加载也叫延迟加载或按需加载,比如图片延迟加载或符合某些条件时才加载某些图片。2. 使用场景:当我们进入到某个页面的时候,会加载许多图片,有些图片可能在下面,当我们点进页面但没有滚动全部展示时,其实下面的图片是没有.原创 2021-11-08 17:41:08 · 1834 阅读 · 2 评论 -
前端性能优化经典:javascript防抖节流
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的前端的一些性能优化,js防抖节流,它是项目比较常见的性能优化方案,也是面试中常遇到的问题。希望下面文章对大家有所帮助。我们在做项目过程中会用一些方法,比如防抖、节流、去重、深拷贝浅拷贝、数组扁平化、乱序、柯里化等经典。我们平时在开发的时候,会有很多场景会频繁触发事件,比如搜索框实时发请求,onmousemove,onscroll oninput resize onkeyup keydown等等,我们需要优化这些高频率事件,降低原创 2021-11-03 22:30:07 · 1879 阅读 · 5 评论 -
每个前端工程师都应该懂的前端性能优化总结:
文章目录采用css雪碧图(css sprite/css图片精灵)技术在项目中,我们最好把css或者js文件进行合并或者压缩,尤其是在移动端开发的时候,如果css或者j s内容不是很多,我们可以采用内嵌式,以此减少http的请求次数,加快页面加载速度采用图片懒加载技术,在页面开始加载的时候,不请求真实图片地址,而是用默认图占位,当前页面加载完成后,在根据相关的条件依次加载真实图片(减少页面首次加载h...原创 2020-04-02 10:57:44 · 18429 阅读 · 30 评论 -
浅谈js模块化:commons、AMD、CMD、ES6几种模块化的用法及各自的特点
文章目录一个页面需要引入多个js文件引发的问题:模块化的好处:几种常用的模块化规范1、 commonJs2、 AMD3、 ES64、CMD总结js模块化是现在比较流行的一种用法,它能避免很多以前js的弊端,是前端工程化的所要涉及到的话题,今天我们来谈谈几种模块化的方法。一个页面需要引入多个js文件引发的问题:请求过多依赖模糊难以维护这些问题可以通过现代模块化编码和项目构建来解决...原创 2020-02-24 23:47:39 · 1268 阅读 · 4 评论 -
端口被占用问题Error: listen EADDRINUSE 127.0.0.1:8888
今天工作的时候,启动环境突然启动不了,报这样的错误Error: listen EADDRINUSE 127.0.0.1:8888具体如下图:发现时候8888的端口被占用,启动不了那么 如何Mac OS 查看端口和杀死进程呢?查看步骤如下sudo lsof -i:port(端口号)sudo lsof -i:8888查到效果如下图:接着就是清除:sudo kill port...原创 2020-02-17 10:49:16 · 9971 阅读 · 4 评论 -
前端基础牢记的一些操作-Github仓库管理
我上一篇文章主要分享了github介绍及项目仓库创建,这篇文章主要说说仓库的管理仓库管理新建文件编辑文件删除文件上传文件搜索仓库文件下载/检出项目Github Issues作用: 发现代码 BUG,但是目前没有成型代码,需要讨论时使用,或者使用开源项目发现问题,提问题...原创 2020-02-15 22:45:31 · 753 阅读 · 1 评论 -
前端都应懂的入门基础-github基础
Github 目的借助用于代码托管Github 基本概念仓库(respitory)仓库用来存放项目代码,每个项目对应一个仓库,多个开源项目则有多个仓库收藏(star)收藏项目,方便下次查看复制克隆项目(fork)clone的项目是独立存在的发送请求(pull request)Pull Request 本质上是一种软件的合作方式,是将涉及不同功能的代码,纳入主干的一种流程。这个过...原创 2020-02-11 10:31:44 · 987 阅读 · 3 评论 -
如何玩转sortablejs-vuedraggable实现表单嵌套拖拽功能
最近几天在研究有关vue实现拖拽的功能,不过跟一般的拖拽排序有点不同,这个需求可能出现多行多列嵌套的表单元素,数据也是递归形式的出现。我也是在vuedraggable的基础上扩展实现的,如何想了解更多的拖拽排序功能可以参考https://sortablejs.github.io/Vue.Draggable/#/simple需要实现的功能表单元素可能出现嵌套,数据出现树形结构实现拖拽功能...原创 2020-02-10 23:27:13 · 7496 阅读 · 4 评论 -
Webpack实战(九):实现资源按需加载-资源异步加载
第八篇[《教你搞懂webpack如果实现代码分片(code splitting)》] (https://blog.csdn.net/lfcss/article/details/104099412) 主要分享了webpack实现代码分片 的几种方式:合理地规划入口,使用Commons-ChunkPlugin或SplitChunks配置。这几种方法实现了资源按需加载。今天我分享另外一种实现方法–资源...原创 2020-01-29 16:05:44 · 2035 阅读 · 4 评论 -
Webpack实战(八):教你搞懂webpack如果实现代码分片(code splitting)
2020年春节已过,本来打算回郑州,却因为新型冠状病毒感染肺炎的疫情公司推迟了上班的时间,我也推迟了去郑州的时间,在家多陪娃几天。以前都是在书房学习写博客,今天比较特殊,抱着电脑,在楼顶晒着太阳,陪着家人,写着博客。前面的几篇文章主要告诉大家如何安装、配置webpack、webpack实现样式分离等,今天这篇文章主要跟大家分享如果webpack如何实现代码分片。...原创 2020-01-28 21:32:37 · 1377 阅读 · 1 评论 -
Webpack实战(七):简单搞懂PostCSS的用法及与一些插件的用法
不知不觉地春节要来临了,今天已经是放假的第二天,想想回老家之后所有的时间就不是自己的了,要陪孩子玩,走亲戚等等,我还是趁着在郑州的这两天,把几天后春节要发布的文章给提前整整。在此,提前祝大家春节快乐!!前面我已写了6篇相关的Webpack方面的技术知识点,今天我主要分享有关PostCSS方面的技术,PostCSS严格来说不是一款c s s预处理器,而是一个用 JavaScript 工具和插...原创 2020-01-21 14:52:03 · 5571 阅读 · 5 评论 -
Webpack实战(六):如何优雅地运用样式CSS预处理
上一篇文章中,我主要分享了《Webpack如何分离样式文件》CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序,css预处理指的是在开发中我们经常会使用一些样式预编译语言,在项目打包过程中再将这些预编译语言转换成css。这些预编译语言具有便捷的特性,使用这些,可以减少代码编写,降低项目的开发和维护成本,提高开发效率。目前比较流行的几种主要是Sass、LESS、Stylu...原创 2020-01-19 11:30:42 · 3864 阅读 · 3 评论 -
Webpack实战(五):轻松读懂Webpack如何分离样式文件
在上一篇文章中我给大家分享了预处理器(loader),里面讲到了style-loader 和css-loader,有关样式引入的问题,但是上面的样式文件只是引入到style标签里面,并不是我想要的样式文件独立分离。如果想了解有关css-loader和style-loader可以参考以下地址:Webpack实战(四):教教你如何轻松搞定-预处理器(loader)通过js引入样式文件只是把样...原创 2020-01-18 10:16:41 · 4330 阅读 · 7 评论 -
Webpack实战(四):教教你如何轻松搞定-预处理器(loader)
前面三节,我主要给大家分享了有关webpack的一些配置的知识点,如何打包js文件,而如果我们遇到其他类型的资源如图片、css、字体font等等,我们该如何处理呢?今天会介绍预处理器(loader),它赋予了Webpack可处理不同资源类型的能力,极大丰富了其可扩展性。如果想了解Webpack的基础配置可以参考以下地址:Webpack实战(一):Webpack打包工具安装及参数配置Web...原创 2020-01-16 13:25:09 · 4398 阅读 · 3 评论 -
Webpack实战(三):作为前端你不得不懂的Webpack资源入口和出口的配置
关于Webpack前两篇跟大家分享的主要是Webpack的一些基本的配置,今天开始我们详细了解一下有关Webpack的各种配置,今天主要跟大家分享的是Webpack的资源入口和资源出口的配置。如果想了解前两篇的文章请访问下面的地址:Webpack实战(一):Webpack打包工具安装及参数配置Webpack实战(二):webpack-dev-server的介绍与用法资源入口配置资源入...原创 2020-01-10 14:51:55 · 4396 阅读 · 4 评论 -
Webpack实战(二):基础配置入门 - webpack-dev-server的介绍与用法
为什么要用webpack-dev-server在开发中,我们都可以发现仅仅使用Webpack以及它的命令行工具来进行开发调试的效率并不高,每次编写好代码之后,我们需要执行npm run build命令更新js文件,然后再刷新页面,才能看到更新效果。webpack-dev-server正好解决了这个问题,是一款便捷的本地开发工具。webpack-dev-server 安装用以下命令进行安装:...原创 2020-01-05 17:54:33 · 8651 阅读 · 2 评论 -
Webpack实战(一):基础入门-教你轻松搞定Webpack打包工具安装及参数配置
Webpack实战(一):Webpack打包工具特点及安装为什么要模块化javascript跟其他开发语言有很多的区别,其中一个就是没有模块化概念,如果一个项目中有多个js文件,我们只能通过script标签引入的方式,把一个个js文件插入到页面,这种做法会也引起了很多弊端:需要手动维护JavaScript的加载顺序多次请求资源,影响了加载速度在每个script标签中,顶层作用域即全局作...原创 2020-01-03 09:42:02 · 2740 阅读 · 4 评论 -
减少HTTP请求的方法
最近在看《高性能网站建设指南》,学习一些网站优化的技术,读到关于减少http请求的一些方法: 1. 图片地图 图片地图允许你在一个图片上并联多个URL,目标URL的选择取决于用户单击了图片上的哪个位置。 使用图片地图这种放手就既能减少HTTP请求,又无需改变页面外观感受,图片地图有两种类型:服务器端图片地图将所有点击提交到同一个目标URL,向其传递用户单击的x、y原创 2013-03-21 10:29:13 · 3281 阅读 · 0 评论 -
样式表放在顶部的好处
在Internet Explorer中,将样式表放在文档底部会导致白屏问题的情形:1. 在新窗口中打开时,2.重新加载时; 单击刷新按钮是另外一种导致白屏的方式,这是一种常见的用户操作。在页面加载时最小化然后恢复窗口就能看到白屏;3.作为主页:为了避免白屏,请将样式表放在文档顶部的HEAD中,不管页面是如何加载的---在新窗口打开.重新加载或者作为主页原创 2013-03-21 16:02:32 · 1453 阅读 · 0 评论 -
从减少DNS查找来优化网站
Internet是通过IP地址来查找服务器的.由于IP地址很难记忆,通常使用包含主机名的URL来取代它,但当浏览器发送其请求时,IP地址仍然是必需的。这时,Domain Name System(DNS)在其中起了作用。DNS将主机名映射到IP地址上,就像电话本将人名映射到他们的电话号码一样。当你在浏览器中输入一个网址时,连接到浏览器的DNS解析器会返回服务器的IP地址。 DNS查找可原创 2013-04-12 10:38:58 · 2457 阅读 · 1 评论 -
查询url包含的字符串参数(js高程笔记)
unction getArgs() { var args = {}; //创建保存数据的对象 var qs = location.search.length > 0 ? location.search.substring(1) : ''; //取得查询字符串并去掉开头的问号 var items = qs.split('&'); //按&字符串拆分数组 var item = null, name = null, value = null;//逐个将每一项添加到args对象中原创 2014-11-18 13:59:22 · 1522 阅读 · 0 评论 -
浏览器的重绘和重排的影响
浏览器下载完页面中所有的组件之后,会解析生成两个内部数据结构:1. DOM树:表示页面结构2. 表示DOM节点如何显示 当DOM和渲染树构建完成之后,浏览器就开始显示(绘制)页面元素,当DOM的变化影响了元素的几何属性(如改变边框或者高度)浏览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会受到影响,浏览器会使中受到影响的部分失效,并重新构造渲染树,这个过程被称原创 2014-10-20 15:17:52 · 1912 阅读 · 0 评论 -
javascript中数据访问性能优化简析
我们一般写代码都会考虑代码的可读性、可扩展性及重要的是浏览器的解析。减少代码数量提高代码性能加载速度,是我们每个coder所追求的。在javascript中,我们有时必须考虑的是如何确定数据的存储位置,以获取最佳的读写效率,数据存储的位置,关系到代码执行过程中数据被检索的速度,数据的存储位置在很大程度会影响其读取速度。javascript中有4种基本的数据存取位置:直接量、变量、数组元素、对象才成员原创 2015-05-07 15:10:45 · 1145 阅读 · 0 评论 -
javaScript一种优化模式-初始化时分支
初始化时分支是一种优化模式。当知道某个条件在整个程序生命周期内都不会发生改变的时候,仅对该条件测试一次是很有意义的,浏览器嗅探(功能检测)就是一个典型的例子。在发现XMLHttprequest可作为原生对象支持后,在程序执行过程中,底层的浏览器并没有机会改变,并且出乎意料您又需要处理AcitveX对象,由于环境并不会改变,代码就没有理由在每次需要另外一个XHR对象时继续保持嗅探。2.查明DOM元原创 2015-05-27 11:10:20 · 1287 阅读 · 1 评论 -
1.1 了解web性能
您可能是一个听说过Web性能的开发人员,但是您对它知之甚少。也许你已经使用了一些快速取胜的技巧,或者你可能已经精通这门学科,并拿起这本书来发现新的技术,你可以用它来进一步优化你自己的网站。别担心!无论你在这个领域没有什么经验,还是你是在这个领域的专家,这本书的目标是帮助你更好地了解网络性能,提高网站性能的方法,以及将这些方法应用到你自己的网站中。 但是,在我们讨论Web性能的细节之前,理解我翻译 2018-01-22 16:54:33 · 412 阅读 · 0 评论 -
web performance in action学习前言
今天开始研究学习《web performance in action》这本书,以后在这个专栏里记录自己学习的内容,希望通过原版的,能把这些技术学的更深入,好好应用的工作中,并分享给想学的朋友们。原创 2018-01-06 10:09:41 · 596 阅读 · 0 评论 -
第一章:Understanding web performance-理解web性能
本章介绍Web性能为何重要Web浏览器如何与Web服务器对话表现不佳的网站会直接影响用户体验如何使用基本的Web优化技术你可能听说过与网站相关的性能,但它是什么呢?你和我为什么要关心这个?Web性能主要指网站加载的速度。这很重要,因为加载时间短,速度快,可以改善你的网站在所有互联网连接上的用户体验。因为这提高了用户体验,用户更有可能看到你的网站有什么。提供什么样的服务。这可以帮助您翻译 2018-01-09 17:24:03 · 439 阅读 · 0 评论 -
chrome中Blackbox Script 黑盒脚本作用及用法
chrome中Blackbox Script 黑盒脚本作用及用法Blackbox Script功能每天前端人员在调试代码的时候,都可能会遇到代码调试着会进入第三方库文件,带来很多没必要的调试,不方便之处,Blackbox提供了这个便利功能,当你把不需要调试的代码加入Blackbox时候,调试的时候便会自动绕过这些文件,断点也不会调入黑盒中如何加入BlackBox在代码展示处右击,然后选中...原创 2019-07-19 09:56:22 · 5488 阅读 · 1 评论 -
chrome介绍与用法
chrome介绍与用法chrome介绍与用法1. 认识devTools功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入...原创 2019-07-17 22:31:18 · 1111 阅读 · 1 评论 -
前端性能优化
前端性能优化的重要性: 1. 关注前端可以很好地提高整天性能。如果我们可以将后端响应时间缩短一半,整体响应时间只能减少5%~10%。而如果关注前端性能,同样是将其响应时间减少一半,则整体响应时间可以减少40%~45%。 2. 改进前端通常只需要较少的时间和资源,减少后端延迟会带来很大的改动, 3. 前端性能调整已被证明是可行的,性能黄金法则:原创 2012-12-24 15:23:35 · 1025 阅读 · 0 评论