游戏阶段 和 可视化数据

svg图

代码构成的图片

性能优化

        对于html：

                    ① css放在head里面 ， js紧放在body结束标签之前

                    ② 标签层级不要嵌套过深

         对于css：

                    ①  精灵图

                    ②  合并多个css文件 合理合并

                    ③   尽量使用继承 ， 减少代码量

                    ④   尽量避免重复代码

                    ⑤  0 不用带单位

                    ⑥  小数省略前面的0

         对于js：

                    ①  减少重复代码

                    ②   尽量避免重绘和回流

                    ③  使用懒加载

                    ④  缓存DOM结点的访问

                    ⑤  尽量使用直接量创建对象和数组

                    ⑥  将js脚本组成打包 ， 减少请求

canvas

介绍：

       1. h5 新增 画布标签 

       2. canvas 的宽高 要用canvas标签行内属性设置 ，不用css 设置  ：因为在css中设置的宽高，是在浏览器显示的宽高 ， 行内属性的宽高 是图片本身的宽高 。

       3. js对其操作 进行图片绘制

       4. canvas 可以做游戏  大数据可视化界面  webvr

       5. IE9 以下不支持

方法：
       1. getContext（ ' 2d '） ，调用getContext（）返回一个绘制上下文对象 ，对象里面有很多API供我们使用

       2. moveTo（）设置起点

       3. lineTo（）设置终点 

       4. stroke（）开始绘制

       5. strokeStyle  设置样式

       6. beginPath（）重新开始绘制新的轨迹

       7. closePath（）关闭绘制

       8. rect（x ，y ，width ， height ）  绘制矩形

       9. fillStyle   设置填充颜色

       10. fill（）开始填充

       11. strokeRect（） 直接绘制空心矩形

       12. arc（x，y，r ，起点 ，终点） 绘制弧线

       13. fillText（' ' ， x，y） 绘制文本 ，坐标位置不是文本的左上角 ，而是正中心

       14. font  设置文本大小

① 设置字体

<style>
   @font-face {
        font-family: "myfont";
        src: url(../font/daimeng.ttf);
    }
</style>

      15. drawImage（ img ，x，y）

① 这里的img 不是直接传入地址 ，需要先创建 再引入

② 三个参数（ img ，x，y）

③ 五个参数 （img ，x，y，width ， height ） 

⑤ 九个参数（img ，sx（裁剪的x），sy（裁剪的y），swidth（裁剪的宽度）， sheight （裁剪的高度），x，y，width ， height （绘制的坐标 和 宽高））

      16、clearRect（x，y，width，height）清除画布

数据存储

           客户端存储遵守“ 同源策略 ” 

           同源策略：协议 、域名 、 端口

           cookie：① 限制在同源

                         ② 存储时间：不设置时间，浏览器一关闭就失效 ； 

                         ③ 存储相对更加安全

                         ④ 存储大小有限制 ：4k 

                         ⑤ 获取cookie 

//设置cookie 和时间
function setCookie(cname , cvalue , day){
    let d = new Data();
    let future = d.getTime() + day *24*60*60*1000;
    d.setTime(d);
    document.cookie = `${cname}= ${cvalue} ; expires = ${d.toGMTString()}`;
}

            localStorage ：① 设置 setItem（）

                                     ② 获取 getItem（）

                                     ③ 限制在同源

                                     ④ 只要不删除 ，永久有效

                                     ⑤ 存储大小 ：5M 

            sessionStorage：① 设置 setItem（）

                                        ② 获取 getItem（）

                                        ③ 限制在同源

                                        ④ 限制在同一窗口  窗口一关闭就失效

                                        ⑤ 存储大小 ：5M