发表于 | 更新于 | 分类于 ， | 评论数： | 阅读次数：

##表示每一章，####表示每一个小节
书 P35的递归方法、书55页部件

注：字面量表示如何表达这个值，一般除去表达式，给变量赋值时，等号右边的就可以认为是字面量
jq的核心思想是单例、工厂模式；vue，react的核心思想是观察者、MVVM模式。

var test = "hello world!"

这里 “hello world!”就是字面量，test是变量名
在js中，字面量分为字符串字面量，对象字面量，数组字面量和函数字面量

##补充

  • js中的apply和call的区别，两个方法的第一个参数都是当前调用的函数的调用环境（this），而apply是将所有参数放在一个数组中，但是会自动拆分(只会拆分一次)。而call是有多少个参数就放多少参数，不会自动拆分

##第二章 语法

####语句

  • 在js中会被判断为假的字面量

    1. false
    2. null
    3. undefined
    4. 空字符串’’
    5. 数字0
    6. 数字NaN
    阅读全文 »

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

#####HTML5新特性

  • 用于绘画的canvas元素
  • 基于SVG、Canvas、WebGL以及CSS的3D功能
  • 用于媒介回访的video和audio元素
  • 两个storage，更好的本地存储
  • 新的特殊内容元素<header>、<nav>、<footer>等等，对于搜索引擎的搜索有一定的好处
  • 新的表单控件 date、time、email等等给
  • 本地存储，indexDB
  • 设备可访问性(DEVICEACCESS),包括地理位置API（获取用户的地理位置，需要权限申请，电脑上可能会获取不到），媒体访问API（麦克风和摄像头），访问联系人及事件（尚未纳入标准），设备方向（重力感应和摇一摇）

#####HTML5语义化

阅读全文 »

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

安装过程

  • 首先安装vue-cli，直接使用过nuxt的模板

  • 然后直接安装vue-cli对应的nuxt模板

     vue init nuxt/starter <project-name>
cd <project-name>
npm install

目录结构

  • components存放组件，nuxt.js不会扩展增强该目录下的vue.js组件，即不会拥有asyncData特性
  • layouts用于组织应用的布局组件
  • middleware用于存放中间件
  • pages用于组织应用的路由以及视图，nuxt会读取改目录下所有的.vue文件并自动生成对应的路由配置，并且该目录为保留目录，不可更改
  • plugins用于存放那些需要在页面中使用的javascript组件
  • nuxt拓展的asyncData方法（仅限于页面组件）可以在组件每次加载之前没调用，可以再服务端或者路由更新之前调用。被调用时，第一个参数设置为当前页面的上下文对对象，可以利用这个方法获取数据，nuxt会将返回的数据融合组件data方法返回的数据一并返回给当前组件
  • Nuxt.js 提供了几种不同的方法来使用 asyncData 方法，你可以选择自己熟悉的一种来用：
    • 返回一个 Promise, nuxt.js会等待该Promise被解析之后才会设置组件的数据，从而渲染组件.
    • 使用 async 或 await (了解更多)
    • 为第二个参数指定一个回调函数. 注：该回调函数需符合通用的 NodeJs 回调函数的形式: callback(err, data)
    • 具体使用示例
    • nuxt.config.js的extend函数介绍
      • 该扩展方法会被调用两次，一次在服务端打包构建的时候，另外一次是在客户端打包构建的时 候。
      • 该方法的参数为1.Webpack 配置对象2.构建环境对象，包括这些属性（全部为布尔类型）： dev， isClient， isServer

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

##解决首屏渲染慢的问题的几种方法

  • 构建层模板编译（在构建层直接进行模板编译）
  • 对数据无关的页面做一个prerender
  • 服务端渲染（内存泄露，服务器端压力等等问题）

##为什么需要使用ssr服务端加载

  • 在使用现代的react或者vue之类的框架时，服务端是先将打包后的在template里面的页面代码返回到客户端，但是客户端并不会直接开始渲染，而是要等待vue或者react的框架代码加载完成之后，才能对template里面的代码进行解析，借解析完成自后才能进行渲染，这也就导致了首屏渲染慢的问题。所以需要使用服务端渲染，将代码再服务端就渲染好，加载到客户端时直接进行渲染即可。
  • 使用服务端渲染不会有mounted钩子，需要在服务端渲染的时候进行处理
    阅读全文 »

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

##浏览器的缓存

  • 大规模的文件存储需要浏览器和服务器之间约定一个缓存大文件的缓存方式

cache-control所控制的缓存策略

  • 可以出现在http responseheader 或者http requestheader中
  • max-age指定缓存的最大时间，在这段时间内，不会向服务端重新请求（相对过期时间，max-age的优先级更高）
  • s-maxage s-maxage返回状态304，也是定义缓存的最大时间，但是只能针对public的缓存 （优先级高于max-age，设置之后要去public缓存区拿）
  • private私人的缓存设备，只能私人用户使用
  • public比如cdn服务器，可以被很多用户访问并且获取信息的
  • no-cache 搭配max-age=0配置，每次都会发发起请求，询问我当前的文件是否过期，从而知道缓存策略是什么样的
  • no-store 完全不使用缓存策略
  • Expires
    • 设置缓存过期时间，过期之前都可以直接从缓存读取（max-age(http1.1)的优先级高于expires（http1.0））
      阅读全文 »

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

service worker实战

  • service worker可以做的事
    • 后台消息传递
    • 网络代理，转发请求，伪造响应
    • 离线缓存
    • 消息推送
    • ……

  • 注册当前的service worker

    if(navigator.serviceWorker){
      navigator.serviceWorker.register('./service-worker.js',{scope : './'})
        .then( function(reg){
          console.log(reg)
        })/*.catch(fu nction(error){
          console.log(error)
      })*/
}else{
  alert("Service Worker is not support")
}
    阅读全文 »

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

cookie相关

  • cookie的本意是用来与服务端通信，告诉服务端当前调用的人的相关信息，方便服务端及时的知道是那些人在调用后台的数据
  • 每次发送http请求时，都会自动的吧cookie信息带上
  • cookie的大小为4MB
  • cookie具有时效性
  • 在dns服务器上，如果使用cookie来存储信息的话，并且在相同域名下请求静态资源文件，那么因为请求会自动带上cookie这一项而浪费很多的流量，例如京东这样的公司，如果dns服务器进行cookie操作的话，光是对静态资源的请求，就会浪费上亿元的流量费
  • cookie并不适合做浏览器端数据的存储
  • cookie具有httponly的设置，防止js的恶意读取

    sessionStorage和LocalStorage

  • 这两个是H5为了浏览器存储而设计的
  • 仅在客户端使用，不和服务端通信
  • 5MB大小
  • 使用storage进行缓存数据，可以减少对于后端的http请求，进行一定的优化
  • sessionStorage是会话级别的浏览器存储
  • loaclStorage是直接存储在本地
  • 百度在loaclStorage中存储了很多的信息，包括百度地图的js、函数级别的缓存和css级别的缓存，但是要注意要有一个很好的更新机制

  • 手淘将很多的小的icon图片都存在loaclstorage中，同样也很好加快了网页的读取速度，用户数据还是放在了cookie中，随请求发送到后端，手淘中将浏览器是否支持webp格式的图片字段放在了sessionStorage中，因为这个字段是会每次随浏览器的改变都会改变

    阅读全文 »

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

重绘与回流

####浏览器的重绘与回流的机制

  • 频繁触发重绘与回流，会导致UI频繁渲染，降低js的运行性能，所以要对css的性能进行提高
  • 当render tree中的一部分因为元素的规模尺寸、布局、隐藏等改变需要重新构建，就是回流。比如。通过减少会触发回流的css的使用，可以对回流进行优化
  • 当render-tree中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格。而不影响布局时，就是重绘，比如（background-color）。
  • 重绘的时候不一定会回流，但是回流一定会引起重绘。

  • 会触发重绘与回流的css属性

    1. 触发页面重布局的属性
      触发页面重布局的css属性

      阅读全文 »

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

浏览器css和js的加载过程

css和html的渲染过程

  • 浏览器通过网址首先拿到由字节流转变成字符流的HTML文档，HTML文档会被解析器解析成一段段TOKEN，浏览器通过nextToken方法，浏览器会自顶向下对HTML文档进行解析，逐渐生成DOM树，但是此时DOM树并不会在页面上进行显示
  • 在生成DOM树的过程中，浏览器会对外部资源（CSS、js）进行请求和解析，对于请求的css，浏览器会生成对应的CSSOM,当CSSOM树和DOM树都生成完之后，浏览器才会将这些资源进行合并，生成RenderTree从而对页面进行绘制
  • HTML渲染过程中的特点
    • 是顺序执行且并发加载的
    • 对于单个域名，浏览器的并发度是有限的
    • 是否阻塞（css的加载是否会阻塞js的加载，css的加载是否会阻塞页面的渲染等等等）
    • 依赖关系（比如css代码再哪里引入的关系，js代码的执行顺序的关系问题）
    • 引入方式（link,import，script…）

css、js加载过程中的优化点

懒加载和预加载

阅读全文 »