课程实验大纲（性能优化与自动化技术）

《性能优化与自动化技术》实验大纲一、实验教学的目的和要求目前，熟练掌握和运作好网站开发已经成为一个新兴的职业发展方向，本实验体系要求学生掌握MVC框架开发网站技术，通过实验课程，让学生可以了解通过优化代码的方式让Web应用更加的六厂，熟练掌握前端开发工具、前端调试工具、HTML优化、CSS优化、sprite拼合图、代码压缩技术、JavaScriptDOM优化、npm>webpack和ES6相结合应用。二、实验项目名称和学时分配三、单项实验的内容和要求（包括实验分组人数要求）序号实验项目名称学时数必/选开01Web刖端开发8必开02HTML与CSS代码优化8必开03前端资源优化8必开04Javascript代码优化8必开05Webpack工具8必开06ES6基础8必开实验一Web前端开发1、通过浏览器了解到浏览器的兼容问题2、修改混乱代码，解决命名不规范以及代码注释问题3、使用SublimeText进行开发，并且学会下载相对应的插件4、使用WebStorm开发工具，并且学会下载相对应的插件5、使用通过lETester中WebBrowser控件来测试网页的兼容性分组：一人一组实验二HTML与CSS代码优化1、使用html5的音频实现播放器的效果2、使用html5实现离线应用和本地存储3、通过css3新特性实现渐变、过度、动画等动画效果分组：一人一组实验三前端资源优化1、使用sprite中position定位背景图片位置2、使用CSSsprite的在线工具，生成图片或图表3、使用YUIcompressor命令行工具添加文件进行压缩4、使用打包工具对JavaScript和CSS进行打包5、使用预加载技术将所有资源提前请求加载到本地浏览器。分组：一人一组

实验四JavaScript代码优化1、把原有代码进行代码与结构分离，从中抽离出JavaScript2、把原有代码进行样式与结构的分离，把CSS和HTML进行有效分离3、吧原有的WEB数据和代码进行分离4、通过console.log方式进行代码调试工作5＞通过debugger关键字停止JavaScript,并且调用函数进行测试6、将D0M单独提取出来循环结束后访问一次，降低对D0M的使用率分组：一人一组实验五webpack工具1、下载和安装node,js,并且进行安装和配置npm2、使用npm的基础命令下载并初始化一个项目3、使用npm的基础命令查看项目相关的信息4、学会修改package,json文件中的各种属性5、通过npm安装webpack6、配置webpack7、使用babel-loader编译ES68、通过less-loader处理编译less文件，将转换为CSS代码分组：一人一组实验六ES6基础1、使用let实现计数器，通过for循环实现2、使用const常量存储一个地址，并且地址指向一个对象3、对象的解构也可以指定默认值。4、使用set函数接受一个数组作为参数，用于初始化5、使用箭头函数与变量结构结合使用完成猜数字案例6、使用属性的赋值器和取值器实现输出一组变量分组：一人一组四、使用教材及参考书教材：《Web前端开发高