![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端性能优化及工程化
文章平均质量分 86
卡尔KAEL
这个作者很懒,什么都没留下…
展开
-
Javascript & QA 工程师 -实战篇
karma(大型集成化开发.) npm install karma –save-dev (集成化测试环境 集成浏览器 & 断言库) npm install -g karma-cli karma init 上下键选择 选择断言库, 建议选择jasmine 这个断言库 能做什么,首先是一个js 就要有一个浏览器,和一个断言库 所以是大型集成化环境 初始化步骤: ...原创 2018-03-25 17:47:53 · 336 阅读 · 0 评论 -
浏览器解析原理
浏览器文档流 -》htmlDOM结构 -》css结合 -〉布局-》绘制页面第一步 HTML转换成DOM服务端返回‘text/html’ 格式的文档流,HTML字符串描述流页面的结构,浏览器会把HTML字符串解析成DOM的树形结构第二步 生成CSSOM结构css样式可以在web 页面里映射CSSDOM (css 对象模型),他和 DOM 结构比较像,不是增量模式。 而是组合模式。...原创 2019-08-22 15:39:11 · 291 阅读 · 0 评论 -
Yahoo 34条军规
1.尽量减少HTTP请求数80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样式表,脚本,Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。减少页面组件数的一种方式是简化页面设计。合并文件是通过把所有脚本放在一个文件中的方式来减少请求数的,当然,也可以合并所有的CSS。CSS Sprites是减少图片请求数量的首选...转载 2018-05-03 18:11:38 · 627 阅读 · 0 评论 -
[ Grunt + Gulp + Rollup + Bower + Yeoman + Browerify + Parcel ] 构建工具浅析及使用场景
有些公司的老项目,会用到这些工程化开发; 我留下了github上的各种实例 *.conf文件都有注释; 基本上完整的; 如果在跟新了新特性.也可以在我这上面测试尝新;Parcel这个要比webpack入手容易, 学习曲线不会那么长 ;基本无需配置;看官网的就行了; 但 我觉得webpack 配置起来好玩;Browerify让本地的js 应用服务端的js; req...原创 2018-04-23 09:47:04 · 581 阅读 · 0 评论 -
webpack 常用使用技巧
Loader Usage三种方法//方法1require("./loader!./dir/file.txt");require("jade!./template.jade");require("!style!css!less!bootstrap/less/bootstrap.less");//方法2//在webpack.config.js 文件配置{ mo...原创 2018-04-18 14:29:42 · 266 阅读 · 0 评论 -
Linux 命令 [持续更新....]
Linux 基本命令ls 查看文件目录dir 查看文件目录ls -l 查看文件详情ls -a 查看隐藏文件 ==.== 当前目录; ==..== 上一级目录cd 切换目录mkdir xxx 创建xxx目录cp <目标文件> [期望文件路径]/<重命名文件名> eg:cp oldfile C/newfile 复制文件cd ../.. 退回2级目录cp...原创 2018-01-16 23:08:45 · 136 阅读 · 0 评论 -
Node部署 - [反向代理 + 负载均衡 + 线上部署 + PM2 + 缓存策略] - 看我的就够了
准备工作方向代理 负载均衡 nginx 负载均衡的实现 HTTP Uptream模块 其他负载均衡的方法缓存策略实战首先安装nginxcentos 可以用 yum神器 mac 环境使用 Homebrew神器 来安装 brow 来源 brew search nginx brew install nginx b...原创 2018-04-09 14:08:29 · 3397 阅读 · 0 评论 -
Javascript & QA 工程师 - 理论篇
Javascript & QA 工程师 - 理论篇原创 2018-03-25 17:49:41 · 177 阅读 · 0 评论 -
(一)性能优化策略
用例代码<head> <meta charset="utf-8"> <title>JS and CSS preload example</title> // 1. 浏览器可以预先加载style.css, main.js的资源 <link rel="preload" href="style.css" as="style">...原创 2019-08-22 16:07:23 · 387 阅读 · 0 评论