开发及性能优化

web前端开发，如何提高页面性能优化？
内容方面：
1) 减少 HTTP 请求 (Make Fewer HTTP Requests)
2) 减少 DOM 元素数量 (Reduce the Number of DOM Elements)
3) 使得 Ajax 可缓存 (Make Ajax Cacheable)
针对CSS：
1) 把 CSS 放到代码页上端 (Put Stylesheets at the Top)
2) 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
3) 精简 JavaScript 与 CSS (Minify JavaScript and CSS)
4) 避免 CSS 表达式 (Avoid CSS Expressions)
针对JavaScript ：
1) 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)
2) 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
3) 精简 JavaScript 与 CSS (Minify JavaScript and CSS)
4) 移除重复脚本 (Remove Duplicate Scripts)
面向图片(Image)：
1) 优化图片
2) 2 不要在 HTML 中使用缩放图片
3) 3 使用恰当的图片格式
4) 4 使用 CSS Sprites 技巧对图片优化

你有用过哪些前端性能优化的方法？

（1） 减少http请求次数：CSSSprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。

（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

（4） 当需要设置的样式很多时设置className而不是直接操作style。

（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

（6） 避免使用CSS Expression（css表达式)又称Dynamicproperties(动态属性)。

（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。

开发及性能优化

https://blog.csdn.net/qq_17767355/article/details/51057239

1、规避javascript多人开发函数重名问题
1) 命名空间
2) 封闭空间
3) js模块化mvc（数据层、表现层、控制层）
4) seajs
5) 变量转换成对象的属性
6) 对象化

2、请说出三种减低页面加载时间的方法
1) 压缩css、js文件
2) 合并js、css文件，减少http请求
3) 外部js、css文件放在最底下
4) 减少dom操作，尽可能用变量替代不必要的dom操作

3、你所了解到的Web攻击技术
（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
（2）SQL注入攻击
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。
 

CSS优化、提高性能的方法有哪些？

1. 避免过度约束
2. 避免后代选择符
3. 避免链式选择符
4. 使用紧凑的语法
5. 避免不必要的命名空间
6. 避免不必要的重复
7. 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
8. 避免！important，可以选择其他选择器
9. 尽可能的精简规则，你可以合并不同类里的重复规则

前端开发中，如何优化图像？图像格式的区别？
优化图像：
1) 不用图片，尽量用css3代替。 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。
2) 使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！
3) 使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。
基本上，内容图片多为照片之类的，适用于JPEG。
而修饰图片通常更适合用无损压缩的PNG。
GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。
4) 按照HTTP协议设置合理的缓存。
5) 使用字体图标webfont、CSS Sprites等。
6) 用CSS或JavaScript实现预加载。
7) WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。
图像格式的区别：
矢量图：图标字体，如 font-awesome；svg
位图：gif,jpg(jpeg),png
区别：
1) gif:是是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。
2) JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo,各种小图标icons等。
3) png:PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。
关于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明;
优缺点：
1) 能在保证最不失真的情况下尽可能压缩图像文件的大小。
2) 对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。