前端网站性能优化主要包括 网络加载类,页面渲染类，css 优化类 javascript 的执行类 图片类 缓存类 架构协议类 等等
pc端优化策略
-
网络加载类
-
减·少http 请求次数：前端页面中，通常建=建议尽可能的合并静态资源 js css 代码 减少页面请求次数 和资源消耗常见方法 合并精灵图 css js 文件 等都是为了 减少 http 的请求 尽量避免重复资源 防止增加多余请求 -
减少http请求大小 ：常见技术 对文件的 压缩 ,y=以及移除代码的注释。可以减少图片大小,缩短网络传输等待
-
将css 或js 放到 外部 避免是有 style 或script 标签直接引入 目的 ,利用浏览器静态资源缓存机制 减少加载等待
-
避免页面中空的 href 和src 原因 即使为空浏览器也会加载渲染 请求
-
减少页面重定向 状态码 302
-
推荐使用异步JavaScript资源：
-
为HTML指定Cache-Control或Expires (还不会 没学过)为HTML内容设置Cache-Control 或 Expires可以将HTML内容缓存起来，避免频繁向服务器端发送请求，在页面中的Cache-Control 或 Expires头部有效时，浏览器将直接从缓存中读取内容，不再向服务器端发送请求
-
消除阻塞渲染的CSS及JavaScript： 对于页面中加载时间过长的CSS或JavaScript文件，需要进行合理拆分或延后加载，保证关键路径的资源能快速加载完成；
-
避免使用CSS import引用加载CSS：SS中的@import可以从另一个样式文件中引入样式，但应该避免这种用法，因为这样会增加CSS资源加载的关键路径长度，带有＠import的CSS样式需要在CSS文件串行解析到＠import时才会加载另外的CSS文件，大大延后CSS渲染完成的时间；
-
合理设置Etag和Last-Modified： 合理设置Etag 和 Last-Modified使用浏览器缓存，对于未修改的文件，静态资源服务器会向浏览器端返回304，让浏览器从缓存中读取文件，减少Web资源下载的带宽消耗并降低服务器负载；
-
使用静态资源分域存放来增加下载并行数：
-
使用静态资源CDN来存储文件
-
使用CDN Combo下载传输内容：
-
使用可缓存的AJAX：
-
使用GET来完成AJAX请求：
-
减少Cookie的大小并进行Cookie隔离：
-
缩小favicon.ico并缓存：
-
-
页面渲染类
-
把CSS资源引用放到HTML文件顶部： 一般推荐将所有CSS资源指定在HTML文档<head>中，这样浏览器可以优先下载CSS并尽早完成页面渲染；
-
JavaScript资源引用放到HTML文件底部： JavaScript资源放到HTML文档底部可以防止JavaScript的加载和解析执行对页面渲染造成阻塞，由于JavaScript资源默认是解析阻塞的，除非被标记为异步或者通过其他的异步方式加载，否则会阻塞HTML DOM解析和CSS渲染过程；
-
尽量预先设定图片等大小： 在加载大量的图片元素时，尽量预先限定图片的尺寸大小，否则在图片加载过程中会更新图片的排版信息，产生大量的重排；
-
不要在HTML中直接缩放图片： 在HTML中直接缩放图片会导致页面内容的重排重绘，此时可能会使页面中的其他操作产生卡顿，因此要尽量减少在页面中直接进行图片缩放；
-
减少DOM元素数量和深度：就是多级嵌套 HTML中标签元素越多，标签的层级越深，浏览器解析DOM并绘制到浏览器中所花的时间就越长，所以应尽可能保持DOM元素简洁和层级较少
-
尽量避免在选择器末尾添加通配符：
-
减少使用关系型样式表的写法： 直接使用唯一的类名即可最大限度的提升渲染引擎绘制渲染树的效率；
-
尽量减少使用JS动画： JS直接操作DOM极容易引起页面的重排；
-
CSS动画使用translate、scale代替top、height：尽量使用CSS3的translate、scale属性代替top、left和height、width，避免大量的重排计算；
-
）尽量避免使用<table>、<iframe>： <table>内容的渲染是将table的DOM渲染树全部生成完并一次性绘制到页面上的，所以在长表格渲染时很耗性能，应该尽量避免使用它，可以考虑使用列表元素<ul>代替；尽量使用异步的方式动态添加iframe，因为iframe内资源的下载进程会阻塞父页面静态资源的下载与CSS及HTML DOM的解析；
-
避免运行耗时的JavaScript：
-
避免使用CSS表达式或CSS滤镜：避免使用CSS表达式或CSS滤镜：
-
移动端优化策略
- 与pc 端处理类似
网友评论