完成一个页面请求的流程:
输入地址--> 域名解析--> 发送请求--> 后端代码运行--> 响应请求,浏览器拿到 html 代码--> 浏览器开始渲染页面,并请求页面中的资源(css、JS、img等)--> 渲染完成
每个阶段的性能优化:传输阶段优化:代码压缩、图片压缩、建立长连接等
后台代码优化:后台逻辑优化、前后台合理分配功能等
sql查询优化:优化数据库、优化查询语句等
响应优化:缓存、CDN加速等
渲染阶段的优化:分三个模块考虑 HTML、CSS、JavaScript(前端优化重点)
HTML代码优化:
避免使用frame、iframe(页面加载阻塞、onload事件阻塞等)
避免空标签、空连接 src 、href 等(即使是空地址,浏览器也会添加默认地址发送请求)
减少节点深层次嵌套(占用内存多、节点查询费劲)
减少HTML文档大小(1、减少注释空格 2、避免table布局(节点太多) 3、使用html布局,节点少)
显示指定文档字符集(若不写,浏览器会先缓存代码,再去查询合适的解析字符集。为避免机器查询消耗,需手动明确指定好)
设置图片宽高(避免回溯重构)
避免js脚本阻塞(放底部、异步加载、延迟加载、使用模块管理插件 require.js、sea.js)
CSS代码优化:
避免使用@import
优化选择器,知道选择器的执行顺序
避免使用CSS表达式(计算频繁,消耗大)缩放、滚动、乃至鼠标移动都有可能执行一次计算
了解选择器的规则,从右往左查询
避免单规则的属性选择器(.selected [href=”#index”] {color: red;})
避免正则选择器
移除无匹配的样式(1、缩小文件体积 2、减少索引项、提高查询速度)
JS代码优化:
使用事件委托、减少事件句柄
减少DOM操作、碎片,插入一次完成
减少用JS修改页面布局
缓存查询节点(var cached = jQuery(\'#top\'); cached.find(\'p.classA\'); cached.find(\'p.classB\');)
减少频繁的IO操作,合理利用cookie、localStorage、sessionStorage 等
使用微类库、或者原生JS解决问题
其他优化方法(与上面有重复):1、图片优化、压缩图片、改变图片格式类型、响应式图片(网站中最耗资源的部分)
2、用户感知性能,(预加载、减少内容、延迟加载、改变图片格式(对网站有针对性) 心理学优化)
即使网站真的很慢,只要不让用户觉的慢就可以。好的技术是为了更好的服务用户,所以要注重用户体验反馈。
3、恰当的文件格式,渐进式渲染功能
4、使用http/2.0(异步和连接复用、头压缩、请求反馈管线化、优雅降级HTTP1.0)
将优化考虑至网络层(1、减少了对程序员的干扰、2、效果显著)
google chrome、Mozilla Firefox 、Microsoft Edge 、Opera 都已支持HTTP/2.0
Internet Explorer 从IE11开始支持,但仅限于windows 10 beta
5、使用web性能工具检测, Google PageSpeed 、 云智慧监控宝 (检测完针对性修改)
6、重视CSS对性能的影响,删除无用的规则、内联关键CSS、避免@imports和Base64,
使用高性价比属性:比如opcity 代替 rgba()、避免重复性工作、甚至避免更换开发人员
7、整体优化意识,而不是单独的某个模块优化,有可能抓了芝麻丢了西瓜
8、网站若使用大量API,登录、支付、定位等等,一定要监控API,不但可以及时发现错误,而且可以关联考虑优化
9、为了性能,减少不必要的炫酷
10、构建自动化优化任务
常见错误的优化方向1、无限使用render-blocking(不懂...)
2、盲目添加框架以获取很小的功能,而大大增加了web页面的大小,做完后再去搞优化,得不偿失
3、未优化图片、未打开Gzip
4、过分关注技术指标(页面大小、请求数量等)而忽略了用户体验指标
5、为追求差异,使用不常用的字体
6、框架的滥用,综合考虑是不是真的需要框架?框架是为了更好的服务用户,而不是而不是更好的服务开发人员
内容收集整理与网络,欢迎补充、指正...
参考链接:
1、【高性能前端1】高性能HTML
2、【高性能前端2】高性能CSS