Web前端基础回顾，浏览器html，找个工作二

跨标签通信

websocekt前后端持续通讯交互

localstorage发生变化会触发Window的storage事件，可在每个页面添加该监听及其回调函数

BroadcastChannel实例，提供发送消息以及接受函数的注册，每个实例代表独一的聊天频道

window的message事件，结合window的postMessage方法

 

输入url，敲下回车，浏览器的解析过程

浏览器查找自身缓存的dns记录，如果没有则查找hosts文件和操作系统缓存，

如果没有则向dns服务器发送请求解析url，获取主机域名ip地址端口号以及路径，

客户端发送tcp请求，三次握手四次挥手，应用层客户端生成http报文，传输层客户端发送请求，服务端返回接受确认，客户端发送最后的确认表示握手结束连接成功。...省略其他层...，四次挥手开始，服务器发出结束消息，客户端确认，客户端发出结束消息，服务器确认，连接结束

浏览器开始渲染，生成Dom树和css规则树，执行js代码，合并Dom树和css规则树生成render树，最后渲染网页（回流重绘）

 

浏览器架构

浏览器采用多进程模式，一个主进程，一个gpu进程，多个渲染进程，多个插件进程，一个网络进程

 

图片加载优化

数量多- 首屏或者必要的图片优先加载，更改http协议提高并发的http请求数量    体积大的图片无损有损的压缩，更改合适的图片格式减少体积，必要时根据设备尺寸进行裁剪

 

优化指标rail

response响应50ms，适用于点击切换启动，计算复杂的js放到后台计算，或者使用webworker，过久的话提供反馈

  animation动画10ms产生一帧，减少复杂的效果，帧数本身的设置选择有限

idle最大化空闲时间，交互第一，空闲时间处理延后任务（例如使用requestIdleCallback），必要时可以暂停空闲任务的处理

load传输页面到页面可交互不能超过5s，第二次打开不能超过2s

 

优化手段

减少ajax请求，尽量改为本地操作

减少http请求并使用http2.0，速度更快，且拥有多路复用和首部压缩的能力，可多个请求公用一个tcp连接，并复用相同的头部内容，减少流量加快速度，同时可设置http请求的优先级，最后还具有服务器推送的能力，可返回多个响应

使用服务器渲染，浏览器直接解析html文件，同时在服务器端直接处理掉部分ajax请求

静态资源使用cdn，减少用户加载所需时间

gzip压缩代码，丑化js，css压缩，htnlwebpackplug，提供公共模块代码，es6转es5

使用webworker后台处理失误，使用事件委托减少事件