web性能优化能做的事情很多,比如压缩JS体积大小, 比如降低HTTP请求次数,比如CDN优化关键资源请求速度等等。其中一个优化点事降低重排重绘次数,这里总结下。 渲染流水线 上图摘自李兵老师的《浏览器工作原理与实践》 实践方法 使用 class 操作样式,而不是频繁操作 style 重排重绘次 ...
自适应布局&响应式布局
本文字数: 543 阅读时长 ≈ 1 分钟
最近跟PM聊项目下一步发展,谈到了移动端网页,及移动端App的规划,期间就聊到了自适应布局,响应式布局,但是沟通中,觉得似乎这两个词一直是捆绑着,似乎在大家眼里自适应===响应式===一套代码走天下。 right?no,作为开发,很多时候我也把两个词混为一谈了,借着最近时间较为宽裕,整理下。 ...
JS下的Promise
本文字数: 4.3k 阅读时长 ≈ 4 分钟
很多教程把Promise搞的过于简单或复杂,这里梳理下,强化下个人理解。 Promise产生的原因promise是异步编程范畴内为了解决回调地狱的产物。 A.then(B).then(C) 这种写法相对回调明显是好些的。 Promise使用注意 Promise有三种状态pending,ful ...
Visual Studio Code插件清单
本文字数: 660 阅读时长 ≈ 1 分钟
IDEA作为code开发主力,但是更适合完整项目开发,而VSC作为轻量级开发编辑器,比如有时候处理一个Nginx配置,一个HTML测试文件等,因此两者不矛盾,一个重型武器,一个轻量级冲锋枪。 将VSC打造成一款利器更需要点成本,因为本身并不自带很多功能,因此需要安装相对较多的插件,这里列举下我安 ...
同源,CSP与CORS
本文字数: 1.1k 阅读时长 ≈ 1 分钟
这三个词汇频繁出现在前端安全范畴,这里总结下。当然由这三个词汇还会串联出相关一些知识点,比如同站,跨域,XSS,CSRF等。 这些术语看着复杂多样,但是联系起来考虑他们实际的场景就很好理解了。 同源安全策略的出现 同源即协议,域名,端口均一致即是同源,不同源情况下发起异步请求即产生跨域,浏览 ...
从输入URL到页面展示,这中间发生了什么
本文字数: 1k 阅读时长 ≈ 1 分钟
最近项目并不紧张了,于是得空把一些基础理论梳理下 当用户URL输入一个网址,浏览器根据用户输入的信息判断是关键词还是网址,如果是关键词则利用默认搜索引擎拼接输入的关键词形成网址,如果输入即是有效网址,则加上协议形成URL,用户输入完内容,按下回车 回车前,如果当前有页面存在则,执行befor ...
Chrome下的MemoryCache,DiskCache
本文字数: 486 阅读时长 ≈ 1 分钟
Chrome DevTools下调试前端请求时,会注意到缓存分为两种MemoryCache,DiskCache,针对两者区别和Chrome是如何选择缓存介质的,这里基于我的认知总结下。 概念单说区别,简单,仅从名字上也可以看出两者的区别,MemoryCache是从内存中存取,因此速度快,但时生命 ...