html常识原创
# HTML必备知识
# 浏览器的执行原理
- 用户输入url
- ui线程解析并发给网络线程
- 网络线程向服务器发起请求,获取返回的数据
- 将数据通过IPC发给渲染器进程
- 渲染后交给GPU进行绘制
# 浏览器的渲染原理
- 渲染器进程解析文档生成DOM
- 解析CSS生成CSSOM并挂载到DOM上形成渲染树
- 遍历渲染树进行布局生成布局树
- 遍历布局树分层形成分层树
- 合成器遍历分层树进行栅格化
- 创建合成器帧并发送给GPU进行绘制
# javascript和css阻塞文档的解析
- 浏览器在遇到script标签时会暂停DOM解析,因为有可能通过write来修改DOM
- css不会导致并不能修改DOM,但是JavaScript执行时如果用到css,就会先加载css
- DOM解析完成后会进行CSS解析,如果CSS放在了底部,则由于CSS加载缓慢导致页面的暂时白屏
# 常见的可能会引起重绘和回流的属性
- 重绘:color,border-style ,visibility
- 回流:width,height,访问某些属性offsetleft
- 减少回流的方法:不要去读取元素的属性,统一修改样式,复杂动画使用绝对定位避免影响其他元素
# 常见HTML5的新特性
- canvas
- video/audio
- web stroage
- 语义化元素
- websocket
# 处理兼容性问题
- 使用createElement产生标签
# HTML5的语义化
- 页面结构清晰
- 有利于维护
- 有利于SEO
- 可访问性好
# SEO优化
- 合理的title
- description
- keywords
# cookie和sessionStorage和localStroage的比较
item | cookie | seesionStroage | localStroage |
---|---|---|---|
size | 4K | 5M | 5M |
valid | 同域下 | 会话窗口内 | 永久有效 |
# iframe
- 可以完整加载外部网站
- 会阻塞页面的onload事件
# form的自动完成功能
- autocomplete:默认为true
- 会自动提示之前的记录
# 浏览器多标签页间的通信
- localstorage:共享一个存储
- websocket:共享同一个服务器
- postMessage:获取标签页的引用
- SharedWorker:共享一个线程
# websocket
- 建立在TCP上,可实现服务器向客户端推送消息
- 也是一种数据通信协议,标识符是ws
- 通过new 一个 websocket构造函数来生成一个实例
- const ws= new WebSocket("path");
- 通过属性readyState来获取连接的状态
- ws.readyState
- 通过属性onopen,onclose,onmessage来指定服务器收到数据后执行的回调函数
- ws.onopen = function(){} ...
- 通过send方法向服务器传递数据
- ws.send("data")
# SVG和canvas
svg:基于XML的可缩放矢量图形
可以随意放大而不失真 也有对应的DOM,允许开发者实现丰富的动画 适合大型渲染区域应用 支持事件处理
canvas:基于js来绘制的2D图形
依赖于分辨率,放大会失真 绘制完成则不会再被浏览器关注 不支持事件处理
# web标准
- 可用性:结构清晰,设计良好,
- 可访问性:向后兼容,语义化
- 可维护性:维护成本低,易扩展
# 前端性能优化
- 压缩文件,使用雪碧图来减少请求数
- 设置DNS缓存,来加快地址解析
- 设置缓存常用资源
- 服务器使用CND来来加快访问速度
- 服务器开启压缩gzip
- 返回的cookie内容较少,或者静态资源避免携带cookie
- 对于返回的文档中,将脚本延迟加载
- 预加载css