前端技术架构
文章平均质量分 95
最恨不过不努力
喜欢健身和安静的思考
展开
-
webpack实战项目中代码打包和优化总结
网上关于webpack的优化的已经很多了,只是都比较零散,结合实战项目自己做个总结webpack 优化,实际项目中主要做到了一下几点:1、 文件压缩(css, js, html, 字体文件, 图片文件)2、 babel-loader 避免不必要的转义3、 babel-转义结果进行缓存4、 公共模块的提取5、 loader 转为多进程6、 按需加载7、 DllPlugin 增加...原创 2018-12-08 18:08:15 · 1336 阅读 · 0 评论 -
图片优化——质量与性能的博弈
图片优化——质量与性能的博弈《高性能网站建设指南》的作者 Steve Souders 曾在 2013 年的一篇 博客 中提到:我的大部分性能优化工作都集中在 JavaScript 和 CSS 上,从早期的 Move Scripts to the Bottom 和 Put Stylesheets at the Top 规则。为了强调这些规则的重要性,我甚至说过,“JS 和 CSS 是页面上最重...翻译 2019-01-09 14:25:36 · 4094 阅读 · 0 评论 -
es6重难点
es6重难点总结归纳2018已经成为过去,2019年最重要的事就是换工作,换工作,换工作!!!得不到的永远在骚动,从去年的一些面试试水来看,各大厂的面试要求那是万变不离其中,进行自我总结了一下,无非就是以下知识点:调用堆栈作用域闭包this全面解析深浅拷贝的原理原型prototype事件机制、Event LoopPromise机制、async / await原理、防抖/节流原...原创 2019-01-02 21:55:27 · 1572 阅读 · 0 评论 -
本地存储——从 Cookie 到 Web Storage、IndexDB
本地存储——从 Cookie 到 Web Storage、IndexDB随着移动网络的发展与演化,我们手机上现在除了有原生 App,还能跑“WebApp”——它即开即用,用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验。我认为,WebApp 就是我们前端性能优化的产物,是我们前端工程师对体验不懈追求的结果,是 Web 网页在性能上向 Native 应用的一次“宣...转载 2019-01-11 10:34:37 · 2608 阅读 · 0 评论 -
防抖和节流
应用场景防抖和节流都是用来防止高频率的js代码的执行防抖防抖本质上就是以最后的操作为标准打个比方,此时此刻我们都在排队等公交,司机说必须等到坐满才会发车,这时候的参照标准就是最后一个人上车,公交车好比我们的js代码,最后一个人就充当我们的执行条件。看代码:let setTimer;let shake = function() { clearTimeout(setTimer);...原创 2018-12-29 20:50:36 · 11235 阅读 · 1 评论 -
__proto__ 和 prototype 深度剖析
为什么要进行深度剖析proto 和 prototype 是一个老生常谈的话题,也是作为一个前端开发人员必须搞懂的问题,且不应该有任何的折扣,这是通往高级前端开发的必经之路和必备技能。虽然实际开发中用的并不多,但是当你学习一些新的js框架乃至自己封装一些高性能的组件时是及奇有用的。网上的相关资料很多,讲解也是多种多样,但是至今都没有看到一篇自己满意的文章,于是在翻阅众多资料以及相关书籍之后,作...原创 2018-12-29 15:03:50 · 901 阅读 · 1 评论 -
对象的深浅拷贝
标题对象的深浅拷贝在进行实例讲解之前,我们先下个给深浅拷贝下个定义,什么是深拷贝?什么是浅拷贝?个人理解:浅拷贝:针对指针的引用深拷贝: 对值的引用浅拷贝先看原创 2018-12-28 20:44:26 · 982 阅读 · 0 评论 -
TCP 三次握手 四次挥手
三次握手剧情回顾恋爱那会儿给小女朋友打电话是这样的:client:client 对 server 说 SYN (约么)server: SYN + ACK (恩恩,好哒,走起)client: ACK (OK,搞定)以上就是三次握手,求偶三步曲当然,如果我只是这样解释的话,估计你心里也会骂我,耽误你如此宝贵的时间,然而我出家人从不打诳语,凡是讲究证据,接下来看图:在具体介绍之前...转载 2018-12-23 16:16:38 · 527 阅读 · 0 评论 -
DNS域名解析
前面写过一篇关于一次完整的HTTP请求,文章内容相对浅显,又是一年跳槽季,为了各位攻城狮们来年可以找到满意的工作和心仪的对象,几经思考,还是准备进一步细化讲解,今天就聊一聊骚气的csdn域名解析再具体介绍之前,先上图,然后看图说话,这样有图有真相有助于肠胃吸收,不至于枯燥乏味DNS是一个递归查询的过程,请先允许头盗图一张哈:如图所示,DNS域名解析是一个递归查询和迭代查询的过程,下面将对每...转载 2018-12-23 15:12:42 · 890 阅读 · 0 评论 -
this全面解析
this 深度解析最近,重温曾探的《JavaScript设计模式与开发实践》【下载相关学习资料 】 在各种案例中,关于this、call、apply 的使用及奇平凡,有些设计模式的案列相对复杂,各种来回复杂的调用,让人有点丈二的和尚摸不着头脑,于是又重温一下this,这里我会由浅入深的对自己再次的学习进行一些总结。this 指向引用《javascript高级程序设计第三版》【下载相关...原创 2018-12-28 13:08:28 · 815 阅读 · 0 评论 -
Javascript 作用域、作用域链和闭包
先上定义作用域: 官方解释:一段程序代码中所用到的变量并不总是可用的,而限定这个变量的可用性的代码范围就是改变量的作用域闭包: 闭包就是能够读取其他函数内部变量的函数任何没有代码来支撑的定义和解释都是扯淡,务必静下心来看看下面的例子作用域举原创 2018-12-22 18:03:00 · 989 阅读 · 0 评论 -
JavaScript 中的堆栈调用
在介绍 JavaScript 之前,先介绍一下数据的类型基本类型 (按值访问) 包括:Number 、 String 、 Boolean、 Undefined、Null 引用类型 (按引用访问) 包括:Object、 Array 介绍一下堆和栈栈 (stack) : 用来保存简单的数据字段堆 (heap) : 用来保存栈中简单数据字段对指针的引用基本类型、引...原创 2018-12-16 18:53:04 · 4132 阅读 · 3 评论 -
优化首屏体验——Lazy-Load 初探
Lazy-LoadLazy-Load,翻译过来是“懒加载”。它是针对图片加载时机的优化:在一些图片量比较大的网站(比如电商网站首页,或者团购网站、小游戏首页等),如果我们尝试在用户打开页面的时候,就把所有的图片资源加载完毕,那么很可能会造成白屏、卡顿等现象,因为图片真的太多了,一口气处理这么多任务,浏览器做不到啊!但我们再想,用户真的需要这么多图片吗?不对,用户点开页面的瞬间,呈现给他的只...转载 2018-12-09 18:02:09 · 7596 阅读 · 3 评论 -
记一次完整的http请求
一年即将结束,各位攻城狮们各自打着自己的小算盘,计划的干完今年来一波华丽的跳槽,于是一个前端技术交流群里有些初入职场的小仙肉们问道关于这些问题,说实际工作中很少关注这些,于是个人准备记录一下自己的理解当你在浏览器输入 www.baidu.com 敲下回车,将会发生以下事情:域名解析 ===> TCP经典的三次握手 ===> 客户端和服务端建立连接 ===> 发起http/...原创 2018-12-09 14:57:46 · 559 阅读 · 0 评论 -
浏览器缓存机制介绍与缓存策略剖析
浏览器缓存机制介绍与缓存策略剖析缓存可以减少网络 IO 消耗,提高访问速度。浏览器缓存是一种操作简单、效果显著的前端性能优化手段。对于这个操作的必要性,Chrome 官方给出的解释似乎更有说服力一些:通过网络获取内容既速度缓慢又开销巨大。较大的响应需要在客户端与服务器之间进行多次往返通信,这会延迟浏览器获得和处理内容的时间,还会增加访问者的流量费用。因此,缓存并重复利用之前获取的资源的能力成...转载 2019-01-09 14:50:17 · 5995 阅读 · 0 评论