代码层面:避免使用CSS表达式,避免使用CSS Filter,避免使用高级选择器,通配选择器。
缓存利用:缓存Ajax,使用CDN,使用外部js和css文件以便缓存,添加Expires头,服务端配置Etag,减少DNS查找等
请求数量:合并样式和脚本,使用css图片精灵,初始首屏之外的图片资源按需加载,静态资源延迟加载。
请求带宽:压缩文件,开启GZIP,
代码层面的优化
-
用
hash-table
来优化查找 -
少用全局变量
-
用
innerHTML
代替DOM
操作,减少DOM
操作次数,优化javascript
性能 -
用
setTimeout
来避免页面失去响应 -
缓存DOM节点查找的结果
-
避免使用CSS Expression
-
避免全局查询
-
避免使用with(with会创建自己的作用域,会增加作用域链长度)
-
多个变量声明合并
-
避免图片和iFrame等的空Src。空Src会重新加载当前页面,影响速度和效率
- 尽量避免写在HTML标签中写Style属性
移动端性能优化
- 尽量使用css3动画,开启硬件加速。
- 适当使用touch事件代替
click
事件。 - 避免使用
css3
渐变阴影效果。 - 可以用
transform: translateZ(0)
来开启硬件加速。 - 不滥用Float。Float在渲染时计算量比较大,尽量减少使用
- 不滥用Web字体。Web字体需要下载,解析,重绘当前页面,尽量减少使用。
- 合理使用requestAnimationFrame动画代替setTimeout
- CSS中的属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)会触发GPU渲染,请合理使用。过渡使用会引发手机过耗电增加
- PC端的在移动端同样适用
web前端开发性能优化
内容方面:
1.减少 HTTP 请求 (Make Fewer HTTP Requests)
2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)
3.使得 Ajax 可缓存 (Make Ajax Cacheable)
针对HTML:
1.语义化HTML:好处在于可以使代码简洁清晰,支持不同设备,利于搜索引擎,便于团队开发;
2. 减少DOM节点:加速页面渲染;
3.给图片加上正确的宽高值,可以减少页面重绘,同时防止图片缩放;
4. 防止src属性和link的href属性为空。当值为空时,浏览器很可能会把当前页面当成其属性值加载;
5.正确的闭合标签:如避免使用<div />,浏览器会多一个将它解析成<div\><div\>的过程;
6.链接为目录或首页的地址后面加”/”,如http://www.5icool.org/;
7.用LINK而不用@import方式导入样式;
8. 样式放在页头,JS放在页尾;
9.缩小favicon.ico并缓存;
针对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)
5. 通过CSSSprites把同类图片合成一张,减少图片请求;
6. 减少查询层级:如.header .logo要好过.header .top .logo;
7. 减少查询范围:如.header>li要好过.header li;
8. 避免TAG标签与CLASS或ID并存:如a.top、button#submit;
9. 删除重复的CSS;
针对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)
5. 尽量少用全局变量;
6. 使用事件代理绑定事件,如将事件绑定在body上进行代理;
7.避免频繁操作DOM节点;
8.不使用EVAL;
9.减少对象查找,如a.b.c.d这种查找方式非常耗性能,尽可能把它定义在变量里;
10. 类型转换:把数字转换成字符串使用”” + 1,浮点数转换成整型使用Math.floor()或者Math.round();
11. 对字符串进行循环操作,譬如替换、查找,应使用正则表达式;
针对服务器:
1. 尽量合并CSS、JS文件,或将其直接写在页面上,减少HTTP请求;
2. 压缩CSS、JS文件,缩短文件传输时间;
3. 避免404错误:特别要避免给404指定一个停摆页面,否则所有404错误都将会加载一次页面;
4.一般要求减少DNS查询次数,如同一个页面的请求资源尽量少的使用不同的主机名,这可以减少网站并行下载的数量,但很多网站为了加速下载资源其实是特意用了多个主机名,这里要做一个权衡;
5.使用CDN加速,使用户从离自己最近的服务器下载文件;
6.减少Cookie的大小,使用无cookie的域,客户端请求静态文件的时候,减少 Cookie 的反复传输对主域名的影响;
7. 为文件头指定Expires,使内容具有缓存性;
8. 使用gzip压缩内容;
面向图片(Image):
1.优化图片
2 不要在 HTML 中使用缩放图片
3 使用恰当的图片格式
4 使用 CSS Sprites 技巧对图片优化
优化图像:
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等格式,非常适合用于网络等图片传输。
浏览器渲染页面流程
1.解析HTML文件,创建DOM树。
自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。
2.解析CSS。优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式;
3.将CSS与DOM合并,构建渲染树(Render Tree)
4.布局和绘制,重绘(repaint)和重排(reflow)
注:
one. js延迟加载的方式有哪些?
- defer和async
- 动态创建DOM方式(用得最多)
- 按需异步载入js
two.简述你怎样对网站的文件和资源进行优化:
- 文件合并
- 文件最小化/文件压缩
- 使用CDN托管
- 缓存的使用