201908-201911《Web高效编程与优化实践》读书笔记

chenxiaoyi0207

于 2019-11-26 14:24:20 发布

阅读量311

点赞数

分类专栏：读书笔记

本文链接：https://blog.youkuaiyun.com/sinat_38783046/article/details/103255527

版权

读书笔记专栏收录该内容

9 篇文章

订阅专栏

《Web高效编程与优化实践》

第1章 HTML/CSS优化

有一些css的巧妙用法，具体可以去看《精通CSS》。
CSS代替JS还是有局限性的。
能使用HTML、CSS的就不要使用JS。
标签语义化很重要，不要全部使用div。

第2章 JS优化

可以定义一个全局常量模块文件。
不推荐直接在JS里面更改样式属性，应该通过增删类来控制。
减少重复代码->模块化。
有很多case的情况下，比switch更好的方式是使用策略模式，满足面向对象编程的开闭原则（对扩展是开放的，对修改是封闭的）：

//使用switch
function popCallback(popType){
	switch(popType){
		case "register":
			//do sth.
			break;
		case "favHouse":
			//do sth.
			break;
		case "saveSearch":
			//do sth.
			break;
	}
}

//使用策略模式:popCallback.js
module export = {
	register:()=>{
		//do sth.
	},
	favHouse:()=>{
		//do sth.
	},
	saveSearch:()=>{
		//do sth.
	}
}

//switch的调用方法
popCallback("register");
//策略模式的调用方法
let popCallback=require('popCallback.js');
popCallback["register"]();

访问者模式，例如事件监听。（？不太懂）
JS书写优化：

（1）按强类型风格写代码。
- 定义变量时就给它一个默认值，以便指明变量的数据类型。
- 不要随意改变变量的类型。
- 函数的返回类型应该是确定的，返回的数据类型不应有多种。
（2）减少作用域查找。
- 不要让代码暴露在全局作用域下。
- 不要滥用闭包。
（3）避免==的使用，容易有隐患。

（4）合并表达式。
- 用三目运算符取代简单的if-else。
- 连等，利用赋值表达式会返回一个值的特点。
- 自增，以简化代码。
（5）减少魔数（意义不明的常量）。
```
//这些传参就是意义不明的魔数
func("seller","sell",5,true);

//以下方式更好
var naireType="seller",
	dialogType="sell",
	questionsCount=5,
	reloadWindow=true;
func(naireType,dialogType,questionsCount,reloadWindow);
```
使用ES6简化代码。

（1）使用箭头函数取代小函数。

（2）使用ES6的class，可以减少代码量，让代码看起来更高级，可以很方便地实现继承、静态的成员函数。

（3）字符串拼接使用反引号。

（4）块级作用域变量，使用let，避免使用闭包。

第3章页面优化（页面卡顿、打开速度、用户体验）

页面卡顿问题：拆分代码段；减少页面重绘，尽量用transform写动画，尽量使用flex布局比float需要重绘的元素少；简化DOM结构。
加快页面打开速度：

（1）减少渲染堵塞：避免head标签JS堵塞，JS放body最后，使用defer属性异步加载。

（2）减少head标签里的CSS资源：减少CSS代码量。

（3）优化图片。
- 使用响应式图片（不同屏宽使用不同尺寸的图片）。
- 图片懒加载。
（4）压缩和缓存。
- gzip压缩。
- Cache-Control，设置缓存，避免资源重新传输，第二次访问时浏览器可以直接从缓存取。
- 使用etag设置缓存，经过判断决定是否重新传输资源，副作用是增加服务器计算负担。
（5）升级到HTTP/2，无需使用雪碧图、合并JS/CSS文件等技术减少请求数，可以同时加载多个资源。

（6）DNS预读取，在head标签里写上几个link标签，并行提前解析DNS。
```
<link rel="dns-prefetch" href="https://www.google.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="dns-prefetch" href="https://connect.facebook.net">
<link rel="dns-prefetch" href="https://www.baidu.com">
```
（7）HTML优化：删除注释、行前缩进等，以减少HTML体积。

（8）代码优化：HTML嵌套不要太多层；CSS选择器不要写得太复杂；不要滥用闭包，闭包会加深作用域链，加长变量查找的时间。
增强用户体验

（1）加Loading效果，特别是请求过程中。

（2）加过渡动画效果，适度不能太多。

（3）单击按钮加按下去的样式；input加上type，手机端能弹出不同的键盘；输入时根据不同情况自动补全，如输入一个链接，自动补上https://。

（4）记住用户使用习惯，可以用本地存储/cookie实现。

（5）避免页面闪动。
用好chrome devtools。

（1）console.table()，打印对象更清晰；console.dir()，递归打印对象的所有属性；console.trace()追踪函数调用。

（2）console.log字符串中加上%c，字符串后写css，实现带样式打印。

（3）Coverage标签栏，检查没有用到的CSS/JS。

（4）截全屏的功能。

（5）用检查工具调试要找打断点的位置，可以在代码中写debugger，则代码运行到那里就会进入调试模式。

（6）console.dir()，递归打印对象的所有属性。

（7）控制台Elements下面有个Event Listeners，查看某个函数绑定的事件。

（8）NetWork下选中某个请求右键Open in Sources Panel，方便找文件。

（9）可以通过NetWork下Offline Online去切换网络状况，断网或3G慢网。

（10）用Performance看执行时间，观察垃圾回收。
（11）检查内存泄漏。
（12）查看内存消耗->Memory的录制。
（13）Network单击一个请求的Waterfall，可以查看各项连接时间。
（14）Audits栏，可以对页面性能进行评测。

第4章 HTML5优化实践

使用H5的history改善AJAX列表请求体验。

（1）window.history.pushState(state,title,url)

state：object，存放当前页面的数据

title：标题

url：当前页面的url

（2）H5增加了一个window.onpopstate事件，页面前进后退可以触发popstate事件。
使用字体图标替代雪碧图。

雪碧图有点：减少浏览器请求次数。

雪碧图缺点：高清屏会模糊、无法动态变化。

使用字体图标可以解决上述问题，同时兼容性好、生成文件小。

第5章前端与计算机基础

1.计算机网络：TCP/IP，四层网络协议，HTTP报文头大小限制，HTTPS，

2.js：多线程，面向对象特点，

3.编程原则：设计模式，

4.算法与数据结构：递归，数组去重，堆栈。

第6章掌握前端基础

1.同源策略和跨域。

2.前端不能像原生app一样直接操作用户本地文件，只能通过用户的主动选择（（1）input type='file’选择文件；（2）通过拖拽方式把文件拖进来；（3）在编辑框里复制粘贴）。

3.惰性载入函数，例如getUserAgent，只需获取一次，可以在第一次获取后就固定返回值，改掉原函数，再次调用时，不会重新去获取UA，而是直接返回之前获取到的值。

第7章运用恰当的工具

1.前端的单元测试和自动化测试。
单元测试：karma（本书使用），Totoro（淘宝开源），mocha（Node.js）
自动化测试：E2E测试（protractor）

读后感

比起上一本书，这本书显得更繁琐一些，上一本书主要在讲思维层面，这本书落实到了具体开发细节上，是具有提升实践能力意义的。想学习一些动画的原理、图片裁剪、图片压缩上传、HTML5 form校验插件、service worker等实战经验（Effective前端-知乎专栏），以及前端相关计算机基础知识、数据结构与算法（第5章），可以再次阅读，这次阅读主要为了看代码优化就先挑着读了。