[深圳|荣耀师兄]JS-王熠华|2019年06月26日的日报-技能树.IT修真院

写任务10的时候以为很简单，但是才发现花了大半天上面没写成，下面也没写成，最后下午才弄出了底部的样式和调整320分辨率下的样式，开始这些上下左右的距离都是用margin来隔开的，觉得是好蠢的法子，所以想了下用弹性盒子来布局会比较适应；

图下登录注册明明分配好了8跟 4还是往下，检查后才发现是row没写进去；

尝试了很多办法才写出边框，这个盒子是要给他一定的宽度才行，然后用button按钮，再去消除他的按钮部分样式；

320情况下字体往下掉。用了媒体查询把字体稍微缩小了2px才同行显示

样式只有五个类目，我是用弹性盒子等分对齐处理的，下面的盒子少了一个内容，所以我用visitibily：hidden来隐藏了属性和占空间才完成；

该弹性盒子还是得弹性盒子来，用marigin这些来撑开布局上如果用响应式会很麻烦，写页面得时候还是跟师兄沟通下先怎么写好把，不然花费很多时间；

像这样底部需要撑开文字需要向下一些不是居中得话我们可以给父元素添加padding这小技巧就能完美达成了，不需要个个都去设置margin；

前端优化总结

css 雪碧图
优点
- 减少加载网页图片时对服务器的请求次数
- 能减少图片的字节,比多张图片字节更小。
缺点
- 维护比较麻烦
- 自适应屏幕下，容易出现背景断裂
- 元素的位置，需要计算
图片质量优化
- 如果是颜色丰富的图片，一般选择jpg
- 如果是动画图片，一般选择gif
- 如果需要清晰图片或透明图片，一般选择png 并尽量使用png 8
图片压缩（tinypng）
使用更小更快更强，新一代图片格式 WebP
WebP是谷歌在10年推出一种新型图片格式，最早也是应用在谷歌产品中，谷歌发布的Android Studio 2.3正式版中就包括对WebP支持的更新，在实测中，webp 格式比 jpg 格式减小约 20%。这对优化用户体验，减少CDN带宽消耗有很好的效果，但并不是所有浏览器都支持 webp ，所以为了使用 webp，需要做一点兼容性的工作。
base64：减少http请求，字节小图可使用。
iconfont：优点太多，适用小图标，大小颜色可变。常用icon无需设计。iconfont库资源丰富
图片延迟加载(懒加载)

css选择器：从右到左匹配
尽量少使用计算属性，如calc()、expression等
不要使用@import
重绘和重排重绘（repaint）、重排（reflow）
repaint：屏幕的一部分进行了重画，比如某个 css 中改变背景色，元素尺寸没有变。
reflow：任何一个元素的尺寸发生了变化，需要重新验证并计算 render tree，就会造成重排。

常见引起重排的操作：

常见引起重绘的操作：

color、background、background-position、box-shadow、border-radius等。

优化重排和重绘

可以参考----雅虎35条军规

浏览器缓存机制
浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段来控制文件缓存的机制。
Cache-Control 用于控制文件在本地缓存有效时长
Last-Modified 是标识文件在服务器上的最新更新时间。
Web Storage
分为 sessionStorage 和 localStorage
通过存储字符串的 Key/Value ，存储大小为5MB（Cookies 4KB)
Web SQL Database
又名html5本地数据库，用户可以像访问本地文件那样轻松地对本地数据库进行直接访问
目前基本已经被放弃, 新一代的前端存储方案--indexedDB
Application Cache
离线缓存，可在没有因特网连接时进行访问
HTML5的离线存储是基于一个manifest文件(缓存清单文件，后缀为.appcache)的缓存机制(不是存储技术)，通过这个文件上的清单解析离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态时，浏览器会通过被离线存储的数据进行页面展示。