canvas前端展示_Web前端如何进行性能优化？

1. 减少HTTP请求

合并图片（css sprites），合并CSS和JS文件（只有css可以合并到js里，采用AMD模式，把css require 到js文件里，加载这个js的页面就拥有这套css了。用require.js的话需要相应的css插件，用webpack进行打包需要安装css-loader 等相关loader。当然，如果一个好的前端架构的话，这些问题应该都在初期考虑完毕，而不是上线以后。）；图片较多的页面也可以使用 lazyLoad 等技术进行优化。

2. 减少页面的重绘和重排

通过设置style属性改变节点的样式，每设置一次都会导致一次reflow，所以最好通过设置class的方式去改变。有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。

3. 减少对DOM的操作

1. 查询时可将其赋值给局部变量。

2. 减少循环对DOM操作，DOM元素中循环的性能开销，在循环结束时一次性写入。

4. JSON格式来进行数据交换

JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。

5. 使用开销比较小的css选择符

比如id选择和类选择器

6.使用CDN加速（内容分发网络）:

各大云服务提供商都有CDN服务，如：阿里云、腾讯云、百度云，七牛 等。

7.精简CSS和JS文件：

css的话可以使用预处理语言sas或者less，利用变量可以减少代码使用量，也更易维护和扩展。js的话可以封装一些重复使用的函数方法，用最高效的代码解决业务逻辑，比如判断可以三元运算符，函数还可以使用箭头函数，表单验证时用正则，赋值字符串变量时用字符串模板等等，不过这些大多是es6最新语法，需要对js有较深的理解才行。当然，也可以用压缩代码的方式简单粗暴的精简代码量

8. 压缩图片

常用的压缩方法：

1.图片上传到阿里云或者七牛云，云端会压缩图片；

2.后端对图片尺寸大小进行压缩，比如tinyong等接口，都可以完成，但压缩时间很久；

3.前端用Canvas作为媒介压缩图片；

Canvas压缩图片的重要知识点：

· 将file对象转成Data URL；

· 使用canvas对图片进行缩放，从而达到压缩质量的目的；

· 将canvas元素所展示的图片再次转换成Data URL；

· 最后把Data URL转成blob；

9. 注意控制cookie的大小和污染

因为Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，所以建议去除不必要的Coockie，使Coockie体积尽量小以减少对用户响应的影响； 使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响； Cookie是有生命周期的，所以请注意设置合理的过期时间，合理地Expire（终止）时间和不要过早去清除coockie，都会改善用户的响应时间。