text: (window.webpackJsonp=window.webpackJsonp||[]).push([[33],{241:function(v,_,i){"use strict";i.r(_);var e=i(0),l=Object(e.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var v=this,_=v.$createElement,i=v._self._c||_;return i("div",{staticClass:"content"},[i("h2",{attrs:{id:"前端页面优化常见方法"}},[i("a",{staticClass:"header-anchor",attrs:{href:"#前端页面优化常见方法","aria-hidden":"true"}},[v._v("#")]),v._v(" 前端页面优化常见方法")]),v._v(" "),i("p",[i("code",[v._v("2019-02-22")])]),v._v(" "),i("h4",{attrs:{id:"页面加载优化"}},[i("a",{staticClass:"header-anchor",attrs:{href:"#页面加载优化","aria-hidden":"true"}},[v._v("#")]),v._v(" 页面加载优化")]),v._v(" "),i("ul",[i("li",[v._v("压缩代码")]),v._v(" "),i("li",[v._v("defer，注意 defer 只是外链起作用，即 src 引进来的起作用，直接编写的代码无效")]),v._v(" "),i("li",[v._v("使用webp高压缩图片")]),v._v(" "),i("li",[v._v("减少请求数量：雪碧图，字体图标")]),v._v(" "),i("li",[v._v("CDN")]),v._v(" "),i("li",[v._v("CDN Combo，可以将多个文件打包成一个文件的形式返回")]),v._v(" "),i("li",[v._v("组件请求可以添加 Expires / Cache-control: max-age=xx 头，下次进入的时候可以从缓存拿")]),v._v(" "),i("li",[v._v("合理使用 Etag 和 Last-Modified 使浏览器读缓存")]),v._v(" "),i("li",[v._v("Accept-Encoding:gzip压缩")]),v._v(" "),i("li",[v._v("样式表放在头部，可以使内容逐步呈现，避免白屏")]),v._v(" "),i("li",[v._v("使用外部js和css，因为浏览器可能会缓存他们，比如jq")]),v._v(" "),i("li",[v._v("减少DNS查找，即资源放同一个域下；但是http1.1会对同一个域有并发限制。所以最好在2到4个域之间")]),v._v(" "),i("li",[v._v("避免空的 href 和 src。因为浏览器渲染过程中仍会对空内容加载，直到加载失败，这阻塞了其他资源下载进程。")]),v._v(" "),i("li",[v._v("减少页面重定向")]),v._v(" "),i("li",[v._v("AJAX cache: true")]),v._v(" "),i("li",[v._v("减少cookie大小，静态资源放在别的域名下，因为跨域默认不带cookie")]),v._v(" "),i("li",[v._v("使用http2，http2 会使用 HPACK算法压缩请求头")]),v._v(" "),i("li",[v._v("避免 css @import，因为在css解析到 @import时才会加载另外的css，延后了css渲染完成的时间")]),v._v(" "),i("li",[v._v("减少DOM元素数量合深度，做到标签语义化，不要数层div")]),v._v(" "),i("li",[v._v("避免使用 table和iframe等慢元素。table是全部渲染完之后一次性绘制到页面上，长表格很耗时。iframe内的进程会阻塞父页面")]),v._v(" "),i("li",[v._v("js会阻塞渲染，任何与页面首次渲染无关的都要异步延迟加载执行")]),v._v(" "),i("li",[v._v("避免css表达式和css滤镜")]),v._v(" "),i("li",[v._v("首屏数据请求提前")]),v._v(" "),i("li",[v._v("首屏加载和按需加载")]),v._v(" "),i("li",[v._v("meta和link 的dns prefetch")]),v._v(" "),i("li",[v._v("资源预加载：link的 prefetch，preload，prerender")]),v._v(" "),i("li",[v._v("AMP HTML")]),v._v(" "),i("li",[v._v("图片懒加载")]),v._v(" "),i("li",[v._v("通过媒体查询加载不同大小的图片")]),v._v(" "),i("li",[v._v("ssr  不用等待所有的js下载执行完就可以看到渲染的页面")]),v._v(" "),i("li",[v._v("service worker与PWA是啥\n"),i("ul",[i("li",[v._v("1、service worker：请求拦截(读缓存等)；发送通知；后台同步运行")]),v._v(" "),i("li",[v._v("2、PWA：强依赖service worker")])])])]),v._v(" "),i("h4",{attrs:{id:"性能优化"}},[i("a",{staticClass:"header-anchor",attrs:{href:"#性能优化","aria-hidden":"true"}},[v._v("#")]),v._v(" 性能优化")]),v._v(" "),i("ul",[i("li",[v._v("DOM：减少dom操作，可以缓存查出的结果。innerHTML代替 createElement。DocumentFragment一次性操作。")]),v._v(" "),i("li",[v._v("用事件代理代替html事件绑定")]),v._v(" "),i("li",[v._v("innerHTML替换之前把老的HTML用到的js函数与属性删除，不然HTML是销毁了，绑定却没接触导致一直占用着")]),v._v(" "),i("li",[v._v("作用域：避免不必要的属性查找和全局查找，避免with 语句")]),v._v(" "),i("li",[v._v("优化循环体，终止条件，减值迭代")]),v._v(" "),i("li",[v._v("最小化语句（打包工具也可以搞定）")]),v._v(" "),i("li",[v._v("不用的闭包设为 null 释放掉")]),v._v(" "),i("li",[v._v("避免touchmove，scroll 连续时间处理，可以设置设置时间节流")]),v._v(" "),i("li",[v._v("meta viewport 固定屏幕渲染，避免缩放导致屏幕重排重绘")]),v._v(" "),i("li",[v._v("避免页面布局的修改，因为重排必然导致重绘")])])])}],!1,null,null,null);_.default=l.exports}}]);