胖五talk

五读笔记002:现代前端技术解析

思维导图

作者的Github上放出了思维导图,就不自己做了。

点击下载

点击下载

笔记

输入网址到展示页面内容,这个过程发生了什么?

  • 浏览器输入网址
  • 通过DNS解析获取该网站的IP地址(层层查找 浏览器缓存>hosts>路由器缓存>DNS缓存>域名服务器)
  • 连同Cookie,userAgent等信息向网站发起Get请求
  • 服务器响应请求,处理后返回响应报文,如果浏览器有缓存资源返回304,一般则返回200与对应的内容
  • 浏览器接到响应报文后开始下载Html文档
  • Html文档解析构建DOM树,并根据标记中的请求下载指定的MIME类型文件,同时设置缓存等内容
  • 页面开始解析渲染DOM,css根据规则解析并结合DOC树进行网页内容的布局和绘制渲染,JS根据DOM API操作DOM,读取缓存,执行事件绑定等

浏览器数据持久化方案

  • http缓存根据响应的协议头信息判断是否从服务器端请求文件还是读取本地缓存
  • localStorage用于保存提交较大的数据,单个域名下有大小限制,不超过2.6MB为宜,相比Cookie的4KB已经很大了
  • localStorage超过最大限制后读写会出错,同一浏览器不同页面共享同一域名下的localStorage内容
  • sesstionStorage会在浏览器关闭时自动清空,其他与localStorage一致
  • Cookie通过http请求会发送到服务器端,一条记录由键,值,域,过期时间和大小组成
  • 设置为HttpOnly类型后,浏览器无法通过js读取Cookie,只能用于http请求
  • IndexDB操作类似NoSQL,限制大小为50MB
  • cacheStorage离线应用可用 参考1

前端实时协议

  1. websocket
  2. Poll和Long-poll

Long-poll设置一个较长的timeout等待时间,这样网络轮训请求就可以维持一段较长的时间后返回结果。典型使用场景就是网站通过对应的移动客户端进行扫描二维码登陆,用户使用客户端扫描后,浏览器会收到结果自动跳转到下一个页面。

RESTful

交互调用数据的协议风格规范,它建议以一种通用的方式来定义和管理数据交互接口。

http方法 URI 描述
POST path/v1/book 新增
DELETE path/v1/book 删除
PUT path/v1/book 全量更新
DISPATCH path/v1/book 部分更新
GET path/v1/book 获取

分域存放静态资源

将html,js,css,图片等资源分域存放可以有效的突破浏览器同时下载进程的限制。对请求中的cookie进行进行隔离,因为跨域请求默认是不带cookie的,这样便减少了js,css,图片等资源的请求头部大小,从而提升了请求的解析速度。

WebComponent与ShadowDOM

Shadow DOM是html的一个规范,它允许浏览器开发者封装自己的html标签,css样式与特定的js代码,同时让开发人员创建类似video这样的自定义一级标签。

Js导致内存泄露

闭包函数,全局变量,对象属性循环引用,DOM节点删除时未解除事件,Map和Set的属性直接删除等。

CSS样式统一化

三种思路:reset,normalize

  • reset 将默认样式全部清除,消除不同浏览器下的默认样式的插一下。
  • normalize 在整站样式基本确定的情况下对标签元素统一使用同一个默认样式规则,比如统一margin: 5px

知乎答案参考

实现动画方案

  1. js直接实现动画
  2. SVG动画
  3. CSS3 transition
  4. CSS3 animation
  5. Cavans动画
  6. requestAnimationFrame

js直接实现动画采用setInterval不间断改变元素属性,一遍间隔为16ms(60帧为流量标准,16ms比1000ms/60帧略小一点)

在移动开发中直接使用transition动画会让页面变慢,通常通过添加transform: 3D(0,0,0)或transform: translateZ(0)来开启移动动画的GPU加速 参考

图片问题

目前主要网站60%以上的流量数据来自图片,如何在保证用户访问网页体验不降低的前提下尽可能降低图片的输出流量很有重要意义。

REM

给html根元素一个根据屏幕自动调整的font-size,页面上的所有元素尺寸全部使用rem为单位,这样无论屏幕怎么变化,页面内容和屏幕的比例都将始终不变。

JQuery

实现了五个方面封装和常见的兼容性问题

  1. 选择器
  2. DOM操作方法
  3. 事件绑定封装
  4. AJAX
  5. Deferred

优化方案:

  • 尽可能的使用id选择器进行DOM查询
  • 缓存一切需要复用的jq对象,使用find子查询
  • 尽可能使用jq的静态方法
  • 使用事件代理,不要直接在元素上绑定事件
  • jq对象推荐以’$’开头,方面分辨jq对象与普通对象

数据变更检测

  • 手动触发绑定
  • 脏数据检查
  • 对象劫持,Object.defineProperties对get,set进行监听
  • Proxy

Virtual DOM

前端框架从直接DOM操作到MVP再到MVVM框架,改进原则一直是向着高效,易实现,易维护,易扩展的基本方向发展。但都没有脱离DOM编程的讨论,DOM运行效率不变,以为引入了新的方案。

使用高效的JS对象来描述DOM结构,然后在JS对象发生变化后将对比前后发生的变化,仅仅将差异化的部分渲染到页面中。

创建VirtualDOM就是讲一段DOM描述字符串解析成VirtualDOM的过程。

VirtualDOM的本质区别在于减少了DOM对象的操作,通过JS对象来代替DOM树对象,并且在页面结构改变时进行最小代价的DOM渲染操作。

分享页面到社交平台带缩略图标题与描述

微信,qq需要通过jssdk进行设置,其他的还需研究下

CSS样式书写顺序遵循先布局后内容的规则

常用布局:position, display, float, overflow
常用内容:color, font, text-align

JS书写注意

条件判断尽量不要直接unefined进行变量判断

1
2
3
4
5
6
7
8
9
// 不推荐
if (name == undefined) {
return false
}
// 推荐
if (typeof person === 'undefined') {
return false;
}

数组遍历用for…of, 对象遍历用for…in

桌面浏览器前端优化策略

  1. 减少http资源请求次数
  2. 减少http请求大小
  3. css或js放到外部文件中,避免内嵌
  4. 避免页面中空的href和src,会阻塞页面中其他资源下载,而且最终加载内容无效
  5. 为html指定Cache-Control或Expires
  6. 合理设置ETag和Last-Modified
  7. 减少页面重定向
  8. 静态资源分域存放来增加下载并行数量
  9. 使用静态资源CDN来存储文件
  10. 使用CDN Commbo下载传说内容
  11. 对于返回内容相同的请求,使用可缓存的Ajax
  12. 使用Get来完成Ajax请求,POST发送会先发文件头在发送正文,GET时只发送头部
  13. 减少Cookie大小并进行隔离
  14. 缩小favicon.ico并缓存
  15. 使用异步js资源
  16. 消除阻碍渲染的css或js
  17. 常用足够小的图片可采用base64内嵌入网页,比如logo
  18. 不要在html中直接缩放图片,会引起内容重排
  19. 避免使用table,iframe等慢元素,table的dom树全部生成完成后并一次绘制到页面上的,长表格渲染很耗性能

移动端前端优化策略

  1. 首屏数据请求提前,避免js文件加载后请求数据
  2. 首屏按需加载,非首屏内容滚屏加载,保证首屏内容最小化
  3. 模块话化资源并行下载
  4. inline首屏必须的css和js
  5. meta dns perfetch设置DNS预解析
  6. 合理利用MTU策略,一般为1500,所以尽量html内容在1KB以内
  7. 使用高压缩比图片,比如webp
  8. 图片懒加载
  9. iconfont代替图片图标
  10. 使用touchstart代替click,否者在移动端有300ms延时
  11. 避免touchmove,scroll连续事件,设定间隔16ms为宜
  12. 使用css3动画,开启硬件加速
  13. 不滥用float

前端错误日志上报

1
2
3
window.onerror = function(msg, url, line) {
// 捕获错误并处理
}